@gobolt/genesis 0.3.14 → 0.3.16

package/dist/components/Button/IconButton.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var iconButtonStyles = require("./icon-button-styles.cjs");
+var index = require("../../constants/index.cjs");
+const IconButton = ({
+  isSelected = false,
+  state = "active",
+  onClick,
+  icon,
+  size = "small",
+  ...rest
+}) => {
+  const buttonState = state === "active" || state === "disabled" ? state : "active";
+  const themeType = index.TYPE.icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButtonStyles.Button,
+    {
+      onClick,
+      $themeType: themeType,
+      $state: buttonState,
+      disabled: state === "disabled" || rest.disabled,
+      size,
+      $isSelected: isSelected,
+      ...rest,
+      children: icon
+    }
+  );
+};
+module.exports = IconButton;

package/dist/components/Button/IconButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "./icon-button-styles.js";
+import { TYPE } from "../../constants/index.js";
+const IconButton = ({
+  isSelected = false,
+  state = "active",
+  onClick,
+  icon,
+  size = "small",
+  ...rest
+}) => {
+  const buttonState = state === "active" || state === "disabled" ? state : "active";
+  const themeType = TYPE.icon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick,
+      $themeType: themeType,
+      $state: buttonState,
+      disabled: state === "disabled" || rest.disabled,
+      size,
+      $isSelected: isSelected,
+      ...rest,
+      children: icon
+    }
+  );
+};
+export {
+  IconButton as default
+};

package/dist/components/Button/icon-button-styles.cjs

@@ -0,0 +1,76 @@
+"use strict";
+var styled = require("styled-components");
+const getPadding = (size, sizing) => {
+  if (size === "small") {
+    return `${sizing.Size1}px ${sizing.Size1}px`;
+  }
+  return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isSelected) => {
+  return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: ${colors[$themeType][$state].color};
+      font-size: ${sizing.Size4}px;
+      line-height: ${sizing.Size6}px;
+      letter-spacing: 0;
+      font-weight: 400;
+      border-width: 1px;
+      cursor: pointer;
+      width: auto; !important;
+      height: auto; !important;
+
+      background-color:${$isSelected ? colors[$themeType].hover.backgroundColor : colors[$themeType][$state].backgroundColor};
+      padding: ${getPadding(size, sizing)};
+
+      box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+      border-radius: ${borderRadius.BorderRadiusMd}px;
+      gap: ${components.button.gap}px;
+      border-style: solid;
+      border-color: ${colors[$themeType][$state].borderColor};
+      
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: ${colors[$themeType].hover.color};
+        background-color: ${colors[$themeType].hover.backgroundColor};
+        border-color: ${colors[$themeType].hover.borderColor};
+      }
+
+      &:active {
+        color: ${colors[$themeType].pressed.color};
+        background-color: ${colors[$themeType].pressed.backgroundColor};
+        border-color: ${colors[$themeType].pressed.borderColor};
+      }
+
+      &:focus-visible {
+        outline: none;
+        color: ${colors[$themeType].focussed.color};
+        background-color: ${colors[$themeType].focussed.backgroundColor};
+        box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        border-color: ${colors[$themeType].focussed.borderColor};
+        transition: box-shadow 0.2s ease-in-out;
+      }
+
+      &:disabled {
+        color: ${colors[$themeType].disabled.color};
+        background-color: ${colors[$themeType].disabled.backgroundColor};
+        border-color: ${colors[$themeType].disabled.borderColor};
+        cursor: not-allowed;
+      }
+    `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, size, $isSelected) => `
+    font-family: 'Inter', sans-serif;
+    ${getVariant(theme, $themeType, $state, size, $isSelected)}
+`;
+const Button = styled.button`
+  ${({ theme, $themeType, $state, size, $isSelected }) => {
+  return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
+}}
+`;
+exports.Button = Button;

package/dist/components/Button/icon-button-styles.js

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+const getPadding = (size, sizing) => {
+  if (size === "small") {
+    return `${sizing.Size1}px ${sizing.Size1}px`;
+  }
+  return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isSelected) => {
+  return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: ${colors[$themeType][$state].color};
+      font-size: ${sizing.Size4}px;
+      line-height: ${sizing.Size6}px;
+      letter-spacing: 0;
+      font-weight: 400;
+      border-width: 1px;
+      cursor: pointer;
+      width: auto; !important;
+      height: auto; !important;
+
+      background-color:${$isSelected ? colors[$themeType].hover.backgroundColor : colors[$themeType][$state].backgroundColor};
+      padding: ${getPadding(size, sizing)};
+
+      box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+      border-radius: ${borderRadius.BorderRadiusMd}px;
+      gap: ${components.button.gap}px;
+      border-style: solid;
+      border-color: ${colors[$themeType][$state].borderColor};
+      
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: ${colors[$themeType].hover.color};
+        background-color: ${colors[$themeType].hover.backgroundColor};
+        border-color: ${colors[$themeType].hover.borderColor};
+      }
+
+      &:active {
+        color: ${colors[$themeType].pressed.color};
+        background-color: ${colors[$themeType].pressed.backgroundColor};
+        border-color: ${colors[$themeType].pressed.borderColor};
+      }
+
+      &:focus-visible {
+        outline: none;
+        color: ${colors[$themeType].focussed.color};
+        background-color: ${colors[$themeType].focussed.backgroundColor};
+        box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        border-color: ${colors[$themeType].focussed.borderColor};
+        transition: box-shadow 0.2s ease-in-out;
+      }
+
+      &:disabled {
+        color: ${colors[$themeType].disabled.color};
+        background-color: ${colors[$themeType].disabled.backgroundColor};
+        border-color: ${colors[$themeType].disabled.borderColor};
+        cursor: not-allowed;
+      }
+    `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, size, $isSelected) => `
+    font-family: 'Inter', sans-serif;
+    ${getVariant(theme, $themeType, $state, size, $isSelected)}
+`;
+const Button = styled.button`
+  ${({ theme, $themeType, $state, size, $isSelected }) => {
+  return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
+}}
+`;
+export {
+  Button
+};

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

