@selfdecode/sd-component-library 4.0.146 → 4.0.148

package/lib/sd-component-library57.js

@@ -1,137 +1,85 @@
-import { j as s } from "./sd-component-library197.js";
-import { useMemo as V, useCallback as $ } from "react";
-import { Select as k } from "@rebass/forms";
-import { generateTestLocator as d } from "./sd-component-library4.js";
-import { getNoTranslateClass as j } from "./sd-component-library112.js";
-import { InputContainer as A } from "./sd-component-library58.js";
-const G = ({
-  defaultOptionObject: r,
-  hideDefaultOnSelect: C,
-  options: l,
-  value: o,
-  onChange: a,
-  disabled: t,
-  disabledTextValue: i,
-  translateSelect: c = !0,
-  translateDefaultOption: m,
-  onFocus: h,
-  id: u,
-  textTransform: f = "none",
-  defaultOptionColor: p = "cl_grey",
-  arrowColor: x = "cl_darkGrey",
-  sx: g,
-  testLocatorId: n
-}) => {
-  const v = V(
-    () => (r ? [r] : []).concat(l),
-    [l, r]
-  ), N = $(
-    (e) => {
-      const M = v.find(
-        ({ title: T }) => T.trim().replaceAll(/\s{2,}/g, " ") === e
-      );
-      a(M);
-    },
-    [a, v]
-  ), S = !l.length, _ = !!r, w = j(
-    m !== !0 && !c || m === !1
-  ), y = j(!c), F = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
-  return /* @__PURE__ */ s.jsx(
-    k,
+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-library246.js";
+import { BaseDateRangeInputMobile as O } from "./sd-component-library247.js";
+import { BaseDateRangeInputDesktop as P } from "./sd-component-library248.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,
     {
-      value: S ? i : o.title.trim(),
-      onChange: (e) => N(e.target.value),
-      variant: "_inputs.v2",
+      "data-testid": "base-date-range-input",
       sx: {
-        pr: "16px",
-        textTransform: f,
-        cursor: "inherit",
-        borderBottomColor: "inherit",
-        ...p && o.value === null ? { color: p } : {},
-        // to override default styles for selector arrow
-        "& + svg": {
-          fill: t ? "cl_lightGrey" : x,
-          transform: `translate(10px, ${F ? 0 : 5}px) scale(.78)`,
-          path: {
-            d: "path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')"
-          }
-        },
-        ...g
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        width: f
       },
-      id: u,
-      disabled: t,
-      onFocus: h,
-      ...d(n),
-      children: S ? /* @__PURE__ */ s.jsx(
-        "option",
-        {
-          ...n ? d(`${n}-disabled-option`) : {},
-          "data-test": "disabled-option",
-          children: i
-        },
-        "disabledTextValue"
-      ) : v.slice(
-        // should default option be hidden?
-        _ && C && o.value !== null ? 1 : 0
-      ).map((e) => /* @__PURE__ */ s.jsx(
-        "option",
-        {
-          "data-testid": "selector-option",
-          ...n ? d(`${n}-option`) : {},
-          value: e.title,
-          className: e.value === null ? w : y,
-          children: e.title
-        },
-        e.id
-      ))
+      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 })
+          }
+        )
+      ]
     }
   );
