pixelize-design-library 2.1.69 → 2.1.71

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -0,0 +1,224 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var CustomHeader_1 = __importDefault(require("./CustomHeader"));
+var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
+var SelectionCell_1 = __importDefault(require("./SelectionCell"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var table_1 = require("../../Utils/table");
+var useMergedChildComponents = function (_a) {
+    var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
+        var newSortState = __spreadArray([], sortState, true);
+        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
+        if (existingIndex === -1) {
+            newSortState.push({
+                column: columnKey,
+                direction: newState, // Default to ascending when adding a column
+            });
+        }
+        else {
+            var existingSort = newSortState[existingIndex];
+            existingSort.direction = newState;
+        }
+        var column = columns.find(function (col) { return col.key === columnKey; });
+        column.sortDirection = newState;
+        onSortChange(newSortState);
+    }, [sortState, onSortChange, columns]);
+    var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
+    (0, react_1.useEffect)(function () {
+        setSelections(selected);
+    }, [selected]);
+    var isAllSelected = (0, react_1.useMemo)(function () {
+        return {
+            checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
+            intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
+        };
+    }, [selections, dataLength]);
+    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
+        if (type === "add") {
+            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
+            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
+        }
+        else if (type === "remove") {
+            setSelections(selections.filter(function (value) { return value !== values; }));
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+        else {
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+    }, [selections, handleSelection]);
+    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
+        setSelections(values);
+        handleSelection(values);
+    }, [handleSelection]);
+    return (0, react_1.useMemo)(function () {
+        return __assign(__assign({}, childComponents), { dataRow: {
+                elementAttributes: function (props) {
+                    var _a, _b;
+                    var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    var attributes = existingElementAttributes
+                        ? existingElementAttributes(props)
+                        : {};
+                    var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                    var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
+                    // const className =
+                    //   `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
+                    return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
+                                ? theme.colors.backgroundColor.subtle
+                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
+                },
+            }, headCell: {
+                content: function (props) {
+                    var _a, _b, _c;
+                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    var column = props.column;
+                    if (column.sortable || column.filter) {
+                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
+                    }
+                    if (props.column.key === "select-cell") {
+                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
+                    }
+                    return null;
+                },
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
+                        };
+                    }
+                    return {
+                        style: {
+                            backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
+                            color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
+                            border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
+                        },
+                    };
+                },
+            }, cell: {
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e;
+                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
+                        };
+                    }
+                    return {
+                        style: {
+                            color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
+                            fontWeight: 500,
+                            border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
+                        },
+                        onClick: function () {
+                            if (onRowClick) {
+                                onRowClick(props.rowData, props.column.key);
+                            }
+                        },
+                    };
+                },
+            }, tableWrapper: {
+                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
+            }, cellText: {
+                content: function (props) {
+                    var _a;
+                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.key === "select-cell") {
+                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
+                    }
+                },
+            } });
+    }, [
+        childComponents,
+        rowKey,
+        onRowClick,
+        selections,
+        columns,
+        cellSelectionHandle,
+        headerSelectionHandle,
+        isAllSelected,
+        theme.colors,
+        headerBgColor,
+        headerTextColor,
+        freezedBgColor,
+        freezedTextColor,
+        handleSortChange,
+    ]);
+};
+exports.default = useMergedChildComponents;

package/dist/Components/Table/Table.css

@@ -0,0 +1,16 @@
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
+}
+
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
+}

package/dist/Pages/KaTableExample.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const KaTableExample: () => React.JSX.Element;
+export default KaTableExample;

package/dist/Pages/KaTableExample.js