@@ -0,0 +1,162 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var UtilityButton = require("../../Button/UtilityButton.cjs");
+var IconButton = require("../../Button/IconButton.cjs");
+var index$1 = require("../../../node_modules/react-icons/hi2/index.cjs");
+var index = require("../../../node_modules/react-icons/hi/index.cjs");
+var index$2 = require("../../../node_modules/react-icons/fi/index.cjs");
+var Input = require("../../Input/Input.cjs");
+var Typography = require("../../Typography/Typography.cjs");
+var Select = require("../../Select/Select.cjs");
+const PrimaryTableControlsRow = ({
+  sortOptions,
+  searchByPlaceholder = "",
+  searchField = "address",
+  isSortedAscending = true,
+  searchValue = "",
+  selectedSortOption = "",
+  onChange
+}) => {
+  const onInputChange = (actionEvent) => {
+    onChange?.({
+      event: "inputChange",
+      payload: actionEvent.payload
+    });
+  };
+  const onSortChange = (value) => {
+    const sortActionEvent = {
+      event: "primarySortChange",
+      payload: { value }
+    };
+    onChange?.(sortActionEvent);
+  };
+  const onFilterClick = () => {
+    const filterActionEvent = {
+      event: "filterClick",
+      payload: {}
+    };
+    onChange?.(filterActionEvent);
+  };
+  const onSettingsClick = () => {
+    const settingsActionEvent = {
+      event: "settingsClick",
+      payload: {}
+    };
+    onChange?.(settingsActionEvent);
+  };
+  const onOrderClick = () => {
+    const ascendingActionEvent = {
+      event: "orderClick",
+      payload: {
+        value: isSortedAscending ? "desc" : "asc"
+      }
+    };
+    onChange?.(ascendingActionEvent);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        minWidth: 800,
+        marginBottom: 16
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              size: "normal",
+              placeholder: searchByPlaceholder,
+              prefix: /* @__PURE__ */ jsxRuntime.jsx(index.HiSearch, {}),
+              style: {
+                padding: "5px 8px"
+              },
+              value: searchValue,
+              onChange: onInputChange
+            }
+          ),
+          onFilterClick && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            UtilityButton,
+            {
+              isIconButton: true,
+              icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.HiMiniAdjustmentsVertical, { color: "#222222" }),
+              onClick: onFilterClick
+            }
+          ) }),
+          onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            UtilityButton,
+            {
+              isIconButton: true,
+              icon: /* @__PURE__ */ jsxRuntime.jsx(index$2.FiSettings, { color: "#222222" }),
+              onClick: onSettingsClick
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: 300,
+              justifyContent: "flex-end",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  color: "#6C6C6C",
+                  style: {
+                    width: 70,
+                    flexShrink: 0,
+                    textAlign: "right",
+                    paddingRight: 4,
+                    marginRight: 8
+                  },
+                  children: "Sort by"
+                }
+              ),
+              sortOptions && onSortChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                Select,
+                {
+                  options: sortOptions,
+                  defaultValue: sortOptions[0].value,
+                  value: selectedSortOption,
+                  variant: "simple",
+                  onChange: onSortChange,
+                  style: {
+                    width: 180,
+                    flexShrink: 0
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: 8,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    IconButton,
+                    {
+                      icon: isSortedAscending ? /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortDescending, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortAscending, { size: 20 }),
+                      onClick: onOrderClick
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+module.exports = PrimaryTableControlsRow;

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

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import UtilityButton from "../../Button/UtilityButton.js";
+import IconButton from "../../Button/IconButton.js";
+import { HiMiniAdjustmentsVertical } from "../../../node_modules/react-icons/hi2/index.js";
+import { HiSearch, HiOutlineSortDescending, HiOutlineSortAscending } from "../../../node_modules/react-icons/hi/index.js";
+import { FiSettings } from "../../../node_modules/react-icons/fi/index.js";
+import Input from "../../Input/Input.js";
+import Typography from "../../Typography/Typography.js";
+import Select from "../../Select/Select.js";
+const PrimaryTableControlsRow = ({
+  sortOptions,
+  searchByPlaceholder = "",
+  searchField = "address",
+  isSortedAscending = true,
+  searchValue = "",
+  selectedSortOption = "",
+  onChange
+}) => {
+  const onInputChange = (actionEvent) => {
+    onChange?.({
+      event: "inputChange",
+      payload: actionEvent.payload
+    });
+  };
+  const onSortChange = (value) => {
+    const sortActionEvent = {
+      event: "primarySortChange",
+      payload: { value }
+    };
+    onChange?.(sortActionEvent);
+  };
+  const onFilterClick = () => {
+    const filterActionEvent = {
+      event: "filterClick",
+      payload: {}
+    };
+    onChange?.(filterActionEvent);
+  };
+  const onSettingsClick = () => {
+    const settingsActionEvent = {
+      event: "settingsClick",
+      payload: {}
+    };
+    onChange?.(settingsActionEvent);
+  };
+  const onOrderClick = () => {
+    const ascendingActionEvent = {
+      event: "orderClick",
+      payload: {
+        value: isSortedAscending ? "desc" : "asc"
+      }
+    };
+    onChange?.(ascendingActionEvent);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        minWidth: 800,
+        marginBottom: 16
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "normal",
+              placeholder: searchByPlaceholder,
+              prefix: /* @__PURE__ */ jsx(HiSearch, {}),
+              style: {
+                padding: "5px 8px"
+              },
+              value: searchValue,
+              onChange: onInputChange
+            }
+          ),
+          onFilterClick && /* @__PURE__ */ jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsx(
+            UtilityButton,
+            {
+              isIconButton: true,
+              icon: /* @__PURE__ */ jsx(HiMiniAdjustmentsVertical, { color: "#222222" }),
+              onClick: onFilterClick
+            }
+          ) }),
+          onSettingsClick && /* @__PURE__ */ jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsx(
+            UtilityButton,
+            {
+              isIconButton: true,
+              icon: /* @__PURE__ */ jsx(FiSettings, { color: "#222222" }),
+              onClick: onSettingsClick
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: 300,
+              justifyContent: "flex-end",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  color: "#6C6C6C",
+                  style: {
+                    width: 70,
+                    flexShrink: 0,
+                    textAlign: "right",
+                    paddingRight: 4,
+                    marginRight: 8
+                  },
+                  children: "Sort by"
+                }
+              ),
+              sortOptions && onSortChange ? /* @__PURE__ */ jsx(
+                Select,
+                {
+                  options: sortOptions,
+                  defaultValue: sortOptions[0].value,
+                  value: selectedSortOption,
+                  variant: "simple",
+                  onChange: onSortChange,
+                  style: {
+                    width: 180,
+                    flexShrink: 0
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: 8,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: isSortedAscending ? /* @__PURE__ */ jsx(HiOutlineSortDescending, { size: 20 }) : /* @__PURE__ */ jsx(HiOutlineSortAscending, { size: 20 }),
+                      onClick: onOrderClick
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  PrimaryTableControlsRow as default
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var iconUtil = require("../../../utils/icon-util.cjs");
+var Typography = require("../../Typography/Typography.cjs");
+var Tooltip = require("../../Tooltip/Tooltip.cjs");
+var Badge = require("../../Badge/Badge.cjs");
+const GroupItem = ({ title, items, onGroupItemClick }) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tip: title, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 24,
+          height: 24
+        },
+        children: iconUtil.getIcon(title)
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        label: item,
+        hasClose: true,
+        state: "generic",
+        size: "small",
+        onClick: () => onGroupItemClick(title, item)
+      },
+      item.toString()
+    )) })
+  ] });
+};
+const GroupsRow = ({ groups, onGroupItemClick }) => {
+  if (!groups) return null;
+  const groupArray = Object.entries(groups).map(([title, items]) => ({
+    title,
+    items
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0 ? groupArray.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+    GroupItem,
+    {
+      title: group.title,
+      items: group.items,
+      onGroupItemClick
+    },
+    group.title
+  )) : null });
+};
+const SecondaryTableControlsRow = ({
+  groups,
+  totalRecords,
+  onChange
+}) => {
+  const onGroupItemClick = (title, item) => {
+    const groupItemClickEvent = {
+      event: "groupItemClick",
+      payload: { title, item }
+    };
+    onChange?.(groupItemClickEvent);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        marginTop: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }),
+        totalRecords > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+      ]
+    }
+  );
+};
+module.exports = SecondaryTableControlsRow;

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

