@selfdecode/sd-component-library 4.0.13-diet-11 → 4.0.14-8.1

package/lib/sd-component-library56.js

@@ -0,0 +1,83 @@
+import { j as e } from "./sd-component-library169.js";
+import { useCallback as p, useMemo as u } from "react";
+import { Calendar as g } from "react-date-range";
+import "./sd-component-library244.js";
+import "./sd-component-library245.js";
+import { Box as o } from "rebass";
+import { SemiBoldText as C } from "./sd-component-library136.js";
+const B = (a) => {
+  const {
+    color: i,
+    selectedDate: l,
+    showCalendar: s,
+    alignCalendar: n = "left",
+    onDateSelect: r,
+    maxDate: d,
+    width: c = "max-content",
+    zIndex: x = 2
+  } = a, m = p(
+    (t) => r(t),
+    [r]
+  ), f = u(() => {
+    const t = {
+      left: [],
+      right: []
+    };
+    return n === "left" ? (t.left = ["0", "0"], t.right = ["0", "unset"]) : n === "right" && (t.left = ["0", "unset"], t.right = ["0", "0"]), t;
+  }, [n]), h = {
+    ...a,
+    color: i || "#9E1CB5",
+    date: l || d || /* @__PURE__ */ new Date(),
+    onChange: m
+  };
+  return /* @__PURE__ */ e.jsxs(
+    o,
+    {
+      "data-testid": "base-date-input",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        width: c
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(o, { children: a.children }),
+        s && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            "data-testid": "base-date-input-calendar",
+            sx: {
+              position: "relative"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              o,
+              {
+                sx: {
+                  overflowX: ["scroll", "auto"],
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  minWidth: ["auto", "max-content"],
+                  borderColor: "cl_lightGrey",
+                  position: ["fixed", "absolute"],
+                  maxWidth: "max-content",
+                  width: ["80vw", "max-content"],
+                  top: ["30px", "0px"],
+                  ...f,
+                  margin: ["0 auto", "auto"],
+                  backgroundColor: "#fff",
+                  zIndex: x
+                },
+                "data-testid": "calendar-wrapper",
+                children: /* @__PURE__ */ e.jsx(C, { fontSize: 10, children: /* @__PURE__ */ e.jsx(g, { ...h }) })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  B as BaseDateInput
+};
+//# sourceMappingURL=sd-component-library56.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library56.js","sources":["../src/components/inputs/date-inputs/base-date-input/base-date-input.tsx"],"sourcesContent":["// theme css file\nimport React, { useCallback, useMemo } from \"react\";\nimport { Calendar, OnChangeProps } from \"react-date-range\";\nimport \"react-date-range/dist/styles.css\";\n// main style file\nimport \"react-date-range/dist/theme/default.css\";\n\nimport { Box } from \"rebass\";\n\nimport { SemiBoldText } from \"../../../texts\";\nimport { BaseDateInputProps as Props } from \"./interfaces\";\n\nexport const BaseDateInput: React.FC<Props> = (props) => {\n  const {\n    color,\n    selectedDate,\n    showCalendar,\n    alignCalendar = \"left\",\n    onDateSelect,\n    maxDate,\n    width = \"max-content\",\n    zIndex = 2,\n  } = props;\n\n  const handleChange = useCallback(\n    (date: OnChangeProps) => onDateSelect(date as Date),\n    [onDateSelect]\n  );\n\n  const calendarAlignmentStyles = useMemo(() => {\n    const calendarAlignmentStyles: {\n      [key: string]: Array<string | undefined>;\n    } = {\n      left: [],\n      right: [],\n    };\n\n    if (alignCalendar === \"left\") {\n      calendarAlignmentStyles.left = [\"0\", \"0\"];\n      calendarAlignmentStyles.right = [\"0\", \"unset\"];\n    } else if (alignCalendar === \"right\") {\n      calendarAlignmentStyles.left = [\"0\", \"unset\"];\n      calendarAlignmentStyles.right = [\"0\", \"0\"];\n    }\n    return calendarAlignmentStyles;\n  }, [alignCalendar]);\n\n  const calendarProps = {\n    ...props,\n    color: color || \"#9E1CB5\",\n    date: selectedDate || maxDate || new Date(),\n    onChange: handleChange,\n  };\n\n  return (\n    <Box\n      data-testid=\"base-date-input\"\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        position: \"relative\",\n        width: width,\n      }}\n    >\n      <Box>{props.children}</Box>\n      {showCalendar && (\n        <Box\n          data-testid=\"base-date-input-calendar\"\n          sx={{\n            position: \"relative\",\n          }}\n        >\n          <Box\n            sx={{\n              overflowX: [\"scroll\", \"auto\"],\n              borderStyle: \"solid\",\n              borderWidth: \"1px\",\n              minWidth: [\"auto\", \"max-content\"],\n              borderColor: \"cl_lightGrey\",\n              position: [\"fixed\", \"absolute\"],\n              maxWidth: \"max-content\",\n              width: [\"80vw\", \"max-content\"],\n              top: [\"30px\", \"0px\"],\n              ...calendarAlignmentStyles,\n              margin: [\"0 auto\", \"auto\"],\n              backgroundColor: \"#fff\",\n              zIndex,\n            }}\n            data-testid=\"calendar-wrapper\"\n          >\n            <SemiBoldText fontSize={10}>\n              <Calendar {...calendarProps} />\n            </SemiBoldText>\n          </Box>\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":["BaseDateInput","props","color","selectedDate","showCalendar","alignCalendar","onDateSelect","maxDate","width","zIndex","handleChange","useCallback","date","calendarAlignmentStyles","useMemo","calendarProps","jsxs","Box","jsx","SemiBoldText","Calendar"],"mappings":";;;;;;;AAYa,MAAAA,IAAiC,CAACC,MAAU;AACjD,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,EACP,IAAAR,GAEES,IAAeC;AAAA,IACnB,CAACC,MAAwBN,EAAaM,CAAY;AAAA,IAClD,CAACN,CAAY;AAAA,EAAA,GAGTO,IAA0BC,EAAQ,MAAM;AAC5C,UAAMD,IAEF;AAAA,MACF,MAAM,CAAC;AAAA,MACP,OAAO,CAAC;AAAA,IAAA;AAGV,WAAIR,MAAkB,UACpBQ,EAAwB,OAAO,CAAC,KAAK,GAAG,GACxCA,EAAwB,QAAQ,CAAC,KAAK,OAAO,KACpCR,MAAkB,YAC3BQ,EAAwB,OAAO,CAAC,KAAK,OAAO,GAC5CA,EAAwB,QAAQ,CAAC,KAAK,GAAG,IAEpCA;AAAAA,EAAA,GACN,CAACR,CAAa,CAAC,GAEZU,IAAgB;AAAA,IACpB,GAAGd;AAAA,IACH,OAAOC,KAAS;AAAA,IAChB,MAAMC,KAAgBI,KAAW,oBAAI,KAAK;AAAA,IAC1C,UAAUG;AAAA,EAAA;AAIV,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAAT;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAACU,gBAAAA,EAAAA,IAAAD,GAAA,EAAK,YAAM,SAAS,CAAA;AAAA,QACpBb,KACCc,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI;AAAA,cACF,UAAU;AAAA,YACZ;AAAA,YAEA,UAAAC,gBAAAA,EAAA;AAAA,cAACD;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,WAAW,CAAC,UAAU,MAAM;AAAA,kBAC5B,aAAa;AAAA,kBACb,aAAa;AAAA,kBACb,UAAU,CAAC,QAAQ,aAAa;AAAA,kBAChC,aAAa;AAAA,kBACb,UAAU,CAAC,SAAS,UAAU;AAAA,kBAC9B,UAAU;AAAA,kBACV,OAAO,CAAC,QAAQ,aAAa;AAAA,kBAC7B,KAAK,CAAC,QAAQ,KAAK;AAAA,kBACnB,GAAGJ;AAAA,kBACH,QAAQ,CAAC,UAAU,MAAM;AAAA,kBACzB,iBAAiB;AAAA,kBACjB,QAAAJ;AAAA,gBACF;AAAA,gBACA,eAAY;AAAA,gBAEZ,UAAAS,gBAAAA,EAAA,IAACC,KAAa,UAAU,IACtB,gCAACC,GAAU,EAAA,GAAGL,GAAe,EAC/B,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/lib/sd-component-library57.js

@@ -0,0 +1,85 @@
+import { j as t } from "./sd-component-library169.js";
+import { useState as v, useRef as w } from "react";
+import "./sd-component-library244.js";
+import "./sd-component-library245.js";
+import { Box as s } from "rebass";
+import { useBreakPoints as M, useDependantState as y } from "./sd-component-library3.js";
+import { getStaticRanges as E } from "./sd-component-library247.js";
+import { BaseDateRangeInputMobile as O } from "./sd-component-library248.js";
+import { BaseDateRangeInputDesktop as P } from "./sd-component-library249.js";
+const J = (n) => {
+  const {
+    color: d = "#9E1CB5",
+    initialRange: a,
+    showCalendar: g,
+    alignCalendar: p = "left",
+    onSelect: x,
+    onCancel: o,
+    onClose: i,
+    months: S = 2,
+    width: f = "max-content",
+    zIndex: R = 2,
+    customStaticRanges: h,
+    quickSelectionLabel: b = '"Quick Selection"',
+    useMobileStyles: j
+  } = n, { isMobile: C } = M(), [c, r] = y(
+    a
+  ), [l, m] = v(!1), e = w(null), B = () => {
+    r(a), o == null || o(), i();
+  }, D = () => {
+    m(!0), e != null && e.current && e.current.scrollIntoView({
+      behavior: "smooth",
+      block: "end"
+    });
+  }, k = () => m(!1), u = {
+    ...n,
+    customOptionSelected: l,
+    onSelect: x,
+    handleCancel: B,
+    onClose: i,
+    selectedRange: c,
+    setSelectedRange: r,
+    getStaticRanges: (I) => E(
+      c,
+      D,
+      k,
+      l,
+      h,
+      I
+    ),
+    alignCalendar: p,
+    zIndex: R,
+    quickSelectionLabel: b,
+    months: S,
+    color: d
+  };
+  return /* @__PURE__ */ t.jsxs(
+    s,
+    {
+      "data-testid": "base-date-range-input",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        width: f
+      },
+      children: [
+        /* @__PURE__ */ t.jsx(s, { children: n.children }),
+        g && /* @__PURE__ */ t.jsx(
+          s,
+          {
+            sx: {
+              position: "relative"
+            },
+            "data-testid": "base-date-range-input-calendar",
+            children: C || j ? /* @__PURE__ */ t.jsx(O, { ...u, ref: e }) : /* @__PURE__ */ t.jsx(P, { ...u })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  J as BaseDateRangeInput
+};
+//# sourceMappingURL=sd-component-library57.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library57.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/base-date-range-input.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Range, StaticRange } from \"react-date-range\";\nimport \"react-date-range/dist/styles.css\";\nimport \"react-date-range/dist/theme/default.css\";\n\nimport { Box } from \"rebass\";\n\nimport {\n  useBreakPoints,\n  useDependantState,\n} from \"../../../../core/custom-hooks\";\nimport { BaseDateRangeInputProps as Props } from \"./interfaces\";\nimport { BaseDateRangeInputDesktop } from \"./partials/base-date-range-input-desktop\";\nimport { BaseDateRangeInputMobile } from \"./partials/base-date-range-input-mobile\";\nimport { getStaticRanges as obtainStaticRanges } from \"./utils\";\n\nexport const BaseDateRangeInput: React.FC<Props> = (props) => {\n  const {\n    color = \"#9E1CB5\",\n    initialRange,\n    showCalendar,\n    alignCalendar = \"left\",\n    onSelect,\n    onCancel,\n    onClose,\n    months = 2,\n    width = \"max-content\",\n    zIndex = 2,\n    customStaticRanges,\n    quickSelectionLabel = '\"Quick Selection\"',\n    useMobileStyles,\n  } = props;\n\n  const { isMobile } = useBreakPoints();\n\n  const [selectedRange, setSelectedRange] = useDependantState<Range | null>(\n    initialRange\n  );\n  const [customOptionSelected, setCustomOptionSelected] = useState(false);\n\n  const calendarRef = useRef<HTMLDivElement>(null);\n\n  const handleCancel = () => {\n    setSelectedRange(initialRange);\n    onCancel?.();\n    onClose();\n  };\n\n  const onCustomRangeSelect = () => {\n    setCustomOptionSelected(true);\n    if (calendarRef?.current)\n      calendarRef.current.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"end\",\n      });\n  };\n\n  const deselectCustomRange = () => setCustomOptionSelected(false);\n\n  /**\n   * Returns the function to get list of pre-set ranges.\n   */\n  const getStaticRanges = (mobile?: boolean): StaticRange[] =>\n    obtainStaticRanges(\n      selectedRange,\n      onCustomRangeSelect,\n      deselectCustomRange,\n      customOptionSelected,\n      customStaticRanges,\n      mobile\n    );\n\n  const commonProps = {\n    ...props,\n    customOptionSelected,\n    onSelect,\n    handleCancel,\n    onClose,\n    selectedRange,\n    setSelectedRange,\n    getStaticRanges,\n    alignCalendar,\n    zIndex,\n    quickSelectionLabel,\n    months,\n    color,\n  };\n\n  return (\n    <Box\n      data-testid=\"base-date-range-input\"\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        position: \"relative\",\n        width,\n      }}\n    >\n      <Box>{props.children}</Box>\n\n      {showCalendar && (\n        <Box\n          sx={{\n            position: \"relative\",\n          }}\n          data-testid=\"base-date-range-input-calendar\"\n        >\n          {isMobile || useMobileStyles ? (\n            <BaseDateRangeInputMobile {...commonProps} ref={calendarRef} />\n          ) : (\n            <BaseDateRangeInputDesktop {...commonProps} />\n          )}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":["BaseDateRangeInput","props","color","initialRange","showCalendar","alignCalendar","onSelect","onCancel","onClose","months","width","zIndex","customStaticRanges","quickSelectionLabel","useMobileStyles","isMobile","useBreakPoints","selectedRange","setSelectedRange","useDependantState","customOptionSelected","setCustomOptionSelected","useState","calendarRef","useRef","handleCancel","onCustomRangeSelect","deselectCustomRange","commonProps","mobile","obtainStaticRanges","jsxs","Box","jsx","BaseDateRangeInputMobile","BaseDateRangeInputDesktop"],"mappings":";;;;;;;;;AAgBa,MAAAA,IAAsC,CAACC,MAAU;AACtD,QAAA;AAAA,IACJ,OAAAC,IAAQ;AAAA,IACR,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,oBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,iBAAAC;AAAA,EACE,IAAAb,GAEE,EAAE,UAAAc,MAAaC,KAEf,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxChB;AAAA,EAAA,GAEI,CAACiB,GAAsBC,CAAuB,IAAIC,EAAS,EAAK,GAEhEC,IAAcC,EAAuB,IAAI,GAEzCC,IAAe,MAAM;AACzB,IAAAP,EAAiBf,CAAY,GAClBI,KAAA,QAAAA,KACHC;EAAA,GAGJkB,IAAsB,MAAM;AAChC,IAAAL,EAAwB,EAAI,GACxBE,KAAA,QAAAA,EAAa,WACfA,EAAY,QAAQ,eAAe;AAAA,MACjC,UAAU;AAAA,MACV,OAAO;AAAA,IAAA,CACR;AAAA,EAAA,GAGCI,IAAsB,MAAMN,EAAwB,EAAK,GAezDO,IAAc;AAAA,IAClB,GAAG3B;AAAA,IACH,sBAAAmB;AAAA,IACA,UAAAd;AAAA,IACA,cAAAmB;AAAA,IACA,SAAAjB;AAAA,IACA,eAAAS;AAAA,IACA,kBAAAC;AAAA,IAAA,iBAjBsB,CAACW,MACvBC;AAAAA,MACEb;AAAA,MACAS;AAAA,MACAC;AAAA,MACAP;AAAA,MACAR;AAAA,MACAiB;AAAA,IAAA;AAAA,IAYF,eAAAxB;AAAA,IACA,QAAAM;AAAA,IACA,qBAAAE;AAAA,IACA,QAAAJ;AAAA,IACA,OAAAP;AAAA,EAAA;AAIA,SAAA6B,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAAtB;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAACuB,gBAAAA,EAAAA,IAAAD,GAAA,EAAK,YAAM,SAAS,CAAA;AAAA,QAEpB5B,KACC6B,gBAAAA,EAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,UAAU;AAAA,YACZ;AAAA,YACA,eAAY;AAAA,YAEX,UAAYjB,KAAAD,IACVmB,gBAAAA,EAAA,IAAAC,GAAA,EAA0B,GAAGN,GAAa,KAAKL,EAAA,CAAa,IAE7DU,gBAAAA,EAAA,IAACE,GAA2B,EAAA,GAAGP,EAAa,CAAA;AAAA,UAAA;AAAA,QAEhD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/lib/sd-component-library58.js

@@ -0,0 +1,67 @@
+import { j as t } from "./sd-component-library169.js";
+import { useState as u } from "react";
+import { Flex as g } from "rebass";
+import { BaseDateInput as C } from "./sd-component-library56.js";
+import { ReactComponent as S } from "./sd-component-library246.js";
+import { Button as D } from "./sd-component-library21.js";
+import { FrMaxContainer as b } from "./sd-component-library33.js";
+const k = (r) => {
+  const {
+    selectedDate: i,
+    onDateSelect: l,
+    minDate: d,
+    maxDate: s,
+    disabled: e,
+    width: c,
+    text: p = "Change date",
+    iconColor: x = "#4568F9",
+    activeIconColor: m = "#9E1CB5",
+    activeText: f = "Select date"
+  } = r, [a, n] = u(!1), h = (o) => {
+    l(o), n(!1);
+  };
+  return /* @__PURE__ */ t.jsx(
+    C,
+    {
+      selectedDate: i,
+      onDateSelect: h,
+      showCalendar: a,
+      minDate: d,
+      maxDate: s,
+      alignCalendar: "right",
+      "data-testid": "buttoned-date-input",
+      children: /* @__PURE__ */ t.jsx(
+        D,
+        {
+          variant: "_cta",
+          width: c,
+          textTransform: "none",
+          borderColor: e ? "cl_grey" : "cl_blue",
+          borderWidth: "1px",
+          bg: e ? "cl_transparent" : "cl_white",
+          color: "cl_grey",
+          fontSize: ["16px"],
+          fontWeight: "300",
+          letterSpacing: ["1px"],
+          disabled: e,
+          padding: ["12px 20px"],
+          onClick: () => n((o) => !o),
+          "data-testid": "outlined-date-input-button",
+          children: /* @__PURE__ */ t.jsxs(b, { gap: ["20px"], children: [
+            /* @__PURE__ */ t.jsx(g, { sx: { textAlign: "left" }, children: a && f || p }),
+            /* @__PURE__ */ t.jsx(
+              S,
+              {
+                stroke: e ? "#9BA2B4" : a && m || x
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  k as OutlinedDateInput
+};
+//# sourceMappingURL=sd-component-library58.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library58.js","sources":["../src/components/inputs/date-inputs/outlined-date-input/outlined-date-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { Flex } from \"rebass\";\n\nimport { Button } from \"../../../buttons\";\nimport { FrMaxContainer } from \"../../../containers\";\nimport { CalendarIcon } from \"../../../icons/calendar-icon\";\nimport { BaseDateInput } from \"../base-date-input\";\nimport { OutlinedDateInputProps } from \"./interfaces\";\n\nexport const OutlinedDateInput: React.FC<OutlinedDateInputProps> = (props) => {\n  const {\n    selectedDate,\n    onDateSelect,\n    minDate,\n    maxDate,\n    disabled,\n    width,\n    text = \"Change date\",\n    iconColor = \"#4568F9\",\n    activeIconColor = \"#9E1CB5\",\n    activeText = \"Select date\",\n  } = props;\n\n  const [showCalendar, setShowCalendar] = useState(false);\n\n  const handleDateSelect = (date: Date) => {\n    onDateSelect(date);\n    setShowCalendar(false);\n  };\n\n  return (\n    <BaseDateInput\n      selectedDate={selectedDate}\n      onDateSelect={handleDateSelect}\n      showCalendar={showCalendar}\n      minDate={minDate}\n      maxDate={maxDate}\n      alignCalendar={\"right\"}\n      data-testid=\"buttoned-date-input\"\n    >\n      <Button\n        variant=\"_cta\"\n        width={width}\n        textTransform=\"none\"\n        borderColor={disabled ? \"cl_grey\" : \"cl_blue\"}\n        borderWidth=\"1px\"\n        bg={disabled ? \"cl_transparent\" : \"cl_white\"}\n        color=\"cl_grey\"\n        fontSize={[\"16px\"]}\n        fontWeight=\"300\"\n        letterSpacing={[\"1px\"]}\n        disabled={disabled}\n        padding={[\"12px 20px\"]}\n        onClick={() => setShowCalendar((prev) => !prev)}\n        data-testid=\"outlined-date-input-button\"\n      >\n        <FrMaxContainer gap={[\"20px\"]}>\n          <Flex sx={{ textAlign: \"left\" }}>\n            {(showCalendar && activeText) || text}\n          </Flex>\n          <CalendarIcon\n            stroke={\n              disabled\n                ? \"#9BA2B4\"\n                : (showCalendar && activeIconColor) || iconColor\n            }\n          />\n        </FrMaxContainer>\n      </Button>\n    </BaseDateInput>\n  );\n};\n"],"names":["OutlinedDateInput","props","selectedDate","onDateSelect","minDate","maxDate","disabled","width","text","iconColor","activeIconColor","activeText","showCalendar","setShowCalendar","useState","handleDateSelect","date","jsx","BaseDateInput","Button","prev","jsxs","FrMaxContainer","Flex","CalendarIcon"],"mappings":";;;;;;;AAUa,MAAAA,IAAsD,CAACC,MAAU;AACtE,QAAA;AAAA,IACJ,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,EACX,IAAAV,GAEE,CAACW,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAmB,CAACC,MAAe;AACvC,IAAAb,EAAaa,CAAI,GACjBH,EAAgB,EAAK;AAAA,EAAA;AAIrB,SAAAI,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAhB;AAAA,MACA,cAAca;AAAA,MACd,cAAAH;AAAA,MACA,SAAAR;AAAA,MACA,SAAAC;AAAA,MACA,eAAe;AAAA,MACf,eAAY;AAAA,MAEZ,UAAAY,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAAZ;AAAA,UACA,eAAc;AAAA,UACd,aAAaD,IAAW,YAAY;AAAA,UACpC,aAAY;AAAA,UACZ,IAAIA,IAAW,mBAAmB;AAAA,UAClC,OAAM;AAAA,UACN,UAAU,CAAC,MAAM;AAAA,UACjB,YAAW;AAAA,UACX,eAAe,CAAC,KAAK;AAAA,UACrB,UAAAA;AAAA,UACA,SAAS,CAAC,WAAW;AAAA,UACrB,SAAS,MAAMO,EAAgB,CAACO,MAAS,CAACA,CAAI;AAAA,UAC9C,eAAY;AAAA,UAEZ,UAACC,gBAAAA,EAAA,KAAAC,GAAA,EAAe,KAAK,CAAC,MAAM,GAC1B,UAAA;AAAA,YAACL,gBAAAA,EAAAA,IAAAM,GAAA,EAAK,IAAI,EAAE,WAAW,OACnB,GAAA,UAAAX,KAAgBD,KAAeH,EACnC,CAAA;AAAA,YACAS,gBAAAA,EAAA;AAAA,cAACO;AAAAA,cAAA;AAAA,gBACC,QACElB,IACI,YACCM,KAAgBF,KAAoBD;AAAA,cAAA;AAAA,YAE7C;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library59.js

@@ -0,0 +1,130 @@
+import { j as e } from "./sd-component-library169.js";
+import { useState as I, useCallback as M, useMemo as v } from "react";
+import { Box as z, Flex as F } from "rebass";
+import { useBreakPoints as O } from "./sd-component-library3.js";
+import { ReactComponent as W } from "./sd-component-library246.js";
+import { BaseLabel as E } from "./sd-component-library193.js";
+import { OutsideClickBox as J } from "./sd-component-library9.js";
+import { BaseDateRangeInput as L } from "./sd-component-library57.js";
+import { IconButton as X } from "./sd-component-library20.js";
+import { RegularText as q } from "./sd-component-library136.js";
+import { Button as A } from "./sd-component-library21.js";
+import { FrMaxContainer as P } from "./sd-component-library33.js";
+const et = (p) => {
+  const {
+    activeIconColor: a = "#9E1CB5",
+    color: m,
+    disabled: o,
+    iconColor: i = "#4568F9",
+    initialRange: u,
+    labelText: s,
+    keepDesktopStyle: f = !1,
+    maxDate: C,
+    minDate: h,
+    onSelect: b,
+    onToggle: t,
+    onCancel: S,
+    text: j = "Select date or time range",
+    zIndex: k = 2,
+    alignCalendar: g = "right",
+    quickSelectionLabel: B,
+    customStaticRanges: y,
+    containerSx: R,
+    useMobileStyles: _
+  } = p, [n, r] = I(!1), l = M(() => {
+    r((x) => (t == null || t(!x), !x));
+  }, [t, r]), c = v(
+    () => /* @__PURE__ */ e.jsx(
+      W,
+      {
+        stroke: o ? "#9BA2B4" : n && a || i
+      }
+    ),
+    [n, a, i, o]
+  ), d = /* @__PURE__ */ e.jsx(q, { fontSize: 16, color: "cl_grey", children: j }), w = /* @__PURE__ */ e.jsx(
+    A,
+    {
+      variant: "_cta",
+      textTransform: "none",
+      borderColor: o ? "cl_grey" : "cl_blue",
+      borderWidth: "1px",
+      bg: o ? "cl_transparent" : "cl_white",
+      color: "cl_grey",
+      fontSize: ["16px"],
+      fontWeight: "300",
+      letterSpacing: ["1px"],
+      disabled: o,
+      padding: ["12px 20px"],
+      onClick: l,
+      "data-testid": "outlined-date-range-input-button",
+      children: /* @__PURE__ */ e.jsxs(P, { gap: ["20px"], children: [
+        d,
+        c
+      ] })
+    }
+  ), { isWiderThanMobile: D } = O();
+  return /* @__PURE__ */ e.jsxs(z, { "data-testid": "outlined-date-range-input", sx: R, children: [
+    s && /* @__PURE__ */ e.jsx(
+      E,
+      {
+        variant: "selectors.tertiary",
+        label: s,
+        mb: ["5px"]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      J,
+      {
+        onClickOutside: () => {
+          r(!1), t == null || t(!1);
+        },
+        sx: { width: "max-content" },
+        children: /* @__PURE__ */ e.jsx(
+          L,
+          {
+            width: [n ? "100%" : "unset", "unset"],
+            initialRange: u,
+            onSelect: b,
+            onCancel: S,
+            onClose: () => {
+              t == null || t(!1), r(!1);
+            },
+            showCalendar: n,
+            minDate: h,
+            maxDate: C,
+            color: m,
+            zIndex: k,
+            alignCalendar: g,
+            quickSelectionLabel: B,
+            customStaticRanges: y,
+            useMobileStyles: _,
+            children: D || f ? w : /* @__PURE__ */ e.jsxs(
+              F,
+              {
+                sx: {
+                  paddingY: "12px",
+                  justifyContent: n ? "space-between" : "center"
+                },
+                children: [
+                  n && d,
+                  /* @__PURE__ */ e.jsx(
+                    X,
+                    {
+                      onClick: l,
+                      "data-testid": "outlined-date-range-input-button",
+                      children: c
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  et as OutlinedDateRangeInput
+};
+//# sourceMappingURL=sd-component-library59.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library59.js","sources":["../src/components/inputs/date-inputs/outlined-date-range-input/outlined-date-range-input.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\n\nimport { Box, Flex } from \"rebass\";\n\nimport { useBreakPoints } from \"../../../../core/custom-hooks\";\nimport { OutsideClickBox } from \"../../../boxes\";\nimport { Button, IconButton } from \"../../../buttons\";\nimport { FrMaxContainer } from \"../../../containers\";\nimport { CalendarIcon } from \"../../../icons/calendar-icon\";\nimport { BaseLabel } from \"../../../labels/base-label\";\nimport { RegularText } from \"../../../texts\";\nimport { BaseDateRangeInput } from \"../base-date-range-input\";\nimport { OutlinedDateRangeInputProps as Props } from \"./interfaces\";\n\nexport const OutlinedDateRangeInput: React.FC<Props> = (props) => {\n  const {\n    activeIconColor = \"#9E1CB5\",\n    color,\n    disabled,\n    iconColor = \"#4568F9\",\n    initialRange,\n    labelText,\n    keepDesktopStyle = false,\n    maxDate,\n    minDate,\n    onSelect,\n    onToggle,\n    onCancel,\n    text = \"Select date or time range\",\n    zIndex = 2,\n    alignCalendar = \"right\",\n    quickSelectionLabel,\n    customStaticRanges,\n    containerSx,\n    useMobileStyles,\n  } = props;\n\n  const [showCalendar, setShowCalendar] = useState(false);\n\n  const handleClick = useCallback(() => {\n    setShowCalendar((prev) => {\n      onToggle?.(!prev);\n      return !prev;\n    });\n  }, [onToggle, setShowCalendar]);\n\n  const icon = useMemo(\n    () => (\n      <CalendarIcon\n        stroke={\n          disabled ? \"#9BA2B4\" : (showCalendar && activeIconColor) || iconColor\n        }\n      />\n    ),\n    [showCalendar, activeIconColor, iconColor, disabled]\n  );\n\n  const textJSX = (\n    <RegularText fontSize={16} color=\"cl_grey\">\n      {text}\n    </RegularText>\n  );\n\n  const desktopJSX = (\n    <Button\n      variant=\"_cta\"\n      textTransform=\"none\"\n      borderColor={disabled ? \"cl_grey\" : \"cl_blue\"}\n      borderWidth=\"1px\"\n      bg={disabled ? \"cl_transparent\" : \"cl_white\"}\n      color=\"cl_grey\"\n      fontSize={[\"16px\"]}\n      fontWeight=\"300\"\n      letterSpacing={[\"1px\"]}\n      disabled={disabled}\n      padding={[\"12px 20px\"]}\n      onClick={handleClick}\n      data-testid=\"outlined-date-range-input-button\"\n    >\n      <FrMaxContainer gap={[\"20px\"]}>\n        {textJSX}\n\n        {icon}\n      </FrMaxContainer>\n    </Button>\n  );\n\n  const { isWiderThanMobile } = useBreakPoints();\n\n  return (\n    <Box data-testid=\"outlined-date-range-input\" sx={containerSx}>\n      {labelText && (\n        <BaseLabel\n          variant={`selectors.tertiary`}\n          label={labelText}\n          mb={[\"5px\"]}\n        />\n      )}\n\n      <OutsideClickBox\n        onClickOutside={() => {\n          setShowCalendar(false);\n          onToggle?.(false);\n        }}\n        sx={{ width: \"max-content\" }}\n      >\n        <BaseDateRangeInput\n          width={[showCalendar ? \"100%\" : \"unset\", \"unset\"]}\n          initialRange={initialRange}\n          onSelect={onSelect}\n          onCancel={onCancel}\n          onClose={() => {\n            onToggle?.(false);\n            setShowCalendar(false);\n          }}\n          showCalendar={showCalendar}\n          minDate={minDate}\n          maxDate={maxDate}\n          color={color}\n          zIndex={zIndex}\n          alignCalendar={alignCalendar}\n          quickSelectionLabel={quickSelectionLabel}\n          customStaticRanges={customStaticRanges}\n          useMobileStyles={useMobileStyles}\n        >\n          {isWiderThanMobile || keepDesktopStyle ? (\n            desktopJSX\n          ) : (\n            <Flex\n              sx={{\n                paddingY: \"12px\",\n                justifyContent: showCalendar ? \"space-between\" : \"center\",\n              }}\n            >\n              {showCalendar && textJSX}\n\n              <IconButton\n                onClick={handleClick}\n                data-testid=\"outlined-date-range-input-button\"\n              >\n                {icon}\n              </IconButton>\n            </Flex>\n          )}\n        </BaseDateRangeInput>\n      </OutsideClickBox>\n    </Box>\n  );\n};\n"],"names":["OutlinedDateRangeInput","props","activeIconColor","color","disabled","iconColor","initialRange","labelText","keepDesktopStyle","maxDate","minDate","onSelect","onToggle","onCancel","text","zIndex","alignCalendar","quickSelectionLabel","customStaticRanges","containerSx","useMobileStyles","showCalendar","setShowCalendar","useState","handleClick","useCallback","prev","icon","useMemo","jsx","CalendarIcon","textJSX","RegularText","desktopJSX","Button","jsxs","FrMaxContainer","isWiderThanMobile","useBreakPoints","Box","BaseLabel","OutsideClickBox","BaseDateRangeInput","Flex","IconButton"],"mappings":"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"}

package/lib/sd-component-library6.js

@@ -0,0 +1,123 @@
+import { j as e } from "./sd-component-library169.js";
+import { useRef as T, useState as q, useCallback as J } from "react";
+import { Box as o } from "rebass";
+import { useResize as K } from "./sd-component-library3.js";
+import { ReactComponent as L } from "./sd-component-library173.js";
+const Z = (p) => {
+  const {
+    width: x = ["100%"],
+    header: m,
+    children: f,
+    contentHash: h = "",
+    hideTitleOnOpen: u,
+    forceOpen: s = !1,
+    isOpen: w,
+    setIsOpen: i,
+    initialIsOpen: C = !1,
+    borderColor: O = "cl_lightGrey",
+    borderStyle: g = "solid",
+    borderWidth: b = "1px",
+    borderRadius: j = "5px",
+    backgroundColor: y,
+    hideArrow: k,
+    p: I,
+    px: R,
+    py: A,
+    m: H,
+    mt: S,
+    mr: v,
+    mb: D,
+    ml: U,
+    onChange: t,
+    arrowMargin: F,
+    isPDFflow: r,
+    arrowColor: l = "cl_blue",
+    openedArrowColor: W
+  } = p, _ = 600, a = T(null), { contentHeight: $ } = K(a, h), [z, B] = q(C), E = i || B, n = i ? w : z, G = J(() => {
+    E((d) => (t == null || t(!d), !d));
+  }, [n, t]), c = n || s, M = !(c && u), P = () => c ? $ : 0;
+  return /* @__PURE__ */ e.jsx(
+    o,
+    {
+      "data-testid": "cl-accordion-container",
+      sx: {
+        fontFamily: "proxima-nova",
+        borderWidth: b,
+        borderStyle: g,
+        borderColor: O,
+        borderRadius: j,
+        width: x,
+        backgroundColor: y,
+        p: I,
+        px: R,
+        py: A,
+        m: H,
+        mt: S,
+        mr: v,
+        mb: D,
+        ml: U,
+        cursor: "pointer"
+      },
+      onClick: G,
+      children: /* @__PURE__ */ e.jsxs(
+        o,
+        {
+          sx: r ? {} : {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ e.jsxs(o, { sx: r ? {} : { flex: "1 1 auto" }, children: [
+              /* @__PURE__ */ e.jsx(
+                o,
+                {
+                  sx: { width: "100%", display: M ? "block" : "none" },
+                  "data-testid": "cl-accordion-header",
+                  children: m
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                o,
+                {
+                  sx: r ? {} : {
+                    overflow: "hidden",
+                    maxHeight: P(),
+                    transition: `max-height ${_}ms`
+                  },
+                  "data-testid": "cl-accordion-content",
+                  children: /* @__PURE__ */ e.jsx(o, { ref: a, children: f })
+                }
+              )
+            ] }),
+            !k && /* @__PURE__ */ e.jsx(
+              o,
+              {
+                sx: {
+                  flex: "0 0 auto",
+                  alignSelf: "flex-start",
+                  display: s ? "none" : "block",
+                  transform: `rotate(${n ? 0 : 180}deg)`,
+                  transition: "transform 0.3s",
+                  cursor: "pointer",
+                  minWidth: "16px",
+                  textAlign: "center",
+                  m: F,
+                  svg: {
+                    fill: n && W || l
+                  }
+                },
+                "data-testid": "cl-accordion-arrow",
+                children: /* @__PURE__ */ e.jsx(L, {})
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Z as Accordion
+};
+//# sourceMappingURL=sd-component-library6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library6.js","sources":["../src/components/accordions/base-accordion/accordion.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useResize } from \"../../../core/custom-hooks\";\nimport { DropdownArrowIcon } from \"./assets\";\nimport { AccordionProps } from \"./interfaces\";\n\n/**\n * Base Accordion component.\n */\nexport const Accordion: React.FC<AccordionProps> = (props) => {\n  const {\n    width = [\"100%\"],\n    header,\n    children,\n    contentHash = \"\",\n    hideTitleOnOpen,\n    forceOpen = false,\n    isOpen: isOpenControlled,\n    setIsOpen: setIsOpenControlled,\n    initialIsOpen = false,\n    borderColor = \"cl_lightGrey\",\n    borderStyle = \"solid\",\n    borderWidth = \"1px\",\n    borderRadius = \"5px\",\n    backgroundColor,\n    hideArrow,\n    p,\n    px,\n    py,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    onChange,\n    arrowMargin,\n    isPDFflow,\n    arrowColor = \"cl_blue\",\n    openedArrowColor,\n  } = props;\n\n  const animationDuration = 600; // ms\n  const contentRef = useRef<HTMLDivElement>(null);\n  const { contentHeight } = useResize(contentRef, contentHash);\n\n  const [isOpenUnControlled, setIsOpenUnControlled] =\n    useState<boolean>(initialIsOpen);\n\n  const setIsOpen = setIsOpenControlled || setIsOpenUnControlled;\n  const isOpen = setIsOpenControlled ? isOpenControlled : isOpenUnControlled;\n\n  const handleClick = useCallback(() => {\n    setIsOpen((prev) => {\n      onChange?.(!prev);\n      return !prev;\n    });\n  }, [isOpen, onChange]);\n\n  const contentOpen = isOpen || forceOpen;\n\n  const showHeader = !(contentOpen && hideTitleOnOpen);\n\n  const maxContentHeight = () => (contentOpen ? contentHeight : 0);\n\n  return (\n    <Box\n      data-testid=\"cl-accordion-container\"\n      sx={{\n        fontFamily: \"proxima-nova\",\n        borderWidth: borderWidth,\n        borderStyle: borderStyle,\n        borderColor: borderColor,\n        borderRadius: borderRadius,\n        width,\n        backgroundColor,\n        p,\n        px,\n        py,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        cursor: \"pointer\",\n      }}\n      onClick={handleClick}\n    >\n      <Box\n        sx={\n          !isPDFflow\n            ? {\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                alignItems: \"flex-start\",\n              }\n            : {}\n        }\n      >\n        <Box sx={isPDFflow ? {} : { flex: \"1 1 auto\" }}>\n          <Box\n            sx={{ width: \"100%\", display: showHeader ? \"block\" : \"none\" }}\n            data-testid=\"cl-accordion-header\"\n          >\n            {header}\n          </Box>\n\n          <Box\n            sx={\n              isPDFflow\n                ? {}\n                : {\n                    overflow: \"hidden\",\n                    maxHeight: maxContentHeight(),\n                    transition: `max-height ${animationDuration}ms`,\n                  }\n            }\n            data-testid=\"cl-accordion-content\"\n          >\n            <Box ref={contentRef}>{children}</Box>\n          </Box>\n        </Box>\n\n        {!hideArrow && (\n          <Box\n            sx={{\n              flex: \"0 0 auto\",\n              alignSelf: \"flex-start\",\n              display: forceOpen ? \"none\" : \"block\",\n              transform: `rotate(${isOpen ? 0 : 180}deg)`,\n              transition: \"transform 0.3s\",\n              cursor: \"pointer\",\n              minWidth: \"16px\",\n              textAlign: \"center\",\n              m: arrowMargin,\n              svg: {\n                fill: isOpen ? openedArrowColor || arrowColor : arrowColor,\n              },\n            }}\n            data-testid=\"cl-accordion-arrow\"\n          >\n            <DropdownArrowIcon />\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Accordion","props","width","header","children","contentHash","hideTitleOnOpen","forceOpen","isOpenControlled","setIsOpenControlled","initialIsOpen","borderColor","borderStyle","borderWidth","borderRadius","backgroundColor","hideArrow","p","px","py","m","mt","mr","mb","ml","onChange","arrowMargin","isPDFflow","arrowColor","openedArrowColor","animationDuration","contentRef","useRef","contentHeight","useResize","isOpenUnControlled","setIsOpenUnControlled","useState","setIsOpen","isOpen","handleClick","useCallback","prev","contentOpen","showHeader","maxContentHeight","jsx","Box","jsxs","DropdownArrowIcon"],"mappings":"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"}