@gobolt/genesis 0.2.1 → 0.2.3

package/dist/_virtual/index5.cjs

@@ -1 +1 @@
-"use strict";const r=require("./_commonjsHelpers.cjs"),e=require("../node_modules/copy-to-clipboard/index.cjs");var o=e.__require();const s=r.getDefaultExportFromCjs(o);module.exports=s;
+"use strict";const e=require("./_commonjsHelpers.cjs"),r=require("../node_modules/debounce/index.cjs");var o=r.__require();const s=e.getDefaultExportFromCjs(o);module.exports=s;

package/dist/_virtual/index5.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/copy-to-clipboard/index.js";
-var p = r();
-const a = /* @__PURE__ */ o(p);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/debounce/index.js";
+var o = /* @__PURE__ */ r();
+const a = /* @__PURE__ */ e(o);
 export {
   a as default
 };

package/dist/_virtual/index6.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("./_commonjsHelpers.cjs"),e=require("../node_modules/copy-to-clipboard/index.cjs");var o=e.__require();const s=r.getDefaultExportFromCjs(o);module.exports=s;

package/dist/_virtual/index6.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/copy-to-clipboard/index.js";
+var p = r();
+const a = /* @__PURE__ */ o(p);
+export {
+  a as default
+};

package/dist/_virtual/index7.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;