@@ -0,0 +1,81 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { getIcon } from "../../../utils/icon-util.js";
+import Typography from "../../Typography/Typography.js";
+import Tooltip from "../../Tooltip/Tooltip.js";
+import Badge from "../../Badge/Badge.js";
+const GroupItem = ({ title, items, onGroupItemClick }) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { tip: title, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 24,
+          height: 24
+        },
+        children: getIcon(title)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        label: item,
+        hasClose: true,
+        state: "generic",
+        size: "small",
+        onClick: () => onGroupItemClick(title, item)
+      },
+      item.toString()
+    )) })
+  ] });
+};
+const GroupsRow = ({ groups, onGroupItemClick }) => {
+  if (!groups) return null;
+  const groupArray = Object.entries(groups).map(([title, items]) => ({
+    title,
+    items
+  }));
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0 ? groupArray.map((group) => /* @__PURE__ */ jsx(
+    GroupItem,
+    {
+      title: group.title,
+      items: group.items,
+      onGroupItemClick
+    },
+    group.title
+  )) : null });
+};
+const SecondaryTableControlsRow = ({
+  groups,
+  totalRecords,
+  onChange
+}) => {
+  const onGroupItemClick = (title, item) => {
+    const groupItemClickEvent = {
+      event: "groupItemClick",
+      payload: { title, item }
+    };
+    onChange?.(groupItemClickEvent);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        marginTop: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }),
+        totalRecords > 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+      ]
+    }
+  );
+};
+export {
+  SecondaryTableControlsRow as default
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var PrimaryTableControlsRow = require("./PrimaryTableControlsRow.cjs");
+var SecondaryTableControlsRow = require("./SecondaryTableControlsRow.cjs");
+const TableControls = ({
+  primaryTableRowData,
+  secondaryTableRowData,
+  onChange
+}) => {
+  const onPrimaryChange = (actionEvent) => {
+    onChange(actionEvent);
+  };
+  const onSecondaryChange = (actionEvent) => {
+    onChange(actionEvent);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PrimaryTableControlsRow,
+      {
+        sortOptions: primaryTableRowData.sortOptions,
+        searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
+        isSortedAscending: primaryTableRowData.isSortedAscending,
+        onChange: onPrimaryChange,
+        searchValue: primaryTableRowData.searchValue,
+        selectedSortOption: primaryTableRowData.selectedSortOption
+      }
+    ),
+    secondaryTableRowData ? /* @__PURE__ */ jsxRuntime.jsx(
+      SecondaryTableControlsRow,
+      {
+        groups: secondaryTableRowData.groups,
+        totalRecords: secondaryTableRowData.totalRecords,
+        onChange: onSecondaryChange
+      }
+    ) : null
+  ] });
+};
+module.exports = TableControls;

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

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import PrimaryTableControlsRow from "./PrimaryTableControlsRow.js";
+import SecondaryTableControlsRow from "./SecondaryTableControlsRow.js";
+const TableControls = ({
+  primaryTableRowData,
+  secondaryTableRowData,
+  onChange
+}) => {
+  const onPrimaryChange = (actionEvent) => {
+    onChange(actionEvent);
+  };
+  const onSecondaryChange = (actionEvent) => {
+    onChange(actionEvent);
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
+    /* @__PURE__ */ jsx(
+      PrimaryTableControlsRow,
+      {
+        sortOptions: primaryTableRowData.sortOptions,
+        searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
+        isSortedAscending: primaryTableRowData.isSortedAscending,
+        onChange: onPrimaryChange,
+        searchValue: primaryTableRowData.searchValue,
+        selectedSortOption: primaryTableRowData.selectedSortOption
+      }
+    ),
+    secondaryTableRowData ? /* @__PURE__ */ jsx(
+      SecondaryTableControlsRow,
+      {
+        groups: secondaryTableRowData.groups,
+        totalRecords: secondaryTableRowData.totalRecords,
+        onChange: onSecondaryChange
+      }
+    ) : null
+  ] });
+};
+export {
+  TableControls as default
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var Table = require("../Table.cjs");
+var TableControls = require("../TableControls/TableControls.cjs");
+const TableWithControls = ({
+  tableData,
+  tableControlsData,
+  onChange
+}) => {
+  const { primaryTableRowData, secondaryTableRowData } = tableControlsData;
+  const { dataSource, columns, rowSelection } = tableData;
+  const onTableControlsChange = (event) => {
+    onChange(event);
+  };
+  const onTableChange = (pagination, filters, sorter) => {
+    onChange({
+      event: "tableChange",
+      payload: { pagination, filters, sorter }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TableControls,
+      {
+        primaryTableRowData,
+        secondaryTableRowData,
+        onChange: onTableControlsChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Table,
+      {
+        dataSource,
+        columns,
+        rowSelection,
+        onChange: onTableChange
+      }
+    )
+  ] });
+};
+module.exports = TableWithControls;

package/dist/components/Table/TableWithControls/TableWithControls.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import Table from "../Table.js";
+import TableControls from "../TableControls/TableControls.js";
+const TableWithControls = ({
+  tableData,
+  tableControlsData,
+  onChange
+}) => {
+  const { primaryTableRowData, secondaryTableRowData } = tableControlsData;
+  const { dataSource, columns, rowSelection } = tableData;
+  const onTableControlsChange = (event) => {
+    onChange(event);
+  };
+  const onTableChange = (pagination, filters, sorter) => {
+    onChange({
+      event: "tableChange",
+      payload: { pagination, filters, sorter }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableControls,
+      {
+        primaryTableRowData,
+        secondaryTableRowData,
+        onChange: onTableControlsChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        dataSource,
+        columns,
+        rowSelection,
+        onChange: onTableChange
+      }
+    )
+  ] });
+};
+export {
+  TableWithControls as default
+};

