@gobolt/genesis 0.3.20 → 0.3.21

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

@@ -1,321 +1,174 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
-import { PaginationNumber } from "./PaginationNumber.js";
-var PaginationStyle = /* @__PURE__ */ ((PaginationStyle2) => {
-  PaginationStyle2["SIMPLE"] = "simple";
-  PaginationStyle2["TRUNCATED"] = "truncated";
-  PaginationStyle2["CENTERED"] = "centered";
-  PaginationStyle2["END_FOCUSED"] = "endFocused";
-  return PaginationStyle2;
-})(PaginationStyle || {});
-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 }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: "28",
-    height: "28",
-    viewBox: "0 0 28 28",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ 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) => {
-  const pages = [];
-  for (let index = 1; index <= Math.min(5, total); index++) {
-    pages.push(index);
-  }
-  return pages;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-const CustomPagination = ({
-  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 === "simple") {
-    const pages = getSimplePages(current, pageCount);
-    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current - 1),
-          disabled: current === 1,
-          "aria-label": "Previous Page",
-          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+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]];
         }
-      ),
-      pages.map((number_) => /* @__PURE__ */ jsx(
-        PaginationNumber,
-        {
-          active: number_ === current,
-          onClick: () => handleChange(number_),
-          "aria-label": `Page ${number_}`,
-          children: number_
-        },
-        number_
-      )),
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current + 1),
-          disabled: current === pageCount,
-          "aria-label": "Next Page",
-          $right: true,
-          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+    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";
+export var PaginationStyle;
+(function (PaginationStyle) {
+    PaginationStyle["SIMPLE"] = "simple";
+    PaginationStyle["TRUNCATED"] = "truncated";
+    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) {
+    // Always show 1-5, but don't exceed total
+    var pages = [];
+    for (var 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) {
+        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, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.TRUNCATED) {
+        // Show 1 2 3 4 5 ... last
+        var pages = [];
+        for (var index = 1; index <= Math.min(5, pageCount); index++) {
+            pages.push(index);
         }
-      )
-    ] });
-  }
-  if (paginationStyle === "truncated") {
-    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: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                display: "flex",
+                                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, {}) })] }));
     }
-    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current - 1),
-          disabled: current === 1,
-          "aria-label": "Previous Page",
-          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+    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);
+        // Adjust if near the start
+        if (current <= 3) {
+            start = 2;
+            end = 6;
         }
-      ),
-      pages.map((number_) => /* @__PURE__ */ jsx(
-        PaginationNumber,
-        {
-          active: number_ === current,
-          onClick: () => handleChange(number_),
-          "aria-label": `Page ${number_}`,
-          children: number_
-        },
-        number_
-      )),
-      pageCount > 5 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              color: "#7F7F7F",
-              fontWeight: 600,
-              fontSize: 16,
-              margin: "0 8px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              paddingBottom: 10
-            },
-            children: "..."
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PaginationNumber,
-          {
-            active: current === pageCount,
-            onClick: () => handleChange(pageCount),
-            "aria-label": `Page ${pageCount}`,
-            children: pageCount
-          },
-          pageCount
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current + 1),
-          disabled: current === pageCount,
-          "aria-label": "Next Page",
-          $right: true,
-          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        // Adjust if near the end
+        if (current >= pageCount - 2) {
+            start = pageCount - 4;
+            end = pageCount - 1;
         }
-      )
-    ] });
-  }
-  if (paginationStyle === "centered") {
-    const pages = [];
-    let start = Math.max(2, current - 2);
-    let end = Math.min(pageCount - 1, current + 2);
-    if (current <= 3) {
-      start = 2;
-      end = 6;
-    }
-    if (current >= pageCount - 2) {
-      start = pageCount - 4;
-      end = pageCount - 1;
-    }
-    start = Math.max(2, start);
-    end = Math.min(pageCount - 1, end);
-    pages.push(1);
-    if (start > 2) {
-      pages.push("left-ellipsis");
-    }
-    for (let index = start; index <= end; index++) {
-      pages.push(index);
-    }
-    if (end < pageCount - 1) {
-      pages.push("right-ellipsis");
-    }
-    if (pageCount > 1) {
-      pages.push(pageCount);
-    }
-    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current - 1),
-          disabled: current === 1,
-          "aria-label": "Previous Page",
-          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        start = Math.max(2, start);
+        end = Math.min(pageCount - 1, end);
+        // Always show first page
+        pages.push(1);
+        // Show left ellipsis if needed
+        if (start > 2) {
+            pages.push("left-ellipsis");
         }