-}, z = ({
-  defaultOptionObject: r,
-  hideDefaultOnSelect: C,
-  options: l,
-  value: o,
-  onChange: a,
-  disabled: t,
-  disabledTextValue: i,
-  translateSelect: c,
-  translateDefaultOption: m,
-  onFocus: h,
-  id: u,
-  textTransform: f,
-  defaultOptionColor: p,
-  testLocatorId: x,
-  ...g
-}) => /* @__PURE__ */ s.jsx(
-  A,
-  {
-    id: u,
-    cursor: t ? "not-allowed" : "pointer",
-    testLocatorId: x,
-    ...g,
-    children: /* @__PURE__ */ s.jsx(
-      G,
-      {
-        defaultOptionObject: r,
-        hideDefaultOnSelect: C,
-        options: l,
-        value: o,
-        onChange: a,
-        disabled: t,
-        disabledTextValue: i,
-        translateSelect: c,
-        translateDefaultOption: m,
-        onFocus: h,
-        id: u,
-        textTransform: f,
-        defaultOptionColor: p,
-        testLocatorId: x
-      }
-    )
-  }
-);
+};
 export {
-  G as FormV2Selector,
-  z as FormV2SelectorWithContainer
+  J as BaseDateRangeInput
 };
 //# sourceMappingURL=sd-component-library57.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library57.js","sources":["../src/components/forms-v2/form-v2-selector/form-v2-selector.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { Select } from \"@rebass/forms\";\nimport { SxProps } from \"rebass\";\n\nimport { generateTestLocator } from \"../../../core/functions\";\nimport { SelectorOptionV2 } from \"../../selectors\";\nimport { getNoTranslateClass } from \"../../selectors/selector/selector\";\nimport { InputContainer, InputContainerProps } from \"../input-container\";\nimport { FormV2SelectorProps as Props } from \"./interfaces\";\n\nexport const FormV2Selector = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value: selection,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect = true,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform = \"none\",\n  defaultOptionColor = \"cl_grey\",\n  arrowColor = \"cl_darkGrey\",\n  sx,\n  testLocatorId,\n}: Props<T>) => {\n  const allOptions = useMemo<SelectorOptionV2<T | null>[]>(\n    () =>\n      (\n        (defaultOptionObject\n          ? [defaultOptionObject]\n          : []) as SelectorOptionV2<T | null>[]\n      ).concat(options),\n    [options, defaultOptionObject]\n  );\n\n  const onSelect = useCallback(\n    (selectionString: string) => {\n      const newSelection = allOptions.find(\n        ({ title }) =>\n          title.trim().replaceAll(/\\s{2,}/g, \" \") === selectionString\n      )!;\n      onChange(newSelection);\n    },\n    [onChange, allOptions]\n  );\n\n  const noOptionsToSelect = !options.length;\n  const hasDefaultValue = !!defaultOptionObject;\n\n  const defaultOptionClassName = getNoTranslateClass(\n    (translateDefaultOption !== true && !translateSelect) ||\n      translateDefaultOption === false\n  );\n  const regularOptionClassName = getNoTranslateClass(!translateSelect);\n\n  const isFirefox = navigator.userAgent.toLowerCase().indexOf(\"firefox\") > -1;\n\n  return (\n    <Select\n      value={noOptionsToSelect ? disabledTextValue : selection.title.trim()}\n      onChange={(event) => onSelect(event.target.value)}\n      variant=\"_inputs.v2\"\n      sx={\n        {\n          pr: \"16px\",\n          textTransform,\n          cursor: \"inherit\",\n          borderBottomColor: \"inherit\",\n          ...(defaultOptionColor && selection.value === null\n            ? { color: defaultOptionColor }\n            : {}),\n          // to override default styles for selector arrow\n          \"& + svg\": {\n            fill: disabled ? \"cl_lightGrey\" : arrowColor,\n            transform: `translate(10px, ${isFirefox ? 0 : 5}px) scale(.78)`,\n            path: {\n              d: \"path('M12,8.6L6.72,3.29C6.32,2.9,5.68,2.9,5.29,3.29C4.90,3.69,4.9,4.33,5.29,4.73L11.23,10.7C11.44,10.91,11.72,11.01,12,11C12.27,11.01,12.55,10.91,12.76,10.7L18.7,4.73C19.09,4.33,19.09,3.69,18.7,3.29C18.31,2.9,17.67,2.9,17.27,3.29Z M12,8.6')\",\n            },\n          },\n          ...sx,\n        } as SxProps[\"sx\"]\n      }\n      {...{ id, disabled, onFocus }}\n      {...generateTestLocator(testLocatorId)}\n    >\n      {noOptionsToSelect ? (\n        <option\n          key=\"disabledTextValue\"\n          {...(testLocatorId\n            ? generateTestLocator(`${testLocatorId}-disabled-option`)\n            : {})}\n          data-test=\"disabled-option\"\n        >\n          {disabledTextValue}\n        </option>\n      ) : (\n        allOptions\n          .slice(\n            // should default option be hidden?\n            hasDefaultValue && hideDefaultOnSelect && selection.value !== null\n              ? 1\n              : 0\n          )\n          .map((option) => (\n            <option\n              key={option.id}\n              data-testid=\"selector-option\"\n              {...(testLocatorId\n                ? generateTestLocator(`${testLocatorId}-option`)\n                : {})}\n              value={option.title}\n              className={\n                option.value === null\n                  ? defaultOptionClassName\n                  : regularOptionClassName\n              }\n            >\n              {option.title}\n            </option>\n          ))\n      )}\n    </Select>\n  );\n};\n\nexport const FormV2SelectorWithContainer = <T extends string = string>({\n  defaultOptionObject,\n  hideDefaultOnSelect,\n  options,\n  value,\n  onChange,\n  disabled,\n  disabledTextValue,\n  translateSelect,\n  translateDefaultOption,\n  onFocus,\n  id,\n  textTransform,\n  defaultOptionColor,\n  testLocatorId,\n  ...containerProps\n}: Props<T> & InputContainerProps) => (\n  <InputContainer\n    id={id}\n    cursor={disabled ? \"not-allowed\" : \"pointer\"}\n    testLocatorId={testLocatorId}\n    {...containerProps}\n  >\n    <FormV2Selector\n      {...{\n        defaultOptionObject,\n        hideDefaultOnSelect,\n        options,\n        value,\n        onChange,\n        disabled,\n        disabledTextValue,\n        translateSelect,\n        translateDefaultOption,\n        onFocus,\n        id,\n        textTransform,\n        defaultOptionColor,\n        testLocatorId,\n      }}\n    />\n  </InputContainer>\n);\n"],"names":["FormV2Selector","defaultOptionObject","hideDefaultOnSelect","options","selection","onChange","disabled","disabledTextValue","translateSelect","translateDefaultOption","onFocus","id","textTransform","defaultOptionColor","arrowColor","sx","testLocatorId","allOptions","useMemo","onSelect","useCallback","selectionString","newSelection","title","noOptionsToSelect","hasDefaultValue","defaultOptionClassName","getNoTranslateClass","regularOptionClassName","isFirefox","jsx","Select","event","generateTestLocator","option","FormV2SelectorWithContainer","value","containerProps","InputContainer"],"mappings":"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"}