package/dist/components/index.d.ts

@@ -57,8 +57,8 @@ export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 export { default as Table } from './Table';
 export type { TableProps } from './Table';
-export { default as TableWithControls } from './Table';
-export type { TableWithControlsProps } from './Table';
+export { default as TableWithControls } from './Table/TableWithControls';
+export type { TableWithControlsProps } from './Table/TableWithControls';
 export { useTable } from './Table';
 export { useTableWithControls } from './Table';
 export type { UseTableConfig } from './Table';

package/dist/index.cjs

@@ -30,6 +30,7 @@ var Select = require("./components/Select/Select.cjs");
 var Shapes = require("./components/Shapes/Shapes.cjs");
 var Switch = require("./components/Switch/Switch.cjs");
 var TablePagination = require("./components/Table/TablePagination.cjs");
+var TableWithControls = require("./components/Table/TableWithControls/TableWithControls.cjs");
 var Tabs = require("./components/Tabs/Tabs.cjs");
 var Tile = require("./components/Tile/Tile.cjs");
 var Toast = require("./components/Toast/Toast.cjs");
@@ -73,7 +74,7 @@ exports.Select = Select;
 exports.Shapes = Shapes;
 exports.Switch = Switch;
 exports.Table = TablePagination;
-exports.TableWithControls = TablePagination;
+exports.TableWithControls = TableWithControls;
 exports.Tabs = Tabs;
 exports.Tile = Tile;
 exports.Toast = Toast;

package/dist/index.js

@@ -28,7 +28,8 @@ import { default as default29 } from "./components/SegmentedControls/SegmentedCo
 import { default as default30 } from "./components/Select/Select.js";
 import { default as default31 } from "./components/Shapes/Shapes.js";
 import { default as default32 } from "./components/Switch/Switch.js";
-import { default as default33, default as default34 } from "./components/Table/TablePagination.js";
+import { default as default33 } from "./components/Table/TablePagination.js";
+import { default as default34 } from "./components/Table/TableWithControls/TableWithControls.js";
 import { default as default35 } from "./components/Tabs/Tabs.js";
 import { default as default36 } from "./components/Tile/Tile.js";
 import { default as default37 } from "./components/Toast/Toast.js";

package/dist/node_modules/react-icons/fi/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+var iconBase = require("../lib/iconBase.cjs");
+require("../lib/iconContext.cjs");
+function FiSettings(props) {
+  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }, { "tag": "path", "attr": { "d": "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" }, "child": [] }] })(props);
+}
+exports.FiSettings = FiSettings;

package/dist/node_modules/react-icons/fi/index.js

@@ -0,0 +1,8 @@
+import { GenIcon } from "../lib/iconBase.js";
+import "../lib/iconContext.js";
+function FiSettings(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }, { "tag": "path", "attr": { "d": "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" }, "child": [] }] })(props);
+}
+export {
+  FiSettings
+};

package/dist/node_modules/react-icons/hi/index.cjs

@@ -10,6 +10,9 @@ function HiExclamationCircle(props) {
 function HiMinusCircle(props) {
   return iconBase.GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
+function HiSearch(props) {
+  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
 function HiXCircle(props) {
   return iconBase.GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -22,9 +25,18 @@ function HiOutlineClock(props) {
 function HiOutlineExclamationCircle(props) {
   return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
+function HiOutlineGlobe(props) {
+  return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
+}
 function HiOutlineMinusCircle(props) {
   return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
+function HiOutlineSortAscending(props) {
+  return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" }, "child": [] }] })(props);
+}
+function HiOutlineSortDescending(props) {
+  return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" }, "child": [] }] })(props);
+}
 function HiOutlineXCircle(props) {
   return iconBase.GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
@@ -37,7 +49,11 @@ exports.HiMinusCircle = HiMinusCircle;
 exports.HiOutlineCheckCircle = HiOutlineCheckCircle;
 exports.HiOutlineClock = HiOutlineClock;
 exports.HiOutlineExclamationCircle = HiOutlineExclamationCircle;
+exports.HiOutlineGlobe = HiOutlineGlobe;
 exports.HiOutlineMinusCircle = HiOutlineMinusCircle;
+exports.HiOutlineSortAscending = HiOutlineSortAscending;
+exports.HiOutlineSortDescending = HiOutlineSortDescending;
 exports.HiOutlineX = HiOutlineX;
 exports.HiOutlineXCircle = HiOutlineXCircle;
+exports.HiSearch = HiSearch;
 exports.HiXCircle = HiXCircle;

package/dist/node_modules/react-icons/hi/index.js

@@ -9,6 +9,9 @@ function HiExclamationCircle(props) {
 function HiMinusCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
+function HiSearch(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
 function HiXCircle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -21,9 +24,18 @@ function HiOutlineClock(props) {
 function HiOutlineExclamationCircle(props) {
   return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
+function HiOutlineGlobe(props) {
+  return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
+}
 function HiOutlineMinusCircle(props) {
   return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
+function HiOutlineSortAscending(props) {
+  return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" }, "child": [] }] })(props);
+}
+function HiOutlineSortDescending(props) {
+  return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" }, "child": [] }] })(props);
+}
 function HiOutlineXCircle(props) {
   return GenIcon({ "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" }, "child": [] }] })(props);
 }
@@ -37,8 +49,12 @@ export {
   HiOutlineCheckCircle,
   HiOutlineClock,
   HiOutlineExclamationCircle,
+  HiOutlineGlobe,
   HiOutlineMinusCircle,
+  HiOutlineSortAscending,
+  HiOutlineSortDescending,
   HiOutlineX,
   HiOutlineXCircle,
+  HiSearch,
   HiXCircle
 };

package/dist/node_modules/react-icons/hi2/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+var iconBase = require("../lib/iconBase.cjs");
+require("../lib/iconContext.cjs");
+function HiMiniAdjustmentsVertical(props) {
+  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" }, "child": [] }] })(props);
+}
+exports.HiMiniAdjustmentsVertical = HiMiniAdjustmentsVertical;

package/dist/node_modules/react-icons/hi2/index.js

@@ -0,0 +1,8 @@
+import { GenIcon } from "../lib/iconBase.js";
+import "../lib/iconContext.js";
+function HiMiniAdjustmentsVertical(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" }, "child": [] }] })(props);
+}
+export {
+  HiMiniAdjustmentsVertical
+};

package/dist/node_modules/react-icons/lu/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+var iconBase = require("../lib/iconBase.cjs");
+require("../lib/iconContext.cjs");
+function LuTag(props) {
+  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor" }, "child": [] }] })(props);
+}
+exports.LuTag = LuTag;

package/dist/node_modules/react-icons/lu/index.js

@@ -0,0 +1,8 @@
+import { GenIcon } from "../lib/iconBase.js";
+import "../lib/iconContext.js";
+function LuTag(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor" }, "child": [] }] })(props);
+}
+export {
+  LuTag
+};

package/dist/node_modules/react-icons/tb/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+var iconBase = require("../lib/iconBase.cjs");
+require("../lib/iconContext.cjs");
+function TbFiles(props) {
+  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M15 3v4a1 1 0 0 0 1 1h4" }, "child": [] }, { "tag": "path", "attr": { "d": "M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" }, "child": [] }, { "tag": "path", "attr": { "d": "M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" }, "child": [] }] })(props);
+}
+exports.TbFiles = TbFiles;

package/dist/node_modules/react-icons/tb/index.js

@@ -0,0 +1,8 @@
+import { GenIcon } from "../lib/iconBase.js";
+import "../lib/iconContext.js";
+function TbFiles(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M15 3v4a1 1 0 0 0 1 1h4" }, "child": [] }, { "tag": "path", "attr": { "d": "M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" }, "child": [] }, { "tag": "path", "attr": { "d": "M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" }, "child": [] }] })(props);
+}
+export {
+  TbFiles
+};

package/dist/utils/icon-util.cjs

@@ -4,7 +4,25 @@ var index$1 = require("../constants/index.cjs");
 var index$3 = require("../node_modules/react-icons/fa6/index.cjs");
 var index$2 = require("../node_modules/react-icons/hi/index.cjs");
 var index = require("../node_modules/react-icons/pi/index.cjs");
+var index$4 = require("../node_modules/react-icons/tb/index.cjs");
+var index$5 = require("../node_modules/react-icons/lu/index.cjs");
 const iconSize = 18;
+const getIcon = (name) => {
+  switch (name.toLowerCase()) {
+    case "orders": {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$5.LuTag, {});
+    }
+    case "warehouse": {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.HiOutlineGlobe, {});
+    }
+    case "availability": {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$4.TbFiles, {});
+    }
+    default: {
+      return null;
+    }
+  }
+};
 const getIconColor = (state, theme) => {
   switch (state) {
     case index$1.STATE.error: {
@@ -83,4 +101,5 @@ const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, custom
   }
 };
 exports.getBadgeStateIcon = getBadgeStateIcon;
+exports.getIcon = getIcon;
 exports.getIconColor = getIconColor;

package/dist/utils/icon-util.js

@@ -1,9 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { STATE } from "../constants/index.js";
 import { FaCircleCheck } from "../node_modules/react-icons/fa6/index.js";
-import { HiOutlineMinusCircle, HiOutlineClock, HiOutlineCheckCircle, HiOutlineXCircle, HiOutlineExclamationCircle, HiMinusCircle, HiClock, HiXCircle, HiExclamationCircle } from "../node_modules/react-icons/hi/index.js";
+import { HiOutlineMinusCircle, HiOutlineClock, HiOutlineCheckCircle, HiOutlineXCircle, HiOutlineExclamationCircle, HiMinusCircle, HiClock, HiXCircle, HiExclamationCircle, HiOutlineGlobe } from "../node_modules/react-icons/hi/index.js";
 import { PiInfo, PiInfoFill } from "../node_modules/react-icons/pi/index.js";
+import { TbFiles } from "../node_modules/react-icons/tb/index.js";
+import { LuTag } from "../node_modules/react-icons/lu/index.js";
 const iconSize = 18;
+const getIcon = (name) => {
+  switch (name.toLowerCase()) {
+    case "orders": {
+      return /* @__PURE__ */ jsx(LuTag, {});
+    }
+    case "warehouse": {
+      return /* @__PURE__ */ jsx(HiOutlineGlobe, {});
+    }
+    case "availability": {
+      return /* @__PURE__ */ jsx(TbFiles, {});
+    }
+    default: {
+      return null;
+    }
+  }
+};
 const getIconColor = (state, theme) => {
   switch (state) {
     case STATE.error: {
@@ -83,5 +101,6 @@ const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, custom
 };
 export {
   getBadgeStateIcon,
+  getIcon,
   getIconColor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",
@@ -44,6 +44,12 @@
       "import": "./dist/utils/*.js",
       "require": "./dist/utils/*.cjs",
       "default": "./dist/utils/*.js"
+    },
+    "./interface/*": {
+      "types": "./dist/interface/*.d.ts",
+      "import": "./dist/interface/*.js",
+      "require": "./dist/interface/*.cjs",
+      "default": "./dist/interface/*.js"
     }
   },
   "files": [