@gobolt/genesis 0.3.21 → 0.3.22

package/dist/Table/Table.d.ts

@@ -0,0 +1,51 @@
+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/Table/Table.js

@@ -0,0 +1,14 @@
+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/Table/TableControls/CustomPagination.d.ts

@@ -0,0 +1,13 @@
+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/Table/TableControls/CustomPagination.js

@@ -0,0 +1,158 @@
+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/Table/TableControls/PaginationNumber.d.ts

@@ -0,0 +1,7 @@
+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/Table/TableControls/PaginationNumber.js

@@ -0,0 +1,30 @@
+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/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/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/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/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/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/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/Typography/index.d.ts

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

package/dist/Typography/index.js

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

package/dist/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/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);
+}}
+`;