-      ),
-      pages.map((number_, index) => {
-        if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                color: "#7F7F7FB0",
-                fontWeight: 600,
-                fontSize: 16,
-                margin: "0 8px",
-                height: "40px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                paddingBottom: 10
-              },
-              children: "..."
-            },
-            number_ + index
-          );
+        // Show middle pages
+        for (var index = start; index <= end; index++) {
+            pages.push(index);
         }
-        return /* @__PURE__ */ jsx(
-          PaginationNumber,
-          {
-            active: number_ === current,
-            onClick: () => typeof number_ === "number" && handleChange(number_),
-            "aria-label": `Page ${number_}`,
-            children: number_
-          },
-          number_
-        );
-      }),
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current + 1),
-          disabled: current === pageCount,
-          "aria-label": "Next Page",
-          $right: true,
-          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        // Show right ellipsis if needed
+        if (end < pageCount - 1) {
+            pages.push("right-ellipsis");
         }
-      )
-    ] });
-  }
-  if (paginationStyle === "endFocused") {
-    const pages = [];
-    pages.push(1);
-    if (pageCount > 6) {
-      pages.push("left-ellipsis");
-    }
-    const start = Math.max(2, pageCount - 4);
-    for (let index = start; index <= pageCount; index++) {
-      pages.push(index);
-    }
-    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current - 1),
-          disabled: current === 1,
-          "aria-label": "Previous Page",
-          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        // Always show last page if more than 1
+        if (pageCount > 1) {
+            pages.push(pageCount);
         }
-      ),
-      pages.map((number_, index) => {
-        if (number_ === "left-ellipsis") {
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                color: "#7F7F7F",
-                fontWeight: 600,
-                fontSize: 18,
-                margin: "0 8px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                height: "40px",
-                paddingBottom: 10
-              },
-              children: "..."
-            },
-            number_ + 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) {
+                    if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7FB0",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                height: "40px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                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, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.END_FOCUSED) {
+        // Show 1 ... last 5 pages
+        var pages = [];
+        // Always show first page
+        pages.push(1);
+        // If more than 6 pages, show ellipsis
+        if (pageCount > 6) {
+            pages.push("left-ellipsis");
         }
-        return /* @__PURE__ */ jsx(
-          PaginationNumber,
-          {
-            active: number_ === current,
-            onClick: () => typeof number_ === "number" && handleChange(number_),
-            "aria-label": `Page ${number_}`,
-            children: number_
-          },
-          number_
-        );
-      }),
-      /* @__PURE__ */ jsx(
-        ChevronButton,
-        {
-          onClick: () => handleChange(current + 1),
-          disabled: current === pageCount,
-          "aria-label": "Next Page",
-          $right: true,
-          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        // Show last 5 pages
+        var start = Math.max(2, pageCount - 4);
+        for (var index = start; index <= pageCount; index++) {
+            pages.push(index);
         }
-      )
-    ] });
-  }
-  return null;
-};
-export {
-  PaginationStyle,
-  CustomPagination as default
+        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) {
+                    if (number_ === "left-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 18,
+                                margin: "0 8px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "40px",
+                                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, {}) })] }));
+    }
+    // Fallback for other styles (not implemented yet)
+    return null;
 };
+export default CustomPagination;
+var templateObject_1, templateObject_2;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 interface PaginationNumberProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
     children: React.ReactNode;

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

@@ -1,43 +1,46 @@
-import { jsx } from "react/jsx-runtime";
+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/Typography.js";
-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;
-  }
-`;
-const PaginationNumber = ({
-  active,
-  children,
-  ...properties
-}) => /* @__PURE__ */ jsx(
-  NumberButton,
-  {
-    $active: active,
-    "aria-current": active ? "page" : void 0,
-    ...properties,
-    children: /* @__PURE__ */ jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children })
-  }
-);
-export {
-  PaginationNumber
+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;

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

@@ -1,5 +1,5 @@
-import { ActionEvent, TableEventPayload } from '../../../types/events';
 import * as React from "react";
+import type { ActionEvent, TableEventPayload } from "../../../types/events";
 type SortOption = {
     value: string;
     label: React.ReactNode;