+{"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

@@ -1,105 +1,67 @@
-import { j as l } from "./sd-component-library197.js";
-import { generateTestLocator as x } from "./sd-component-library4.js";
-import T from "./sd-component-library196.js";
-import { InputLabel as z } from "./sd-component-library59.js";
-import { GridContainerV2 as B } from "./sd-component-library38.js";
-import { BaseTextV2 as e } from "./sd-component-library138.js";
-const V = ({
-  gap: r = "0px",
-  cursor: f = "pointer",
-  sx: d,
-  required: m = !1,
-  textAlign: h = "left",
-  width: u = "240px",
-  label: p,
-  labelProps: o,
-  secondaryLabel: c = m ? "*" : void 0,
-  secondaryLabelProps: a = m ? { color: "cl_purple", fontSize: 16, lineHeight: "12px" } : void 0,
-  showErrorMessageText: _ = !0,
-  errorMessage: t,
-  errorMessageProps: n,
-  baseBgColor: j = "white",
-  bg: S = t ? "rgba(255, 0, 0, 0.05)" : j,
-  id: v,
-  children: y,
-  testLocatorId: i,
-  ...C
-}) => /* @__PURE__ */ l.jsxs(
-  B,
-  {
-    width: u,
-    gap: r,
-    bg: S,
-    textAlign: h,
-    ...C,
-    sx: {
-      position: "relative",
-      cursor: f,
-      flexGrow: 1,
-      "> * ": {
-        borderBottomColor: t ? "cl_red" : T.forms._inputs.v2.borderBottomColor
-      },
-      ...d
-    },
-    children: [
-      p && /* @__PURE__ */ l.jsxs(
-        z,
+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-library249.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,
         {
-          htmlFor: v,
-          maxWidth: "100%",
-          color: t ? "cl_red" : "cl_darkGrey",
-          fontSize: 10,
-          fontWeight: "600",
-          ...i ? x(`${i}-primary-label`) : {},
-          ...o,
-          sx: {
-            letterSpacing: "1px",
-            textTransform: "uppercase",
-            cursor: "default",
-            ...o == null ? void 0 : o.sx
-          },
-          children: [
-            p,
-            c && /* @__PURE__ */ l.jsx(
-              e,
+          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,
               {
-                display: "inline-block",
-                textTransform: "uppercase",
-                letterSpacing: "1px",
-                color: "cl_grey",
-                ml: "3px",
-                ...i ? x(`${i}-secondary-label`) : {},
-                ...a,
-                children: c
+                stroke: e ? "#9BA2B4" : a && m || x
               }
             )
-          ]
-        }
-      ),
-      y,
-      _ && !!t && /* @__PURE__ */ l.jsx(
-        e,
-        {
-          fontSize: "12px",
-          lineHeight: "12px",
-          color: "cl_red",
-          maxWidth: "100%",
-          ...n,
-          ...i ? x(`${i}-error-message`) : {},
-          sx: {
-            position: "absolute",
-            top: "calc(100% + 5px)",
-            left: 0,
-            cursor: "default",
-            ...n == null ? void 0 : n.sx
-          },
-          children: t
+          ] })
         }
       )
-    ]
-  }
-);
+    }
+  );
+};
 export {
-  V as InputContainer
+  k as OutlinedDateInput
 };
 //# sourceMappingURL=sd-component-library58.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library58.js","sources":["../src/components/forms-v2/input-container/input-container.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { generateTestLocator } from \"../../../core/functions\";\nimport theme from \"../../../core/theme\";\nimport { Grid } from \"../../containers\";\nimport { BaseTextV2 } from \"../../texts\";\nimport { InputLabel } from \"../input-label\";\nimport { InputContainerProps as Props } from \"./interfaces\";\n\nexport const InputContainer: React.FC<Props> = ({\n  gap = \"0px\",\n  cursor = \"pointer\",\n  sx,\n  required = false,\n  textAlign = \"left\",\n  width = \"240px\",\n  label,\n  labelProps,\n  secondaryLabel = required ? \"*\" : undefined,\n  secondaryLabelProps = required\n    ? { color: \"cl_purple\", fontSize: 16, lineHeight: \"12px\" }\n    : undefined,\n  showErrorMessageText = true,\n  errorMessage,\n  errorMessageProps,\n  baseBgColor = \"white\",\n  bg = errorMessage ? \"rgba(255, 0, 0, 0.05)\" : baseBgColor,\n  id,\n  children,\n  testLocatorId,\n  ...props\n}) => (\n  <Grid\n    {...{ width, gap, bg, textAlign }}\n    {...props}\n    sx={{\n      position: \"relative\",\n      cursor,\n      flexGrow: 1,\n      \"> * \": {\n        borderBottomColor: !!errorMessage\n          ? \"cl_red\"\n          : theme.forms._inputs.v2.borderBottomColor,\n      },\n      ...sx,\n    }}\n  >\n    {label && (\n      <InputLabel\n        htmlFor={id}\n        maxWidth=\"100%\"\n        color={!!errorMessage ? \"cl_red\" : \"cl_darkGrey\"}\n        fontSize={10}\n        fontWeight=\"600\"\n        {...(testLocatorId\n          ? generateTestLocator(`${testLocatorId}-primary-label`)\n          : {})}\n        {...labelProps}\n        sx={{\n          letterSpacing: \"1px\",\n          textTransform: \"uppercase\",\n          cursor: \"default\",\n          ...labelProps?.sx,\n        }}\n      >\n        {label}\n\n        {secondaryLabel && (\n          <BaseTextV2\n            display=\"inline-block\"\n            textTransform=\"uppercase\"\n            letterSpacing=\"1px\"\n            color=\"cl_grey\"\n            ml=\"3px\"\n            {...(testLocatorId\n              ? generateTestLocator(`${testLocatorId}-secondary-label`)\n              : {})}\n            {...secondaryLabelProps}\n          >\n            {secondaryLabel}\n          </BaseTextV2>\n        )}\n      </InputLabel>\n    )}\n\n    {children}\n\n    {showErrorMessageText && !!errorMessage && (\n      <BaseTextV2\n        fontSize=\"12px\"\n        lineHeight=\"12px\"\n        color=\"cl_red\"\n        maxWidth=\"100%\"\n        {...errorMessageProps}\n        {...(testLocatorId\n          ? generateTestLocator(`${testLocatorId}-error-message`)\n          : {})}\n        sx={{\n          position: \"absolute\",\n          top: \"calc(100% + 5px)\",\n          left: 0,\n          cursor: \"default\",\n          ...errorMessageProps?.sx,\n        }}\n      >\n        {errorMessage}\n      </BaseTextV2>\n    )}\n  </Grid>\n);\n"],"names":["InputContainer","gap","cursor","sx","required","textAlign","width","label","labelProps","secondaryLabel","secondaryLabelProps","showErrorMessageText","errorMessage","errorMessageProps","baseBgColor","bg","id","children","testLocatorId","props","jsxs","Grid","theme","InputLabel","generateTestLocator","jsx","BaseTextV2"],"mappings":";;;;;;AASO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,KAAAC,IAAM;AAAA,EACN,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC,IAAiBL,IAAW,MAAM;AAAA,EAClC,qBAAAM,IAAsBN,IAClB,EAAE,OAAO,aAAa,UAAU,IAAI,YAAY,OAChD,IAAA;AAAA,EACJ,sBAAAO,IAAuB;AAAA,EACvB,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,IAAAC,IAAKH,IAAe,0BAA0BE;AAAA,EAC9C,IAAAE;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACO,OAAAf;AAAA,IAAO,KAAAL;AAAA,IAAK,IAAAc;AAAA,IAAI,WAAAV;AAAA,IACrB,GAAGc;AAAA,IACJ,IAAI;AAAA,MACF,UAAU;AAAA,MACV,QAAAjB;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,mBAAqBU,IACjB,WACAU,EAAM,MAAM,QAAQ,GAAG;AAAA,MAC7B;AAAA,MACA,GAAGnB;AAAA,IACL;AAAA,IAEC,UAAA;AAAA,MACCI,KAAAa,gBAAAA,EAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,UAAS;AAAA,UACT,OAASJ,IAAe,WAAW;AAAA,UACnC,UAAU;AAAA,UACV,YAAW;AAAA,UACV,GAAIM,IACDM,EAAoB,GAAGN,CAAa,gBAAgB,IACpD,CAAC;AAAA,UACJ,GAAGV;AAAA,UACJ,IAAI;AAAA,YACF,eAAe;AAAA,YACf,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,GAAGA,KAAA,gBAAAA,EAAY;AAAA,UACjB;AAAA,UAEC,UAAA;AAAA,YAAAD;AAAA,YAEAE,KACCgB,gBAAAA,EAAA;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,eAAc;AAAA,gBACd,eAAc;AAAA,gBACd,OAAM;AAAA,gBACN,IAAG;AAAA,gBACF,GAAIR,IACDM,EAAoB,GAAGN,CAAa,kBAAkB,IACtD,CAAC;AAAA,gBACJ,GAAGR;AAAA,gBAEH,UAAAD;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,MAGDQ;AAAA,MAEAN,KAAwB,CAAC,CAACC,KACzBa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,YAAW;AAAA,UACX,OAAM;AAAA,UACN,UAAS;AAAA,UACR,GAAGb;AAAA,UACH,GAAIK,IACDM,EAAoB,GAAGN,CAAa,gBAAgB,IACpD,CAAC;AAAA,UACL,IAAI;AAAA,YACF,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,GAAGL,KAAA,gBAAAA,EAAmB;AAAA,UACxB;AAAA,UAEC,UAAAD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAEJ;"}
