se-design 0.0.116 → 0.0.118

package/dist/index37.js

@@ -1,22 +1,26 @@
-import a, { useState as h, useRef as H, useEffect as s, useMemo as _ } from "react";
+import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
 import { Icon as g } from "./index5.js";
-import { LabelChip as $ } from "./index9.js";
-import { debounce as z } from "./index128.js";
+import { LabelChip as D } from "./index9.js";
+import { debounce as F } from "./index136.js";
 /* empty css         */
-function T(r) {
+function q(r) {
   const {
-    disabled: C = !1,
-    placeholder: S = "Search",
+    disabled: v = !1,
+    placeholder: N = "Search",
     debounceDuration: f = 500,
     onInputChange: l = () => {
     },
-    onSearchClear: k = () => {
+    onSearchClear: S = () => {
+    },
+    onChipRemove: I = () => {
     },
     updateSearchString: i = "",
     collapsible: p = !1,
-    width: v = "200px",
-    chips: m = []
-  } = r, [t, d] = h(""), [o, b] = h(!(r != null && r.collapsible)), [n, x] = h(m || []), c = H(null);
+    width: k = "200px",
+    chips: m = [],
+    showSearchIcon: w = !0,
+    renderFilterComponent: b = null
+  } = r, [t, d] = h(""), [o, E] = h(!(r != null && r.collapsible)), [a, x] = h(m || []), c = $(null);
   s(() => {
     o && c.current && setTimeout(() => {
       var e;
@@ -27,55 +31,59 @@ function T(r) {
   }, [i]), s(() => {
     x(m);
   }, [m]);
-  const u = _(() => z(l, f), [l, f]);
+  const u = z(() => F(l, f), [l, f]);
   s(() => () => {
     u.cancel();
   }, [u]);
-  const I = (e) => {
+  const y = (e) => {
     d(e), u(e);
-  }, N = () => {
-    d(""), l(""), k();
-  }, w = () => {
-    p && (t == null ? void 0 : t.trimEnd()) === "" && b(!1);
-  }, y = (e) => {
-    x(n.filter((B) => B !== e));
-  }, E = (n == null ? void 0 : n.length) > 0;
-  return /* @__PURE__ */ a.createElement("div", {
+  }, B = () => {
+    d(""), l(""), S();
+  }, H = () => {
+    p && (t == null ? void 0 : t.trimEnd()) === "" && E(!1);
+  }, _ = (e) => {
+    x(a.filter((R) => R !== e)), I(e);
+  }, C = (a == null ? void 0 : a.length) > 0;
+  return /* @__PURE__ */ n.createElement("div", {
     className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
     style: {
-      width: v
+      width: k
     }
-  }, o && /* @__PURE__ */ a.createElement("div", {
-    className: `chips-and-search-box-container${E ? " has-chips" : ""}`
-  }, E && (n == null ? void 0 : n.map((e) => /* @__PURE__ */ a.createElement($, {
+  }, o && /* @__PURE__ */ n.createElement("div", {
+    className: "search-box-container"
+  }, /* @__PURE__ */ n.createElement("div", {
+    className: `chips-and-search-box-container${C ? " has-chips" : ""}`
+  }, C && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
     key: e,
     label: e,
     icon: "close",
-    onIconClick: () => y(e),
-    size: "sm"
-  }))), /* @__PURE__ */ a.createElement("div", {
+    onIconClick: () => _(e),
+    size: "lg"
+  }))), /* @__PURE__ */ n.createElement("div", {
     className: "search-input-container"
-  }, /* @__PURE__ */ a.createElement(g, {
+  }, w && /* @__PURE__ */ n.createElement(g, {
     name: "search",
     className: "search-icon img-wrap",
-    onClick: () => p && b((e) => !e)
-  }), /* @__PURE__ */ a.createElement("input", {
+    onClick: () => p && E((e) => !e)
+  }), /* @__PURE__ */ n.createElement("input", {
     ref: c,
     className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
     id: "search_bar",
     type: "text",
-    placeholder: S,
-    onChange: (e) => I(e.target.value),
+    placeholder: N,
+    onChange: (e) => y(e.target.value),
     value: t,
-    disabled: C,
-    onBlur: w
-  }), !!t && /* @__PURE__ */ a.createElement(g, {
+    disabled: v,
+    onBlur: H
+  }), !!t && /* @__PURE__ */ n.createElement(g, {
     name: "close",
     className: "cross-icon img-wrap",
-    onClick: N
-  }))));
+    onClick: B
+  }))), b && /* @__PURE__ */ n.createElement("div", {
+    className: "filter-component-container"
+  }, b())));
 }
 export {
-  T as SearchBox
+  q as SearchBox
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\n\nexport interface SearchBoxProps {\n    disabled?: boolean,\n    placeholder?: string,\n    debounceDuration?: number,\n    onInputChange?: (value: string) => void,\n    onSearchClear?: () => void,\n    updateSearchString?: string,\n    collapsible?: boolean,\n    width?: string,\n    chips?: string[]\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n    const {\n        disabled = false,\n        placeholder = 'Search',\n        debounceDuration = 500,\n        onInputChange = () => {},\n        onSearchClear = () => {},\n        updateSearchString = '',\n        collapsible = false,\n        width = '200px',\n        chips = []\n    } = props;\n    const [inputValue, setInputValue] = useState('');\n    const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n    const [searchChips, setSearchChips] = useState<string[]>(chips || []);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (isExpanded && inputRef.current) {\n          setTimeout(() => inputRef?.current?.focus(), 0);\n        }\n      }, [isExpanded]);\n    \n      // Manually update the searchbox text\n      useEffect(() => {\n        if (updateSearchString !== inputValue) {\n          setInputValue(updateSearchString);\n        }\n      }, [updateSearchString]);\n\n      useEffect(() => {\n        setSearchChips(chips);\n      }, [chips]);\n\n      \n        \n    const debouncedOnInputChange = useMemo(\n        () => debounce(onInputChange, debounceDuration),\n        [onInputChange, debounceDuration]\n    );\n\n    useEffect(() => {\n        return () => {\n        debouncedOnInputChange.cancel();\n        };\n    }, [debouncedOnInputChange]);\n\n\n    const onChangeHandler = (value: string) => {\n        setInputValue(value);\n        debouncedOnInputChange(value);\n    };\n\n    const iconClickHandler = () => {\n        setInputValue('');\n        onInputChange('');\n        onSearchClear();\n    };\n\n    const onBlurHandler = () => {\n        if (collapsible && inputValue?.trimEnd() === '') {\n            setIsExpanded(false);\n        }\n    };\n\n    const removeChip = (chip: string) => {\n        setSearchChips(searchChips.filter((c) => c !== chip));\n    }\n\n    const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n        {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n        {isExpanded && (\n            <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n                {hasChips && searchChips?.map((chip) => (\n                    <LabelChip key={chip} label={chip} icon=\"close\" onIconClick={() => removeChip(chip)} size=\"sm\" />\n                ))}\n                <div className=\"search-input-container\">\n                    <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} />\n                    <input\n                        ref={inputRef}\n                        className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                        id=\"search_bar\"\n                        type=\"text\"\n                        placeholder={placeholder}\n                        onChange={(e) => onChangeHandler(e.target.value)}\n                        value={inputValue}\n                        disabled={disabled}\n                        onBlur={onBlurHandler}\n                    />\n                    {!!inputValue && (\n                        <Icon\n                            name=\"close\"\n                            className=\"cross-icon img-wrap\"\n                            onClick={iconClickHandler}\n                        />\n                    )}\n                </div>\n            </div>\n        )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","updateSearchString","collapsible","width","chips","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","size","Icon","name","onClick","prev","ref","id","type","onChange","e","target","onBlur"],"mappings":"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"}
+{"version":3,"file":"index37.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: string) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: string[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<string[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: string) => {\n    setSearchChips(searchChips.filter((c) => c !== chip));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip key={chip} label={chip} icon=\"close\" onIconClick={() => removeChip(chip)} size=\"lg\" />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","size","Icon","name","onClick","prev","ref","id","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index42.js

@@ -9,7 +9,7 @@ var b = (e, t, a) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writab
       h.call(t, a) && b(e, a, t[a]);
   return e;
 };
