@gobolt/genesis 0.3.21 → 0.3.23

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

@@ -0,0 +1,14 @@
+import { TableProps } from "antd";
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+export interface StyledTableProps<T = any> extends TableProps<T> {
+    theme?: GenesisTheme;
+    $isMainContentCell?: boolean;
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing, typography, components }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+    typography: any;
+    components: any;
+}, $isMainContentCell: any) => string;
+export declare const Table: any;

package/dist/components/Table/Table/styles.js

@@ -0,0 +1,64 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Table as AntTable } from "antd";
+export const getGenesisClass = ({ colors, borderRadius, sizing, typography, components }, $isMainContentCell) => {
+    // Log the hovered color and the entire tableCell object
+    return `
+    &.ant-table-wrapper {
+      // Add your custom styles here
+    }
+
+    .ant-table {
+      // Add your custom table styles here
+    }
+
+    .ant-table-cell {
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      color: ${$isMainContentCell
+        ? colors.onsurface.copy
+        : colors.onsurface["copy-light"]} !important;
+      background-color: ${components.tableCell.surface} !important;
+      transition: background-color 0.2s ease;
+    }
+
+    .ant-table-tbody > tr:hover > td,
+    .ant-table-tbody > tr:hover > .ant-table-cell {
+      background-color: ${components.tableCell.hover} !important;
+    }
+
+    .ant-table-cell-selected {
+      background-color: ${components.tableCell.selected} !important;
+    }
+
+    .ant-table-thead > tr > th {
+      // Add your custom header styles here
+      font-family: 'Inter', sans-serif;
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      font-weight: 400;
+      color: ${$isMainContentCell
+        ? colors.onsurface.copy
+        : colors.onsurface["copy-light"]} !important;
+    }
+
+    .ant-table-tbody > tr  {
+      // Add your custom row styles here
+    }
+
+    .ant-table-tbody > tr > td {
+      // Add your custom cell styles here
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      color: ${colors.onsurface["copy-light"]};
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected > td,
+    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {
+      background-color: ${components.tableCell.selected} !important;
+      color: #fff !important;
+    }
+  `;
+};
+export const Table = styled(AntTable) `
+  ${({ theme, $isMainContentCell }) => {
+    return getGenesisClass(theme, $isMainContentCell);
+}}
+`;

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

@@ -0,0 +1,26 @@
+import type { ColumnsType } from "antd/es/table";
+import type { SelectionType } from "./Table";
+export type UseTableConfig = {
+    columns: ColumnsType<any>;
+    filters?: Record<string, any>;
+    fetchUrl?: string;
+    fetchOptions?: RequestInit;
+    selectionType?: SelectionType;
+    simulateDelay?: number;
+    disableRowSelection?: (record: any) => unknown;
+    disableAutoFetch?: boolean;
+    dataSource?: any[];
+};
+export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
+    isLoading: boolean;
+    rowSelection: {
+        type: SelectionType;
+        onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        getCheckboxProps: (record: any) => unknown;
+    };
+    selectedRows: T[];
+    updateDataSource: (newDataSource: T[]) => void;
+    dataSource: T[];
+    columns: ColumnsType<T>;
+    error: Error | null;
+};

package/dist/components/Table/Table/useTable.js

