se-design 0.0.117 → 0.0.119

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className=\"min-w-[212px]\">\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAWA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AACF,MAGIC,gBAAAA,EAAAC,cAACZ,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAM,UAAS;AAAA,EACTL,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAK,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAW,GAAGL,EAAYC,IAAI,IAAIY,IAAiBb,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGO,gBAAAA,EAAAA,cAACX,GAAI;AAAA,IAACe,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EACZG,GAAAA,KAAeE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EAAA,GAAgBG,EAAYS,CAAI,CAAO,CACnE;AAAA,CAER;"}
+{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n  popoverClassName?: string;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent,\n  popoverClassName = ''\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className={`min-w-[212px] ${popoverClassName}`}>\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","popoverClassName","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AACrB,MAGIC,gBAAAA,EAAAC,cAACb,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGL,EAAYC,IAAI,IAAIa,IAAiBd,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGQ,gBAAAA,EAAAA,cAACZ,GAAI;AAAA,IAACgB,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,iBAAiBI,CAAgB;AAAA,EAC9CD,GAAAA,KAAeG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}

package/dist/index26.js

@@ -1,49 +1,64 @@
-import a, { useEffect as o } from "react";
-import { Icon as v } from "./index5.js";
+var E = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var b = (a, t, e) => t in a ? E(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e, d = (a, t) => {
+  for (var e in t || (t = {}))
+    N.call(t, e) && b(a, e, t[e]);
+  if (h)
+    for (var e of h(t))
+      _.call(t, e) && b(a, e, t[e]);
+  return a;
+};
+import l, { useEffect as i } from "react";
+import { Icon as x } from "./index5.js";
 /* empty css         */
-const N = (i) => {
+const k = (a) => {
   const {
-    content: c,
-    className: n = "",
-    alignment: m,
-    noShadow: u,
-    position: l = "fxd",
-    isOpen: t,
-    displayCloseSidebar: b,
-    onClose: f,
-    onSidebarUnmount: r,
-    onPathChange: s,
-    style: y,
-    automationId: g,
-    currentPath: d = "",
-    closeSidebarIcon: h = "close"
-  } = i;
-  o(() => () => {
-    r && r();
-  }, []), o(() => (document.body.style.overflow = t ? "hidden" : "scroll", () => {
+    content: t,
+    className: e = "",
+    alignment: f,
+    noShadow: g,
+    position: s = "fixed",
+    isOpen: r,
+    displayCloseSidebar: p,
+    onClose: v,
+    onSidebarUnmount: c,
+    onPathChange: m,
+    style: o,
+    automationId: y,
+    currentPath: u = "",
+    closeSidebarIcon: w = "close"
+  } = a;
+  i(() => () => {
+    c && c();
+  }, []), i(() => (document.body.style.overflow = r ? "hidden" : "scroll", () => {
     document.body.style.overflow = "auto";
-  }), [t]), o(() => {
-    s && s(d);
-  }, [d]);
-  const p = () => {
-    let e = "se-design-sidebar-overlay-container z-[1000]";
-    return e += n.length > 0 ? ` ${n}` : "", e += m === "left" ? " left-aligned" : " right-aligned", e += u ? " no-shadow" : "", e += l.length > 0 ? ` ${l}` : "", e += t ? " open-sidebar" : " closed-sidebar", e;
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: p(),
-    style: y,
-    "data-automation-id": g
-  }, /* @__PURE__ */ a.createElement("div", {
+  }), [r]), i(() => {
+    m && m(u);
+  }, [u]);
+  const S = () => {
+    let n = "se-design-sidebar-overlay-container z-[1000]";
+    return n += e.length > 0 ? ` ${e}` : "", n += f === "left" ? " left-aligned" : " right-aligned", n += g ? " no-shadow" : "", n += s.length > 0 ? ` ${s}` : "", n += r ? " open-sidebar" : " closed-sidebar", n;
+  }, C = () => d(d({}, o), r && (o != null && o.width) ? {
+    width: o == null ? void 0 : o.width
+  } : {
+    width: "0px"
+  });
+  return /* @__PURE__ */ l.createElement("div", {
+    className: S(),
+    style: C(),
+    "data-automation-id": y
+  }, /* @__PURE__ */ l.createElement("div", {
     className: "overlay-content"
-  }, b && /* @__PURE__ */ a.createElement("span", {
+  }, p && /* @__PURE__ */ l.createElement("span", {
     className: "overlay-close",
-    onClick: f,
+    onClick: v,
     "data-automation-id": "sidebar_overlay_close"
-  }, /* @__PURE__ */ a.createElement(v, {
-    name: h
-  })), c));
+  }, /* @__PURE__ */ l.createElement(x, {
+    name: w
+  })), t));
 };
 export {
-  N as SidebarOverlay
+  k as SidebarOverlay
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  position?: 'abs' | 'fxd' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const { content, className = '', alignment, noShadow, position = 'fxd', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  const getSidebarClassName = () => {\n    let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    return defaultClass;\n  };\n\n  return (\n    <div className={getSidebarClassName()} style={style} data-automation-id={automationId}>\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n            <Icon name={closeSidebarIcon} />\n          </span>\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","React","createElement","onClick","name"],"mappings":"AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAAOC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEpNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT;AAGEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,WAAWgB,EAAoB;AAAA,IAAGP,OAAAA;AAAAA,IAAc,sBAAoBC;AAAAA,EAAAA,GACvEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKpB,WAAU;AAAA,EACZK,GAAAA,KACCe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMpB,WAAU;AAAA,IAAgBqB,SAASf;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEc,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC0B,MAAMV;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}
+{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const { content, className = '', alignment, noShadow, position = 'fixed', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  const getSidebarClassName = () => {\n    let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    return defaultClass;\n  };\n\n  const getSidebarStyle = () => {\n    return {\n      ...style,\n      ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n    };\n  };\n\n  return (\n    <div \n      className={getSidebarClassName()} \n      style={getSidebarStyle()} \n      data-automation-id={automationId}\n    >\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n            <Icon name={closeSidebarIcon} />\n          </span>\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","getSidebarStyle","__spreadValues","width","React","createElement","onClick","name"],"mappings":";;;;;;;;;;;AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAASC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEtNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT,GAEME,IAAkBA,MACfC,IAAA,IACFX,IACCL,MAAUK,KAAAA,QAAAA,EAAOY,SAAQ;AAAA,IAAEA,OAAOZ,KAAAA,gBAAAA,EAAOY;AAAAA,EAAAA,IAAU;AAAA,IAAEA,OAAO;AAAA,EAAA;AAKlEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEvB,WAAWgB,EAAoB;AAAA,IAC/BP,OAAOU,EAAgB;AAAA,IACvB,sBAAoBT;AAAAA,EAAAA,GAEpBa,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EACZK,GAAAA,KACCkB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMvB,WAAU;AAAA,IAAgBwB,SAASlB;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEiB,gBAAAA,EAAAA,cAAC3B,GAAI;AAAA,IAAC6B,MAAMb;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}

package/dist/index31.js

@@ -1,54 +1,54 @@
-var f = Object.defineProperty, E = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
-var i = Object.getOwnPropertySymbols;
-var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
-var s = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, d = (e, a) => {
+var f = Object.defineProperty, $ = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var d = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, m = (e, a) => {
   for (var t in a || (a = {}))
-    C.call(a, t) && s(e, t, a[t]);
-  if (i)
-    for (var t of i(a))
-      N.call(a, t) && s(e, t, a[t]);
+    v.call(a, t) && d(e, t, a[t]);
+  if (s)
+    for (var t of s(a))
+      C.call(a, t) && d(e, t, a[t]);
   return e;
-}, m = (e, a) => E(e, v(a));
-import r, { useRef as g } from "react";
-function p(e) {
+}, u = (e, a) => $(e, E(a));
+import r, { useRef as N } from "react";
+function y(e) {
   const {
     label: a,
     value: t,
-    checked: l,
-    disabled: h,
-    name: u,
-    onChange: o,
+    checked: o,
+    disabled: l,
+    name: h,
+    onChange: c,
     width: b,
     radioLabelClassName: x = "",
     radioContainerClassName: w = ""
-  } = e, c = g(null);
+  } = e, n = N(null);
   return /* @__PURE__ */ r.createElement("div", {
-    className: `flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${l ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${w}`,
+    className: `flex items-start gap-2 ${l ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${l ? "opacity-50" : ""} ${w}`,
     onClick: () => {
-      var n;
-      return (n = c.current) == null ? void 0 : n.click();
+      var i;
+      return (i = n.current) == null ? void 0 : i.click();
     },
     style: {
       width: b || "20vw"
     }
   }, /* @__PURE__ */ r.createElement("input", {
-    ref: c,
+    ref: n,
     type: "radio",
     id: t,
-    name: u,
+    name: h,
     value: t,
-    checked: l,
-    disabled: h,
+    checked: o,
+    disabled: l,
     className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
     onChange: () => {
-      o && o(m(d({}, e), {
+      c && c(u(m({}, e), {
         checked: !0
       }));
     }
   }), /* @__PURE__ */ r.createElement("label", {
     htmlFor: t,
-    className: `${e.helperLabel && "flex flex-col"} cursor-pointer`
+    className: `${e.helperLabel && "flex flex-col"} ${l ? "cursor-not-allowed" : "cursor-pointer"}`
   }, /* @__PURE__ */ r.createElement("span", {
     className: `text-sm text-[var(--color-gray-800)] ${x}`
   }, a), e.helperLabel && /* @__PURE__ */ r.createElement("span", {
@@ -56,6 +56,6 @@ function p(e) {
   }, e.helperLabel)));
 }
 export {
-  p as Radio
+  y as Radio
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <input\n        ref={radioRef}\n        type=\"radio\"\n        id={value}\n        name={name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n        onChange={() => {\n          onChange && onChange({ ...props, checked: true });\n        }}\n      />\n      <label htmlFor={value} className={`${props.helperLabel && 'flex flex-col'} cursor-pointer`}>\n        <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,wEAAwEX,IAAU,qBAAqB,kBAAkB,qDAAqDM,CAAuB;AAAA,IAChNM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOW,SAAStB;AAAAA,IAAOY,WAAW,GAAGd,EAAMyB,eAAe,eAAe;AAAA,EAAA,GACvEZ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <input\n        ref={radioRef}\n        type=\"radio\"\n        id={value}\n        name={name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n        onChange={() => {\n          onChange && onChange({ ...props, checked: true });\n        }}\n      />\n      <label\n        htmlFor={value}\n        className={`${props.helperLabel && 'flex flex-col'} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n      >\n        <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,qDAAqDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACvRM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,SAAStB;AAAAA,IACTY,WAAW,GAAGd,EAAMyB,eAAe,eAAe,IAAIrB,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAExGS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}

package/dist/index32.js

@@ -1,15 +1,15 @@
 var d = Object.defineProperty, m = Object.defineProperties;
-var s = Object.getOwnPropertyDescriptors;
-var u = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var f = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
 var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, c = (n, a) => {
   for (var e in a || (a = {}))
     g.call(a, e) && o(n, e, a[e]);
-  if (u)
-    for (var e of u(a))
-      f.call(a, e) && o(n, e, a[e]);
+  if (l)
+    for (var e of l(a))
+      s.call(a, e) && o(n, e, a[e]);
   return n;
-}, l = (n, a) => m(n, s(a));
+}, u = (n, a) => m(n, f(a));
 import i from "react";
 import { Radio as h } from "./index31.js";
 function t() {
@@ -23,12 +23,12 @@ function t() {
 }
 function b(n) {
   const a = (e) => {
-    n.onRadioGroupChange(l(c({}, e), {
+    n.onRadioGroupChange(u(c({}, e), {
       checked: !0
     }));
   };
   return /* @__PURE__ */ i.createElement("div", {
-    className: "flex gap-2"
+    className: `flex gap-2 ${n.direction === "column" ? "flex-col" : "flex-row"}`
   }, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
     key: e.value
   }, e, {

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div className=\"flex gap-2\">\n      {props.options.map((option) => (\n        <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n      ))}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZT,EAAMU,QAAQC,IAAKC,OAClBJ,gBAAAA,EAAAA,cAACK,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUhB;AAAAA,IAAmBK,SAASM,EAAOI,UAAUhB,EAAMgB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}
+{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div className={`flex gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n      {props.options.map((option) => (\n        <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n      ))}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,cAAcT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACjFV,EAAMW,QAAQC,IAAKC,OAClBL,gBAAAA,EAAAA,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUjB;AAAAA,IAAmBK,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}

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