se-design 0.0.113 → 0.0.115

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}
+{"version":3,"file":"index35.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder }: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-container\" onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\n                    {tag} \n                    <span\n                    className=\"close-icon-in-inputwithtags\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        const newTags = tags.filter((_, i) => i !== index);\n                        setTags(newTags);\n                        onChange?.(newTags);\n                    }}\n                    >\n                        <Icon name=\"close\" />\n                    </span>\n                </span>\n            ))}\n            <input\n                className=\"input-with-tags-input\"\n                ref={inputRef}\n                type=\"text\"\n                value={inputValue}\n                onChange={(e) => setInputValue(e.target.value)}\n                onKeyDown={handleKeyDown}\n                placeholder={placeholder}\n            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","className","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AASO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAgC,GAAG;AAC1E,QAAA,CAACC,GAAMC,CAAO,IAAIR,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACK,GAAYC,CAAa,IAAIV,EAAS,EAAE,GACzCW,IAAWV,EAAyB,IAAI,GAExCW,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBL,KAAAA,QAAAA,EAAWY;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,SAASA,MAAAA;AArBrD,UAAAC;AAqB2Db,cAAAA,IAAAA,EAASc,YAATd,gBAAAA,EAAkBe;AAAAA;AAAAA,EAAM,GAC7EnB,EAAKoB,IAAI,CAACC,GAAKC,MACZT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKe;AAAAA,IAAOP,WAAU;AAAA,EACvBM,GAAAA,GACDP,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAC,WAAU;AAAA,IACVC,SAAUV,CAAMA,MAAA;AACZA,MAAAA,EAAEiB,gBAAgB;AAClB,YAAMb,IAAUV,EAAKwB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDrB,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDd,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIC,WAAU;AAAA,IACVa,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLhC,OAAOK;AAAAA,IACPJ,UAAWQ,CAAAA,MAAMH,EAAcG,EAAEwB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAW1B;AAAAA,IACXN,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}

package/dist/index36.js

@@ -1,81 +1,41 @@
-import a, { useState as h, useRef as H, useEffect as s, useMemo as _ } from "react";
-import { Icon as g } from "./index4.js";
-import { LabelChip as $ } from "./index8.js";
-import { debounce as z } from "./index124.js";
+import e from "react";
 /* empty css         */
-function T(r) {
-  const {
-    disabled: C = !1,
-    placeholder: S = "Search",
-    debounceDuration: f = 500,
-    onInputChange: l = () => {
-    },
-    onSearchClear: k = () => {
-    },
-    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);
-  s(() => {
-    o && c.current && setTimeout(() => {
-      var e;
-      return (e = c == null ? void 0 : c.current) == null ? void 0 : e.focus();
-    }, 0);
-  }, [o]), s(() => {
-    i !== t && d(i);
-  }, [i]), s(() => {
-    x(m);
-  }, [m]);
-  const u = _(() => z(l, f), [l, f]);
-  s(() => () => {
-    u.cancel();
-  }, [u]);
-  const I = (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", {
-    className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
-    style: {
-      width: v
-    }
-  }, 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($, {
-    key: e,
-    label: e,
-    icon: "close",
-    onIconClick: () => y(e),
-    size: "sm"
-  }))), /* @__PURE__ */ a.createElement("div", {
-    className: "search-input-container"
-  }, /* @__PURE__ */ a.createElement(g, {
-    name: "search",
-    className: "search-icon img-wrap",
-    onClick: () => p && b((e) => !e)
-  }), /* @__PURE__ */ a.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),
-    value: t,
-    disabled: C,
-    onBlur: w
-  }), !!t && /* @__PURE__ */ a.createElement(g, {
-    name: "close",
-    className: "cross-icon img-wrap",
-    onClick: N
-  }))));
+function f({
+  value: n,
+  onChange: i,
+  disabled: r,
+  maxLength: t,
+  tag: m,
+  error: a,
+  errorMessage: o,
+  label: c,
+  placeholder: s,
+  style: l,
+  inputStyle: d
+}) {
+  const p = m || "input";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "main-container",
+    style: l
+  }, c && /* @__PURE__ */ e.createElement("div", {
+    className: "label-container"
+  }, c), /* @__PURE__ */ e.createElement(p, {
+    value: n,
+    onChange: (E) => i(E.target.value),
+    disabled: r,
+    className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
+    maxlength: t || void 0,
+    placeholder: s,
+    style: d
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: `${a ? "error-and-max-word" : "max-word-container"}`
+  }, a && /* @__PURE__ */ e.createElement("div", {
+    className: "error-message"
+  }, o), t && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, t && (n == null ? void 0 : n.length) + "/" + t)));
 }
 export {
-  T as SearchBox
+  f as Input
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.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":";;;;;AAoBO,SAASA,EAAUC,GAAuB;AACvC,QAAA;AAAA,IACFC,UAAAA,IAAW;AAAA,IACXC,aAAAA,IAAc;AAAA,IACdC,kBAAAA,IAAmB;AAAA,IACnBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,oBAAAA,IAAqB;AAAA,IACrBC,aAAAA,IAAc;AAAA,IACdC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,CAAA;AAAA,EAAA,IACRT,GACE,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAACZ,KAAAA,QAAAA,EAAOO,YAAW,GAC1D,CAACQ,GAAaC,CAAc,IAAIJ,EAAmBH,KAAS,CAAA,CAAE,GAC9DQ,IAAWC,EAAyB,IAAI;AAE9CC,EAAAA,EAAU,MAAM;AACRN,IAAAA,KAAcI,EAASG,WACzBC,WAAW,MAAA;;AAAMJ,cAAAA,IAAAA,KAAAA,gBAAAA,EAAUG,YAAVH,gBAAAA,EAAmBK;AAAAA,OAAS,CAAC;AAAA,EAChD,GACC,CAACT,CAAU,CAAC,GAGfM,EAAU,MAAM;AACd,IAAIb,MAAuBI,KACzBC,EAAcL,CAAkB;AAAA,EAClC,GACC,CAACA,CAAkB,CAAC,GAEvBa,EAAU,MAAM;AACdH,IAAAA,EAAeP,CAAK;AAAA,EAAA,GACnB,CAACA,CAAK,CAAC;AAINc,QAAAA,IAAyBC,EAC3B,MAAMC,EAASrB,GAAeD,CAAgB,GAC9C,CAACC,GAAeD,CAAgB,CACpC;AAEAgB,EAAAA,EAAU,MACC,MAAM;AACbI,IAAAA,EAAuBG,OAAO;AAAA,EAC9B,GACD,CAACH,CAAsB,CAAC;AAGrBI,QAAAA,IAAkBA,CAACC,MAAkB;AACvCjB,IAAAA,EAAciB,CAAK,GACnBL,EAAuBK,CAAK;AAAA,EAChC,GAEMC,IAAmBA,MAAM;AAC3BlB,IAAAA,EAAc,EAAE,GAChBP,EAAc,EAAE,GACFC,EAAA;AAAA,EAClB,GAEMyB,IAAgBA,MAAM;AACxB,IAAIvB,MAAeG,KAAAA,gBAAAA,EAAYqB,eAAc,MACzCjB,EAAc,EAAK;AAAA,EAE3B,GAEMkB,IAAaA,CAACC,MAAiB;AACjCjB,IAAAA,EAAeD,EAAYmB,OAAQC,CAAMA,MAAAA,MAAMF,CAAI,CAAC;AAAA,EACxD,GAEMG,KAAWrB,KAAAA,gBAAAA,EAAasB,UAAS;AAGvCC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,iBAAiB3B,IAAa,eAAe,YAAY;AAAA,IAAI4B,OAAO;AAAA,MAAEjC,OAAAA;AAAAA,IAAAA;AAAAA,EAEjFK,GAAAA,KACG0B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,iCAAiCJ,IAAW,eAAe,EAAE;AAAA,EAAA,GACxEA,MAAYrB,KAAAA,gBAAAA,EAAa2B,IAAKT,CAC3BK,MAAAA,gBAAAA,EAAAC,cAACI,GAAS;AAAA,IAACC,KAAKX;AAAAA,IAAMY,OAAOZ;AAAAA,IAAMa,MAAK;AAAA,IAAQC,aAAaA,MAAMf,EAAWC,CAAI;AAAA,IAAGe,MAAK;AAAA,EAAM,CAAA,KAEpGV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACXD,gBAAAA,EAAAA,cAACU,GAAI;AAAA,IAACC,MAAK;AAAA,IAASV,WAAU;AAAA,IAAuBW,SAASA,MAAM5C,KAAeO,EAAesC,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,CAAI,GACpHb,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACIc,KAAKpC;AAAAA,IACLuB,WAAW;AAAA,IACXc,IAAG;AAAA,IACHC,MAAK;AAAA,IACLrD,aAAAA;AAAAA,IACAsD,UAAWC,CAAAA,MAAM9B,EAAgB8B,EAAEC,OAAO9B,KAAK;AAAA,IAC/CA,OAAOlB;AAAAA,IACPT,UAAAA;AAAAA,IACA0D,QAAQ7B;AAAAA,EACX,CAAA,GACA,CAAC,CAACpB,KACC4B,gBAAAA,EAAAC,cAACU,GAAI;AAAA,IACDC,MAAK;AAAA,IACLV,WAAU;AAAA,IACVW,SAAStB;AAAAA,EACZ,CAAA,CAEJ,CACJ,CAER;AAET;"}
+{"version":3,"file":"index36.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}

package/dist/index37.js

@@ -1,37 +1,81 @@
-import e from "react";
+import a, { useState as h, useRef as H, useEffect as s, useMemo as _ } from "react";
+import { Icon as g } from "./index5.js";
+import { LabelChip as $ } from "./index9.js";
+import { debounce as z } from "./index127.js";
 /* empty css         */
-const r = {
-  progressBarCtn: "flex items-center gap-2",
-  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
-  progressBarProgress: "h-full rounded-[12px]",
-  stepsCount: "steps-count"
-}, d = ({
-  totalTasks: t = 0,
-  completedTasks: o = 0,
-  progressBarCtnClassName: n = "",
-  needPercentageCompleted: c = !0,
-  progressBarColor: s
-}) => {
-  const a = t > 0 ? o / t * 100 : 0;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+function T(r) {
+  const {
+    disabled: C = !1,
+    placeholder: S = "Search",
+    debounceDuration: f = 500,
+    onInputChange: l = () => {
+    },
+    onSearchClear: k = () => {
+    },
+    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);
+  s(() => {
+    o && c.current && setTimeout(() => {
+      var e;
+      return (e = c == null ? void 0 : c.current) == null ? void 0 : e.focus();
+    }, 0);
+  }, [o]), s(() => {
+    i !== t && d(i);
+  }, [i]), s(() => {
+    x(m);
+  }, [m]);
+  const u = _(() => z(l, f), [l, f]);
+  s(() => () => {
+    u.cancel();
+  }, [u]);
+  const I = (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", {
+    className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
     style: {
-      width: "100%"
+      width: v
     }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBar
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBarProgress,
-    style: {
-      width: `${a}%`,
-      background: `${s || "linear-gradient(to right, var(--color-green-500), var(--color-green-400))"}`,
-      transition: "width 0.4s ease-in-out"
-    }
-  })), c && /* @__PURE__ */ e.createElement("div", {
-    className: r.stepsCount
-  }, `${Math.round(a)}% completed`));
-};
+  }, 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($, {
+    key: e,
+    label: e,
+    icon: "close",
+    onIconClick: () => y(e),
+    size: "sm"
+  }))), /* @__PURE__ */ a.createElement("div", {
+    className: "search-input-container"
+  }, /* @__PURE__ */ a.createElement(g, {
+    name: "search",
+    className: "search-icon img-wrap",
+    onClick: () => p && b((e) => !e)
+  }), /* @__PURE__ */ a.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),
+    value: t,
+    disabled: C,
+    onBlur: w
+  }), !!t && /* @__PURE__ */ a.createElement(g, {
+    name: "close",
+    className: "cross-icon img-wrap",
+    onClick: N
+  }))));
+}
 export {
-  d as ProgressBar
+  T as SearchBox
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(to right, var(--color-green-500), var(--color-green-400))'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,2EAA2E;AAAA,MAChIO,YAAY;AAAA,IAAA;AAAA,EAEV,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
+{"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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"}

package/dist/index38.js

@@ -1,55 +1,37 @@
-import e, { useState as g, useRef as p } from "react";
-import { Icon as s } from "./index4.js";
-import { ProgressBar as x } from "./index37.js";
+import e from "react";
 /* empty css         */
 const r = {
-  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
-  accordionCtn: "flex items-center justify-between",
-  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
-  icon: "transition-transform duration-300 cursor-pointer",
-  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
-}, v = ({
-  widgetClassName: l = "",
-  actionItems: a = []
+  progressBarCtn: "flex items-center gap-2",
+  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
+  progressBarProgress: "h-full rounded-[12px]",
+  stepsCount: "steps-count"
+}, d = ({
+  totalTasks: t = 0,
+  completedTasks: o = 0,
+  progressBarCtnClassName: n = "",
+  needPercentageCompleted: c = !0,
+  progressBarColor: s
 }) => {
-  var c;
-  const [n, i] = g(!1), o = p(null), d = () => {
-    i(!n);
-  };
+  const a = t > 0 ? o / t * 100 : 0;
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
+    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+    style: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.progressBar
   }, /* @__PURE__ */ e.createElement("div", {
-    className: r.accordionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "title text-[var(--color-gray-900)]"
-  }, "Get Started"), /* @__PURE__ */ e.createElement(s, {
-    name: "chevron-down",
-    className: `${r.icon} ${n ? "rotate-180" : ""}`,
-    onClick: d
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
-    totalTasks: a.length,
-    completedTasks: a.filter((t) => t.isComplete).length,
-    progressBarCtnClassName: "get-started-progress-bar-ctn"
-  })), /* @__PURE__ */ e.createElement("div", {
-    ref: o,
-    className: r.gettingStartedWidgetContent,
+    className: r.progressBarProgress,
     style: {
-      maxHeight: n ? `${(c = o.current) == null ? void 0 : c.scrollHeight}px` : "0px"
+      width: `${a}%`,
+      background: `${s || "linear-gradient(to right, var(--color-green-500), var(--color-green-400))"}`,
+      transition: "width 0.4s ease-in-out"
     }
-  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
-    key: m,
-    className: r.actionItemCtn
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: t.isComplete ? "checked-circle-green" : "checked-circle-disabled"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
-    onClick: t == null ? void 0 : t.handleActionItemClick
-  }, t.label)))));
+  })), c && /* @__PURE__ */ e.createElement("div", {
+    className: r.stepsCount
+  }, `${Math.round(a)}% completed`));
 };
 export {
-  v as GetStartedWidget,
-  v as default
+  d as ProgressBar
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron-down\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={item.isComplete ? \"checked-circle-green\" : \"checked-circle-disabled\"} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","_a","isExpanded","setIsExpanded","contentRef","toggleAccordion","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","isComplete","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AAXN,MAAAC;AAYE,QAAM,CAACC,GAAYC,CAAa,IAAIf,EAAS,EAAK,GAC5CgB,IAAaf,EAAuB,IAAI,GAExCgB,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGEI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKf,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEc,gBAAAA,EAAAC,cAACjB,GAAI;AAAA,IAACkB,MAAK;AAAA,IAAehB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIO,SAASJ;AAAAA,EAAkB,CAAA,CACpH,GACLC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAA,cAAChB,GAAW;AAAA,IAACmB,YAAYV,EAAYW;AAAAA,IACrCC,gBAAgBZ,EAAYa,OAAOC,CAAQA,MAAAA,EAAKC,UAAU,EAAEJ;AAAAA,IAC5DK,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEU,KAAKb;AAAAA,IACLZ,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWjB,IAAa,IAAGE,IAAAA,EAAWgB,YAAXhB,gBAAAA,EAAoBiB,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACR,GAAMS,MACtBjB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKiB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAA,cAACjB,GAAI;AAAA,IAACkB,MAAMM,EAAKC,aAAa,yBAAyB;AAAA,EAAA,CAA4B,GACnFR,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAWsB,EAAKC,aAAa,iCAAiC;AAAA,IAA+CN,SAASK,KAAAA,gBAAAA,EAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index38.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(to right, var(--color-green-500), var(--color-green-400))'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,2EAA2E;AAAA,MAChIO,YAAY;AAAA,IAAA;AAAA,EAEV,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index39.js

@@ -1,74 +1,56 @@
-import e, { useState as x } from "react";
-import { Icon as l } from "./index4.js";
-import { Button as p } from "./index3.js";
+import t, { useState as p, useRef as f } from "react";
+import { Icon as s } from "./index5.js";
+import { ProgressBar as x } from "./index38.js";
 /* empty css         */
 const r = {
-  messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
-  messageCtn: "flex items-center justify-center gap-2 flex-wrap px-4 pr-12",
-  info: "bg-[var(--color-yellow-50)]",
-  alert: "bg-[var(--color-red-500)]",
-  nudge: "bg-[var(--color-blue-500)]",
-  infoMessage: "text-[var(--color-yellow-700)] text-center",
-  alertMessage: "text-[var(--color-white)] text-center",
-  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1",
-  customInfoClassBtn: "bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]",
-  customAlertClassBtn: "bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]",
-  customNudgeClassBtn: "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]"
-}, I = ({
-  messageBarCtnClassName: s = "",
-  messageBarType: o = "info",
-  message: a = "",
-  hasCloseIcon: c = !1,
-  hasButton: n = !1,
-  buttonLabel: i = "",
-  buttonOnClick: m = () => {
-  },
-  handleClose: t = () => {
-  }
+  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
+  accordionCtn: "flex items-center justify-between",
+  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
+  icon: "transition-transform duration-300 cursor-pointer",
+  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
+}, N = ({
+  widgetClassName: l = "",
+  actionItems: a = []
 }) => {
-  const [u, v] = x(!0), b = e.useCallback(() => {
-    v(!1);
-    const h = setTimeout(() => {
-      t == null || t();
-    }, 300);
-    return () => clearTimeout(h);
-  }, [t]), f = o === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
-    switch (o) {
-      case "info":
-        return r.customInfoClassBtn;
-      case "alert":
-        return r.customAlertClassBtn;
-      case "nudge":
-        return r.customNudgeClassBtn;
-      default:
-        return "";
+  var c;
+  const [n, i] = p(!1), o = f(null), d = () => {
+    i(!n);
+  }, m = (e) => e ? "var(--color-green-500)" : "var(--color-gray-200)";
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: r.accordionCtn
+  }, /* @__PURE__ */ t.createElement("span", {
+    className: "title text-[var(--color-gray-900)]"
+  }, "Get Started"), /* @__PURE__ */ t.createElement(s, {
+    name: "chevron",
+    className: `${r.icon} ${n ? "rotate-180" : ""}`,
+    onClick: d
+  })), /* @__PURE__ */ t.createElement("div", {
+    className: "mt-[12px]"
+  }, /* @__PURE__ */ t.createElement(x, {
+    totalTasks: a.length,
+    completedTasks: a.filter((e) => e.isComplete).length,
+    progressBarCtnClassName: "get-started-progress-bar-ctn"
+  })), /* @__PURE__ */ t.createElement("div", {
+    ref: o,
+    className: r.gettingStartedWidgetContent,
+    style: {
+      maxHeight: n ? `${(c = o.current) == null ? void 0 : c.scrollHeight}px` : "0px"
     }
-  }, [o]), d = o === "info" ? "info-brown" : "info-white", w = o === "info" ? "close" : "white-close";
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${s} ${r.messageBarCtn} ${r[o]} ${u ? "show" : "hide"}`
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.messageCtn
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "inline-flex items-center"
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: f
-  }, /* @__PURE__ */ e.createElement(l, {
-    name: d,
-    className: "inline-block h-fit relative top-[3px] mr-1"
-  }), a, n && /* @__PURE__ */ e.createElement(p, {
-    label: i,
-    type: "primary",
-    size: "sm",
-    onClick: m,
-    className: `${g} ml-2 alert-btn`
-  })))), c && /* @__PURE__ */ e.createElement(l, {
-    name: w,
-    className: r.closeIconCtn,
-    onClick: b
-  }));
+  }, a.map((e, g) => /* @__PURE__ */ t.createElement("div", {
+    key: g,
+    className: r.actionItemCtn
+  }, /* @__PURE__ */ t.createElement(s, {
+    name: "checked-circle",
+    stroke: m(e.isComplete)
+  }), /* @__PURE__ */ t.createElement("span", {
+    className: e.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
+    onClick: e == null ? void 0 : e.handleActionItemClick
+  }, e.label)))));
 };
 export {
-  I as MessageBar,
-  I as default
+  N as GetStartedWidget,
+  N as default
 };
 //# sourceMappingURL=index39.js.map