-var $ = (e, t) => {
+var S = (e, t) => {
   var a = {};
   for (var l in e)
     x.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
@@ -18,23 +18,23 @@ var $ = (e, t) => {
       t.indexOf(l) < 0 && h.call(e, l) && (a[l] = e[l]);
   return a;
 };
-import r, { useRef as q, useEffect as y } from "react";
+import n, { useRef as q, useEffect as $ } from "react";
 /* empty css         */
-const J = /* @__PURE__ */ r.memo((z) => {
+const J = /* @__PURE__ */ n.memo((z) => {
   var N = z, {
     value: e,
     onChange: t,
     disabled: a = !1,
     maxLength: l,
-    tag: B = "input",
+    tag: y = "input",
     error: s = !1,
-    errorMessage: L,
+    errorMessage: B,
     label: E,
-    placeholder: S,
+    placeholder: L,
     suggestions: i = [],
     customRenderSuggestions: o,
     onSuggestionClick: v
-  } = N, _ = $(N, [
+  } = N, _ = S(N, [
     "value",
     "onChange",
     "disabled",
@@ -48,62 +48,62 @@ const J = /* @__PURE__ */ r.memo((z) => {
     "customRenderSuggestions",
     "onSuggestionClick"
   ]);
-  const [d, f] = r.useState([...i]), [A, p] = r.useState(!1), u = q(null), F = r.useCallback((c) => {
-    const n = c.target.value;
+  const [d, f] = n.useState([...i]), [A, u] = n.useState(!1), p = q(null), F = n.useCallback((c) => {
+    const r = c.target.value;
     if (o)
-      t(n, !1);
-    else if (t(n), n === "")
+      t(r, !1);
+    else if (t(r), r === "")
       f([...i]);
-    else if (n) {
+    else if (r) {
       const V = i == null ? void 0 : i.filter((C) => {
         var k;
-        return typeof C == "string" && C.toLowerCase().includes((k = n == null ? void 0 : n.toLowerCase()) != null ? k : "");
+        return typeof C == "string" && C.toLowerCase().includes((k = r == null ? void 0 : r.toLowerCase()) != null ? k : "");
       });
-      f(V);
+      f([...V]);
     }
   }, [t, i, o]);
-  y(() => {
-    o && f([...i]);
-  }, [i]), y(() => {
-    const c = (n) => {
-      u.current && !u.current.contains(n.target) && p(!1);
+  $(() => {
+    f([...i]);
+  }, [i]), $(() => {
+    const c = (r) => {
+      p.current && !p.current.contains(r.target) && u(!1);
     };
     return document.addEventListener("mousedown", c), () => {
       document.removeEventListener("mousedown", c);
     };
   }, []);
   const O = () => {
-    p(!0);
+    u(!0);
   }, w = (c) => {
-    t(c, !0), p(!1), v && v(c);
+    t(c, !0), u(!1), v && v(c);
   };
-  return /* @__PURE__ */ r.createElement("div", {
+  return /* @__PURE__ */ n.createElement("div", {
     className: "main-container-autocomplete-se-design",
-    ref: u
-  }, E && /* @__PURE__ */ r.createElement("label", {
+    ref: p
+  }, E && /* @__PURE__ */ n.createElement("label", {
     className: "label-container"
-  }, E), /* @__PURE__ */ r.createElement(B, I({
+  }, E), /* @__PURE__ */ n.createElement(y, I({
     value: e,
     onChange: F,
     onClick: O,
     disabled: a,
     className: `${s ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
     maxLength: l,
-    placeholder: S
-  }, _)), /* @__PURE__ */ r.createElement("div", {
+    placeholder: L
+  }, _)), A && d.length > 0 && /* @__PURE__ */ n.createElement("div", {
+    className: "suggestions-list"
+  }, o ? o(d, w) : d.map((c, r) => /* @__PURE__ */ n.createElement("div", {
+    key: r,
+    className: "suggestion-item",
+    onClick: () => w(c)
+  }, c))), /* @__PURE__ */ n.createElement("div", {
     className: `${s ? "error-and-max-word" : "max-word-container"}`
-  }, s && /* @__PURE__ */ r.createElement("div", {
+  }, s && /* @__PURE__ */ n.createElement("div", {
     id: "error-message",
     className: "error-message"
-  }, L), l && /* @__PURE__ */ r.createElement("div", {
+  }, B), l && /* @__PURE__ */ n.createElement("div", {
     className: "max-word"
-  }, e.length, "/", l)), A && d.length > 0 && /* @__PURE__ */ r.createElement("div", {
-    className: "suggestions-list"
-  }, o ? o(d, w) : d.map((c, n) => /* @__PURE__ */ r.createElement("div", {
-    key: n,
-    className: "suggestion-item",
-    onClick: () => w(c)
-  }, c))));
+  }, e.length, "/", l)));
 });
 export {
   J as AutoCompleteInput

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions(filtered);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      if (customRenderSuggestions) {\n        setFilteredSuggestions([...suggestions]);\n      }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        {React.createElement(tag, {\n          value: value,\n          onChange: handleInputChange,\n          onClick: handleInputClick,\n          disabled,\n          className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n          maxLength,\n          placeholder,\n          ...props\n        })}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {customRenderSuggestions\n              ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n              : filteredSuggestions.map((suggestion, index) => (\n                  <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                    {suggestion}\n                  </div>\n                ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","__spreadValues","onClick","id","length","map","index","key"],"mappings":"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"}
+{"version":3,"file":"index42.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        {React.createElement(tag, {\n          value: value,\n          onChange: handleInputChange,\n          onClick: handleInputClick,\n          disabled,\n          className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n          maxLength,\n          placeholder,\n          ...props\n        })}\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {customRenderSuggestions\n              ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n              : filteredSuggestions.map((suggestion, index) => (\n                  <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                    {suggestion}\n                  </div>\n                ))}\n          </div>\n        )}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","__spreadValues","onClick","length","map","index","key","id"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBaA,OAAAA,KAAAA,UAAAA,GAAAA,aAAAA,SAAAA;AAAAA,OAAAA;AAAAA,MAAAA,IAA4DC,gBAAAA,EAAAA,KACvE,CAACC,MAcK;AAdL,MAAAC,IAAAD,GACCE;AAAAA,WAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,UAAAA,IAAW;AAAA,IACXC,WAAAA;AAAAA,IACAC,KAAAA,IAAM;AAAA,IACNC,OAAAA,IAAQ;AAAA,IACRC,cAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA,IAAc,CAAE;AAAA,IAChBC,yBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,EAbSf,IACVG,GAaIa,IAAAA,EAbJb,GAaIa;AAAAA,IAZHZ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGM,QAAA,CAACE,GAAqBC,CAAsB,IAAIC,EAAMC,SAAmB,CAAC,GAAGP,CAAW,CAAC,GACzF,CAACQ,GAAwBC,CAAuB,IAAIH,EAAMC,SAAkB,EAAK,GACjFG,IAAeC,EAAuB,IAAI,GAE1CC,IAAoBN,EAAMO,YAC9B,CAACC,MAA2C;AACpCC,UAAAA,IAAaD,EAAEE,OAAOzB;AAE5B,QAAIU;AACFT,MAAAA,EAASuB,GAAY,EAAK;AAAA,aAE1BvB,EAASuB,CAAU,GACfA,MAAe;AACM,MAAAV,EAAA,CAAC,GAAGL,CAAW,CAAC;AAAA,aAC9Be,GAAY;AACrB,YAAME,IAAWjB,KAAAA,gBAAAA,EAAakB,OAC3BC,CAAAA,MAAAA;AAhCFhC,YAAAA;AAiCG,sBAAOgC,KAAe,YAAYA,EAAWC,cAAcC,UAASN,IAAAA,KAAAA,gBAAAA,EAAYK,kBAAZL,OAAAA,IAA6B,EAAE;AAAA;AAEhF,MAAAV,EAAA,CAAC,GAAGY,CAAQ,CAAC;AAAA,IAAA;AAAA,EAI1C,GAAA,CAACzB,GAAUQ,GAAaC,CAAuB,CACjD;AAEAqB,EAAAA,EAAU,MAAM;AAES,IAAAjB,EAAA,CAAC,GAAGL,CAAW,CAAC;AAAA,EAAA,GAEtC,CAACA,CAAW,CAAC,GAEhBsB,EAAU,MAAM;AACRC,UAAAA,IAAqBA,CAACC,MAAsB;AAC5Cd,MAAAA,EAAae,WAAW,CAACf,EAAae,QAAQC,SAASF,EAAMR,MAAc,KAC7EP,EAAwB,EAAK;AAAA,IAEjC;AAESkB,oBAAAA,iBAAiB,aAAaJ,CAAkB,GAClD,MAAM;AACFK,eAAAA,oBAAoB,aAAaL,CAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,EAAE;AAEL,QAAMM,IAAmBA,MAAM;AAC7BpB,IAAAA,EAAwB,EAAI;AAAA,EAC9B,GAEMqB,IAAwBA,CAACX,MAAuB;AACpD3B,IAAAA,EAAS2B,GAAY,EAAI,GACzBV,EAAwB,EAAK,GAC7BP,KAAqBA,EAAkBiB,CAAU;AAAA,EACnD;AAGEb,SAAAA,gBAAAA,EAAAyB,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAwCC,KAAKvB;AAAAA,EACzDZ,GAAAA,KAASiC,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOC,WAAU;AAAA,EAAmBlC,GAAAA,CAAa,GAC1DQ,gBAAAA,EAAMyB,cAAcpC,GAAKuC,EAAA;AAAA,IACxB3C,OAAAA;AAAAA,IACAC,UAAUoB;AAAAA,IACVuB,SAASN;AAAAA,IACTpC,UAAAA;AAAAA,IACAuC,WAAW,GAAGpC,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHC,WAAAA;AAAAA,IACAK,aAAAA;AAAAA,KACGI,EACJ,GACAK,KAA0BJ,EAAoBgC,SAAS,KACtD9B,gBAAAA,EAAAyB,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZ/B,GAAAA,IACGA,EAAwBG,GAAqB0B,CAAqB,IAClE1B,EAAoBiC,IAAI,CAAClB,GAAYmB,MACnChC,gBAAAA,EAAAyB,cAAA,OAAA;AAAA,IAAKQ,KAAKD;AAAAA,IAAON,WAAU;AAAA,IAAkBG,SAASA,MAAML,EAAsBX,CAAU;AAAA,KACzFA,CACE,CACN,CACF,GAEPb,gBAAAA,EAAAyB,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGpC,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KACCmC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKS,IAAG;AAAA,IAAgBR,WAAU;AAAA,KAC/BnC,CACE,GAENH,KACCY,gBAAAA,EAAAyB,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KACZzC,EAAM6C,QAAO,KAAE1C,CACb,CAEJ,CACF;AAET,CACF;"}

package/dist/index43.js

@@ -1,6 +1,6 @@
 import t, { useState as o, useRef as R, useEffect as C } from "react";
 /* empty css         */
-import c from "./index136.js";
+import c from "./index144.js";
 import { Icon as g } from "./index5.js";
 const O = ({
   onCountrycodeChange: E,

package/dist/index48.js

@@ -1,5 +1,295 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
+import r, { useState as k } from "react";
+import { Button as E } from "./index3.js";
+import { Icon as x } from "./index5.js";
+import { CustomModal as ce } from "./index11.js";
+import { Dropdown as B } from "./index23.js";
+/* empty css         */
+const ie = ["S", "M", "T", "W", "T", "F", "S"], ue = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], N = [{
+  value: "january",
+  label: "January"
+}, {
+  value: "february",
+  label: "February"
+}, {
+  value: "march",
+  label: "March"
+}, {
+  value: "april",
+  label: "April"
+}, {
+  value: "may",
+  label: "May"
+}, {
+  value: "june",
+  label: "June"
+}, {
+  value: "july",
+  label: "July"
+}, {
+  value: "august",
+  label: "August"
+}, {
+  value: "september",
+  label: "September"
+}, {
+  value: "october",
+  label: "October"
+}, {
+  value: "november",
+  label: "November"
+}, {
+  value: "december",
+  label: "December"
+}], we = ({
+  title: R = "Select modified date",
+  isOpen: z = !0,
+  initialStartDate: C,
+  initialEndDate: S,
+  onApply: Y,
+  onClose: H,
+  shouldAllowFutureDateSelection: g = !1,
+  minYearOption: _,
+  showQuickActions: q = !0
+}) => {
+  const J = () => {
+    if (C && S)
+      return {
+        startDate: C,
+        endDate: S
+      };
+    const t = /* @__PURE__ */ new Date();
+    t.setHours(23, 59, 59, 999);
+    const e = /* @__PURE__ */ new Date();
+    return e.setHours(0, 0, 0, 0), {
+      startDate: e,
+      endDate: t
+    };
+  }, P = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    return e.setMonth(t.getMonth() - 1), t.setDate(1), t.setHours(0, 0, 0, 0), e.setDate(1), e.setHours(0, 0, 0, 0), [e, t];
+  }, [o, b] = k(J), [$, De] = k(P), [f, T] = k(() => $[0]), [M, F] = k(() => $[1]), Q = (t, e) => new Date(t, e + 1, 0).getDate(), U = (t, e) => new Date(t, e, 1).getDay(), V = (t, e) => {
+    const a = Q(t, e), s = U(t, e), c = [];
+    for (let l = 0; l < s; l++)
+      c.push(null);
+    for (let l = 1; l <= a; l++)
+      c.push(new Date(t, e, l));
+    return c;
+  }, v = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), G = (t) => {
+    if (!o.startDate || !o.endDate) return !1;
+    const e = new Date(t);
+    e.setHours(12, 0, 0, 0);
+    const a = new Date(o.startDate);
+    a.setHours(0, 0, 0, 0);
+    const s = new Date(o.endDate);
+    return s.setHours(23, 59, 59, 999), e >= a && e <= s;
+  }, K = (t) => {
+    const e = /* @__PURE__ */ new Date();
+    return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
+  }, O = (t) => {
+    if (!t) return !0;
+    if (g) return !1;
+    const e = /* @__PURE__ */ new Date();
+    return e.setHours(0, 0, 0, 0), t > e;
+  }, X = (t) => {
+    if (O(t)) return;
+    const e = new Date(t);
+    if (e.setHours(12, 0, 0, 0), !o.startDate || o.endDate)
+      b({
+        startDate: e,
+        endDate: null
+      });
+    else {
+      const a = new Date(o.startDate);
+      a.setHours(12, 0, 0, 0);
+      const s = e > a ? e : a, c = e > a ? a : e;
+      b({
+        startDate: c,
+        endDate: s
+      });
+    }
+  }, L = (t, e) => {
+    const a = new Date(t);
+    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
+  }, W = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], w = (t, e) => {
+    if (e) {
+      const [a, s] = W(t, M);
+      T(a), s !== M && F(s);
+    } else {
+      const [a, s] = W(f, t);
+      a !== f && T(a), F(s);
+    }
+  }, Z = (t) => o != null && o.startDate ? v(t, o.startDate) : !1, ee = (t) => o != null && o.endDate ? v(t, o == null ? void 0 : o.endDate) : !1, te = (t) => !o.startDate || !o.endDate ? !1 : v(o.startDate, o.endDate) && v(t, o.startDate), ae = (t) => {
+    const e = _ || t - 10, s = (g ? t + 10 : t) - e + 1;
+    return Array.from({
+      length: s
+    }, (c, l) => ({
+      value: e + l,
+      label: (e + l).toString()
+    })).filter((c) => g ? !0 : c.value <= t);
+  }, ne = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), b({
+      startDate: e,
+      endDate: t
+    });
+  }, m = (t) => {
+    const e = new Date(t);
+    return e.setHours(0, 0, 0, 0), e;
+  }, d = (t) => {
+    const e = new Date(t);
+    return e.setHours(23, 59, 59, 999), e;
+  }, re = (t) => {
+    const e = /* @__PURE__ */ new Date();
+    let a = /* @__PURE__ */ new Date(), s = /* @__PURE__ */ new Date();
+    switch (t) {
+      case "Today":
+        a = m(e), s = d(e);
+        break;
+      case "Yesterday":
+        a = m(new Date(e.setDate(e.getDate() - 1))), s = d(new Date(e));
+        break;
+      case "This Week":
+        const c = new Date(e.setDate(e.getDate() - e.getDay()));
+        a = m(c), s = d(/* @__PURE__ */ new Date());
+        break;
+      case "Last Week":
+        const l = new Date(e.setDate(e.getDate() - e.getDay() - 7)), p = new Date(e.setDate(l.getDate() + 6));
+        a = m(l), s = d(p);
+        break;
+      case "This Month":
+        a = m(new Date(e.getFullYear(), e.getMonth(), 1)), s = d(/* @__PURE__ */ new Date());
+        break;
+      case "Last Month":
+        a = m(new Date(e.getFullYear(), e.getMonth() - 1, 1)), s = d(new Date(e.getFullYear(), e.getMonth(), 0));
+        break;
+    }
+    b({
+      startDate: a,
+      endDate: s
+    });
+  }, oe = () => /* @__PURE__ */ r.createElement("div", {
+    className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
+  }, /* @__PURE__ */ r.createElement("div", {
+    className: "flex flex-col gap-3"
+  }, ue.map((t) => /* @__PURE__ */ r.createElement(E, {
+    key: t,
+    label: t,
+    type: "link",
+    onClick: () => re(t)
+  })))), se = () => {
+    Y && o.startDate && o.endDate && Y(o);
+  }, j = (t) => {
+    const e = t.getFullYear(), a = t.getMonth(), s = V(e, a), c = (/* @__PURE__ */ new Date()).getFullYear(), l = t.getTime() === f.getTime(), p = ae(c);
+    return /* @__PURE__ */ r.createElement("div", {
+      className: "w-fit p-4"
+    }, /* @__PURE__ */ r.createElement("div", {
+      className: "flex justify-between items-center"
+    }, /* @__PURE__ */ r.createElement(x, {
+      name: "chevron",
+      rotation: "90",
+      size: 16,
+      onClick: () => {
+        const n = L(t, !1);
+        w(n, l);
+      },
+      className: "datepicker-navigation-icon"
+    }), /* @__PURE__ */ r.createElement("div", {
+      className: "flex gap-2"
+    }, /* @__PURE__ */ r.createElement(B, {
+      type: "select",
+      dropDownOptions: N,
+      defaultSelectedValue: N[a],
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      onOptionClick: (n) => {
+        const u = new Date(t);
+        u.setMonth(N.findIndex((i) => i.value === n.value)), w(u, l);
+      },
+      className: "w-[124px] dropdown-option-container"
+    }), /* @__PURE__ */ r.createElement(B, {
+      type: "select",
+      dropDownOptions: p,
+      defaultSelectedValue: p.find((n) => n.value === e),
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      onOptionClick: (n) => {
+        const u = new Date(t);
+        u.setFullYear(n.value), w(u, l);
+      },
+      className: "w-[104px] dropdown-option-container"
+    })), /* @__PURE__ */ r.createElement(x, {
+      name: "chevron",
+      rotation: "270",
+      size: 16,
+      className: `datepicker-navigation-icon ${!g && a === (/* @__PURE__ */ new Date()).getMonth() && e === (/* @__PURE__ */ new Date()).getFullYear() ? "disabled" : ""}`,
+      onClick: () => {
+        const n = L(t, !0);
+        w(n, l);
+      }
+    })), /* @__PURE__ */ r.createElement("div", {
+      className: "grid grid-cols-7 gap-2 mt-3"
+    }, ie.map((n, u) => /* @__PURE__ */ r.createElement("div", {
+      key: `${n}-${u}`,
+      className: "datepicker-weekdays"
+    }, n)), s.map((n, u) => {
+      const i = n && Z(n), D = n && ee(n), y = n && te(n), I = n && !i && !D && G(n), A = n && K(n), h = O(n);
+      return /* @__PURE__ */ r.createElement("div", {
+        key: `${n}-${u}`,
+        onClick: () => !h && n && X(n),
+        className: `
+                  relative h-10 w-10 flex items-center justify-center transition-colors rounded-md
+                  ${h ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
+                  ${y ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                  ${!y && i ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                  ${!y && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                  ${!i && !D && I ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)]" : ""}
+                  ${!i && !D && !I && !h ? "hover:bg-[var(--color-blue-100)]" : ""}
+                  ${A && !i && !D ? "text-[var(--color-blue-500)]" : ""}
+                  ${!h && !i && !D && !A ? "text-[var(--color-gray-700)]" : ""}
+                `
+      }, n ? /* @__PURE__ */ r.createElement(r.Fragment, null, n.getDate(), !y && (i || D) && /* @__PURE__ */ r.createElement("div", {
+        className: `absolute top-0 bottom-0 ${i ? "right-[-8px]" : "left-[-8px]"} w-[8px]
+                        bg-[var(--color-blue-100)] -z-10`
+      })) : "");
+    })));
+  }, le = () => /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-datepicker flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max"
+  }, /* @__PURE__ */ r.createElement("div", {
+    className: "flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
+  }, /* @__PURE__ */ r.createElement("h2", {
+    className: "datepicker-title"
+  }, R), H && /* @__PURE__ */ r.createElement(x, {
+    name: "close",
+    size: 16,
+    onClick: H,
+    className: "cursor-pointer"
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "flex"
+  }, q && oe(), /* @__PURE__ */ r.createElement("div", {
+    className: "flex"
+  }, j(f), /* @__PURE__ */ r.createElement("div", {
+    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]"
+  }), j(M))), /* @__PURE__ */ r.createElement("div", {
+    className: "flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
+  }, /* @__PURE__ */ r.createElement(E, {
+    label: "Clear",
+    type: "link",
+    onClick: ne
+  }), /* @__PURE__ */ r.createElement(E, {
+    label: "Apply",
+    type: "primary",
+    onClick: se
+  })));
+  return /* @__PURE__ */ r.createElement(ce, {
+    renderModalContent: le,
+    width: "fit-content",
+    isOpen: z,
+    className: "custom-modal-style "
+  });
+};
 export {
-  e as default
+  we as DatePicker
 };
 //# sourceMappingURL=index48.js.map