@@ -0,0 +1,259 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var menuItems = [
+    { label: "Hide column", action: "hidecolumn" },
+    {
+        label: "Filter",
+        submenu: [
+            { label: "Filter by Date", action: "Filter by Date" },
+            { label: "Filter by Name", action: "Filter by Name" },
+            { label: "Filter by Status", action: "Filter by Status" },
+        ],
+    },
+];
+var DataType = KaTable_2.TableEnums.DataType;
+var dataArray = Array(5)
+    .fill(undefined)
+    .map(function (_, index) { return ({
+    column1: index % 2 === 0,
+    column2: "column:2 row:".concat(index + 1),
+    column3: "column:3 row:".concat(index + 1),
+    column4: "column:4 row:".concat(index + 1),
+    column5: "column:5 row:".concat(index + 1),
+    column6: index + 20,
+    column7: index + 25,
+    column8: index + 30,
+    column9: index + 35,
+    column10: index + 40,
+    column11: index + 45,
+    column12: index + 50,
+    column13: index + 55,
+    column14: index + 60,
+    column15: new Date(2022, 11, index),
+    id: index + 1,
+}); });
+var columns = [
+    {
+        key: "column1",
+        title: "Column 1",
+        dataType: DataType.Boolean,
+        width: 100,
+        columnFreeze: true,
+        customHeader: false,
+    },
+    {
+        key: "column2",
+        title: "Column 2",
+        dataType: DataType.String,
+        width: 250,
+        // visible: false,
+    },
+    {
+        key: "column3",
+        title: "Column 3",
+        dataType: DataType.Number,
+        width: 150,
+        filter: true,
+        menu: [
+            {
+                label: "Filter",
+                onClick: function () { return console.log("MENU Filter clicks"); },
+                submenu: [
+                    {
+                        label: "Filter by Date",
+                        onClick: function () { return console.log("SUBMENU Date clicks"); },
+                    },
+                    { label: "Filter by Name" },
+                    // { label: "Filter by Status", action: "Filter by Status" },
+                ],
+            },
+        ],
+    },
+    {
+        key: "column4",
+        title: "Column 4",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column5",
+        title: "Column 5",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column6",
+        title: "Column 6",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column7",
+        title: "Column 7",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column8",
+        title: "Column 8",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column9",
+        title: "Column 9",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column10",
+        title: "Column 10",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column11",
+        title: "Column 11",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column12",
+        title: "Column 12",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column13",
+        title: "Column 13",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column14",
+        title: "Column 14",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column15",
+        title: "Column 15",
+        dataType: DataType.Date,
+        width: 150,
+    },
+    {
+        key: "editColumn",
+        width: 80,
+        customHeader: false,
+    },
+];
+var KaTableExample = function () {
+    var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
+    var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
+    // const kaTableFormat = (props: any) => {
+    //   if (props.column.dataType === DataType.Date) {
+    //     return (
+    //       props.value &&
+    //       props.value.toLocaleDateString("en", {
+    //         month: "2-digit",
+    //         day: "2-digit",
+    //         year: "numeric",
+    //       })
+    //     );
+    //   }
+    // };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    // const handleSortChange = (newSortState: any, columnName: any) => {
+    //   console.log(`Sort state for ${columnName} changed to:`, newSortState);
+    // };
+    // const handleMenuItemClick = (action: any, columnName: any) => {
+    //   console.log(`Menu item clicked for ${columnName}:`, action);
+    // };
+    var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
+        console.log("CB", selectedRows);
+        if (selectedRows.length !== 0) {
+            setActionButtons(true);
+        }
+        else {
+            setActionButtons(false);
+        }
+        setSelectedRows(selectedRows);
+    }, []);
+    // console.log(actionButtons, "actionButtons");
+    var handleExample = function () {
+        setSelectedRows([]);
+    };
+    // console.log(selectedRows, "selectedRows");
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, selected: selectedRows, onSelectionChange: function (selectedRows) {
+                handleCheckSelect(selectedRows);
+            }, columnVisibility: true, 
+            // onSortChange={handleSortChange}
+            // onMenuItemClick={handleMenuItemClick}
+            // format={kaTableFormat}
+            childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = KaTableExample;

package/dist/Pages/card.js

@@ -34,7 +34,7 @@ var lucide_react_1 = require("lucide-react");
 var PaymentCard_1 = __importDefault(require("../Components/Card/PaymentCard/PaymentCard"));
 var plans = [
     {
-        id: 1,
+        plan_id: 1,
         name: "Free",
         description: "Basic features for small teams",
         monthlyPrice: 0,
@@ -47,7 +47,7 @@ var plans = [
         buttonVariant: "solid",
     },
     {
-        id: 2,
+        plan_id: 2,
         name: "Pro",
         description: "Perfect for small teams and growing businesses.",
         monthlyPrice: 499,
@@ -61,7 +61,7 @@ var plans = [
         popular: true,
     },
     {
-        id: 3,
+        plan_id: 3,
         name: "Enterprise",
         description: "Unlimited access for large organizations",
         monthlyPrice: 1499,
@@ -75,14 +75,15 @@ var plans = [
     },
 ];
 var CardPage = function () {
-    var activePlanId = 2; // Example: current active plan
-    var nextUpgradeId = 3; // Example: suggest upgrade
+    var activePlanId = 1; // Example: current active plan
+    var nextUpgradeId = 2; // Example: suggest upgrade
     var handleSelect = function (planId) {
         console.log("Selected plan:", planId);
     };
     var handleHover = function (planId, type, state) {
         console.log("".concat(type, " hover ").concat(state ? "enter" : "leave", " on plan"), planId);
     };
+    // console.log(activePlanId,"activePlanId",nextUpgradeId,"nextUpgradeId");
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(Card_1.default, null,
             react_1.default.createElement("div", null, "hello")),
@@ -99,6 +100,6 @@ var CardPage = function () {
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
-        react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 6 }, plans.map(function (plan) { return (react_1.default.createElement(PaymentCard_1.default, { key: plan.id, plan: plan, billingCycle: "monthly", isActive: plan.id === activePlanId, isNextUpgrade: plan.id === nextUpgradeId, onSelect: handleSelect, onHover: handleHover })); }))));
+        react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 6 }, plans.map(function (plan) { return (react_1.default.createElement(PaymentCard_1.default, { key: plan.plan_id, plan: plan, billingCycle: "monthly", isActive: plan.plan_id === activePlanId, isNextUpgrade: plan.plan_id === nextUpgradeId, onSelect: handleSelect, onHover: handleHover })); }))));
 };
 exports.default = CardPage;

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.69",
+  "version": "2.1.71",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",