pixelize-design-library 1.0.74 → 1.0.76

package/dist/Components/Button/Button.js

@@ -5,11 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Button(_a) {
     var label = _a.label, _b = _a.width, width = _b === void 0 ? "100%" : _b, onClick = _a.onClick, color = _a.color, variant = _a.variant, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type;
-    var theme = (0, react_2.useTheme)();
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     console.log(theme);
-    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon },
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, sx: {
+            backgroundColor: theme.colors.primary[500]
+        } },
         react_1.default.createElement(react_2.Box, { sx: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -5,11 +5,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ButtonGroupIcon(_a) {
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color },
-        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick })),
-        react_1.default.createElement(react_2.Button, { onClick: onButtonClick }, buttonText),
-        rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick }))));
+        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, sx: {
+                backgroundColor: theme.colors.primary[500],
+                '&:hover': {
+                    backgroundColor: theme.colors.primary[400]
+                }
+            } })),
+        react_1.default.createElement(react_2.Button, { onClick: onButtonClick, sx: {
+                backgroundColor: theme.colors.primary[500],
+                '&:hover': {
+                    backgroundColor: theme.colors.primary[400]
+                }
+            } }, buttonText),
+        rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, sx: {
+                backgroundColor: theme.colors.primary[500],
+                '&:hover': {
+                    backgroundColor: theme.colors.primary[400]
+                }
+            } }))));
 }
 exports.default = ButtonGroupIcon;

package/dist/Components/DatePicker/DatePicker.js

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var react_datepicker_1 = __importDefault(require("react-datepicker"));
 require("react-datepicker/dist/react-datepicker.css");
 var styled_1 = __importDefault(require("@emotion/styled"));
-var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: #3182ce !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: #3182ce !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])));
+var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])), function (props) { return props.theme.colors.primary[500]; });
 var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"])));
 function DatePicker(_a) {
     var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label;

package/dist/Components/Dropdown/DropDown.js

@@ -38,9 +38,11 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var fi_1 = require("react-icons/fi");
 var framer_motion_1 = require("framer-motion");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 var Dropdown = function (_a) {
     var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onToggle = _d.onToggle, onClose = _d.onClose;
     var dropdownRef = (0, react_1.useRef)(null);
     var handleListItemClick = function (optionId, optionLabel) {
@@ -60,7 +62,7 @@ var Dropdown = function (_a) {
         };
     }, [dropdownRef, onClose]);
     var dropDownToggleOption = function () {
-        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: dropDownButtonStyle, rightIcon: isVisibleIconShow ? react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }) : undefined }, buttonProps),
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }) : undefined }, buttonProps),
             DropdownIcon,
             " \u00A0 ",
             ButtonText));

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lu_1 = require("react-icons/lu");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 function VerifyEmailOtp(_a) {
     var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement("div", { style: styles },
         react_1.default.createElement("div", { style: {
                 display: "flex",
@@ -17,7 +19,7 @@ function VerifyEmailOtp(_a) {
                 padding: "3%",
             } },
             react_1.default.createElement("div", { style: { padding: "3%" } },
-                react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: "#3182ce" })),
+                react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: theme.colors.primary[500] })),
             react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
             react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
                 description,
@@ -31,7 +33,7 @@ function VerifyEmailOtp(_a) {
                 " ",
                 react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
                         background: "none",
-                        color: "#3182ce",
+                        color: theme.colors.primary[700],
                         border: "none",
                         padding: "0",
                         font: "inherit",

package/dist/Components/KaTable/KaTable.d.ts

@@ -3,6 +3,7 @@ import { KaTableProps } from './KaTableProps';
 import * as TableEnums from 'ka-table/enums';
 import * as TableProps from 'ka-table/props';
 import * as TableActionCreator from 'ka-table/actionCreators';
+import "ka-table/style.css";
 declare const KaTable: ({ columns, data, rowKey, Edit, shorting, format, paging, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading }: KaTableProps) => React.JSX.Element;
 export default KaTable;
 export { TableEnums, TableActionCreator, TableProps };

package/dist/Components/KaTable/KaTable.js

@@ -35,7 +35,7 @@ var TableProps = __importStar(require("ka-table/props"));
 exports.TableProps = TableProps;
 var TableActionCreator = __importStar(require("ka-table/actionCreators"));
 exports.TableActionCreator = TableActionCreator;
-// import "./KaTable.css";
+require("ka-table/style.css");
 var KaTable = function (_a) {
     var columns = _a.columns, data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? 'id' : _b, Edit = _a.Edit, shorting = _a.shorting, format = _a.format, paging = _a.paging, filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading;
     return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, sortingMode: shorting, format: format, paging: paging, filteringMode: filter, childComponents: childComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading }));

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -43,6 +43,7 @@ var react_1 = __importStar(require("react"));
 var fi_1 = require("react-icons/fi");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"], ["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"])), function (_a) {
     var isActive = _a.isActive;
     return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
