se-design 0.0.103 → 0.0.104

package/dist/index16.js

@@ -1,39 +1,40 @@
-var c = Object.getOwnPropertySymbols;
-var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
-var i = (t, l) => {
-  var n = {};
+var i = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var f = (t, n) => {
+  var l = {};
   for (var e in t)
-    E.call(t, e) && l.indexOf(e) < 0 && (n[e] = t[e]);
-  if (t != null && c)
-    for (var e of c(t))
-      l.indexOf(e) < 0 && v.call(t, e) && (n[e] = t[e]);
-  return n;
+    v.call(t, e) && n.indexOf(e) < 0 && (l[e] = t[e]);
+  if (t != null && i)
+    for (var e of i(t))
+      n.indexOf(e) < 0 && w.call(t, e) && (l[e] = t[e]);
+  return l;
 };
-import r, { useRef as y, useEffect as w } from "react";
-import { TableContentLoader as O } from "./index21.js";
+import r, { useRef as y, useEffect as O } from "react";
+import { TableContentLoader as T } from "./index21.js";
 function a() {
   return a = Object.assign ? Object.assign.bind() : function(t) {
-    for (var l = 1; l < arguments.length; l++) {
-      var n = arguments[l];
-      for (var e in n) ({}).hasOwnProperty.call(n, e) && (t[e] = n[e]);
+    for (var n = 1; n < arguments.length; n++) {
+      var l = arguments[n];
+      for (var e in l) ({}).hasOwnProperty.call(l, e) && (t[e] = l[e]);
     }
     return t;
   }, a.apply(null, arguments);
 }
-const _ = (x) => {
-  var s = x, {
+const h = (C) => {
+  var c = C, {
     className: t = "",
-    automationId: l = "",
-    loading: n,
+    automationId: n = "",
+    loading: l,
     headerColSpan: e = [],
     headerData: o,
-    tableData: f,
-    renderTableContentLoader: T,
+    tableData: s,
+    renderTableContentLoader: x,
     getTableHeaders: m,
     getTableBody: b,
-    onSortUiUpdate: g,
+    getTableFooter: g,
+    onSortUiUpdate: d,
     onRowClick: p
-  } = s, d = i(s, [
+  } = c, E = f(c, [
     "className",
     "automationId",
     "loading",
@@ -43,33 +44,39 @@ const _ = (x) => {
     "renderTableContentLoader",
     "getTableHeaders",
     "getTableBody",
+    "getTableFooter",
     "onSortUiUpdate",
     "onRowClick"
   ]);
   const u = y(null);
-  return w(() => {
+  return O(() => {
     u.current && console.log("Table initialized!");
   }, []), /* @__PURE__ */ r.createElement("div", a({
     className: "se-design-table-layout-wrapper" + (t.length > 0 ? ` ${t}` : "")
-  }, d), /* @__PURE__ */ r.createElement("table", {
+  }, E), /* @__PURE__ */ r.createElement("table", {
     className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
     ref: u,
-    "data-automation-id": l
+    "data-automation-id": n
   }, /* @__PURE__ */ r.createElement("thead", null, /* @__PURE__ */ r.createElement("tr", null, m({
     headerData: o,
     sortData: {},
-    onSortUiUpdate: g,
-    loading: n
-  }))), /* @__PURE__ */ r.createElement("tbody", null, n ? /* @__PURE__ */ r.createElement(O, {
+    onSortUiUpdate: d,
+    loading: l
+  }))), /* @__PURE__ */ r.createElement("tbody", null, l ? /* @__PURE__ */ r.createElement(T, {
     noOfColumns: o == null ? void 0 : o.length,
     colSpan: e
   }) : b({
-    tableData: f,
+    tableData: s,
     onRowClick: p,
-    loading: n
-  }))));
+    loading: l
+  }))), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-table-footer w-full bg-[var(--color-white)]"
+  }, g({
+    tableData: s,
+    loading: l
+  })));
 };
 export {
-  _ as TableLayout
+  h as TableLayout
 };
 //# sourceMappingURL=index16.js.map

