@gobolt/genesis 0.3.25 → 0.3.27

package/dist/components/TableWithControls/components/Select/Select.js

@@ -1,175 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { TYPE } from "@gobolt/genesis/constants";
-import styled from "@gobolt/genesis/utils/styled";
-import SelectTrigger from "./SelectTrigger";
-import { useGenesis } from "@gobolt/genesis/providers";
-const SelectWrapper = styled.div `
-  position: relative;
-  background-color: transparent;
-  border-radius: 8px;
-  width: auto;
-
-  ${({ $isFocused, theme, type = "primary" }) => $isFocused &&
-    `
-    background-color: transparent;
-  `}
-
-  ${({ disabled, theme }) => disabled &&
-    `
-    cursor: not-allowed;
-    
-    &:hover {
-      border-color: ${theme.colors.inputs.surface.border};
-    }
-  `}
-`;
-const SelectDropdown = styled.div `
-  padding: 0px;
-  border-radius: 0px;
-  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
-    cubic-bezier(0.645, 0.045, 0.355, 1);
-
-  &.entering {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  &.entered {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-
-  &.exiting {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-`;
-const MenuItem = styled.div `
-  padding: 8px 12px;
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
-  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled
-    ? theme.colors.inputs.onsurface.disabled
-    : $isSelected
-        ? theme.colors[type].hover.color
-        : theme.colors.onsurface.copy};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-
-  ${({ disabled }) => !disabled &&
-    `
-    &:hover {
-      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected
-        ? theme.colors[type].hover.backgroundColor
-        : "rgba(0, 0, 0, 0.04)"};
-      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected
-        ? theme.colors[type].hover.color
-        : theme.colors.onsurface["copy-dark"]};
-    }
-
-    &:active {
-      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
-      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
-    }
-  `}
-`;
-const Select = ({ type = TYPE.primary, state, variant = "none", defaultValue, onChange, size = "normal", width = "100%", value, options = [], placeholder, selectDisplayMode = "count", isSingleSelect = true, disabled = false, ...rest }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
-    const [dropdownAnimation, setDropdownAnimation] = React.useState("entered");
-    const selectReference = React.useRef(null);
-    const { theme } = useGenesis();
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (selectReference.current &&
-                !selectReference.current.contains(event.target)) {
-                handleClose();
-                setIsFocused(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    const handleClose = () => {
-        setDropdownAnimation("exiting");
-        setTimeout(() => {
-            setIsOpen(false);
-            setDropdownAnimation("entered");
-        }, 200);
-    };
-    const handleTriggerClick = () => {
-        if (disabled)
-            return;
-        setIsFocused(true);
-        if (isOpen) {
-            handleClose();
-        }
-        else {
-            setIsOpen(true);
-            setDropdownAnimation("entering");
-            setTimeout(() => {
-                setDropdownAnimation("entered");
-            }, 0);
-        }
-    };
-    const handleOptionSelect = (optionValue) => {
-        if (disabled)
-            return;
-        let newValue;
-        if (Array.isArray(value)) {
-            // Handle multi-select
-            const stringValue = value.map(String);
-            newValue = stringValue.includes(optionValue)
-                ? stringValue.filter((v) => v !== optionValue)
-                : [...stringValue, optionValue];
-        }
-        else {
-            // Handle single select
-            newValue = optionValue;
-        }
-        // Autoclose if single select or variant is 'simple'
-        if (isSingleSelect || variant === "simple") {
-            handleClose(); // Close immediately
-            onChange?.(newValue);
-        }
-        else {
-            onChange?.(newValue);
-        }
-    };
-    const getSelectModeValue = (value) => {
-        if (Array.isArray(value)) {
-            if (selectDisplayMode === "count") {
-                return `${value.length} selected`;
-            }
-            return value;
-        }
-        return value;
-    };
-    const modeValue = getSelectModeValue(value);
-    return (_jsx("div", { style: { position: "relative", width }, children: _jsxs(SelectWrapper, { ref: selectReference, "$isFocused": isFocused, type: type, disabled: disabled, onFocus: () => !disabled && setIsFocused(true), onBlur: () => !isOpen && setIsFocused(false), tabIndex: disabled ? -1 : 0, children: [_jsx(SelectTrigger, { theme: theme, type: type, state: state, value: modeValue, placeholder: placeholder, open: isOpen, onClick: handleTriggerClick, options: options, disabled: disabled, variant: variant }), isOpen && !disabled && (_jsx(SelectDropdown, { type: type, state: state, className: dropdownAnimation, style: {
-                        position: "absolute",
-                        top: "calc(100% + 4px)",
-                        left: 0,
-                        right: 0,
-                        zIndex: 1000,
-                        backgroundColor: "white",
-                        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-                        border: "1px solid #d9d9d9",
-                        transformOrigin: "top",
-                    }, children: options.map((option) => {
-                        const isSelected = Array.isArray(value)
-                            ? value.map(String).includes(option.value)
-                            : String(value) === option.value;
-                        return (_jsxs(MenuItem, { onClick: () => handleOptionSelect(option.value), "$isSelected": isSelected, type: type, disabled: disabled, children: [option.label, isSelected && _jsx("span", { style: { marginLeft: "8px" }, children: "\u2713" })] }, option.value));
-                    }) }))] }) }));
-};
-export default Select;

package/dist/components/TableWithControls/components/Select/SelectTrigger.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-import { STATE } from "@gobolt/genesis/constants";
-import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
-type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
-type Variant = "none" | "simple";
-interface SelectTriggerProperties {
-    type?: ThemeType;
-    theme?: GenesisTheme;
-    state?: keyof typeof STATE;
-    value?: string[] | string | number[] | number;
-    placeholder?: string;
-    open?: boolean;
-    onClick?: () => void;
-    renderValue?: (value: any) => React.ReactNode;
-    options?: {
-        value: string;
-        label: React.ReactNode;
-    }[];
-    disabled?: boolean;
-    variant?: Variant;
-}
-declare const SelectTrigger: React.FC<SelectTriggerProperties>;
-export default SelectTrigger;

package/dist/components/TableWithControls/components/Select/SelectTrigger.js

@@ -1,103 +0,0 @@
-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";
-const getBackgroundColor = (colors, disabled, $variant) => {
-    if ($variant === "simple")
-        return "#F4F4F4";
-    if (disabled)
-        return "#F4F4F4";
-    return "#fff";
-};
-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?.();
-    }, [disabled, onClick]);
-    const displayValue = React.useMemo(() => {
-        if (!value)
-            return null;
-        if (renderValue)
-            return renderValue(value);
-        if (Array.isArray(value)) {
-            if (value.length === 0)
-                return null;
-            const selectedLabels = value
-                .map(String)
-                .map((v) => options.find((opt) => opt.value === v)?.label)
-                .filter(Boolean);
-            return selectedLabels.length > 0
-                ? selectedLabels.join(", ")
-                : `${value.length} selected`;
-        }
-        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;

package/dist/components/TableWithControls/components/Select/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Select";
-export type { SelectProps } from "./Select";

package/dist/components/TableWithControls/components/Select/index.js

@@ -1 +0,0 @@
-export { default } from "./Select";

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

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { ColumnType } from "antd/es/table";
-import type { TablePaginationConfig } from "antd/es/table";
-import { PaginationStyle } from "./TableControls/CustomPagination";
-import type { ActionEvent } from "@/lib/types";
-export type Change = (actionEvent: ActionEvent) => void;
-export type SelectionType = "checkbox" | "radio";
-export interface TableProps<T extends Record<string, any>> {
-    dataSource: T[];
-    columns: ColumnType<T>[];
-    rowKey?: keyof T | ((record: T) => React.Key);
-    size?: "small" | "middle" | "large";
-    rowSelection?: {
-        type?: SelectionType;
-        selectedRowKeys?: React.Key[];
-        onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
-        getCheckboxProps?: (record: T) => {
-            disabled?: boolean;
-            name?: string;
-        };
-    };
-    onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
-    loading?: boolean;
-    pagination?: (TablePaginationConfig & {
-        paginationStyle?: PaginationStyle;
-    }) | false;
-    scroll?: {
-        x?: number | string;
-        y?: number | string;
-    };
-    bordered?: boolean;
-    locale?: {
-        emptyText?: React.ReactNode;
-    };
-    [key: string]: any;
-    isMainContentCell?: boolean;
-}
-export type TablePaginationType = {
-    pageSize?: number;
-    current?: number;
-    total?: number;
-    onChange?: (page: number, pageSize: number) => void;
-};
-export type SorterResult<T> = {
-    column?: ColumnType<T>;
-    order?: "ascend" | "descend" | null;
-    field?: keyof T | string | React.Key | readonly React.Key[];
-    columnKey?: React.Key;
-};
-declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
-export default Table;

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
-function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
-    const paginationConfig = pagination === false
-        ? false
-        : {
-            ...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/TableWithControls/components/Table/TableControls/CustomPagination.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import type { PaginationProps } from "antd";
-export declare enum PaginationStyle {
-    SIMPLE = "simple",// Shows just 1-5
-    TRUNCATED = "truncated",// Shows 1-5...20
-    CENTERED = "centered",// Shows 1...4-5-6-7-8...20
-    END_FOCUSED = "endFocused"
-}
-interface CustomPaginationProperties extends Omit<PaginationProps, "itemRender"> {
-    paginationStyle?: PaginationStyle;
-}
-declare const CustomPagination: React.FC<CustomPaginationProperties>;
-export default CustomPagination;

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

@@ -1,158 +0,0 @@
-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 = {}));
-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
-    const pages = [];
-    for (let index = 1; index <= Math.min(5, total); index++) {
-        pages.push(index);
-    }
-    return pages;
-};
-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) {
-        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
-        const pages = [];
-        for (let index = 1; index <= Math.min(5, pageCount); index++) {
-            pages.push(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_) => (_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,
-                                margin: "0 8px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                paddingBottom: 10,
-                            }, 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
-        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;
-            end = 6;
-        }
-        // Adjust if near the end
-        if (current >= pageCount - 2) {
-            start = pageCount - 4;
-            end = pageCount - 1;
-        }
-        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");
-        }
-        // Show middle pages
-        for (let index = start; index <= end; index++) {
-            pages.push(index);
-        }
-        // Show right ellipsis if needed
-        if (end < pageCount - 1) {
-            pages.push("right-ellipsis");
-        }
-        // Always show last page if more than 1
-        if (pageCount > 1) {
-            pages.push(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_, 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: () => 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
-        const pages = [];
-        // Always show first page
-        pages.push(1);
-        // If more than 6 pages, show ellipsis
-        if (pageCount > 6) {
-            pages.push("left-ellipsis");
-        }
-        // Show last 5 pages
-        const start = Math.max(2, pageCount - 4);
-        for (let index = start; index <= pageCount; index++) {
-            pages.push(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",
-                                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: () => 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;

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

@@ -1,7 +0,0 @@
-import React from "react";
-interface PaginationNumberProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    active?: boolean;
-    children: React.ReactNode;
-}
-export declare const PaginationNumber: React.FC<PaginationNumberProperties>;
-export {};

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import Typography from "../../Typography";
-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/TableWithControls/components/Table/TableControls/PrimaryTableControlsRow.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import type { ActionEvent, TableEventPayload } from "../../../types/events";
-type SortOption = {
-    value: string;
-    label: React.ReactNode;
-};
-type SortOptions = SortOption[] | null;
-export interface PrimaryTableControlsRowProps {
-    sortOptions: SortOptions;
-    searchByPlaceholder?: string;
-    searchField?: string;
-    isSortedAscending?: boolean;
-    onChange?: (event: ActionEvent<TableEventPayload>) => void;
-    searchValue?: string;
-    selectedSortOption?: string;
-}
-declare const PrimaryTableControlsRow: ({ sortOptions, searchByPlaceholder, searchField, isSortedAscending, searchValue, selectedSortOption, onChange, }: PrimaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
-export default PrimaryTableControlsRow;