@@ -68,8 +69,8 @@ var NotesTextArea = styled_1.default.textarea(templateObject_5 || (templateObjec
 var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var AddTitleButton = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"], ["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"])));
 var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"], ["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"])), function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
-    return isSaveButton ? (noteValue && !isLoading ? "#3182ce" : "#3182ce") : "white";
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, theme = _a.theme;
+    return isSaveButton ? (noteValue && !isLoading ? theme.colors.primary[500] : theme.colors.primary[500]) : "white";
 }, function (_a) {
     var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
     return isSaveButton && !isLoading ? "white" : "white";
@@ -88,6 +89,7 @@ var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 =
 var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
 function NoteTextArea(_a) {
     var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var noteAreaRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), isActive = _d[0], setIsActive = _d[1];
     var _e = (0, react_1.useState)(""), noteValue = _e[0], setNoteValue = _e[1];
@@ -215,7 +217,7 @@ function NoteTextArea(_a) {
                         react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
                     react_1.default.createElement("div", { style: { marginLeft: "auto" } },
                         react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
-                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, isLoading: saveButtonLoading, onClick: function () {
+                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, isLoading: saveButtonLoading, theme: theme, onClick: function () {
                                 handleSubmit(noteValue, titleValue, files);
                                 // handleCloseTextArea();
                             } },

package/dist/Components/RadioButton/RadioButton.js

@@ -6,9 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var RadioButton = function (_a) {
     var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked;
-    return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked },
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, sx: {
+            "&[data-checked]": {
+                backgroundColor: theme.colors.primary[500],
+                borderColor: theme.colors.primary[500]
+            },
+            "&[data-checked]:hover": {
+                backgroundColor: theme.colors.primary[300],
+                borderColor: theme.colors.primary[300], // Change this to your desired hover color
+            },
+        } },
         react_1.default.createElement(react_2.Box, { as: "span" }, label)));
 };
 exports.RadioButton = RadioButton;

