@selfdecode/sd-component-library 4.0.90 → 4.0.92

package/lib/sd-component-library278.js

@@ -1,5 +1,77 @@
-var r = {};
+import { j as o } from "./sd-component-library195.js";
+import { Box as e } from "rebass";
+import { CustomScrollbarBox as p } from "./sd-component-library48.js";
+import { HorizontalDivider as s } from "./sd-component-library49.js";
+import { ResponsiveTextV2 as d } from "./sd-component-library149.js";
+const m = ({
+  options: l,
+  onSelect: t
+}) => {
+  const i = {
+    borderColor: "cl_lightGrey",
+    borderWidth: "1px"
+  }, x = (r) => () => t(r);
+  return /* @__PURE__ */ o.jsxs(
+    e,
+    {
+      sx: {
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(s, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              ...i,
+              borderStyle: "solid",
+              borderTopStyle: "none",
+              boxShadow: "0px 3px 10px #0000001A"
+            },
+            children: /* @__PURE__ */ o.jsx(
+              p,
+              {
+                height: "180px",
+                width: "max-content",
+                scrollbarThumbColor: "cl_purple",
+                scrollbarTrackColor: "cl_headerLine",
+                scrollbarWidth: "5px",
+                hoverScrollbarWidth: "5px",
+                bg: "cl_transparent",
+                p: "5px 7px 5px 0",
+                sx: { pr: "8px" },
+                children: l.map((r) => /* @__PURE__ */ o.jsx(
+                  d,
+                  {
+                    fontSizeWeight: [14, "regular"],
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      height: "36px",
+                      px: "10px",
+                      borderColor: "cl_headerLine",
+                      borderWidth: "1px",
+                      borderBottomStyle: "solid"
+                    },
+                    onClick: x(r),
+                    children: r.title
+                  },
+                  r.id
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  r as __exports
+  m as CustomScrollableOptionsBox
 };
 //# sourceMappingURL=sd-component-library278.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library278.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"sd-component-library278.js","sources":["../src/components/selectors/custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { CustomScrollbarBox } from \"../../../../custom-scrollbar-box\";\nimport { HorizontalDivider } from \"../../../../dividers\";\nimport { ResponsiveTextV2 } from \"../../../../texts\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nexport const CustomScrollableOptionsBox = <T extends string = string>({\n  options,\n  onSelect,\n}: Props<T>) => {\n  const lightGreyThinBorder = {\n    borderColor: \"cl_lightGrey\",\n    borderWidth: \"1px\",\n  };\n\n  const onClick = (option: SelectorOptionV2<T>) => () => onSelect(option);\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n      }}\n    >\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          ...lightGreyThinBorder,\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n        }}\n      >\n        <CustomScrollbarBox\n          height=\"180px\"\n          width=\"max-content\"\n          scrollbarThumbColor=\"cl_purple\"\n          scrollbarTrackColor=\"cl_headerLine\"\n          scrollbarWidth=\"5px\"\n          hoverScrollbarWidth=\"5px\"\n          bg=\"cl_transparent\"\n          p=\"5px 7px 5px 0\"\n          sx={{ pr: \"8px\" }}\n        >\n          {options.map((option) => (\n            <ResponsiveTextV2\n              key={option.id}\n              fontSizeWeight={[14, \"regular\"]}\n              sx={{\n                display: \"flex\",\n                alignItems: \"center\",\n                height: \"36px\",\n                px: \"10px\",\n                borderColor: \"cl_headerLine\",\n                borderWidth: \"1px\",\n                borderBottomStyle: \"solid\",\n              }}\n              onClick={onClick(option)}\n            >\n              {option.title}\n            </ResponsiveTextV2>\n          ))}\n        </CustomScrollbarBox>\n      </Box>\n    </Box>\n  );\n};\n"],"names":["CustomScrollableOptionsBox","options","onSelect","lightGreyThinBorder","onClick","option","jsxs","Box","jsx","HorizontalDivider","CustomScrollbarBox","ResponsiveTextV2"],"mappings":";;;;;AAUO,MAAMA,IAA6B,CAA4B;AAAA,EACpE,SAAAC;AAAA,EACA,UAAAC;AACF,MAAgB;AACd,QAAMC,IAAsB;AAAA,IAC1B,aAAa;AAAA,IACb,aAAa;AAAA,EAAA,GAGTC,IAAU,CAACC,MAAgC,MAAMH,EAASG,CAAM;AAGpE,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAA,IAACC,GAAkB,EAAA,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDD,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,GAAGJ;AAAA,cACH,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,WAAW;AAAA,YACb;AAAA,YAEA,UAAAK,gBAAAA,EAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,QAAO;AAAA,gBACP,OAAM;AAAA,gBACN,qBAAoB;AAAA,gBACpB,qBAAoB;AAAA,gBACpB,gBAAe;AAAA,gBACf,qBAAoB;AAAA,gBACpB,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,IAAI,EAAE,IAAI,MAAM;AAAA,gBAEf,UAAAT,EAAQ,IAAI,CAACI,MACZG,gBAAAA,EAAA;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBAEC,gBAAgB,CAAC,IAAI,SAAS;AAAA,oBAC9B,IAAI;AAAA,sBACF,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,QAAQ;AAAA,sBACR,IAAI;AAAA,sBACJ,aAAa;AAAA,sBACb,aAAa;AAAA,sBACb,mBAAmB;AAAA,oBACrB;AAAA,oBACA,SAASP,EAAQC,CAAM;AAAA,oBAEtB,UAAOA,EAAA;AAAA,kBAAA;AAAA,kBAbHA,EAAO;AAAA,gBAAA,CAef;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library279.js

@@ -1,5 +1,79 @@
-var e = {};
+import { j as r } from "./sd-component-library195.js";
+import { createElement as u } from "react";
+import { Box as i } from "rebass";
+import { TriangularPointerIcon as g } from "./sd-component-library189.js";
+import { HorizontalDivider as f } from "./sd-component-library49.js";
+import { OptionRow as w } from "./sd-component-library320.js";
+const k = 8, e = 5, c = k + 2 * e, l = c / 2, n = "cl_header", s = "cl_lightGrey", C = "46px", S = 4, v = (a) => {
+  const { isVisible: d, options: p, value: t, onChange: b } = a;
+  if (!d)
+    return null;
+  const x = (o) => () => b(o), h = [
+    t,
+    ...p.filter(({ id: o }) => o !== t.id)
+  ], m = `${c}px`;
+  return /* @__PURE__ */ r.jsxs(
+    i,
+    {
+      sx: {
+        minWidth: "100%",
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        zIndex: 1,
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(g, { direction: "top", mr: "15px", ml: "auto" }),
+        /* @__PURE__ */ r.jsx(f, { color: "cl_purple", height: "2px" }),
+        /* @__PURE__ */ r.jsx(
+          i,
+          {
+            sx: {
+              bg: "cl_white",
+              borderRadius: "0 0 3px 3px",
+              boxShadow: "0px 3px 10px #0000001A",
+              borderWidth: "1px",
+              borderColor: "cl_lightGrey",
+              borderStyle: "solid",
+              borderTopStyle: "none",
+              overflow: "auto",
+              maxHeight: `calc(${C} * ${S})`,
+              scrollbarWidth: "thin",
+              scrollbarColor: `${n} ${s}`,
+              "::-webkit-scrollbar-track": {
+                borderRadius: l,
+                bg: n,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              },
+              "::-webkit-scrollbar": {
+                width: m,
+                bg: "transparent"
+              },
+              "::-webkit-scrollbar-thumb": {
+                borderRadius: l,
+                bg: s,
+                border: `${e}px solid transparent`,
+                backgroundClip: "content-box"
+              }
+            },
+            children: h.map((o) => /* @__PURE__ */ u(
+              w,
+              {
+                onClick: x(o),
+                ...o,
+                key: o.id,
+                currentSelection: t.id === o.id
+              }
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  e as __exports
+  v as CustomScrollableOptionsBox
 };
 //# sourceMappingURL=sd-component-library279.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library279.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"sd-component-library279.js","sources":["../src/components/selectors/primary-custom-scrollable-selector/partials/custom-scrollable-options-box/custom-scrollable-options-box.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { TriangularPointerIcon } from \"../../../../icons\";\nimport { SelectorOptionV2 } from \"../../../selector-v2\";\nimport { OptionRow } from \"../option-row\";\nimport { CustomScrollableOptionsBoxProps as Props } from \"./interfaces\";\n\nconst scrollbarWidth = 8;\nconst offset = 5;\nconst totalWidth = scrollbarWidth + 2 * offset;\nconst borderRadius = totalWidth / 2;\n\nconst trackColor = \"cl_header\";\nconst thumbColor = \"cl_lightGrey\";\nconst rowHeight = \"46px\";\nconst maxRows = 4;\n\nexport const CustomScrollableOptionsBox = <T extends string = string>(\n  props: Props<T>\n) => {\n  const { isVisible, options, value, onChange } = props;\n\n  if (!isVisible) return null;\n\n  const onSelect = (option: SelectorOptionV2<T>) => () => onChange(option);\n  const regroupedOptions = [\n    value,\n    ...options.filter(({ id }) => id !== value.id),\n  ];\n\n  const scrollbarWidthStr = `${totalWidth}px`;\n\n  return (\n    <Box\n      sx={{\n        minWidth: \"100%\",\n        position: \"absolute\",\n        top: \"100%\",\n        right: 0,\n        zIndex: 1,\n        cursor: \"default\",\n      }}\n    >\n      <TriangularPointerIcon direction=\"top\" mr=\"15px\" ml=\"auto\" />\n\n      <HorizontalDivider color=\"cl_purple\" height=\"2px\" />\n\n      <Box\n        sx={{\n          bg: \"cl_white\",\n          borderRadius: \"0 0 3px 3px\",\n          boxShadow: \"0px 3px 10px #0000001A\",\n          borderWidth: \"1px\",\n          borderColor: \"cl_lightGrey\",\n          borderStyle: \"solid\",\n          borderTopStyle: \"none\",\n          overflow: \"auto\",\n          maxHeight: `calc(${rowHeight} * ${maxRows})`,\n          scrollbarWidth: \"thin\",\n          scrollbarColor: `${trackColor} ${thumbColor}`,\n          \"::-webkit-scrollbar-track\": {\n            borderRadius,\n            bg: trackColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n          \"::-webkit-scrollbar\": {\n            width: scrollbarWidthStr,\n            bg: \"transparent\",\n          },\n          \"::-webkit-scrollbar-thumb\": {\n            borderRadius,\n            bg: thumbColor,\n            border: `${offset}px solid transparent`,\n            backgroundClip: \"content-box\",\n          },\n        }}\n      >\n        {(regroupedOptions as SelectorOptionV2<T>[]).map((option) => (\n          <OptionRow\n            onClick={onSelect(option)}\n            {...option}\n            key={option.id}\n            currentSelection={value.id === option.id}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["scrollbarWidth","offset","totalWidth","borderRadius","trackColor","thumbColor","rowHeight","maxRows","CustomScrollableOptionsBox","props","isVisible","options","value","onChange","onSelect","option","regroupedOptions","id","scrollbarWidthStr","jsxs","Box","jsx","TriangularPointerIcon","HorizontalDivider","createElement","OptionRow"],"mappings":";;;;;;AAUA,MAAMA,IAAiB,GACjBC,IAAS,GACTC,IAAaF,IAAiB,IAAIC,GAClCE,IAAeD,IAAa,GAE5BE,IAAa,aACbC,IAAa,gBACbC,IAAY,QACZC,IAAU,GAEHC,IAA6B,CACxCC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,UAAAC,MAAaJ;AAEhD,MAAI,CAACC;AAAkB,WAAA;AAEvB,QAAMI,IAAW,CAACC,MAAgC,MAAMF,EAASE,CAAM,GACjEC,IAAmB;AAAA,IACvBJ;AAAA,IACA,GAAGD,EAAQ,OAAO,CAAC,EAAE,IAAAM,EAAG,MAAMA,MAAOL,EAAM,EAAE;AAAA,EAAA,GAGzCM,IAAoB,GAAGhB,CAAU;AAGrC,SAAAiB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,MAACC,KAAsB,WAAU,OAAM,IAAG,QAAO,IAAG,QAAO;AAAA,QAE1DD,gBAAAA,EAAA,IAAAE,GAAA,EAAkB,OAAM,aAAY,QAAO,OAAM;AAAA,QAElDF,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,WAAW;AAAA,cACX,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,gBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,WAAW,QAAQd,CAAS,MAAMC,CAAO;AAAA,cACzC,gBAAgB;AAAA,cAChB,gBAAgB,GAAGH,CAAU,IAAIC,CAAU;AAAA,cAC3C,6BAA6B;AAAA,gBAC3B,cAAAF;AAAA,gBACA,IAAIC;AAAA,gBACJ,QAAQ,GAAGH,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,cACA,uBAAuB;AAAA,gBACrB,OAAOiB;AAAA,gBACP,IAAI;AAAA,cACN;AAAA,cACA,6BAA6B;AAAA,gBAC3B,cAAAf;AAAA,gBACA,IAAIE;AAAA,gBACJ,QAAQ,GAAGJ,CAAM;AAAA,gBACjB,gBAAgB;AAAA,cAClB;AAAA,YACF;AAAA,YAEE,UAAAe,EAA2C,IAAI,CAACD,MAChD,gBAAAS;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAASX,EAASC,CAAM;AAAA,gBACvB,GAAGA;AAAA,gBACJ,KAAKA,EAAO;AAAA,gBACZ,kBAAkBH,EAAM,OAAOG,EAAO;AAAA,cAAA;AAAA,YAAA,CAEzC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library282.js

@@ -1,13 +1,73 @@
-import * as e from "react";
-const a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18.2, height: 20, viewBox: "0 0 18.2 20", ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
-      .calendar{
-        fill:none;
-        stroke-linecap:round;
-        stroke-linejoin:round;
-        stroke-width:2px;
-      }
-    `)), /* @__PURE__ */ e.createElement("g", { transform: "translate(-3.5 -2)" }, /* @__PURE__ */ e.createElement("path", { className: "calendar", stroke: "current", d: "M6.3,6H18.9a1.8,1.8,0,0,1,1.8,1.8V20.4a1.8,1.8,0,0,1-1.8,1.8H6.3a1.8,1.8,0,0,1-1.8-1.8V7.8A1.8,1.8,0,0,1,6.3,6Z", transform: "translate(0 -1.2)" }), /* @__PURE__ */ e.createElement("path", { className: "calendar", stroke: "current", d: "M24,3V6.6", transform: "translate(-7.8 0)" }), /* @__PURE__ */ e.createElement("path", { className: "calendar", stroke: "current", d: "M12,3V6.6", transform: "translate(-3 0)" }), /* @__PURE__ */ e.createElement("path", { className: "calendar", stroke: "current", d: "M4.5,15H20.7", transform: "translate(0 -4.8)" })));
+import { startOfDay as y, addDays as l, endOfDay as i, startOfWeek as O, addWeeks as n, endOfWeek as S, startOfMonth as u, addMonths as f, endOfMonth as M, startOfYear as b, addYears as c, endOfYear as C, isSameDay as r, format as W } from "date-fns";
+const D = (t) => W(t, "EEE d MMM yyyy"), x = (t) => {
+  const e = "No date selected";
+  return !t || !t.startDate || !t.endDate ? e : r(t.startDate, t.endDate) ? D(t.startDate) : `${D(t.startDate)} - ${D(
+    t.endDate
+  )}`;
+}, Y = [
+  {
+    label: "Yesterday",
+    startDate: y(l(/* @__PURE__ */ new Date(), -1)),
+    endDate: i(l(/* @__PURE__ */ new Date(), -1))
+  },
+  {
+    label: "Last Week",
+    startDate: O(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 }),
+    endDate: S(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
+  },
+  {
+    label: "Last 2 Weeks",
+    startDate: O(n(/* @__PURE__ */ new Date(), -2), { weekStartsOn: 1 }),
+    endDate: S(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
+  },
+  {
+    label: "Last Month",
+    startDate: u(f(/* @__PURE__ */ new Date(), -1)),
+    endDate: M(f(/* @__PURE__ */ new Date(), -1))
+  },
+  {
+    label: "Last Year",
+    startDate: b(c(/* @__PURE__ */ new Date(), -1)),
+    endDate: C(c(/* @__PURE__ */ new Date(), -1))
+  }
+], _ = (t, e, E, k, m, h) => {
+  const o = (m || Y).map(
+    ({ label: s, startDate: d, endDate: w }) => ({
+      label: s,
+      range: (a) => ({
+        startDate: d,
+        endDate: w
+      }),
+      isSelected: (a) => a.startDate && a.endDate ? r(a.startDate, d) && r(a.endDate, w) : !1
+    })
+  );
+  return h ? o.concat({
+    label: "Custom Range",
+    range: (s) => (e(), {
+      startDate: (t == null ? void 0 : t.startDate) || /* @__PURE__ */ new Date(),
+      endDate: (t == null ? void 0 : t.endDate) || /* @__PURE__ */ new Date()
+    }),
+    isSelected: (s) => k
+  }) : o;
+}, g = (t) => ({
+  ...t,
+  rangeColors: [t.color ?? "#9E1CB5"],
+  weekStartsOn: 1,
+  inputRanges: [],
+  ranges: [
+    t.selectedRange ?? {
+      startDate: /* @__PURE__ */ new Date(),
+      endDate: /* @__PURE__ */ new Date()
+    }
+  ],
+  months: t.months,
+  onChange: (e) => {
+    t.setSelectedRange(e.range1);
+  }
+});
 export {
-  a as ReactComponent
+  g as getCalendarProps,
+  x as getSelectedRangeText,
+  _ as getStaticRanges
 };
 //# sourceMappingURL=sd-component-library282.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library282.js","sources":["../src/components/icons/calendar-icon/calendar.svg"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC4yIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMTguMiAyMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jYWxlbmRhcnsKICAgICAgICBmaWxsOm5vbmU7CiAgICAgICAgc3Ryb2tlLWxpbmVjYXA6cm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOnJvdW5kOwogICAgICAgIHN0cm9rZS13aWR0aDoycHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjUgLTIpIj4KICAgIDxwYXRoIGNsYXNzPSJjYWxlbmRhciIgc3Ryb2tlPSJjdXJyZW50IiBkPSJNNi4zLDZIMTguOWExLjgsMS44LDAsMCwxLDEuOCwxLjhWMjAuNGExLjgsMS44LDAsMCwxLTEuOCwxLjhINi4zYTEuOCwxLjgsMCwwLDEtMS44LTEuOFY3LjhBMS44LDEuOCwwLDAsMSw2LjMsNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMikiLz4KICAgIDxwYXRoIGNsYXNzPSJjYWxlbmRhciIgc3Ryb2tlPSJjdXJyZW50IiBkPSJNMjQsM1Y2LjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjggMCkiLz4KICAgIDxwYXRoIGNsYXNzPSJjYWxlbmRhciIgc3Ryb2tlPSJjdXJyZW50IiBkPSJNMTIsM1Y2LjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zIDApIi8+CiAgICA8cGF0aCBjbGFzcz0iY2FsZW5kYXIiIHN0cm9rZT0iY3VycmVudCIgZD0iTTQuNSwxNUgyMC43IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC00LjgpIi8+CiAgPC9nPgo8L3N2Zz4=\""],"names":["SvgCalendar","props","React"],"mappings":";AACK,MAACA,IAAc,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,OAAO,MAAM,QAAQ,IAAI,SAAS,eAAe,GAAGD,KAAyB,gBAAAC,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAiJ,CAAC,GAAmB,gBAAAA,EAAM,cAAc,KAAK,EAAE,WAAW,wBAAwC,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,YAAY,QAAQ,WAAW,GAAG,mHAAmH,WAAW,oBAAqB,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,YAAY,QAAQ,WAAW,GAAG,aAAa,WAAW,oBAAmB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,YAAY,QAAQ,WAAW,GAAG,aAAa,WAAW,kBAAmB,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,WAAW,YAAY,QAAQ,WAAW,GAAG,gBAAgB,WAAW,oBAAmB,CAAE,CAAC,CAAC;"}
+{"version":3,"file":"sd-component-library282.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/utils.ts"],"sourcesContent":["import { OnChangeProps, Range, StaticRange } from \"react-date-range\";\n\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  addYears,\n  endOfDay,\n  endOfMonth,\n  endOfWeek,\n  endOfYear,\n  format,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n} from \"date-fns\";\n\nimport { OnRangeSelection, StaticRangeOption } from \"./interfaces\";\nimport { BaseDateRangeInputMobileProps } from \"./partials/base-date-range-input-mobile/interfaces\";\n\nconst getFormattedDate = (date: Date) => format(date, \"EEE d MMM yyyy\");\n\nexport const getSelectedRangeText = (range: Range | null | undefined) => {\n  const defaultText = \"No date selected\";\n\n  return !range || !range.startDate || !range.endDate\n    ? defaultText\n    : isSameDay(range.startDate, range.endDate)\n    ? getFormattedDate(range.startDate)\n    : `${getFormattedDate(range.startDate)} - ${getFormattedDate(\n        range.endDate\n      )}`;\n};\n\nconst ranges = [\n  {\n    label: \"Yesterday\",\n    startDate: startOfDay(addDays(new Date(), -1)),\n    endDate: endOfDay(addDays(new Date(), -1)),\n  },\n  {\n    label: \"Last Week\",\n    startDate: startOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last 2 Weeks\",\n    startDate: startOfWeek(addWeeks(new Date(), -2), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last Month\",\n    startDate: startOfMonth(addMonths(new Date(), -1)),\n    endDate: endOfMonth(addMonths(new Date(), -1)),\n  },\n  {\n    label: \"Last Year\",\n    startDate: startOfYear(addYears(new Date(), -1)),\n    endDate: endOfYear(addYears(new Date(), -1)),\n  },\n];\n\nexport const getStaticRanges = (\n  selectedRange: Range | undefined | null,\n  onCustomRangeSelect: () => void,\n  deselectCustomRange: () => void,\n  customOptionSelected: boolean,\n  customRanges?: StaticRangeOption[],\n  mobile?: boolean\n): StaticRange[] => {\n  const rangesToShow = customRanges || ranges;\n  const staticRanges: StaticRange[] = rangesToShow.map(\n    ({ label, startDate, endDate }) => ({\n      label,\n      range: (_) => ({\n        startDate,\n        endDate,\n      }),\n      isSelected: (range) =>\n        range.startDate && range.endDate\n          ? isSameDay(range.startDate, startDate) &&\n            isSameDay(range.endDate, endDate)\n          : false,\n    })\n  );\n\n  return !mobile\n    ? staticRanges\n    : staticRanges.concat({\n        label: \"Custom Range\",\n        range: (_) => {\n          onCustomRangeSelect();\n          return {\n            startDate: selectedRange?.startDate || new Date(),\n            endDate: selectedRange?.endDate || new Date(),\n          };\n        },\n        isSelected: (_) => customOptionSelected,\n      });\n};\n\nexport const getCalendarProps = (props: BaseDateRangeInputMobileProps) => ({\n  ...props,\n  rangeColors: [props.color ?? \"#9E1CB5\"],\n  weekStartsOn: 1,\n  inputRanges: [],\n  ranges: [\n    props.selectedRange ?? {\n      startDate: new Date(),\n      endDate: new Date(),\n    },\n  ],\n  months: props.months,\n  onChange: (value: OnChangeProps) => {\n    props.setSelectedRange((value as OnRangeSelection).range1);\n  },\n});\n"],"names":["getFormattedDate","date","format","getSelectedRangeText","range","defaultText","isSameDay","ranges","startOfDay","addDays","endOfDay","startOfWeek","addWeeks","endOfWeek","startOfMonth","addMonths","endOfMonth","startOfYear","addYears","endOfYear","getStaticRanges","selectedRange","onCustomRangeSelect","deselectCustomRange","customOptionSelected","customRanges","mobile","staticRanges","label","startDate","endDate","_","getCalendarProps","props","value"],"mappings":";AAsBA,MAAMA,IAAmB,CAACC,MAAeC,EAAOD,GAAM,gBAAgB,GAEzDE,IAAuB,CAACC,MAAoC;AACvE,QAAMC,IAAc;AAEb,SAAA,CAACD,KAAS,CAACA,EAAM,aAAa,CAACA,EAAM,UACxCC,IACAC,EAAUF,EAAM,WAAWA,EAAM,OAAO,IACxCJ,EAAiBI,EAAM,SAAS,IAChC,GAAGJ,EAAiBI,EAAM,SAAS,CAAC,MAAMJ;AAAA,IACxCI,EAAM;AAAA,EACP,CAAA;AACP,GAEMG,IAAS;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,WAAWC,EAAWC,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,IAC7C,SAASC,EAASD,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWD,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAaC,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,IACjD,SAASC,EAAWD,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,IAC/C,SAASC,EAAUD,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,EAC7C;AACF,GAEaE,IAAkB,CAC7BC,GACAC,GACAC,GACAC,GACAC,GACAC,MACkB;AAElB,QAAMC,KADeF,KAAgBlB,GACY;AAAA,IAC/C,CAAC,EAAE,OAAAqB,GAAO,WAAAC,GAAW,SAAAC,SAAe;AAAA,MAClC,OAAAF;AAAA,MACA,OAAO,CAACG,OAAO;AAAA,QACb,WAAAF;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,MAEF,YAAY,CAAC1B,MACXA,EAAM,aAAaA,EAAM,UACrBE,EAAUF,EAAM,WAAWyB,CAAS,KACpCvB,EAAUF,EAAM,SAAS0B,CAAO,IAChC;AAAA,IAAA;AAAA,EACR;AAGF,SAAQJ,IAEJC,EAAa,OAAO;AAAA,IAClB,OAAO;AAAA,IACP,OAAO,CAACI,OACcT,KACb;AAAA,MACL,YAAWD,KAAA,gBAAAA,EAAe,cAAa,oBAAI,KAAK;AAAA,MAChD,UAASA,KAAA,gBAAAA,EAAe,YAAW,oBAAI,KAAK;AAAA,IAAA;AAAA,IAGhD,YAAY,CAACU,MAAMP;AAAA,EAAA,CACpB,IAXDG;AAYN,GAEaK,IAAmB,CAACC,OAA0C;AAAA,EACzE,GAAGA;AAAA,EACH,aAAa,CAACA,EAAM,SAAS,SAAS;AAAA,EACtC,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,QAAQ;AAAA,IACNA,EAAM,iBAAiB;AAAA,MACrB,+BAAe,KAAK;AAAA,MACpB,6BAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAAA,EACA,QAAQA,EAAM;AAAA,EACd,UAAU,CAACC,MAAyB;AAC5B,IAAAD,EAAA,iBAAkBC,EAA2B,MAAM;AAAA,EAC3D;AACF;"}

package/lib/sd-component-library283.js

@@ -1,73 +1,105 @@
-import { startOfDay as y, addDays as l, endOfDay as i, startOfWeek as O, addWeeks as n, endOfWeek as S, startOfMonth as u, addMonths as f, endOfMonth as M, startOfYear as b, addYears as c, endOfYear as C, isSameDay as r, format as W } from "date-fns";
-const D = (t) => W(t, "EEE d MMM yyyy"), x = (t) => {
-  const e = "No date selected";
-  return !t || !t.startDate || !t.endDate ? e : r(t.startDate, t.endDate) ? D(t.startDate) : `${D(t.startDate)} - ${D(
-    t.endDate
-  )}`;
-}, Y = [
-  {
-    label: "Yesterday",
-    startDate: y(l(/* @__PURE__ */ new Date(), -1)),
-    endDate: i(l(/* @__PURE__ */ new Date(), -1))
-  },
-  {
-    label: "Last Week",
-    startDate: O(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 }),
-    endDate: S(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
-  },
-  {
-    label: "Last 2 Weeks",
-    startDate: O(n(/* @__PURE__ */ new Date(), -2), { weekStartsOn: 1 }),
-    endDate: S(n(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
-  },
-  {
-    label: "Last Month",
-    startDate: u(f(/* @__PURE__ */ new Date(), -1)),
-    endDate: M(f(/* @__PURE__ */ new Date(), -1))
-  },
-  {
-    label: "Last Year",
-    startDate: b(c(/* @__PURE__ */ new Date(), -1)),
-    endDate: C(c(/* @__PURE__ */ new Date(), -1))
+import { j as r } from "./sd-component-library195.js";
+import l from "react";
+import { DateRangePicker as s } from "react-date-range";
+import { Box as x } from "rebass";
+import { getCalendarProps as c } from "./sd-component-library282.js";
+import { OutsideClickBox as m } from "./sd-component-library11.js";
+import { ResponsiveTextV2 as f } from "./sd-component-library149.js";
+import { SelectedRangeText as h } from "./sd-component-library321.js";
+import { FrFrContainer as g } from "./sd-component-library37.js";
+import { PrimaryTextButton as u } from "./sd-component-library21.js";
+import { ApplyButton as R } from "./sd-component-library322.js";
+const z = l.forwardRef(
+  (e, i) => {
+    const { zIndex: n, customOptionSelected: a, handleCancel: o, getStaticRanges: d } = e, p = (t) => {
+      t == null || t.preventDefault(), o();
+    };
+    return /* @__PURE__ */ r.jsx(
+      x,
+      {
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          overflowY: "auto",
+          py: "30px",
+          bg: "#434A5499"
+        },
+        "data-testid": "calendar-wrapper",
+        children: /* @__PURE__ */ r.jsxs(
+          m,
+          {
+            onClickOutside: p,
+            sx: {
+              borderStyle: "solid",
+              borderWidth: "1px",
+              borderColor: "cl_lightGrey",
+              minWidth: "352px",
+              width: "max-content",
+              backgroundColor: "#fff",
+              m: "auto",
+              borderRadius: "4px",
+              zIndex: n,
+              ".rdrDateRangePickerWrapper": {
+                width: "100%",
+                flexDirection: "column"
+              },
+              ".rdrDefinedRangesWrapper": {
+                width: "100%"
+              },
+              ".rdrCalendarWrapper": {
+                display: a ? "inline-flex" : "none"
+              },
+              ".rdrInputRanges": {
+                display: "none"
+              },
+              ".rdrStaticRanges:before": {
+                fontSize: "16px",
+                fontFamily: "proxima-nova",
+                color: "#9BA2B4",
+                fontWeight: "300",
+                p: "10px 20px"
+              },
+              ".rdrStaticRange": {
+                fontSize: "16px",
+                fontFamily: "proxima-nova",
+                color: "#434A54",
+                borderBottomWidth: "0"
+              }
+            },
+            children: [
+              /* @__PURE__ */ r.jsx(f, { fontSizeWeight: [12, "semi-bold"], ref: i, children: /* @__PURE__ */ r.jsx(
+                s,
+                {
+                  ...c(e),
+                  direction: "vertical",
+                  staticRanges: d(!0)
+                }
+              ) }),
+              /* @__PURE__ */ r.jsx(h, { ...e, isMobile: !0 }),
+              /* @__PURE__ */ r.jsxs(g, { p: "10px 20px", children: [
+                /* @__PURE__ */ r.jsx(
+                  u,
+                  {
+                    onClick: o,
+                    height: "42px",
+                    color: "cl_darkGrey",
+                    padding: "0",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(R, { ...e })
+              ] })
+            ]
+          }
+        )
+      }
+    );
   }
-], _ = (t, e, E, k, m, h) => {
-  const o = (m || Y).map(
-    ({ label: s, startDate: d, endDate: w }) => ({
-      label: s,
-      range: (a) => ({
-        startDate: d,
-        endDate: w
-      }),
-      isSelected: (a) => a.startDate && a.endDate ? r(a.startDate, d) && r(a.endDate, w) : !1
-    })
-  );
-  return h ? o.concat({
-    label: "Custom Range",
-    range: (s) => (e(), {
-      startDate: (t == null ? void 0 : t.startDate) || /* @__PURE__ */ new Date(),
-      endDate: (t == null ? void 0 : t.endDate) || /* @__PURE__ */ new Date()
-    }),
-    isSelected: (s) => k
-  }) : o;
-}, g = (t) => ({
-  ...t,
-  rangeColors: [t.color ?? "#9E1CB5"],
-  weekStartsOn: 1,
-  inputRanges: [],
-  ranges: [
-    t.selectedRange ?? {
-      startDate: /* @__PURE__ */ new Date(),
-      endDate: /* @__PURE__ */ new Date()
-    }
-  ],
-  months: t.months,
-  onChange: (e) => {
-    t.setSelectedRange(e.range1);
-  }
-});
+);
 export {
-  g as getCalendarProps,
-  x as getSelectedRangeText,
-  _ as getStaticRanges
+  z as BaseDateRangeInputMobile
 };
 //# sourceMappingURL=sd-component-library283.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library283.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/utils.ts"],"sourcesContent":["import { OnChangeProps, Range, StaticRange } from \"react-date-range\";\n\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  addYears,\n  endOfDay,\n  endOfMonth,\n  endOfWeek,\n  endOfYear,\n  format,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n} from \"date-fns\";\n\nimport { OnRangeSelection, StaticRangeOption } from \"./interfaces\";\nimport { BaseDateRangeInputMobileProps } from \"./partials/base-date-range-input-mobile/interfaces\";\n\nconst getFormattedDate = (date: Date) => format(date, \"EEE d MMM yyyy\");\n\nexport const getSelectedRangeText = (range: Range | null | undefined) => {\n  const defaultText = \"No date selected\";\n\n  return !range || !range.startDate || !range.endDate\n    ? defaultText\n    : isSameDay(range.startDate, range.endDate)\n    ? getFormattedDate(range.startDate)\n    : `${getFormattedDate(range.startDate)} - ${getFormattedDate(\n        range.endDate\n      )}`;\n};\n\nconst ranges = [\n  {\n    label: \"Yesterday\",\n    startDate: startOfDay(addDays(new Date(), -1)),\n    endDate: endOfDay(addDays(new Date(), -1)),\n  },\n  {\n    label: \"Last Week\",\n    startDate: startOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last 2 Weeks\",\n    startDate: startOfWeek(addWeeks(new Date(), -2), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last Month\",\n    startDate: startOfMonth(addMonths(new Date(), -1)),\n    endDate: endOfMonth(addMonths(new Date(), -1)),\n  },\n  {\n    label: \"Last Year\",\n    startDate: startOfYear(addYears(new Date(), -1)),\n    endDate: endOfYear(addYears(new Date(), -1)),\n  },\n];\n\nexport const getStaticRanges = (\n  selectedRange: Range | undefined | null,\n  onCustomRangeSelect: () => void,\n  deselectCustomRange: () => void,\n  customOptionSelected: boolean,\n  customRanges?: StaticRangeOption[],\n  mobile?: boolean\n): StaticRange[] => {\n  const rangesToShow = customRanges || ranges;\n  const staticRanges: StaticRange[] = rangesToShow.map(\n    ({ label, startDate, endDate }) => ({\n      label,\n      range: (_) => ({\n        startDate,\n        endDate,\n      }),\n      isSelected: (range) =>\n        range.startDate && range.endDate\n          ? isSameDay(range.startDate, startDate) &&\n            isSameDay(range.endDate, endDate)\n          : false,\n    })\n  );\n\n  return !mobile\n    ? staticRanges\n    : staticRanges.concat({\n        label: \"Custom Range\",\n        range: (_) => {\n          onCustomRangeSelect();\n          return {\n            startDate: selectedRange?.startDate || new Date(),\n            endDate: selectedRange?.endDate || new Date(),\n          };\n        },\n        isSelected: (_) => customOptionSelected,\n      });\n};\n\nexport const getCalendarProps = (props: BaseDateRangeInputMobileProps) => ({\n  ...props,\n  rangeColors: [props.color ?? \"#9E1CB5\"],\n  weekStartsOn: 1,\n  inputRanges: [],\n  ranges: [\n    props.selectedRange ?? {\n      startDate: new Date(),\n      endDate: new Date(),\n    },\n  ],\n  months: props.months,\n  onChange: (value: OnChangeProps) => {\n    props.setSelectedRange((value as OnRangeSelection).range1);\n  },\n});\n"],"names":["getFormattedDate","date","format","getSelectedRangeText","range","defaultText","isSameDay","ranges","startOfDay","addDays","endOfDay","startOfWeek","addWeeks","endOfWeek","startOfMonth","addMonths","endOfMonth","startOfYear","addYears","endOfYear","getStaticRanges","selectedRange","onCustomRangeSelect","deselectCustomRange","customOptionSelected","customRanges","mobile","staticRanges","label","startDate","endDate","_","getCalendarProps","props","value"],"mappings":";AAsBA,MAAMA,IAAmB,CAACC,MAAeC,EAAOD,GAAM,gBAAgB,GAEzDE,IAAuB,CAACC,MAAoC;AACvE,QAAMC,IAAc;AAEb,SAAA,CAACD,KAAS,CAACA,EAAM,aAAa,CAACA,EAAM,UACxCC,IACAC,EAAUF,EAAM,WAAWA,EAAM,OAAO,IACxCJ,EAAiBI,EAAM,SAAS,IAChC,GAAGJ,EAAiBI,EAAM,SAAS,CAAC,MAAMJ;AAAA,IACxCI,EAAM;AAAA,EACP,CAAA;AACP,GAEMG,IAAS;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,WAAWC,EAAWC,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,IAC7C,SAASC,EAASD,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWD,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAaC,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,IACjD,SAASC,EAAWD,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,IAC/C,SAASC,EAAUD,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,EAC7C;AACF,GAEaE,IAAkB,CAC7BC,GACAC,GACAC,GACAC,GACAC,GACAC,MACkB;AAElB,QAAMC,KADeF,KAAgBlB,GACY;AAAA,IAC/C,CAAC,EAAE,OAAAqB,GAAO,WAAAC,GAAW,SAAAC,SAAe;AAAA,MAClC,OAAAF;AAAA,MACA,OAAO,CAACG,OAAO;AAAA,QACb,WAAAF;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,MAEF,YAAY,CAAC1B,MACXA,EAAM,aAAaA,EAAM,UACrBE,EAAUF,EAAM,WAAWyB,CAAS,KACpCvB,EAAUF,EAAM,SAAS0B,CAAO,IAChC;AAAA,IAAA;AAAA,EACR;AAGF,SAAQJ,IAEJC,EAAa,OAAO;AAAA,IAClB,OAAO;AAAA,IACP,OAAO,CAACI,OACcT,KACb;AAAA,MACL,YAAWD,KAAA,gBAAAA,EAAe,cAAa,oBAAI,KAAK;AAAA,MAChD,UAASA,KAAA,gBAAAA,EAAe,YAAW,oBAAI,KAAK;AAAA,IAAA;AAAA,IAGhD,YAAY,CAACU,MAAMP;AAAA,EAAA,CACpB,IAXDG;AAYN,GAEaK,IAAmB,CAACC,OAA0C;AAAA,EACzE,GAAGA;AAAA,EACH,aAAa,CAACA,EAAM,SAAS,SAAS;AAAA,EACtC,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,QAAQ;AAAA,IACNA,EAAM,iBAAiB;AAAA,MACrB,+BAAe,KAAK;AAAA,MACpB,6BAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAAA,EACA,QAAQA,EAAM;AAAA,EACd,UAAU,CAACC,MAAyB;AAC5B,IAAAD,EAAA,iBAAkBC,EAA2B,MAAM;AAAA,EAC3D;AACF;"}
+{"version":3,"file":"sd-component-library283.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/base-date-range-input-mobile/base-date-range-input-mobile.tsx"],"sourcesContent":["import React from \"react\";\nimport { DateRangePicker } from \"react-date-range\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../../../../boxes\";\nimport { PrimaryTextButton } from \"../../../../../buttons\";\nimport { FrFrContainer } from \"../../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../../texts/responsive-text-v2\";\nimport { getCalendarProps } from \"../../utils\";\nimport { ApplyButton } from \"../apply-button\";\nimport { SelectedRangeText } from \"../selected-range-text\";\nimport { BaseDateRangeInputMobileProps as Props } from \"./interfaces\";\n\nexport const BaseDateRangeInputMobile = React.forwardRef<HTMLDivElement, Props>(\n  (props, ref) => {\n    const { zIndex, customOptionSelected, handleCancel, getStaticRanges } =\n      props;\n\n    const onClickOutside = (event?: React.MouseEvent<HTMLDivElement>) => {\n      event?.preventDefault();\n      handleCancel();\n    };\n\n    return (\n      <Box\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          overflowY: \"auto\",\n          py: \"30px\",\n          bg: \"#434A5499\",\n        }}\n        data-testid=\"calendar-wrapper\"\n      >\n        <OutsideClickBox\n          onClickOutside={onClickOutside}\n          sx={{\n            borderStyle: \"solid\",\n            borderWidth: \"1px\",\n            borderColor: \"cl_lightGrey\",\n            minWidth: \"352px\",\n            width: \"max-content\",\n            backgroundColor: \"#fff\",\n            m: \"auto\",\n            borderRadius: \"4px\",\n            zIndex,\n            \".rdrDateRangePickerWrapper\": {\n              width: \"100%\",\n              flexDirection: \"column\",\n            },\n            \".rdrDefinedRangesWrapper\": {\n              width: \"100%\",\n            },\n            \".rdrCalendarWrapper\": {\n              display: customOptionSelected ? \"inline-flex\" : \"none\",\n            },\n            \".rdrInputRanges\": {\n              display: \"none\",\n            },\n            \".rdrStaticRanges:before\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#9BA2B4\",\n              fontWeight: \"300\",\n              p: \"10px 20px\",\n            },\n            \".rdrStaticRange\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#434A54\",\n              borderBottomWidth: \"0\",\n            },\n          }}\n        >\n          <ResponsiveTextV2 fontSizeWeight={[12, \"semi-bold\"]} ref={ref}>\n            <DateRangePicker\n              {...getCalendarProps(props)}\n              direction=\"vertical\"\n              staticRanges={getStaticRanges(true)}\n            />\n          </ResponsiveTextV2>\n\n          <SelectedRangeText {...props} isMobile />\n\n          <FrFrContainer p=\"10px 20px\">\n            <PrimaryTextButton\n              onClick={handleCancel}\n              height=\"42px\"\n              color=\"cl_darkGrey\"\n              padding=\"0\"\n            >\n              Cancel\n            </PrimaryTextButton>\n\n            <ApplyButton {...props} />\n          </FrFrContainer>\n        </OutsideClickBox>\n      </Box>\n    );\n  }\n);\n"],"names":["BaseDateRangeInputMobile","React","props","ref","zIndex","customOptionSelected","handleCancel","getStaticRanges","onClickOutside","event","jsx","Box","jsxs","OutsideClickBox","ResponsiveTextV2","DateRangePicker","getCalendarProps","SelectedRangeText","FrFrContainer","PrimaryTextButton","ApplyButton"],"mappings":";;;;;;;;;;;AAcO,MAAMA,IAA2BC,EAAM;AAAA,EAC5C,CAACC,GAAOC,MAAQ;AACd,UAAM,EAAE,QAAAC,GAAQ,sBAAAC,GAAsB,cAAAC,GAAc,iBAAAC,MAClDL,GAEIM,IAAiB,CAACC,MAA6C;AACnE,MAAAA,KAAA,QAAAA,EAAO,kBACMH;IAAA;AAIb,WAAAI,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QACA,eAAY;AAAA,QAEZ,UAAAC,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,gBAAAL;AAAA,YACA,IAAI;AAAA,cACF,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,UAAU;AAAA,cACV,OAAO;AAAA,cACP,iBAAiB;AAAA,cACjB,GAAG;AAAA,cACH,cAAc;AAAA,cACd,QAAAJ;AAAA,cACA,8BAA8B;AAAA,gBAC5B,OAAO;AAAA,gBACP,eAAe;AAAA,cACjB;AAAA,cACA,4BAA4B;AAAA,gBAC1B,OAAO;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB,SAASC,IAAuB,gBAAgB;AAAA,cAClD;AAAA,cACA,mBAAmB;AAAA,gBACjB,SAAS;AAAA,cACX;AAAA,cACA,2BAA2B;AAAA,gBACzB,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,GAAG;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,gBACjB,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,YAEA,UAAA;AAAA,cAAAK,gBAAAA,MAACI,KAAiB,gBAAgB,CAAC,IAAI,WAAW,GAAG,KAAAX,GACnD,UAAAO,gBAAAA,EAAA;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACE,GAAGC,EAAiBd,CAAK;AAAA,kBAC1B,WAAU;AAAA,kBACV,cAAcK,EAAgB,EAAI;AAAA,gBAAA;AAAA,cAAA,GAEtC;AAAA,cAECG,gBAAAA,EAAA,IAAAO,GAAA,EAAmB,GAAGf,GAAO,UAAQ,GAAC,CAAA;AAAA,cAEvCU,gBAAAA,EAAAA,KAACM,GAAc,EAAA,GAAE,aACf,UAAA;AAAA,gBAAAR,gBAAAA,EAAA;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,SAASb;AAAA,oBACT,QAAO;AAAA,oBACP,OAAM;AAAA,oBACN,SAAQ;AAAA,oBACT,UAAA;AAAA,kBAAA;AAAA,gBAED;AAAA,gBAEAI,gBAAAA,EAAAA,IAACU,GAAa,EAAA,GAAGlB,GAAO;AAAA,cAAA,GAC1B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}