package/dist/_virtual/index7.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/components/Badge/Badge.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),l=require("./styles.cjs"),i=require("../../utils/icon-util.cjs"),f=require("../../node_modules/react-icons/hi/index.cjs"),x=require("../../providers/useGenesis.cjs"),q=require("../Typography/Typography.cjs"),a=!1,B=({label:r,state:e="info",isDisabled:s,hasClose:c=!1,onClick:d,size:g="normal",...t})=>{const{theme:o}=x.useGenesis(),u=c?"button":"badge";return r?n.jsxs(l.Badge,{label:r,role:u,onClick:d,state:e,disabled:s,style:{cursor:u==="button"?"pointer":"default"},...t,children:[i.getBadgeStateIcon(e,o.colors.status[e].onsurface,a),n.jsx(q,{variant:g==="small"?"label3":"label2",color:s?o.colors.status.disabled.default:o.colors.status[e].onsurface,isDisabled:s,children:r}),c?n.jsx(f.HiOutlineX,{color:o.colors.status[e].onsurface}):null]}):n.jsx(l.Badge,{label:r,role:"badge",state:e,disabled:s,...t,children:i.getBadgeStateIcon(e,o.colors.status[e].onsurface,a)})};module.exports=B;
+"use strict";const n=require("react/jsx-runtime"),u=require("./styles.cjs"),i=require("../../utils/icon-util.cjs"),f=require("../../node_modules/react-icons/hi/index.cjs"),x=require("../../providers/useGenesis.cjs"),p=require("../Typography/Typography.cjs"),d=!1,y=({label:o,state:e="info",isDisabled:r,hasClose:t=!1,onClick:a,size:g="normal",...c})=>{const{theme:s}=x.useGenesis(),l=t?"button":"badge";return o?n.jsxs(u.Badge,{label:o,role:l,onClick:a,state:e,disabled:r,style:{cursor:l==="button"?"pointer":"default"},...c,children:[i.getBadgeStateIcon(e,s.colors.status[e].onsurface,d),n.jsx(p,{variant:g==="small"?"label3":"label2",color:r?s.colors.status.disabled.default:s.colors.status[e].onsurface,isDisabled:r,children:o}),t?n.jsx(f.HiOutlineX,{color:s.colors.status[e].onsurface}):null]}):n.jsx(u.Badge,{label:o,role:"badge",state:e,disabled:r,style:{padding:"4px 4px"},...c,children:n.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"},children:i.getBadgeStateIcon(e,s.colors.status[e].onsurface,d)})})};module.exports=y;

package/dist/components/Badge/Badge.js

@@ -1,17 +1,17 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import { Badge as a } from "./styles.js";
-import { getBadgeStateIcon as u } from "../../utils/icon-util.js";
+import { getBadgeStateIcon as d } from "../../utils/icon-util.js";
 import { HiOutlineX as p } from "../../node_modules/react-icons/hi/index.js";
 import { useGenesis as g } from "../../providers/useGenesis.js";
-import B from "../Typography/Typography.js";
-const d = !1, v = ({
+import y from "../Typography/Typography.js";
+const i = !1, v = ({
   label: e,
   state: o = "info",
   isDisabled: n,
   hasClose: l = !1,
-  onClick: f,
-  size: i = "normal",
-  ...t
+  onClick: u,
+  size: f = "normal",
+  ...s
 }) => {
   const { theme: r } = g(), c = l ? "button" : "badge";
   return e ? /* @__PURE__ */ m(
@@ -19,41 +19,54 @@ const d = !1, v = ({
     {
       label: e,
       role: c,
-      onClick: f,
+      onClick: u,
       state: o,
       disabled: n,
       style: { cursor: c === "button" ? "pointer" : "default" },
-      ...t,
+      ...s,
       children: [
-        u(
+        d(
           o,
           r.colors.status[o].onsurface,
-          d
+          i
         ),
-        /* @__PURE__ */ s(
-          B,
+        /* @__PURE__ */ t(
+          y,
           {
-            variant: i === "small" ? "label3" : "label2",
+            variant: f === "small" ? "label3" : "label2",
             color: n ? r.colors.status.disabled.default : r.colors.status[o].onsurface,
             isDisabled: n,
             children: e
           }
         ),
-        l ? /* @__PURE__ */ s(p, { color: r.colors.status[o].onsurface }) : null
+        l ? /* @__PURE__ */ t(p, { color: r.colors.status[o].onsurface }) : null
       ]
     }
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ t(
     a,
     {
       label: e,
       role: "badge",
       state: o,
       disabled: n,
-      ...t,
-      children: u(
-        o,
-        r.colors.status[o].onsurface,
-        d
+      style: {
+        padding: "4px 4px"
+      },
+      ...s,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: d(
+            o,
+            r.colors.status[o].onsurface,
+            i
+          )
+        }
       )
     }
   );

package/dist/components/Badge/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../utils/styled.cjs"),a=(o,r)=>r==="hollow"?o.colors.inputs.surface.border:o.colors.status[r].surface,n=(o,r,s,d)=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils/styled.cjs"),a=(o,r)=>r==="hollow"?o.colors.inputs.surface.border:o.colors.status[r].surface,n=(o,r,d,s)=>`
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -11,14 +11,12 @@
   border-radius: ${o.components.badge.radius}px;
   border: 1px solid ${a(o,r)};
   background-color: ${o.colors.status[r].surface};
-  width: ${s?"auto":"24px"};
-  height: ${s?"auto":"24px"};
 
   &:not(:disabled):hover {
     background-color: ${o.colors.status[r]["surface-hover"]};
   }
 
-  ${d?`
+  ${s?`
     background-color: ${o.colors.status.disabled.surface} !important;
     border-color: ${o.colors.status.disabled} !important;
     border: none;
@@ -28,6 +26,6 @@
       cursor: not-allowed;
     }
   `:""}
-`,e=t.styled.div`
-  ${({theme:o,state:r,label:s,disabled:d})=>n(o,r,s,d)}
-`;exports.Badge=e;exports.getGenesisClass=n;
+`,t=e.styled.div`
+  ${({theme:o,state:r,label:d,disabled:s})=>n(o,r,d,s)}
+`;exports.Badge=t;exports.getGenesisClass=n;

package/dist/components/Badge/styles.js

@@ -1,5 +1,5 @@
 import { styled as n } from "../../utils/styled.js";
-const a = (o, r) => r === "hollow" ? o.colors.inputs.surface.border : o.colors.status[r].surface, t = (o, r, d, s) => `
+const a = (o, r) => r === "hollow" ? o.colors.inputs.surface.border : o.colors.status[r].surface, t = (o, r, s, d) => `
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -12,14 +12,12 @@ const a = (o, r) => r === "hollow" ? o.colors.inputs.surface.border : o.colors.s
   border-radius: ${o.components.badge.radius}px;
   border: 1px solid ${a(o, r)};
   background-color: ${o.colors.status[r].surface};
-  width: ${d ? "auto" : "24px"};
-  height: ${d ? "auto" : "24px"};
 
   &:not(:disabled):hover {
     background-color: ${o.colors.status[r]["surface-hover"]};
   }
 
-  ${s ? `
+  ${d ? `
     background-color: ${o.colors.status.disabled.surface} !important;
     border-color: ${o.colors.status.disabled} !important;
     border: none;
@@ -29,10 +27,10 @@ const a = (o, r) => r === "hollow" ? o.colors.inputs.surface.border : o.colors.s
       cursor: not-allowed;
     }
   ` : ""}
-`, c = n.div`
-  ${({ theme: o, state: r, label: d, disabled: s }) => t(o, r, d, s)}
+`, e = n.div`
+  ${({ theme: o, state: r, label: s, disabled: d }) => t(o, r, s, d)}
 `;
 export {
-  c as Badge,
+  e as Badge,
   t as getGenesisClass
 };

package/dist/components/Breadcrumb/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './Breadcrumb';
 export type { BreadcrumbProps } from './Breadcrumb';
 export type { BreadcrumbRoute } from './Breadcrumb.types';
+export type { BreadcrumbItem } from './Breadcrumb.types';

package/dist/components/Select/Select.cjs

@@ -1,6 +1,6 @@
-"use strict";const n=require("react/jsx-runtime"),c=require("react"),l=require("../../constants/index.cjs"),p=require("./DropdownChevron.cjs"),t=require("./styles.cjs"),x=require("../../providers/useGenesis.cjs"),m=({type:s=l.TYPE.primary,state:r,variant:d="none",defaultValue:h,onChange:f,...u})=>{const{breakpoint:j}=x.useGenesis(),[i,o]=c.useState(!1);c.useEffect(()=>{const e=document.createElement("style");return e.textContent=`
+"use strict";const t=require("react/jsx-runtime"),d=require("react"),p=require("../../constants/index.cjs"),x=require("./DropdownChevron.cjs"),s=require("./styles.cjs"),m=require("../../providers/useGenesis.cjs"),f=({type:r=p.TYPE.primary,state:c,variant:u="none",defaultValue:j,onChange:n,...i})=>{const{breakpoint:q}=m.useGenesis(),[l,o]=d.useState(!1);d.useEffect(()=>{const e=document.createElement("style");return e.textContent=`
       .ant-select-dropdown {
         padding: 0px !important;
         border-radius: 0px !important;
       }
-    `,document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]);const a=e=>n.jsx(t.SelectDropdown,{type:s,state:r,children:n.jsx(t.StyledMenuItem,{type:s,state:r,children:e})});return n.jsx(t.SelectWrapper,{$isFocused:i,type:s,children:n.jsx(t.Select,{...u,$variant:d,suffixIcon:n.jsx(p,{}),dropdownRender:a,onFocus:()=>o(!0),onBlur:()=>o(!1)})})};module.exports=m;
+    `,document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]);const a=e=>t.jsx(s.SelectDropdown,{type:r,state:c,children:t.jsx(s.StyledMenuItem,{type:r,state:c,children:e})});return t.jsx(s.SelectWrapper,{$isFocused:l,type:r,children:t.jsx(s.Select,{...i,$variant:u,suffixIcon:t.jsx(x,{}),dropdownRender:a,onFocus:()=>o(!0),onBlur:()=>o(!1),onChange:e=>{o(!1),n==null||n(e)}})})};module.exports=f;

package/dist/components/Select/Select.js

@@ -1,19 +1,19 @@
 import { jsx as o } from "react/jsx-runtime";
-import a, { useEffect as m } from "react";
-import { TYPE as u } from "../../constants/index.js";
-import i from "./DropdownChevron.js";
-import { SelectWrapper as l, Select as p, SelectDropdown as f, StyledMenuItem as h } from "./styles.js";
-import { useGenesis as S } from "../../providers/useGenesis.js";
-const b = ({
-  type: t = u.primary,
-  state: r,
-  variant: d = "none",
-  defaultValue: w,
-  onChange: x,
-  ...s
+import m, { useEffect as u } from "react";
+import { TYPE as i } from "../../constants/index.js";
+import p from "./DropdownChevron.js";
+import { SelectWrapper as a, Select as f, SelectDropdown as S, StyledMenuItem as w } from "./styles.js";
+import { useGenesis as x } from "../../providers/useGenesis.js";
+const y = ({
+  type: t = i.primary,
+  state: d,
+  variant: s = "none",
+  defaultValue: h,
+  onChange: r,
+  ...c
 }) => {
-  const { breakpoint: C } = S(), [c, n] = a.useState(!1);
-  return m(() => {
+  const { breakpoint: D } = x(), [l, n] = m.useState(!1);
+  return u(() => {
     const e = document.createElement("style");
     return e.textContent = `
       .ant-select-dropdown {
@@ -23,18 +23,21 @@ const b = ({
     `, document.head.appendChild(e), () => {
       document.head.removeChild(e);
     };
-  }, []), /* @__PURE__ */ o(l, { $isFocused: c, type: t, children: /* @__PURE__ */ o(
-    p,
+  }, []), /* @__PURE__ */ o(a, { $isFocused: l, type: t, children: /* @__PURE__ */ o(
+    f,
     {
-      ...s,
-      $variant: d,
-      suffixIcon: /* @__PURE__ */ o(i, {}),
-      dropdownRender: (e) => /* @__PURE__ */ o(f, { type: t, state: r, children: /* @__PURE__ */ o(h, { type: t, state: r, children: e }) }),
+      ...c,
+      $variant: s,
+      suffixIcon: /* @__PURE__ */ o(p, {}),
+      dropdownRender: (e) => /* @__PURE__ */ o(S, { type: t, state: d, children: /* @__PURE__ */ o(w, { type: t, state: d, children: e }) }),
       onFocus: () => n(!0),
-      onBlur: () => n(!1)
+      onBlur: () => n(!1),
+      onChange: (e) => {
+        n(!1), r == null || r(e);
+      }
     }
   ) });
 };
 export {
-  b as default
+  y as default
 };

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,10 @@
 import { ColumnType } from 'antd/es/table';
 import * as React from "react";
+export type ActionEvent = {
+    event: string;
+    payload: any;
+};
+export type Change = (actionEvent: ActionEvent) => void;
 export type SelectionType = "checkbox" | "radio";
 export interface TableProps<T extends Record<string, any>> {
     dataSource: T[];

package/dist/components/Table/TableControls/PrimaryTableControlsRow.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),j=require("../../../node_modules/react-icons/hi2/index.cjs"),c=require("../../../node_modules/react-icons/hi/index.cjs"),m=require("../../../node_modules/react-icons/fi/index.cjs"),q=require("../../../_virtual/index5.cjs"),I=require("../../Input/Input.cjs"),d=require("../../Button/UtilityButton.cjs"),f=require("../../Typography/Typography.cjs"),k=require("../../Select/Select.cjs"),S=require("../../Button/IconButton.cjs"),b=({sortOptions:s,searchByPlaceholder:p="",searchField:x="address",isSortedAscending:n=!0,onChange:t})=>{const a=i=>{const v={event:"inputChange",payload:{value:i.target.value,field:x}};q(()=>{t==null||t(v)},200)()},r=i=>{const u={event:"primaryChange",payload:{value:i}};t==null||t(u)},l=()=>{const i={event:"filterClick",payload:{}};t==null||t(i)},o=()=>{const i={event:"settingsClick",payload:{}};t==null||t(i)},y=()=>{const i={event:"orderClick",payload:{value:n?"desc":"asc"}};t==null||t(i)};return e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",minWidth:800},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(I,{size:"normal",placeholder:p,prefix:e.jsx(c.HiSearch,{}),style:{padding:"5px 8px"},onChange:a}),l&&e.jsx(d,{isIconButton:!0,icon:e.jsx(j.HiMiniAdjustmentsVertical,{}),onClick:l}),o&&e.jsx(d,{isIconButton:!0,icon:e.jsx(m.FiSettings,{}),onClick:o})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[e.jsx(f,{variant:"body3",color:"#6C6C6C",children:"Sort by"}),s&&r?e.jsx(k,{options:s,defaultValue:s[0].value,variant:"simple",onChange:r}):null,e.jsx(S,{icon:n?e.jsx(c.HiOutlineSortDescending,{}):e.jsx(c.HiOutlineSortAscending,{}),onClick:y})]})]})};module.exports=b;

package/dist/components/Table/TableControls/PrimaryTableControlsRow.d.ts

@@ -0,0 +1,16 @@
+import { Change } from '../Table';
+import * as React from "react";
+type SortOption = {
+    value: string;
+    label: React.ReactNode;
+};
+type SortOptions = SortOption[] | null;
+export interface PrimaryTableControlsRowProps {
+    sortOptions: SortOptions;
+    searchByPlaceholder?: string;
+    searchField?: string;
+    isSortedAscending?: boolean;
+    onChange?: Change;
+}
+declare const PrimaryTableControlsRow: ({ sortOptions, searchByPlaceholder, searchField, isSortedAscending, onChange, }: PrimaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+export default PrimaryTableControlsRow;

package/dist/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -0,0 +1,119 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { HiMiniAdjustmentsVertical as v } from "../../../node_modules/react-icons/hi2/index.js";
+import { HiSearch as I, HiOutlineSortDescending as k, HiOutlineSortAscending as x } from "../../../node_modules/react-icons/hi/index.js";
+import { FiSettings as b } from "../../../node_modules/react-icons/fi/index.js";
+import S from "../../../_virtual/index5.js";
+import A from "../../Input/Input.js";
+import d from "../../Button/UtilityButton.js";
+import E from "../../Typography/Typography.js";
+import j from "../../Select/Select.js";
+import B from "../../Button/IconButton.js";
+const U = ({
+  sortOptions: l,
+  searchByPlaceholder: u = "",
+  searchField: m = "address",
+  isSortedAscending: o = !0,
+  onChange: t
+}) => {
+  const a = (e) => {
+    const y = {
+      event: "inputChange",
+      payload: { value: e.target.value, field: m }
+    };
+    S(() => {
+      t == null || t(y);
+    }, 200)();
+  }, c = (e) => {
+    const p = {
+      event: "primaryChange",
+      payload: { value: e }
+    };
+    t == null || t(p);
+  }, n = () => {
+    const e = {
+      event: "filterClick",
+      payload: {}
+    };
+    t == null || t(e);
+  }, s = () => {
+    const e = {
+      event: "settingsClick",
+      payload: {}
+    };
+    t == null || t(e);
+  }, f = () => {
+    const e = {
+      event: "orderClick",
+      payload: {
+        value: o ? "desc" : "asc"
+      }
+    };
+    t == null || t(e);
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        minWidth: 800
+      },
+      children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ i(
+            A,
+            {
+              size: "normal",
+              placeholder: u,
+              prefix: /* @__PURE__ */ i(I, {}),
+              style: {
+                padding: "5px 8px"
+              },
+              onChange: a
+            }
+          ),
+          n && /* @__PURE__ */ i(
+            d,
+            {
+              isIconButton: !0,
+              icon: /* @__PURE__ */ i(v, {}),
+              onClick: n
+            }
+          ),
+          s && /* @__PURE__ */ i(
+            d,
+            {
+              isIconButton: !0,
+              icon: /* @__PURE__ */ i(b, {}),
+              onClick: s
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ i(E, { variant: "body3", color: "#6C6C6C", children: "Sort by" }),
+          l && c ? /* @__PURE__ */ i(
+            j,
+            {
+              options: l,
+              defaultValue: l[0].value,
+              variant: "simple",
+              onChange: c
+            }
+          ) : null,
+          /* @__PURE__ */ i(
+            B,
+            {
+              icon: o ? /* @__PURE__ */ i(k, {}) : /* @__PURE__ */ i(x, {}),
+              onClick: f
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  U as default
+};

package/dist/components/Table/TableControls/SecondaryTableControlsRow.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),o=require("../../../utils/icon-util.cjs"),a=require("../../Typography/Typography.cjs"),d=require("../../Badge/Badge.cjs"),u=({title:s,items:i,onGroupItemClick:r})=>t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",width:24,height:24},children:o.getIcon(s)}),t.jsx("div",{style:{display:"flex",gap:4},children:i.map(e=>t.jsx(d,{label:e,hasClose:!0,state:"generic",size:"small",onClick:()=>r(s,e)},e.toString()))})]}),p=({groups:s,onGroupItemClick:i})=>{if(!s)return null;const r=Object.entries(s).map(([e,l])=>({title:e,items:l}));return t.jsx("div",{style:{display:"flex",gap:4},children:r.map(e=>t.jsx(u,{title:e.title,items:e.items,onGroupItemClick:i},e.title))})},x=({groups:s,totalRecords:i,onChange:r})=>{const e=(l,n)=>{const c={event:"groupItemClick",payload:{title:l,item:n}};r==null||r(c)};return t.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-end",marginTop:8},children:[t.jsx(p,{groups:s,onGroupItemClick:e}),i?t.jsx(a,{variant:"body2",color:"#6C6C6C",children:`${i} results`}):null]})};module.exports=x;

package/dist/components/Table/TableControls/SecondaryTableControlsRow.d.ts

@@ -0,0 +1,11 @@
+import { Change } from '../Table';
+export type Groups = {
+    [key: string]: string[];
+};
+export interface SecondaryTableControlsRowProps {
+    groups: Groups | null;
+    totalRecords: number | null;
+    onChange?: Change;
+}
+declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+export default SecondaryTableControlsRow;

package/dist/components/Table/TableControls/SecondaryTableControlsRow.js

@@ -0,0 +1,72 @@
+import { jsxs as s, jsx as r, Fragment as a } from "react/jsx-runtime";
+import { getIcon as p } from "../../../utils/icon-util.js";
+import m from "../../Typography/Typography.js";
+import d from "../../Badge/Badge.js";
+const u = ({ title: t, items: i, onGroupItemClick: l }) => /* @__PURE__ */ s(a, { children: [
+  /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 24,
+        height: 24
+      },
+      children: p(t)
+    }
+  ),
+  /* @__PURE__ */ r("div", { style: { display: "flex", gap: 4 }, children: i.map((e) => /* @__PURE__ */ r(
+    d,
+    {
+      label: e,
+      hasClose: !0,
+      state: "generic",
+      size: "small",
+      onClick: () => l(t, e)
+    },
+    e.toString()
+  )) })
+] }), y = ({ groups: t, onGroupItemClick: i }) => {
+  if (!t) return null;
+  const l = Object.entries(t).map(([e, n]) => ({
+    title: e,
+    items: n
+  }));
+  return /* @__PURE__ */ r("div", { style: { display: "flex", gap: 4 }, children: l.map((e) => /* @__PURE__ */ r(
+    u,
+    {
+      title: e.title,
+      items: e.items,
+      onGroupItemClick: i
+    },
+    e.title
+  )) });
+}, I = ({
+  groups: t,
+  totalRecords: i,
+  onChange: l
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-end",
+      marginTop: 8
+    },
+    children: [
+      /* @__PURE__ */ r(y, { groups: t, onGroupItemClick: (n, o) => {
+        const c = {
+          event: "groupItemClick",
+          payload: { title: n, item: o }
+        };
+        l == null || l(c);
+      } }),
+      i ? /* @__PURE__ */ r(m, { variant: "body2", color: "#6C6C6C", children: `${i} results` }) : null
+    ]
+  }
+);
+export {
+  I as default
+};

package/dist/components/Table/TableControls/TableControls.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),i=require("./PrimaryTableControlsRow.cjs"),l=require("./SecondaryTableControlsRow.cjs"),d=({primaryTableRowData:s,secondaryTableRowData:o,onChange:n})=>{const t=e=>{n(e)},c=e=>{n(e)};return r.jsxs("div",{"data-testid":"TableControls",style:{margin:"16px 0px"},children:[r.jsx(i,{sortOptions:s.sortOptions,searchByPlaceholder:s.searchByPlaceholder,isSortedAscending:s.isSortedAscending,onChange:t}),o?r.jsx(l,{groups:o.groups,totalRecords:o.totalRecords,onChange:c}):null]})};module.exports=d;

package/dist/components/Table/TableControls/TableControls.d.ts

@@ -1,8 +1,14 @@
-import { PrimaryTableControlsProps } from './PrimaryTableControls';
-import { SecondaryTableControlsProps } from './SecondaryTableControls';
+import { PrimaryTableControlsRowProps } from './PrimaryTableControlsRow';
+import { SecondaryTableControlsRowProps } from './SecondaryTableControlsRow';
+import { Change } from '../Table';
+export type TableControlsData = {
+    primaryTableRowData: PrimaryTableControlsRowProps;
+    secondaryTableRowData?: SecondaryTableControlsRowProps;
+};
 export interface TableControlsProps {
-    primaryTableRowData: PrimaryTableControlsProps;
-    secondaryTableRowData: SecondaryTableControlsProps;
+    primaryTableRowData: PrimaryTableControlsRowProps;
+    secondaryTableRowData?: SecondaryTableControlsRowProps;
+    onChange: Change;
 }
-declare const TableControls: ({ primaryTableRowData, secondaryTableRowData, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableControls: ({ primaryTableRowData, secondaryTableRowData, onChange, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableControls;

package/dist/components/Table/TableControls/TableControls.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import i from "./PrimaryTableControlsRow.js";
+import c from "./SecondaryTableControlsRow.js";
+const m = ({
+  primaryTableRowData: o,
+  secondaryTableRowData: r,
+  onChange: n
+}) => {
+  const e = (s) => {
+    n(s);
+  }, l = (s) => {
+    n(s);
+  };
+  return /* @__PURE__ */ d("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
+    /* @__PURE__ */ t(
+      i,
+      {
+        sortOptions: o.sortOptions,
+        searchByPlaceholder: o.searchByPlaceholder,
+        isSortedAscending: o.isSortedAscending,
+        onChange: e
+      }
+    ),
+    r ? /* @__PURE__ */ t(
+      c,
+      {
+        groups: r.groups,
+        totalRecords: r.totalRecords,
+        onChange: l
+      }
+    ) : null
+  ] });
+};
+export {
+  m as default
+};

package/dist/components/Table/TableWithControls/TableWithControls.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("react/jsx-runtime"),g=require("../TableControls/TableControls.cjs"),i=require("../Table.cjs"),d=({tableData:s,tableControlsData:l,onChange:n})=>{const{primaryTableRowData:r,secondaryTableRowData:c}=l,{dataSource:b,columns:u,rowSelection:T}=s,h=e=>{n(e)},C=(e,a,t)=>{console.log("Table changed:",e,a,t),n({event:"tableChange",payload:{pagination:e,filters:a,sorter:t}})};return o.jsxs(o.Fragment,{children:[o.jsx(g,{primaryTableRowData:r,secondaryTableRowData:c,onChange:h}),o.jsx(i,{dataSource:b,columns:u,rowSelection:T,onChange:C})]})};module.exports=d;

package/dist/components/Table/TableWithControls/TableWithControls.d.ts

@@ -1,12 +1,12 @@
 import { TableProps } from '../../..';
-import { TableControlsProps } from '../TableControls';
+import { TableControlsData } from '../TableControls/TableControls';
 export interface TableWithControlsProps {
-    tableControlsData: TableControlsProps;
+    tableControlsData: TableControlsData;
     tableData: TableProps<Record<string, any>>;
-    onUpdate: (event: {
+    onChange: (event: {
         event: string;
         payload: any;
     }) => void;
 }
-declare const TableWithControls: ({ tableData, tableControlsData, onUpdate, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableWithControls: ({ tableData, tableControlsData, onChange, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableWithControls;