@gobolt/genesis 0.3.21 → 0.3.22

package/dist/components/Select/SelectTrigger.js

@@ -1,68 +1,83 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import styled from "@gobolt/genesis/utils/styled";
 import DropdownChevron from "../shared/DropdownChevron";
 import { Typography } from "@gobolt/genesis/components";
-var getBackgroundColor = function (colors, disabled, $variant) {
+const getBackgroundColor = (colors, disabled, $variant) => {
     if ($variant === "simple")
         return "#F4F4F4";
     if (disabled)
         return "#F4F4F4";
     return "#fff";
 };
-var TriggerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"])), function (_a) {
-    var $disabled = _a.$disabled;
-    return ($disabled ? "not-allowed" : "pointer");
-}, function (_a) {
-    var $disabled = _a.$disabled;
-    return ($disabled ? 0.4 : 1);
-}, function (_a) {
-    var $variant = _a.$variant;
-    return $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)";
-}, function (_a) {
-    var $variant = _a.$variant;
-    return ($variant === "simple" ? "32px" : "40px");
-}, function (_a) {
-    var theme = _a.theme, _b = _a.$themeType, $themeType = _b === void 0 ? "primary" : _b;
-    return theme.colors[$themeType].focussed.ringColor;
-}, function (_a) {
-    var _b;
-    var $variant = _a.$variant, theme = _a.theme, $disabled = _a.$disabled;
-    return $variant === "simple"
-        ? "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)", ";\n    border: none;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
-            var $variant = _a.$variant;
-            return ($variant === "simple" ? "32px" : "40px");
-        }, ";\n\n    &:hover {\n      border: none;\n    }\n    ")
-        : "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled
-            ? theme.colors.inputs.surface.disabled
-            : (_b = theme.colors.surface.default) === null || _b === void 0 ? void 0 : _b.backgroundColor, ";\n    border: 1px solid #9a9a9a;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
-            var $variant = _a.$variant;
-            return ($variant === "simple" ? "32px" : "40px");
-        }, ";\n\n    &:hover {\n      border-color: rgba(0, 0, 0, 0.2);\n    }\n  ");
-});
-var ValueContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.sizing.Size2;
-});
-var ChevronContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (_a) {
-    var $variant = _a.$variant;
-    return ($variant === "simple" ? "4px" : "4px");
-}, function (_a) {
-    var $variant = _a.$variant;
-    return ($variant === "simple" ? "4px" : "0");
-});
-var SelectTrigger = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "primary" : _b, theme = _a.theme, state = _a.state, value = _a.value, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, open = _a.open, onClick = _a.onClick, renderValue = _a.renderValue, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? "none" : _f;
-    var handleClick = React.useCallback(function () {
+const TriggerWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
+  opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
+  position: relative;
+  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
+  transition: all 0.2s ease-in-out;
+  min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+      0 0 0 3px
+        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
+  }
+
+  ${({ $variant, theme, $disabled }) => $variant === "simple"
+    ? `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
+    border: none;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+    &:hover {
+      border: none;
+    }
+    `
+    : `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled
+        ? theme.colors.inputs.surface.disabled
+        : theme.colors.surface.default?.backgroundColor};
+    border: 1px solid #9a9a9a;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  `}
+`;
+const ValueContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size2}px;
+  flex: 1;
+  padding: 4px 8px;
+`;
+const ChevronContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ $variant }) => ($variant === "simple" ? "4px" : "4px")};
+  margin-left: ${({ $variant }) => ($variant === "simple" ? "4px" : "0")};
+`;
+const SelectTrigger = ({ type = "primary", theme, state, value, placeholder = "Select...", open, onClick, renderValue, options = [], disabled = false, variant = "none", }) => {
+    const handleClick = React.useCallback(() => {
         if (disabled)
             return;
-        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClick?.();
     }, [disabled, onClick]);
-    var displayValue = React.useMemo(function () {
+    const displayValue = React.useMemo(() => {
         if (!value)
             return null;
         if (renderValue)
@@ -70,20 +85,19 @@ var SelectTrigger = function (_a) {
         if (Array.isArray(value)) {
             if (value.length === 0)
                 return null;
-            var selectedLabels = value
+            const selectedLabels = value
                 .map(String)
-                .map(function (v) { var _a; return (_a = options.find(function (opt) { return opt.value === v; })) === null || _a === void 0 ? void 0 : _a.label; })
+                .map((v) => options.find((opt) => opt.value === v)?.label)
                 .filter(Boolean);
             return selectedLabels.length > 0
                 ? selectedLabels.join(", ")
-                : "".concat(value.length, " selected");
+                : `${value.length} selected`;
         }
-        var selectedOption = options.find(function (opt) { return opt.value === String(value); });
-        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || value.toString();
+        const selectedOption = options.find((opt) => opt.value === String(value));
+        return selectedOption?.label || value.toString();
     }, [value, renderValue, options]);
     return (_jsxs(TriggerWrapper, { "$themeType": type, "$state": state, onClick: handleClick, tabIndex: disabled ? -1 : 0, role: "button", "$disabled": disabled, "$variant": variant, style: {
             backgroundColor: getBackgroundColor(theme, disabled, variant),
         }, children: [_jsx(ValueContainer, { "$variant": variant, children: displayValue ? (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue })) : (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy-light", children: placeholder })) }), _jsx(ChevronContainer, { "$variant": variant, children: _jsx(DropdownChevron, {}) })] }));
 };
 export default SelectTrigger;
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Table/Table.js

@@ -1,33 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./styles";
 import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-function Table(_a) {
-    var columns = _a.columns, dataSource = _a.dataSource, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, _c = _a.size, size = _c === void 0 ? "small" : _c, onChange = _a.onChange, rowSelection = _a.rowSelection, pagination = _a.pagination, _d = _a.isMainContentCell, isMainContentCell = _d === void 0 ? false : _d, rest = __rest(_a, ["columns", "dataSource", "rowKey", "size", "onChange", "rowSelection", "pagination", "isMainContentCell"]);
-    var paginationConfig = pagination === false
+function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
+    const paginationConfig = pagination === false
         ? false
-        : __assign(__assign({}, pagination), { itemRender: undefined, render: function (properties) { return (_jsx(CustomPagination, __assign({}, properties, { paginationStyle: (pagination === null || pagination === void 0 ? void 0 : pagination.paginationStyle) || PaginationStyle.SIMPLE }))); } });
-    return (_jsx(S.Table, __assign({ "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell }, rest)));
+        : {
+            ...pagination,
+            itemRender: undefined, // Clear any existing itemRender to avoid conflicts
+            render: (properties) => (_jsx(CustomPagination, { ...properties, paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE })),
+        };
+    return (_jsx(S.Table, { "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell, ...rest }));
 }
 export default Table;

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

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
 import { PaginationNumber } from "./PaginationNumber";
@@ -23,50 +8,54 @@ export var PaginationStyle;
     PaginationStyle["CENTERED"] = "centered";
     PaginationStyle["END_FOCUSED"] = "endFocused";
 })(PaginationStyle || (PaginationStyle = {}));
-var PaginationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  gap: 0 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  gap: 0 0;\n"])));
-var ChevronButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  color: ", ";\n  font-size: 32px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  transition: color 0.2s;\n"], ["\n  background: transparent;\n  border: none;\n  color: ", ";\n  font-size: 32px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  transition: color 0.2s;\n"])), function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled ? theme.colors.onsurface["copy-light"] || "#B0B0B0" : "#222";
-}, function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? "not-allowed" : "pointer");
-}, function (_a) {
-    var $right = _a.$right;
-    return ($right ? "0" : "8px");
-}, function (_a) {
-    var $right = _a.$right;
-    return ($right ? "8px" : "0");
-});
-var ChevronIcon = function (_a) {
-    var _b = _a.left, left = _b === void 0 ? false : _b;
-    return (_jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: left ? "M17.5 21L11.5 14L17.5 7" : "M10.5 7L16.5 14L10.5 21", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-};
-var getSimplePages = function (current, total) {
+const PaginationContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  gap: 0 0;
+`;
+const ChevronButton = styled.button `
+  background: transparent;
+  border: none;
+  color: ${({ theme, disabled }) => disabled ? theme.colors.onsurface["copy-light"] || "#B0B0B0" : "#222"};
+  font-size: 32px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  margin-right: ${({ $right }) => ($right ? "0" : "8px")};
+  margin-left: ${({ $right }) => ($right ? "8px" : "0")};
+  transition: color 0.2s;
+`;
+const ChevronIcon = ({ left = false }) => (_jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: left ? "M17.5 21L11.5 14L17.5 7" : "M10.5 7L16.5 14L10.5 21", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const getSimplePages = (current, total) => {
     // Always show 1-5, but don't exceed total
-    var pages = [];
-    for (var index = 1; index <= Math.min(5, total); index++) {
+    const pages = [];
+    for (let index = 1; index <= Math.min(5, total); index++) {
         pages.push(index);
     }
     return pages;
 };
-var CustomPagination = function (_a) {
-    var _b = _a.paginationStyle, paginationStyle = _b === void 0 ? PaginationStyle.SIMPLE : _b, _c = _a.current, current = _c === void 0 ? 1 : _c, _d = _a.total, total = _d === void 0 ? 1 : _d, _e = _a.pageSize, pageSize = _e === void 0 ? 10 : _e, onChange = _a.onChange, properties = __rest(_a, ["paginationStyle", "current", "total", "pageSize", "onChange"]);
-    var pageCount = Math.ceil(total / pageSize);
-    var handleChange = function (page) {
+const CustomPagination = ({ paginationStyle = PaginationStyle.SIMPLE, current = 1, total = 1, pageSize = 10, onChange, ...properties }) => {
+    const pageCount = Math.ceil(total / pageSize);
+    const handleChange = (page) => {
         if (onChange)
             onChange(page, pageSize);
     };
     if (paginationStyle === PaginationStyle.SIMPLE) {
-        var pages = getSimplePages(current, pageCount);
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: function () { return handleChange(current - 1); }, disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map(function (number_) { return (_jsx(PaginationNumber, { active: number_ === current, onClick: function () { return handleChange(number_); }, "aria-label": "Page ".concat(number_), children: number_ }, number_)); }), _jsx(ChevronButton, { onClick: function () { return handleChange(current + 1); }, disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+        const pages = getSimplePages(current, pageCount);
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
     }
     if (paginationStyle === PaginationStyle.TRUNCATED) {
         // Show 1 2 3 4 5 ... last
-        var pages = [];
-        for (var index = 1; index <= Math.min(5, pageCount); index++) {
+        const pages = [];
+        for (let index = 1; index <= Math.min(5, pageCount); index++) {
             pages.push(index);
         }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: function () { return handleChange(current - 1); }, disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map(function (number_) { return (_jsx(PaginationNumber, { active: number_ === current, onClick: function () { return handleChange(number_); }, "aria-label": "Page ".concat(number_), children: number_ }, number_)); }), pageCount > 5 && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), pageCount > 5 && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
                                 color: "#7F7F7F",
                                 fontWeight: 600,
                                 fontSize: 16,
@@ -75,16 +64,16 @@ var CustomPagination = function (_a) {
                                 alignItems: "center",
                                 justifyContent: "center",
                                 paddingBottom: 10,
-                            }, children: "..." }), _jsx(PaginationNumber, { active: current === pageCount, onClick: function () { return handleChange(pageCount); }, "aria-label": "Page ".concat(pageCount), children: pageCount }, pageCount)] })), _jsx(ChevronButton, { onClick: function () { return handleChange(current + 1); }, disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+                            }, children: "..." }), _jsx(PaginationNumber, { active: current === pageCount, onClick: () => handleChange(pageCount), "aria-label": `Page ${pageCount}`, children: pageCount }, pageCount)] })), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
     }
     if (paginationStyle === PaginationStyle.CENTERED) {
         // Show 1 ... left mid mid mid mid ... last
         // Always show 5 numbers, current centered if possible
-        var pages = [];
-        var visibleCount = 5;
-        var sideCount = 2; // numbers to show on each side of current
-        var start = Math.max(2, current - 2);
-        var end = Math.min(pageCount - 1, current + 2);
+        const pages = [];
+        const visibleCount = 5;
+        const sideCount = 2; // numbers to show on each side of current
+        let start = Math.max(2, current - 2);
+        let end = Math.min(pageCount - 1, current + 2);
         // Adjust if near the start
         if (current <= 3) {
             start = 2;
@@ -104,7 +93,7 @@ var CustomPagination = function (_a) {
             pages.push("left-ellipsis");
         }
         // Show middle pages
-        for (var index = start; index <= end; index++) {
+        for (let index = start; index <= end; index++) {
             pages.push(index);
         }
         // Show right ellipsis if needed
@@ -115,7 +104,7 @@ var CustomPagination = function (_a) {
         if (pageCount > 1) {
             pages.push(pageCount);
         }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: function () { return handleChange(current - 1); }, disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map(function (number_, index) {
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
                     if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
                         return (_jsx("span", { style: {
                                 color: "#7F7F7FB0",
@@ -129,14 +118,12 @@ var CustomPagination = function (_a) {
                                 paddingBottom: 10,
                             }, children: "..." }, number_ + index));
                     }
-                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: function () {
-                            return typeof number_ === "number" && handleChange(number_);
-                        }, "aria-label": "Page ".concat(number_), children: number_ }, number_));
-                }), _jsx(ChevronButton, { onClick: function () { return handleChange(current + 1); }, disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
     }
     if (paginationStyle === PaginationStyle.END_FOCUSED) {
         // Show 1 ... last 5 pages
-        var pages = [];
+        const pages = [];
         // Always show first page
         pages.push(1);
         // If more than 6 pages, show ellipsis
@@ -144,11 +131,11 @@ var CustomPagination = function (_a) {
             pages.push("left-ellipsis");
         }
         // Show last 5 pages
-        var start = Math.max(2, pageCount - 4);
-        for (var index = start; index <= pageCount; index++) {
+        const start = Math.max(2, pageCount - 4);
+        for (let index = start; index <= pageCount; index++) {
             pages.push(index);
         }
-        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: function () { return handleChange(current - 1); }, disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map(function (number_, index) {
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
                     if (number_ === "left-ellipsis") {
                         return (_jsx("span", { style: {
                                 color: "#7F7F7F",
@@ -162,13 +149,10 @@ var CustomPagination = function (_a) {
                                 paddingBottom: 10,
                             }, children: "..." }, number_ + index));
                     }
-                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: function () {
-                            return typeof number_ === "number" && handleChange(number_);
-                        }, "aria-label": "Page ".concat(number_), children: number_ }, number_));
-                }), _jsx(ChevronButton, { onClick: function () { return handleChange(current + 1); }, disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
     }
     // Fallback for other styles (not implemented yet)
     return null;
 };
 export default CustomPagination;
-var templateObject_1, templateObject_2;

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

@@ -1,46 +1,30 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Typography from "../../Typography";
-var NumberButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  border: none;\n  border-radius: 4px;\n  min-width: 24px;\n  height: 24px;\n  padding: 4px 7px;\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0 4px;\n  cursor: pointer;\n  transition: background 0.2s, color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  white-space: nowrap;\n\n  &:hover {\n    background: ", ";\n    color: #fff;\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  border: none;\n  border-radius: 4px;\n  min-width: 24px;\n  height: 24px;\n  padding: 4px 7px;\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0 4px;\n  cursor: pointer;\n  transition: background 0.2s, color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  white-space: nowrap;\n\n  &:hover {\n    background: ", ";\n    color: #fff;\n  }\n"])), function (_a) {
-    var $active = _a.$active, theme = _a.theme;
-    return $active ? theme.colors.primary.default.backgroundColor : "transparent";
-}, function (_a) {
-    var $active = _a.$active, theme = _a.theme;
-    return $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C";
-}, function (_a) {
-    var $active = _a.$active, theme = _a.theme;
-    return $active
-        ? theme.colors.primary.default.backgroundColor
-        : theme.colors.primary.default.backgroundColor + "22";
-});
-export var PaginationNumber = function (_a) {
-    var active = _a.active, children = _a.children, properties = __rest(_a, ["active", "children"]);
-    return (_jsx(NumberButton, __assign({ "$active": active, "aria-current": active ? "page" : undefined }, properties, { children: _jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children: children }) })));
-};
-var templateObject_1;
+const NumberButton = styled.button `
+  background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
+  color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};
+  border: none;
+  border-radius: 4px;
+  min-width: 24px;
+  height: 24px;
+  padding: 4px 7px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 4px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ $active, theme }) => $active
+    ? theme.colors.primary.default.backgroundColor
+    : theme.colors.primary.default.backgroundColor + "22"};
+    color: #fff;
+  }
+`;
+export const PaginationNumber = ({ active, children, ...properties }) => (_jsx(NumberButton, { "$active": active, "aria-current": active ? "page" : undefined, ...properties, children: _jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children: children }) }));

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

@@ -8,43 +8,42 @@ import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
 import { HiSearch } from "react-icons/hi";
 import { HiOutlineSortAscending, HiOutlineSortDescending, } from "react-icons/hi";
 import { FiSettings } from "react-icons/fi";
-var PrimaryTableControlsRow = function (_a) {
-    var sortOptions = _a.sortOptions, _b = _a.searchByPlaceholder, searchByPlaceholder = _b === void 0 ? "" : _b, _c = _a.searchField, searchField = _c === void 0 ? "address" : _c, _d = _a.isSortedAscending, isSortedAscending = _d === void 0 ? true : _d, _e = _a.searchValue, searchValue = _e === void 0 ? "" : _e, _f = _a.selectedSortOption, selectedSortOption = _f === void 0 ? "" : _f, onChange = _a.onChange;
-    var onInputChange = function (actionEvent) {
-        onChange === null || onChange === void 0 ? void 0 : onChange({
+const PrimaryTableControlsRow = ({ sortOptions, searchByPlaceholder = "", searchField = "address", isSortedAscending = true, searchValue = "", selectedSortOption = "", onChange, }) => {
+    const onInputChange = (actionEvent) => {
+        onChange?.({
             event: "inputChange",
             payload: actionEvent.payload,
         });
     };
-    var onSortChange = function (value) {
-        var sortActionEvent = {
+    const onSortChange = (value) => {
+        const sortActionEvent = {
             event: "primarySortChange",
-            payload: { value: value },
+            payload: { value },
         };
-        onChange === null || onChange === void 0 ? void 0 : onChange(sortActionEvent);
+        onChange?.(sortActionEvent);
     };
-    var onFilterClick = function () {
-        var filterActionEvent = {
+    const onFilterClick = () => {
+        const filterActionEvent = {
             event: "filterClick",
             payload: {},
         };
-        onChange === null || onChange === void 0 ? void 0 : onChange(filterActionEvent);
+        onChange?.(filterActionEvent);
     };
-    var onSettingsClick = function () {
-        var settingsActionEvent = {
+    const onSettingsClick = () => {
+        const settingsActionEvent = {
             event: "settingsClick",
             payload: {},
         };
-        onChange === null || onChange === void 0 ? void 0 : onChange(settingsActionEvent);
+        onChange?.(settingsActionEvent);
     };
-    var onOrderClick = function () {
-        var ascendingActionEvent = {
+    const onOrderClick = () => {
+        const ascendingActionEvent = {
             event: "orderClick",
             payload: {
                 value: isSortedAscending ? "desc" : "asc",
             },
         };
-        onChange === null || onChange === void 0 ? void 0 : onChange(ascendingActionEvent);
+        onChange?.(ascendingActionEvent);
     };
     return (_jsxs("div", { style: {
             display: "flex",

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

@@ -1,26 +1,9 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Badge from "../../Badge";
 import Typography from "../../Typography";
 import Tooltip from "../../Tooltip";
 import { getIcon } from "../../../utils/icon-util";
-var GroupItem = function (_a) {
-    var title = _a.title, items = _a.items, onGroupItemClick = _a.onGroupItemClick;
+const GroupItem = ({ title, items, onGroupItemClick }) => {
     if (items.length === 0)
         return null;
     return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { tip: title, children: _jsx("div", { style: {
@@ -29,37 +12,32 @@ var GroupItem = function (_a) {
                         alignItems: "center",
                         width: 24,
                         height: 24,
-                    }, children: getIcon(title) }) }), _jsx("div", { style: { display: "flex", gap: 4 }, children: items.map(function (item) { return (_jsx(Badge, { label: item, hasClose: true, state: "generic", size: "small", onClick: function () { return onGroupItemClick(title, item); } }, item.toString())); }) })] }));
+                    }, children: getIcon(title) }) }), _jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => (_jsx(Badge, { label: item, hasClose: true, state: "generic", size: "small", onClick: () => onGroupItemClick(title, item) }, item.toString()))) })] }));
 };
-var GroupsRow = function (_a) {
-    var groups = _a.groups, onGroupItemClick = _a.onGroupItemClick;
+const GroupsRow = ({ groups, onGroupItemClick }) => {
     if (!groups)
         return null;
-    var groupArray = Object.entries(groups).map(function (_a) {
-        var _b = __read(_a, 2), title = _b[0], items = _b[1];
-        return ({
-            title: title,
-            items: items,
-        });
-    });
+    const groupArray = Object.entries(groups).map(([title, items]) => ({
+        title,
+        items,
+    }));
     return (_jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0
-            ? groupArray.map(function (group) { return (_jsx(GroupItem, { title: group.title, items: group.items, onGroupItemClick: onGroupItemClick }, group.title)); })
+            ? groupArray.map((group) => (_jsx(GroupItem, { title: group.title, items: group.items, onGroupItemClick: onGroupItemClick }, group.title)))
             : null }));
 };
-var SecondaryTableControlsRow = function (_a) {
-    var groups = _a.groups, totalRecords = _a.totalRecords, onChange = _a.onChange;
-    var onGroupItemClick = function (title, item) {
-        var groupItemClickEvent = {
+const SecondaryTableControlsRow = ({ groups, totalRecords, onChange, }) => {
+    const onGroupItemClick = (title, item) => {
+        const groupItemClickEvent = {
             event: "groupItemClick",
-            payload: { title: title, item: item },
+            payload: { title, item },
         };
-        onChange === null || onChange === void 0 ? void 0 : onChange(groupItemClickEvent);
+        onChange?.(groupItemClickEvent);
     };
     return (_jsxs("div", { style: {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "flex-end",
             marginTop: 8,
-        }, children: [_jsx(GroupsRow, { groups: groups, onGroupItemClick: onGroupItemClick }), totalRecords > 0 ? (_jsx(Typography, { variant: "body2", color: "#6C6C6C", children: "".concat(totalRecords, " results") })) : null] }));
+        }, children: [_jsx(GroupsRow, { groups: groups, onGroupItemClick: onGroupItemClick }), totalRecords > 0 ? (_jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` })) : null] }));
 };
 export default SecondaryTableControlsRow;