+{"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

@@ -1,7 +1,130 @@
-import { j as m } from "./sd-component-library197.js";
-import { Label as r } from "@rebass/forms";
-const s = ({ sx: o, ...t }) => /* @__PURE__ */ m.jsx(r, { ...t, sx: { fontFamily: "proxima-nova", ...o } });
+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-library249.js";
+import { BaseLabel as E } from "./sd-component-library198.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 {
-  s as InputLabel
+  et as OutlinedDateRangeInput
 };
 //# sourceMappingURL=sd-component-library59.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library59.js","sources":["../src/components/forms-v2/input-label/input-label.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label, LabelProps as Props } from \"@rebass/forms\";\n\nexport const InputLabel: React.FC<Props> = ({ sx, ...props }) => (\n  <Label {...props} sx={{ fontFamily: \"proxima-nova\", ...sx }} />\n);\n"],"names":["InputLabel","sx","props","jsx","Label"],"mappings":";;AAIO,MAAMA,IAA8B,CAAC,EAAE,IAAAC,GAAI,GAAGC,EACnD,MAAAC,gBAAAA,EAAA,IAACC,GAAO,EAAA,GAAGF,GAAO,IAAI,EAAE,YAAY,gBAAgB,GAAGD,IAAM,CAAA;"}
+{"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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"}