@@ -0,0 +1,141 @@
+import { useState, useEffect, useCallback } from "react";
+// Function to sort data by field and order
+const sortData = (data, sorter) => {
+    // Handle case when no sorting is applied
+    if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
+        return [...data];
+    }
+    // Handle multiple sorters
+    if (Array.isArray(sorter)) {
+        return [...data].sort((a, b) => {
+            for (const sort of sorter) {
+                if (!sort.field)
+                    continue;
+                const field = sort.field;
+                const aValue = a[field];
+                const bValue = b[field];
+                if (aValue < bValue)
+                    return sort.order === "ascend" ? -1 : 1;
+                if (aValue > bValue)
+                    return sort.order === "ascend" ? 1 : -1;
+            }
+            return 0;
+        });
+    }
+    // Handle single sorter
+    if (sorter.field) {
+        const field = sorter.field;
+        return [...data].sort((a, b) => {
+            const aValue = a[field];
+            const bValue = b[field];
+            if (sorter.order === "ascend") {
+                if (aValue < bValue)
+                    return -1;
+                if (aValue > bValue)
+                    return 1;
+                return 0;
+            }
+            if (sorter.order === "descend") {
+                if (aValue < bValue)
+                    return 1;
+                if (aValue > bValue)
+                    return -1;
+                return 0;
+            }
+            return 0;
+        });
+    }
+    return [...data];
+};
+/*
+Example of disableRowSelection function which can be passed to the useTable hook
+const disableRowSelection = (record: any) => ({
+      disabled: record.status === "completed", // Column configuration not to be checked
+      name: record.status.toString(),
+});
+*/
+const defaultRowSelection = (record) => ({
+    disabled: false, // Add your disable logic here
+    name: record.id,
+});
+export const useTable = (useTableConfig) => {
+    const [isLoading, setLoading] = useState(true);
+    const { columns, filters = null, fetchUrl = "/table/data", fetchOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(filters),
+    }, selectionType = "checkbox", simulateDelay = 0, disableRowSelection = defaultRowSelection, disableAutoFetch = false, dataSource: initialDataSource = [], } = useTableConfig;
+    // State to hold the original data and the current data
+    const [originalData, setOriginalData] = useState(initialDataSource);
+    const [data, setData] = useState({
+        dataSource: initialDataSource,
+        columns,
+        error: null,
+    });
+    const [selectedRows, setSelectedRows] = useState([]);
+    // Load initial data
+    useEffect(() => {
+        // If auto-fetch is disabled and we have initial data, skip fetching
+        if (disableAutoFetch && initialDataSource.length > 0) {
+            setLoading(false);
+            return;
+        }
+        const fetchData = async () => {
+            try {
+                const response = await fetch(fetchUrl, fetchOptions);
+                const result = await response.json();
+                const sourceData = result.data || [];
+                setOriginalData(sourceData);
+                setData({
+                    dataSource: sourceData,
+                    columns,
+                    error: null,
+                });
+            }
+            catch (error) {
+                console.error("Error fetching table data:", error);
+                // Fallback to static data
+                setData({
+                    dataSource: [],
+                    columns,
+                    error: error instanceof Error ? error : new Error(String(error)),
+                });
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        if (simulateDelay > 0) {
+            setTimeout(fetchData, simulateDelay);
+        }
+        else {
+            fetchData();
+        }
+    }, [fetchOptions, disableAutoFetch, initialDataSource]);
+    const handleRowSelection = useCallback((selectedRowKeys, selectedRows) => {
+        console.log("Row Selected:", selectedRowKeys, selectedRows);
+        setSelectedRows(selectedRows);
+    }, []);
+    // Function to manually update data source (for external data fetching)
+    const updateDataSource = useCallback((newDataSource) => {
+        setOriginalData(newDataSource);
+        setData((prev) => ({
+            ...prev,
+            dataSource: newDataSource,
+        }));
+    }, []);
+    const rowSelection = {
+        type: selectionType,
+        onChange: handleRowSelection,
+        getCheckboxProps: disableRowSelection,
+    };
+    return {
+        ...data,
+        isLoading,
+        rowSelection,
+        selectedRows,
+        updateDataSource,
+    };
+};

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

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from "react";
+import { TYPE, TYPOGRAPHY_VARIANT, STATE } from "@gobolt/genesis/constants";
+type HeadingLevel = 1 | 2 | 3 | 4 | 5;
+export interface TypographyProps {
+    children: React.ReactNode;
+    variant?: keyof typeof TYPOGRAPHY_VARIANT;
+    themeType?: keyof typeof TYPE;
+    state?: keyof typeof STATE;
+    color?: string;
+    level?: HeadingLevel;
+    isText?: boolean;
+    isFullWidth?: boolean;
+    style?: CSSProperties;
+    isDisabled?: boolean;
+}
+declare const Typography: ({ children, themeType, variant, state, color, isText, isFullWidth, style, isDisabled, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/dist/components/Table/Typography/Typography.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+import { useGenesis } from "@gobolt/genesis/providers";
+import { TYPE, TYPOGRAPHY_VARIANT, STATE, } from "@gobolt/genesis/constants";
+const Typography = ({ children, themeType = TYPE.secondary, variant = TYPOGRAPHY_VARIANT.body1, state = STATE.active, color, isText = false, isFullWidth, style, isDisabled, ...rest }) => {
+    const { breakpoint } = useGenesis();
+    if (variant.startsWith("display") || variant.startsWith("heading")) {
+        const level = variant.split("heading")[1] || variant.split("display")[1];
+        return (_jsx(S.Headline, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, level: Number.parseInt(level), "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+    }
+    if (isText) {
+        return (_jsx(S.Text, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+    }
+    return (_jsx(S.Paragraph, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+};
+export default Typography;

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

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

package/dist/components/Table/Typography/index.js

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

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

@@ -0,0 +1,3 @@
+export declare const Headline: any;
+export declare const Paragraph: any;
+export declare const Text: any;

package/dist/components/Table/Typography/styles.js

@@ -0,0 +1,54 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Typography as AntTypography } from "antd";
+const getVariant = (typography, variant, breakpoint) => {
+    return `
+        font-size: ${typography[breakpoint][variant].fontSize}px !important;
+        line-height: ${typography[breakpoint][variant].lineHeight};
+        letter-spacing: ${typography[breakpoint][variant].letterSpacing}px;
+        font-weight: ${typography[breakpoint][variant].fontWeight};
+      `;
+};
+const getColor = (color, colors, $themeType) => {
+    if (color) {
+        return color;
+    }
+    return colors[$themeType].active.color;
+};
+const getFontFamily = (variant) => {
+    return `
+    ${variant.includes("digits")
+        ? "'Roboto Mono', sans-serif"
+        : "'Inter', sans-serif"} !important;
+  `;
+};
+const getGenesisTypographyClass = ({ colors, typography }, $themeType, variant, state, breakpoint, color, $isFullWidth) => `
+    &.ant-typography {
+      font-family: ${getFontFamily(variant)};
+      color: ${getColor(color, colors, $themeType)} !important;
+      ${getVariant(typography, variant, breakpoint)}
+      margin-bottom: 0 !important;
+      width: ${$isFullWidth ? "100%" : "auto"};
+      line-height: 1;
+
+      &:disabled {
+        color: ${colors.status.disabled.default} !important;
+        userSelect: none;
+        cursor: not-allowed;
+      }
+    } 
+`;
+export const Headline = styled(AntTypography.Title) `
+  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
+}}
+`;
+export const Paragraph = styled(AntTypography.Paragraph) `
+  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
+}}
+`;
+export const Text = styled(AntTypography.Text) `
+  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+    return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
+}}
+`;

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

@@ -0,0 +1,16 @@
+export type State = "success" | "warning" | "error" | "info" | "generic" | "hollow";
+export interface BadgeProps {
+    label?: string;
+    isDisabled?: boolean;
+    state?: State;
+    hasClose?: boolean;
+    hasIcon?: boolean;
+    customIcon?: React.ReactNode | null;
+    size?: "small" | "normal" | "large";
+    backgroundColor?: string;
+    textColor?: string;
+    onClick?: () => void | null;
+    hasHover?: boolean;
+}
+declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, hasIcon, customIcon, backgroundColor, textColor, hasHover, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/TableWithControls/components/Badge/Badge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as S from "./styles";
+import { Typography } from "@gobolt/genesis/components";
+import { useGenesis } from "@gobolt/genesis/providers";
+import { getBadgeStateIcon } from "@gobolt/genesis/utils/icon-util";
+import { HiOutlineX } from "react-icons/hi";
+const isBadgeIconFilled = false;
+const Badge = ({ label, state = "info", isDisabled, hasClose = false, onClick = () => { }, size = "normal", hasIcon = true, customIcon = null, backgroundColor = null, textColor = null, hasHover = false, ...rest }) => {
+    const { theme } = useGenesis();
+    const role = hasClose ? "button" : "badge";
+    if (!label) {
+        return (_jsx(S.Badge, { label: label, role: "badge", state: state, disabled: isDisabled, style: {
+                padding: "4px 4px",
+            }, "$hasHover": hasHover, ...rest, children: _jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: getBadgeStateIcon(state, backgroundColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon) }) }));
+    }
+    return (_jsxs(S.Badge, { label: label, role: role, onClick: onClick, state: state, disabled: isDisabled, style: { cursor: role === "button" ? "pointer" : "default" }, "$backgroundColor": backgroundColor, "$hasHover": hasHover, ...rest, children: [getBadgeStateIcon(state, isDisabled
+                ? theme.colors.status.disabled.default
+                : textColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon), _jsx(Typography, { variant: size === "small" ? "label3" : "label2", color: isDisabled
+                    ? theme.colors.status.disabled.default
+                    : textColor || theme.colors.status[state].onsurface, 
+                // @ts-ignore
+                isDisabled: isDisabled, children: label }), hasClose ? (_jsx(HiOutlineX, { color: theme.colors.status[state].onsurface })) : null] }));
+};
+export default Badge;

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

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

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

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

package/dist/components/TableWithControls/components/Badge/styles.d.ts

@@ -0,0 +1,4 @@
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+import { type State } from "./Badge";
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, $backgroundColor?: string, $hasHover?: boolean) => string;
+export declare const Badge: any;

package/dist/components/TableWithControls/components/Badge/styles.js

@@ -0,0 +1,46 @@
+import styled from "@gobolt/genesis/utils/styled";
+const getBorderColor = (theme, state) => {
+    if (state === "hollow") {
+        return theme.colors.inputs.surface.border;
+    }
+    return theme.colors.status[state].surface;
+};
+export const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
+  display: inline-flex; 
+  align-self: inherit;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding-top: ${theme.components.badge["ver-padding"]}px;
+  padding-bottom: ${theme.components.badge["ver-padding"]}px;
+  padding-left: ${theme.components.badge["left-padding"]}px;
+  padding-right: ${theme.components.badge["right-padding"]}px;
+  border-radius: ${theme.components.badge.radius}px;
+  border: 1px solid ${getBorderColor(theme, state)};
+  background-color: ${$backgroundColor || theme.colors.status[state].surface};
+
+  &:not(:disabled):hover {
+    ${$hasHover
+    ? `background-color: ${theme.colors.status[state]["surface-hover"]};`
+    : ""}
+  }
+
+  ${disabled
+    ? `
+    background-color: ${theme.colors.status.disabled.surface} !important;
+    border-color: ${theme.colors.status.disabled} !important;
+    border: none;
+    cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  `
+    : ""}
+`;
+export const Badge = styled.div `
+  ${({ theme, state, label, disabled, $backgroundColor, $hasHover, }) => {
+    return getGenesisClass(theme, state, label, disabled, $backgroundColor, $hasHover);
+}}
+`;

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

@@ -0,0 +1,16 @@
+import React, { MouseEvent } from "react";
+import type { ButtonProps as AntButtonProperties } from "antd/es/button";
+import { STATE } from "../../constants";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    themeType?: ButtonThemeType;
+    state?: keyof typeof STATE;
+    isIconButton?: boolean;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/TableWithControls/components/Button/Button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+const getState = (state, isSelected) => {
+    if (isSelected) {
+        return "selected";
+    }
+    return state === "active" || state === "disabled" ? state : "active";
+};
+const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
+    const buttonState = getState(state, isSelected);
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
+};
+export default Button;

package/dist/components/TableWithControls/components/Button/IconButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from "./Button";
+export interface IconButtonProps extends Omit<ButtonProps, "themeType" | "size"> {
+    icon: React.ReactNode;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+}
+declare const IconButton: ({ isSelected, state, onClick, icon, size, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/TableWithControls/components/Button/IconButton.js

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

package/dist/components/TableWithControls/components/Button/icon-button-styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;

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

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

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

@@ -0,0 +1,4 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";
+export { default as IconButton } from "./IconButton";
+export type { IconButtonProps } from "./IconButton";

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

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export { default as IconButton } from "./IconButton";

package/dist/components/TableWithControls/components/Button/styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;