package/dist/Components/SideBar/SideBar.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var fi_1 = require("react-icons/fi");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Sidebar(_a) {
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)", w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: "#ffffff" },
         react_1.default.createElement(react_2.Flex, { pl: toggle ? "22%" : "8%", flexDir: "column", w: "100%", alignItems: "flex-start", as: "nav", h: "100vh" },
             react_1.default.createElement(react_2.Flex, { mt: 5, align: "center" },
                 react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
                 react_1.default.createElement(react_2.Text, { ml: 4, display: toggle ? "none" : "flex" }, companyName)),
-            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: "#3182CE", borderRadius: "23px" },
+            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
                 react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: "#ffffff" })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: "#ffffff" })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
             react_1.default.createElement(react_2.Flex, { mt: 30, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "scroll", css: {
                     "&::-webkit-scrollbar": {
@@ -30,9 +32,9 @@ function Sidebar(_a) {
                         background: "#888",
                     },
                 }, ml: toggle ? "-8px" : "0px" }, menus.map(function (menu) { return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
-                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title ? "#3182CE" : "none", borderRadius: 8, _hover: {
+                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title ? theme.colors.primary[500] : "none", borderRadius: 8, _hover: {
                         textDecor: "none",
-                        backgroundColor: "#3182CE",
+                        backgroundColor: theme.colors.primary[500],
                         color: "#ffffff",
                     }, _active: { color: "#ffffff" }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "80%" : "90%" },
                     react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "13px 12px 13px 13px" },

package/dist/Layout.js

@@ -96,6 +96,8 @@ var KaTable_1 = __importDefault(require("./Components/KaTable/KaTable"));
 //   PagingPosition,
 // } from "ka-table/enums";
 var KaTable_2 = require("./Components/KaTable/KaTable");
+// import { ICellTextProps } from 'ka-table/props';
+// import { openRowEditors } from 'ka-table/actionCreators';
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -111,6 +113,7 @@ var Layout = function () {
     var showToast = (0, Toaster_1.useToaster)().showToast;
     var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
     var _b = (0, react_1.useState)(""), selected = _b[0], setSelected = _b[1];
+    console.log(selected);
     var handleOnclick = function () {
         showToast({
             title: "Hello",
@@ -534,7 +537,9 @@ var Layout = function () {
             dataType: DataType.Date,
             style: { minWidth: 100 },
         },
-        { key: 'editColumn', width: 80 },
+        {
+            key: 'editColumn', width: 80, isFilterable: false
+        },
     ];
     var kaTableFormat = function (props) {
         if (props.column.dataType === DataType.Date) {
@@ -602,7 +607,7 @@ var Layout = function () {
                     react_1.default.createElement(Select_1.default, { options: [
                             { id: 1, label: "magesssssss" },
                             { id: 2, label: "sjdfg" },
-                        ], onChange: handleOnChange, value: selected, width: 200, placeholder: "", color: "red", colorScheme: "red" }),
+                        ], onChange: handleOnChange }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(react_2.Box, { width: "150px" },
@@ -623,7 +628,7 @@ var Layout = function () {
                     react_1.default.createElement(RadioButton_1.RadioButtonGroup, { options: radioOptions, value: selectedValue, onChange: handleChange, colorScheme: "blue", size: "md" }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement("br", null),
-                    react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid", color: "red" }),
+                    react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
                     react_1.default.createElement("br", null),
                     " ",
                     react_1.default.createElement("br", null),

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

@@ -1,2 +1,2 @@
-declare const theme: Record<string, any>;
-export default theme;
+declare const _default: Record<string, any>;
+export default _default;

package/dist/Theme/Default/theme.js

@@ -16,119 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var palette_1 = __importDefault(require("./palette"));
-var fonts_1 = __importDefault(require("./fonts"));
-var space = {
-    px: "1px",
-    0: "0",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem", // 384px
-};
-var theme = (0, react_1.extendTheme)(__assign(__assign({}, fonts_1.default), { colors: palette_1.default, lineHeights: {
-        normal: "normal",
-        none: 1,
-        shorter: 1.25,
-        short: 1.375,
-        base: 1.5,
-        tall: 1.625,
-        taller: "2",
-        "3": ".75rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "7": "1.75rem",
-        "8": "2rem",
-        "9": "2.25rem",
-        "10": "2.5rem",
-    }, letterSpacings: {
-        tighter: "-0.05em",
-        tight: "-0.025em",
-        normal: "0",
-        wide: "0.025em",
-        wider: "0.05em",
-        widest: "0.1em",
-    }, space: space, sizes: __assign(__assign({}, space), { full: "100%", screenW: "100vw", screenH: "100vh", max: 'max-content', min: 'min-content', '3xs': '14rem', '2xs': '16rem', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', '8xl': '90rem', container: {
-            sm: '640px',
-            md: '768px',
-            lg: '1024px',
-            xl: '1280px',
-        } }), breakpoints: {
-        sm: "30em",
-        md: "48em",
-        lg: "62em",
-        xl: "80em",
-        "2xl": "96em",
-    }, shadows: {
-        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
-        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
-        none: "none",
-        darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
-    }, radii: {
-        none: "0",
-        sm: "0.125rem",
-        base: "0.25rem",
-        md: "0.375rem",
-        lg: "0.5rem",
-        xl: "0.75rem",
-        "2xl": "1rem",
-        "3xl": "1.5rem",
-        full: "9999px",
-    }, zIndices: {
-        hide: -1,
-        auto: "auto",
-        base: 0,
-        docked: 10,
-        dropdown: 1000,
-        sticky: 1100,
-        banner: 1200,
-        overlay: 1300,
-        modal: 1400,
-        popover: 1500,
-        skipLink: 1600,
-        toast: 1700,
-        tooltip: 1800,
-    }, config: {
-        cssVarPrefix: 'ck',
-    }, components: {
-        Select: {
-            baseStyle: {
-                field: {
-                    background: "#3182ce",
-                    color: "white",
-                },
-            },
-        },
-    } }));
-exports.default = theme;
+var common_1 = __importDefault(require("../common"));
+var fonts_1 = __importDefault(require("../fonts"));
+var skyline = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
+exports.default = (0, react_1.extendTheme)(skyline);

package/dist/Theme/Meadow/palette.d.ts

@@ -0,0 +1,192 @@
+declare const palette: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    backgroundColor: {
+        main: string;
+        secondary: string;
+    };
+};
+export default palette;