package/dist/index16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index16.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[], sortData: any, onSortUiUpdate: any, loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[], onRowClick: any, loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  onSortUiUpdate,\n  onRowClick,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    if (tableRef.current) {\n      console.log('Table initialized!');\n    }\n  }, []);\n\n  return (\n    <div className={'se-design-table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '')} {...props}>\n      <table\n        className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n        ref={tableRef}\n        data-automation-id={automationId}\n      >\n        <thead>\n          <tr>\n            {getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}\n          </tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["TableLayout","_a","_b","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","onSortUiUpdate","onRowClick","props","tableRef","useRef","useEffect","current","console","log","React","createElement","_extends","length","ref","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,IAAoCA,CAACC,MAa5C;AAb4C,MAAAC,IAAAD,GAChDE;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,SAAAA;AAAAA,IACAC,eAAAA,IAAgB,CAAE;AAAA,IAClBC,YAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,0BAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,YAAAA;AAAAA,MAXgDX,GAY7CY,IAAAA,EAZ6CZ,GAY7CY;AAAAA,IAXHX;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGME,QAAAA,IAAWC,EAAyB,IAAI;AAE9CC,SAAAA,EAAU,MAAM;AACd,IAAIF,EAASG,WACXC,QAAQC,IAAI,oBAAoB;AAAA,EAEpC,GAAG,EAAE,GAGHC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,oCAAoCA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK;AAAA,EAASW,GAAAA,CAAK,GACzGO,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW;AAAA,IACXsB,KAAKV;AAAAA,IACL,sBAAoBX;AAAAA,EAAAA,qBAEpBkB,cAAA,SAAA,MACEA,gBAAAA,EAAAA,cACGZ,MAAAA,MAAAA,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYmB,UAAU,CAAC;AAAA,IAAGd,gBAAAA;AAAAA,IAAgBP,SAAAA;AAAAA,EAAAA,CAAS,CACpE,CACC,GACPgB,gBAAAA,EAAAC,cACGjB,SAAAA,MAAAA,IACCiB,gBAAAA,EAAAA,cAACK,GAAkB;AAAA,IAACC,aAAarB,KAAAA,gBAAAA,EAAYiB;AAAAA,IAAQK,SAASvB;AAAAA,EAAgB,CAAA,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWK,YAAAA;AAAAA,IAAYR,SAAAA;AAAAA,EAAS,CAAA,CAE5C,CACF,CACJ;AAET;"}
+{"version":3,"file":"index16.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n  getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  getTableFooter,\n  onSortUiUpdate,\n  onRowClick,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    if (tableRef.current) {\n      console.log('Table initialized!');\n    }\n  }, []);\n\n  return (\n    <div className={'se-design-table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '')} {...props}>\n      <table\n        className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n        ref={tableRef}\n        data-automation-id={automationId}\n      >\n        <thead>\n          <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)]\">\n        {getTableFooter({ tableData, loading })}\n      </div>\n    </div>\n  );\n};\n"],"names":["TableLayout","_a","_b","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","props","tableRef","useRef","useEffect","current","console","log","React","createElement","_extends","length","ref","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAMA,IAAoCA,CAACC,MAc5C;AAd4C,MAAAC,IAAAD,GAChDE;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,SAAAA;AAAAA,IACAC,eAAAA,IAAgB,CAAE;AAAA,IAClBC,YAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,0BAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,YAAAA;AAAAA,MAZgDZ,GAa7Ca,IAAAA,EAb6Cb,GAa7Ca;AAAAA,IAZHZ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGME,QAAAA,IAAWC,EAAyB,IAAI;AAE9CC,SAAAA,EAAU,MAAM;AACd,IAAIF,EAASG,WACXC,QAAQC,IAAI,oBAAoB;AAAA,EAEpC,GAAG,EAAE,GAGHC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKrB,WAAW,oCAAoCA,EAAUsB,SAAS,IAAI,IAAItB,CAAS,KAAK;AAAA,EAASY,GAAAA,CAAK,GACzGO,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEpB,WAAW;AAAA,IACXuB,KAAKV;AAAAA,IACL,sBAAoBZ;AAAAA,EAAAA,qBAEpBmB,cAAA,SAAA,MACEA,gBAAAA,EAAAA,cAAKb,MAAAA,MAAAA,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYoB,UAAU,CAAC;AAAA,IAAGd,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPiB,gBAAAA,EAAAC,cACGlB,SAAAA,MAAAA,IACCkB,gBAAAA,EAAAA,cAACK,GAAkB;AAAA,IAACC,aAAatB,KAAAA,gBAAAA,EAAYkB;AAAAA,IAAQK,SAASxB;AAAAA,EAAgB,CAAA,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAS,CAAA,CAE5C,CACF,GACPiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,WAAU;AAAA,KACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAS,CAAA,CACnC,CACF;AAET;"}

package/dist/index17.js

@@ -1,29 +1,42 @@
-import g, { useState as h, useEffect as i } from "react";
-const x = ({
-  className: n = "",
-  automationId: s = "",
-  defaultChecked: r = !1,
-  disabled: o = !1,
-  onChange: t
+import s, { useState as x, useEffect as f } from "react";
+/* empty css        */
+const d = ({
+  className: u = "",
+  automationId: a = "",
+  defaultChecked: o = !1,
+  disabled: e = !1,
+  onChange: i,
+  checkMarkType: c = "",
+  label: r = ""
 }) => {
-  const [e, c] = h(r);
-  i(() => {
-    o || c(r);
-  }, [r]);
-  const l = () => {
-    const a = !e;
-    c(a), t && t(a);
-  }, u = o ? "bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed" : e ? "text-[var(--color-blue-500)]" : "text-[var(--color-white)]";
-  return /* @__PURE__ */ g.createElement("input", {
+  const [n, l] = x(o);
+  f(() => {
+    l(o);
+  }, [o]);
+  const m = () => {
+    e || (l((t) => !t), i == null || i(!n));
+  }, b = () => {
+    const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
+    return e && !c ? "disabled" : e && c === "tick" ? "disabled-tick" : e && c === "minus-checkbox" ? "disabled-minus-checkbox" : c === "minus-checkbox" && n ? `minus-checkbox ${t}` : n ? `checked ${t}` : `unchecked ${t}`;
+  };
+  return /* @__PURE__ */ s.createElement("div", {
+    className: "se-design-checkbox-ctn"
+  }, /* @__PURE__ */ s.createElement("label", {
+    className: `se-design-checkbox ${u} ${b()}`,
+    "data-automation-id": a,
+    tabIndex: e ? -1 : 0
+  }, /* @__PURE__ */ s.createElement("input", {
     type: "checkbox",
-    className: `se-design-checkbox ${n} block w-4 h-4 ${u} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`,
-    "data-automation-id": s,
-    checked: e,
-    onChange: l,
-    disabled: o
-  });
+    checked: n,
+    onChange: m,
+    disabled: e
+  }), /* @__PURE__ */ s.createElement("span", {
+    className: "checkbox-item"
+  })), /* @__PURE__ */ s.createElement("label", {
+    className: "checkbox-label"
+  }, r));
 };
 export {
-  x as Checkbox
+  d as Checkbox
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({ className = '', automationId = '', defaultChecked = false, disabled = false, onChange }) => {\n    const [isChecked, setIsChecked] = useState(defaultChecked);\n\n    useEffect(() => {\n        if(disabled) return;\n        setIsChecked(defaultChecked);\n    }, [defaultChecked]);\n\n    const handleClick = () => {\n        const newCheckedState = !isChecked;\n        setIsChecked(newCheckedState);\n        if(onChange) {\n            onChange(newCheckedState);\n        }\n    }\n    const backgroundColor = disabled ? 'bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed' : isChecked ? 'text-[var(--color-blue-500)]' : 'text-[var(--color-white)]';\n    \n  return <input type=\"checkbox\" className={`se-design-checkbox ${className} block w-4 h-4 ${backgroundColor} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`} data-automation-id={automationId} checked={isChecked} onChange={handleClick} disabled={disabled} />;\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","isChecked","setIsChecked","useState","useEffect","handleClick","newCheckedState","backgroundColor","React","createElement","type","checked"],"mappings":";AAUO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,WAAAA,IAAY;AAAA,EAAIC,cAAAA,IAAe;AAAA,EAAIC,gBAAAA,IAAiB;AAAA,EAAOC,UAAAA,IAAW;AAAA,EAAOC,UAAAA;AAAS,MAAM;AACtI,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASL,CAAc;AAEzDM,EAAAA,EAAU,MAAM;AACZ,IAAGL,KACHG,EAAaJ,CAAc;AAAA,EAAA,GAC5B,CAACA,CAAc,CAAC;AAEnB,QAAMO,IAAcA,MAAM;AACtB,UAAMC,IAAkB,CAACL;AACzBC,IAAAA,EAAaI,CAAe,GACzBN,KACCA,EAASM,CAAe;AAAA,EAEhC,GACMC,IAAkBR,IAAW,6IAA6IE,IAAY,iCAAiC;AAExNO,SAAAA,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOC,MAAK;AAAA,IAAWd,WAAW,sBAAsBA,CAAS,kBAAkBW,CAAe;AAAA,IAAuH,sBAAoBV;AAAAA,IAAcc,SAASV;AAAAA,IAAWD,UAAUK;AAAAA,IAAaN,UAAAA;AAAAA,EAAAA,CAAqB;AACpU;"}
+{"version":3,"file":"index17.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport \"./style.scss\";\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  checkMarkType?: \"tick\" | \"minus-checkbox\" | \"\";\n  label?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n}) => {\n  \n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = () => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === \"minus-checkbox\" ? !prev : !prev));\n    onChange?.(!isChecked);\n  };\n\n  const getCheckBoxClassName = () => { \n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n    if (disabled && !checkMarkType) return 'disabled';\n    if (disabled && checkMarkType === \"tick\") return 'disabled-tick';\n    if (disabled && checkMarkType === \"minus-checkbox\") return 'disabled-minus-checkbox';\n    if (checkMarkType === \"minus-checkbox\" && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`} data-automation-id={automationId} tabIndex={disabled ? -1 : 0}>\n        <input \n          type=\"checkbox\" \n          checked={isChecked} \n          onChange={handleClick} \n          disabled={disabled}\n        />\n        <span className=\"checkbox-item\"></span>\n      </label>\n      <label className=\"checkbox-label\">{label}</label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","isChecked","setIsChecked","useState","useEffect","handleClick","prev","getCheckBoxClassName","focusClass","React","createElement","tabIndex","type","checked"],"mappings":";;AAaO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AACV,MAAM;AAEJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASP,CAAc;AAEzDQ,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaN,CAAc;AAAA,EAAA,GAC1B,CAACA,CAAc,CAAC;AAEnB,QAAMS,IAAcA,MAAM;AACxB,IAAIR,MACJK,EAAcI,OAA+C,CAACA,CAAa,GAC3ER,KAAAA,QAAAA,EAAW,CAACG;AAAAA,EACd,GAEMM,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AACfX,WAAAA,KAAY,CAACE,IAAsB,aACnCF,KAAYE,MAAkB,SAAe,kBAC7CF,KAAYE,MAAkB,mBAAyB,4BACvDA,MAAkB,oBAAoBE,IAAkB,kBAAkBO,CAAU,KACjFP,IAAY,WAAWO,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOhB,WAAW,sBAAsBA,CAAS,IAAIa,EAAsB,CAAA;AAAA,IAAI,sBAAoBZ;AAAAA,IAAcgB,UAAUd,IAAW,KAAK;AAAA,EAAA,GACzIa,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEE,MAAK;AAAA,IACLC,SAASZ;AAAAA,IACTH,UAAUO;AAAAA,IACVR,UAAAA;AAAAA,EAAAA,CACD,GACDa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAsB,CAAA,CACjC,GACPe,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOhB,WAAU;AAAA,EAAgB,GAAEM,CAAa,CAC7C;AAET;"}

package/dist/index19.js

@@ -1,62 +1,70 @@
-var $ = Object.defineProperty, k = Object.defineProperties;
-var V = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
+var P = Object.defineProperty, $ = Object.defineProperties;
+var k = Object.getOwnPropertyDescriptors;
+var g = Object.getOwnPropertySymbols;
 var I = Object.prototype.hasOwnProperty, O = Object.prototype.propertyIsEnumerable;
-var y = (e, t, o) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, C = (e, t) => {
-  for (var o in t || (t = {}))
-    I.call(t, o) && y(e, o, t[o]);
-  if (w)
-    for (var o of w(t))
-      O.call(t, o) && y(e, o, t[o]);
+var E = (e, t, l) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, S = (e, t) => {
+  for (var l in t || (t = {}))
+    I.call(t, l) && E(e, l, t[l]);
+  if (g)
+    for (var l of g(t))
+      O.call(t, l) && E(e, l, t[l]);
   return e;
-}, D = (e, t) => k(e, V(t));
-import r, { useState as g, useRef as R } from "react";
-import { Popover as T } from "./index13.js";
-import { Icon as _ } from "./index4.js";
-const q = (e) => {
-  const [t, o] = g(!1), [d, S] = g(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), u = R(null), {
+}, b = (e, t) => $(e, k(t));
+import c, { useState as s, useRef as R, useEffect as T } from "react";
+import { Popover as _ } from "./index13.js";
+import { Icon as j } from "./index4.js";
+const z = (e) => {
+  const [t, l] = s(!1), [r, f] = s(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), v = R(null), {
     selectBy: i = "",
-    optionsUniqueBy: c = "",
-    displaySelected: E = !1,
+    optionsUniqueBy: d = "",
+    displaySelected: x = !1,
     dropDownOptions: m,
-    defaultText: f = "Select"
-  } = e, h = (n) => {
-    var l, a;
-    S(n), (l = u.current) == null || l.togglePopover(), (a = e == null ? void 0 : e.onOptionClick) == null || a.call(e, n);
-  }, v = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ r.createElement("span", {
+    defaultText: w = "Select"
+  } = e;
+  T(() => {
+    f((e == null ? void 0 : e.defaultSelectedValue) || {});
+  }, [e == null ? void 0 : e.defaultSelectedValue]);
+  const C = (n) => {
+    var a, o;
+    f(n), (a = v.current) == null || a.togglePopover(), (o = e == null ? void 0 : e.onOptionClick) == null || o.call(e, n);
+  }, y = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ c.createElement("span", {
     className: "option-chip"
-  }, n[i] || f), x = (n) => {
-    const l = n[i], a = d[i] || f, P = c != null && c.length ? n[c] == d[c] : !0, s = E && l === a && P;
-    return /* @__PURE__ */ r.createElement("div", {
-      key: `$drop-option-${l}`,
-      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${s ? "selected" : ""}`,
-      onClick: () => h(n)
-    }, v(D(C({}, n), {
-      isOptionSelected: s
-    })), s && /* @__PURE__ */ r.createElement("div", null, "✓"));
-  }, b = () => /* @__PURE__ */ r.createElement("div", {
+  }, n[i] || w), D = (n) => {
+    const a = n[i], o = r[i] || w, V = d != null && d.length ? n[d] == r[d] : !0, u = x && a === o && V;
+    return /* @__PURE__ */ c.createElement("div", {
+      key: `$drop-option-${a}`,
+      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
+      onClick: () => C(n)
+    }, y(b(S({}, n), {
+      isOptionSelected: u
+    })), u && /* @__PURE__ */ c.createElement("div", null, "✓"));
+  }, h = () => /* @__PURE__ */ c.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, m == null ? void 0 : m.map((n) => x(n))), N = () => {
-    const l = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"}`;
-    return /* @__PURE__ */ r.createElement("div", {
-      className: l
-    }, v(d), /* @__PURE__ */ r.createElement(_, {
+  }, m == null ? void 0 : m.map((n) => D(n))), N = () => {
+    const a = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"}`;
+    return /* @__PURE__ */ c.createElement("div", {
+      className: a
+    }, y(r), /* @__PURE__ */ c.createElement(j, {
       name: "down",
       className: `ml-auto ${t ? "rotate-180" : ""} transition-transform`
     }));
   };
-  return /* @__PURE__ */ r.createElement("div", {
+  return /* @__PURE__ */ c.createElement("div", {
     className: "se-design-dropdown-container",
     style: e == null ? void 0 : e.style
-  }, /* @__PURE__ */ r.createElement(T, {
-    ref: u,
-    renderPopoverContents: b,
+  }, (e == null ? void 0 : e.label) && /* @__PURE__ */ c.createElement("div", {
+    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
+  }, e == null ? void 0 : e.label), /* @__PURE__ */ c.createElement("div", {
+    style: e == null ? void 0 : e.style
+  }, /* @__PURE__ */ c.createElement(_, {
+    ref: v,
+    renderPopoverContents: h,
     contentWidth: "full",
     renderPopoverSrcElement: N,
-    onPopoverToggle: (n) => o(n)
-  }));
+    onPopoverToggle: (n) => l(n)
+  })));
 };
 export {
-  q as Dropdown
+  z as Dropdown
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\n\nimport { Popover, PopoverHandle  } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(() => props?.defaultSelectedValue || {});\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const { selectBy = '', optionsUniqueBy = '', displaySelected = false, dropDownOptions, defaultText = 'Select' } = props;\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if(props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>\n  }\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return <div\n      key={`$drop-option-${optionTxt}`}\n      className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n      onClick={() => handleDropDownOptionClick(dropDownOption)}\n    >\n      {optionChip({...dropDownOption, isOptionSelected})}\n      {isOptionSelected && <div>&#10003;</div>}\n    </div>;\n  }\n\n  const renderDropdownContents = () => {\n    return <div className=\"dropdown-content dropdown-options\">{dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}</div>;\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const drowDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor}`;\n\n    return <div className={drowDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon name=\"down\" className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`} />\n      </div>;\n  };\n\n  return (\n    <div className=\"se-design-dropdown-container\" style={props?.style}>\n      <Popover ref={popoverRef} renderPopoverContents={renderDropdownContents} contentWidth={'full'} renderPopoverSrcElement={renderDropdownSelect} onPopoverToggle={(value) => setIsDropDownOpen(value)} />\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","renderDropdownContents","map","renderDropdownSelect","drowDownSelectClass","name","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":";;;;;;;;;;;;AAuBO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAA+BC,CAAUA,MAAA;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIP,EAAS,EAAK,GACpD,CAACQ,GAAuBC,CAAwB,IAAIT,EAAwB,OAAMK,KAAAA,gBAAAA,EAAOK,yBAAwB,EAAE,GACnHC,IAAaV,EAAuC,IAAI,GAExD;AAAA,IAAEW,UAAAA,IAAW;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAOC,iBAAAA;AAAAA,IAAiBC,aAAAA,IAAc;AAAA,EAAA,IAAaX,GAE5GY,IAA4BA,CAACC,MAAwB;AAPtD,QAAAC,GAAAC;AAQHX,IAAAA,EAAyBS,CAAc,IACvCP,IAAAA,EAAWU,YAAXV,QAAAA,EAAoBW,kBACpBjB,IAAAA,KAAAA,gBAAAA,EAAOkB,kBAAPlB,QAAAA,EAAAA,KAAAA,GAAuBa;AAAAA,EACzB,GAEMM,IAAaA,CAACC,MACfpB,KAAAA,QAAAA,EAAOqB,mBACDrB,KAAAA,gBAAAA,EAAOqB,iBAAiBD,KAE1BE,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW;AAAA,EAAA,GAAgBJ,EAAOb,CAAQ,KAAKI,CAAkB,GAG1Ec,IAAoBA,CAACZ,MAAkC;AACrDa,UAAAA,IAAYb,EAAeN,CAAQ,GACnCoB,IAAwBxB,EAAsBI,CAAQ,KAAKI,GAC3DiB,IAAmBpB,KAAAA,QAAAA,EAAiBqB,SACtChB,EAAeL,CAAe,KAAKL,EAAsBK,CAAe,IACxE,IACEsB,IAAmBrB,KAAmBiB,MAAcC,KAAyBC;AAC5EN,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACLQ,KAAK,gBAAgBL,CAAS;AAAA,MAC9BF,WAAW,uFAAuFM,IAAmB,aAAa,EAAE;AAAA,MACpIE,SAASA,MAAMpB,EAA0BC,CAAc;AAAA,OAEtDM,EAAWc,EAAAC,EAAA,IAAIrB,IAAJ;AAAA,MAAoBiB,kBAAAA;AAAAA,IAAAA,EAAiB,GAChDA,KAAoBR,gBAAAA,EAAAC,cAAA,OAAA,MAAK,GAAa,CACpC;AAAA,EACP,GAEMY,IAAyBA,MACtBb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAqCd,KAAAA,gBAAAA,EAAiB0B,IAAKvB,OAAmBY,EAAkBZ,CAAc,EAAQ,GAGxIwB,IAAuBA,MAAM;AAE3BC,UAAAA,IAAsB,yDADRrC,IAAiB,mCAAmC,gCACwB;AAEzFqB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAWc;AAAAA,OAClBnB,EAAWhB,CAAqB,GACjCmB,gBAAAA,EAAAC,cAACzB,GAAI;AAAA,MAACyC,MAAK;AAAA,MAAOf,WAAW,WAAWvB,IAAiB,eAAe,EAAE;AAAA,IAAA,CAA0B,CACjG;AAAA,EACT;AAGEqB,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA+BgB,OAAOxC,KAAAA,gBAAAA,EAAOwC;AAAAA,EAAAA,GAC1DjB,gBAAAA,EAAAA,cAAC1B,GAAO;AAAA,IAAC4C,KAAKnC;AAAAA,IAAYoC,uBAAuBP;AAAAA,IAAwBQ,cAAc;AAAA,IAAQC,yBAAyBP;AAAAA,IAAsBQ,iBAAkBC,CAAU5C,MAAAA,EAAkB4C,CAAK;AAAA,EAAA,CAAI,CAClM;AAET;"}
+{"version":3,"file":"index19.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select'\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <div>&#10003;</div>}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const drowDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor}`;\n\n    return (\n      <div className={drowDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon name=\"down\" className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`} />\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"se-design-dropdown-container\" style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div style={props?.style}>\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","renderDropdownContents","map","renderDropdownSelect","drowDownSelectClass","name","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}

package/dist/index24.js

@@ -1,65 +1,67 @@
 import e from "react";
-import { Icon as g } from "./index4.js";
-import { Button as x } from "./index3.js";
+import { Icon as h } from "./index4.js";
+import { Button as N } from "./index3.js";
 /* empty css        */
 const n = {
   bannerCtn: "relative rounded-[12px] flex pr-3.5 cursor-pointer",
   bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
   bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]",
-  bannerImageCtn: "w-[30%] flex mr-5 justify-center cursor-pointer",
+  bannerImageCtn: "w-[30%] flex mr-5 justify-end cursor-pointer",
   bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1",
-  bannerButton: "self-start mt-5"
-}, I = (t) => {
+  bannerButton: "self-start"
+}, B = (t) => {
   const {
-    bannerClassName: c,
-    bannerBgColor: s,
-    title: i,
-    description: m,
+    bannerClassName: i,
+    bannerBgColor: m,
+    title: C,
+    description: b,
     hasImage: a,
-    hasCloseIcon: C,
-    closeIconName: b,
-    onClose: p,
-    onBannerClick: r,
-    ctaText: o,
-    hasLinkCta: u,
-    onCtaClick: l,
-    hasButtonCta: d
-  } = t;
+    imagePosition: r = "right",
+    hasCloseIcon: p,
+    closeIconName: u,
+    onClose: d,
+    onBannerClick: o,
+    ctaText: l,
+    hasLinkCta: g,
+    onCtaClick: s,
+    hasButtonCta: x,
+    buttonType: f = "secondary"
+  } = t, c = () => a && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} banner-image-ctn min-h-full`,
+    onClick: o
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: t.bannerImage,
+    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
+  }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerCtn} ${c} banner-ctn`,
+    className: `${n.bannerCtn} ${i} banner-ctn`,
     style: {
-      backgroundColor: s
+      backgroundColor: m
     }
-  }, /* @__PURE__ */ e.createElement("div", {
+  }, r === "left" && c(), /* @__PURE__ */ e.createElement("div", {
     className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
-    onClick: r
+    onClick: o
   }, /* @__PURE__ */ e.createElement("span", {
     className: "banner-title"
-  }, i), /* @__PURE__ */ e.createElement("span", {
+  }, C), /* @__PURE__ */ e.createElement("span", {
     className: "banner-description"
-  }, m), u && /* @__PURE__ */ e.createElement("span", {
+  }, b), g && /* @__PURE__ */ e.createElement("span", {
     className: n.bannerLinkCta,
-    onClick: l
-  }, o), d && /* @__PURE__ */ e.createElement(x, {
-    type: "secondary",
+    onClick: s
+  }, l), x && /* @__PURE__ */ e.createElement(N, {
+    type: f,
     size: "sm",
-    label: o,
-    onClick: l,
+    label: l,
+    onClick: s,
     customClassName: n.bannerButton
-  })), a && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} banner-image-ctn`,
-    onClick: r
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: t.bannerImage,
-    className: "max-w-[initial] h-[initial] object-contain"
-  })), /* @__PURE__ */ e.createElement("span", {
+  })), r === "right" && c(), /* @__PURE__ */ e.createElement("span", {
     className: n.bannerCloseIconCtn,
-    onClick: p
-  }, C && /* @__PURE__ */ e.createElement(g, {
-    name: b
+    onClick: d
+  }, p && /* @__PURE__ */ e.createElement(h, {
+    name: u
   })));
 };
 export {
-  I as Banner
+  B as Banner
 };
 //# sourceMappingURL=index24.js.map

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  onCtaClick: () => void | (() => {});\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]',\n  bannerImageCtn: 'w-[30%] flex mr-5 justify-center cursor-pointer',\n  bannerCloseIconCtn: 'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start mt-5'\n};\n\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const { bannerClassName, bannerBgColor, title, description, hasImage, hasCloseIcon, closeIconName, onClose, onBannerClick, ctaText, hasLinkCta, onCtaClick, hasButtonCta  } = props;\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{backgroundColor: bannerBgColor}}>\n      <div className={`${classNames.bannerContentCtn} ${hasImage ? 'w-[70%]' : 'w-[100%]'} banner-content-ctn`} onClick={onBannerClick}>\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        {hasLinkCta && <span className={classNames.bannerLinkCta} onClick={onCtaClick}>{ctaText}</span>}\n        {hasButtonCta && <Button type=\"secondary\" size=\"sm\" label={ctaText} onClick={onCtaClick} customClassName={classNames.bannerButton} />}\n      </div>\n      {hasImage && <div className={`${classNames.bannerImageCtn} banner-image-ctn`} onClick={onBannerClick}>\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] object-contain\" />\n      </div>}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName}  />}\n      </span>\n    </div>\n  );\n};\n\n\n\n\n\n\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","hasButtonCta","React","createElement","className","style","backgroundColor","onClick","type","size","label","customClassName","src","bannerImage","name"],"mappings":"AAuBA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBAAoB;AAAA,EACpBC,cAAc;AAChB,GAGaC,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IAAEC,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,OAAAA;AAAAA,IAAOC,aAAAA;AAAAA,IAAaC,UAAAA;AAAAA,IAAUC,cAAAA;AAAAA,IAAcC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,IAASC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,IAASC,YAAAA;AAAAA,IAAYC,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,EAAAA,IAAkBb;AAE5Kc,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGxB,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAegB,OAAO;AAAA,MAACC,iBAAiBhB;AAAAA,IAAAA;AAAAA,EAAa,GAC7Ga,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGxB,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAAuBc,SAASV;AAAAA,EAAAA,GACjHM,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBb,GAAAA,CAAY,GAC5CW,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,KAAsBZ,CAAkB,GACvDO,KAAcG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWG;AAAAA,IAAewB,SAASP;AAAAA,KAAaF,CAAc,GAC7FG,KAAgBC,gBAAAA,EAAAC,cAACxB,GAAM;AAAA,IAAC6B,MAAK;AAAA,IAAYC,MAAK;AAAA,IAAKC,OAAOZ;AAAAA,IAASS,SAASP;AAAAA,IAAYW,iBAAiB/B,EAAWM;AAAAA,EAAe,CAAA,CACjI,GACJO,KAAYS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGxB,EAAWI,cAAc;AAAA,IAAqBuB,SAASV;AAAAA,EAAAA,GACrFM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKS,KAAKxB,EAAMyB;AAAAA,IAAaT,WAAU;AAAA,EAA8C,CAAA,CAClF,GACLF,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWK;AAAAA,IAAoBsB,SAASX;AAAAA,EACtDF,GAAAA,KAAgBS,gBAAAA,EAAAA,cAACzB,GAAI;AAAA,IAACoC,MAAMnB;AAAAA,EAAiB,CAAA,CAC1C,CACH;AAET;"}
+{"version":3,"file":"index24.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  onCtaClick: () => void | (() => {});\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]',\n  bannerImageCtn: 'w-[30%] flex mr-5 justify-end cursor-pointer',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start'\n};\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    description,\n    hasImage,\n    imagePosition = 'right',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    ctaText,\n    hasLinkCta,\n    onCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary'\n  } = props;\n\n  const renderImage = () =>\n    hasImage && (\n      <div className={`${classNames.bannerImageCtn} banner-image-ctn min-h-full`} onClick={onBannerClick}>\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{ backgroundColor: bannerBgColor }}>\n      {imagePosition === 'left' && renderImage()}\n      <div\n        className={`${classNames.bannerContentCtn} ${hasImage ? 'w-[70%]' : 'w-[100%]'} banner-content-ctn`}\n        onClick={onBannerClick}\n      >\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        {hasLinkCta && (\n          <span className={classNames.bannerLinkCta} onClick={onCtaClick}>\n            {ctaText}\n          </span>\n        )}\n        {hasButtonCta && (\n          <Button\n            type={buttonType}\n            size=\"sm\"\n            label={ctaText}\n            onClick={onCtaClick}\n            customClassName={classNames.bannerButton}\n          />\n        )}\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName} />}\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","imagePosition","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","hasButtonCta","buttonType","renderImage","React","createElement","className","onClick","src","bannerImage","style","backgroundColor","type","size","label","customClassName","name"],"mappings":"AAyBA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,EAAA,IACXf,GAEEgB,IAAcA,MAClBX,KACEY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWI,cAAc;AAAA,IAAgCwB,SAASV;AAAAA,EAAAA,GACnFQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,KAAKrB,EAAMsB;AAAAA,IAAaH,WAAU;AAAA,EAAA,CAA4D,CAChG;AAIPF,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAesB,OAAO;AAAA,MAAEC,iBAAiBtB;AAAAA,IAAAA;AAAAA,EAAc,GAC9GI,MAAkB,UAAUU,EAC7BC,GAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG3B,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAC9Ee,SAASV;AAAAA,EAAAA,GAETQ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBhB,GAAAA,CAAY,GAC5Cc,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,KAAsBf,CAAkB,GACvDQ,KACCK,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWG;AAAAA,IAAeyB,SAASP;AAAAA,KACjDF,CACG,GAEPG,KACCG,gBAAAA,EAAAC,cAAC3B,GAAM;AAAA,IACLkC,MAAMV;AAAAA,IACNW,MAAK;AAAA,IACLC,OAAOhB;AAAAA,IACPS,SAASP;AAAAA,IACTe,iBAAiBpC,EAAWM;AAAAA,EAAAA,CAC7B,CAEA,GACJQ,MAAkB,WAAWU,EAAY,GAC1CE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWK;AAAAA,IAAoBuB,SAASX;AAAAA,EACtDF,GAAAA,KAAgBW,gBAAAA,EAAAA,cAAC5B,GAAI;AAAA,IAACuC,MAAMrB;AAAAA,EAAgB,CAAA,CACzC,CACH;AAET;"}

package/dist/index25.js

@@ -1,30 +1,46 @@
-import e from "react";
-import { Icon as n } from "./index4.js";
-const p = ({
-  currentPage: t,
-  itemsPerPage: o,
-  totalItems: a,
-  onPageChange: r
+import r from "react";
+import { Icon as h } from "./index4.js";
+const E = ({
+  currentPage: s,
+  itemsPerPage: l,
+  totalItems: n,
+  onPageChange: i
 }) => {
-  const c = (t - 1) * o + 1, s = Math.min(t * o, a), m = s < a, i = t > 1;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center gap-4"
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "text-sm text-[var(--color-gray-700)]"
-  }, c, "-", s, " of ", a), /* @__PURE__ */ e.createElement("div", {
-    onClick: () => i && r(t - 1),
-    className: "disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ e.createElement(n, {
+  const o = Math.ceil(n / l), m = 1, d = o, f = (s - 1) * l + 1, p = Math.min(s * l, n), u = p < n, x = s > 1, y = () => {
+    const e = [], t = (a) => /* @__PURE__ */ r.createElement("span", {
+      key: a,
+      onClick: () => i(a),
+      className: `w-5 h-5 text-sm flex items-center justify-center rounded border ${s === a ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`
+    }, a), c = () => /* @__PURE__ */ r.createElement("span", {
+      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
+    }, "...");
+    if (s <= 3) {
+      for (let a = 1; a <= Math.min(3, o); a++)
+        e.push(t(a));
+      o > 3 && (e.push(c()), e.push(t(o)));
+    } else s >= o - 2 ? (e.push(t(m)), e.push(c()), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(m)), e.push(c()), e.push(t(s - 1)), e.push(t(s)), e.push(t(s + 1)), e.push(c()), e.push(t(d)));
+    return e;
+  };
+  return /* @__PURE__ */ r.createElement("div", {
+    className: "flex items-center gap-1 font-normal"
+  }, /* @__PURE__ */ r.createElement("span", {
+    className: "text-sm text-[var(--color-gray-700)] mr-1"
+  }, "Showing ", f, "-", p, " of ", n), /* @__PURE__ */ r.createElement("span", {
+    onClick: () => x && i(s - 1),
+    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
+  }, /* @__PURE__ */ r.createElement(h, {
     name: "next",
     className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
-  })), /* @__PURE__ */ e.createElement("div", {
-    onClick: () => m && r(t + 1),
-    className: "disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ e.createElement(n, {
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "flex items-center gap-1"
+  }, y()), /* @__PURE__ */ r.createElement("span", {
+    onClick: () => u && i(s + 1),
+    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
+  }, /* @__PURE__ */ r.createElement(h, {
     name: "next"
   })));
 };
 export {
-  p as Pagination
+  E as Pagination
 };
 //# sourceMappingURL=index25.js.map