pixelize-design-library 1.1.94 → 2.0.1

package/dist/App.js

@@ -64,16 +64,26 @@ function App() {
         console.log("Navigating to ".concat(path));
     };
     var menu = [
-        {
-            title: "Dashboard",
-            icon: lucide_react_1.House,
-            url: "dashboard",
-        },
-        {
-            title: "Calendar",
-            icon: lucide_react_1.Calendar,
-            url: "description",
-        },
+        { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "dashboard" },
+        { id: 2, title: "Calendar", icon: lucide_react_1.Calendar, url: "calendar" },
+        { id: 3, title: "Reports", icon: lucide_react_1.Calendar, url: "reports" },
+        { id: 4, title: "Settings", icon: lucide_react_1.Calendar, url: "settings" },
+        { id: 5, title: "Users", icon: lucide_react_1.Calendar, url: "users" },
+        { id: 6, title: "Notifications", icon: lucide_react_1.Calendar, url: "notifications" },
+        { id: 7, title: "Analytics", icon: lucide_react_1.Calendar, url: "analytics" },
+        { id: 8, title: "Projects", icon: lucide_react_1.Calendar, url: "projects" },
+        { id: 9, title: "Tasks", icon: lucide_react_1.Calendar, url: "tasks" },
+        { id: 10, title: "Teams", icon: lucide_react_1.Calendar, url: "teams" },
+        { id: 11, title: "Clients", icon: lucide_react_1.Calendar, url: "clients" },
+        { id: 12, title: "Invoices", icon: lucide_react_1.Calendar, url: "invoices" },
+        { id: 13, title: "Payments", icon: lucide_react_1.Calendar, url: "payments" },
+        { id: 14, title: "Leads", icon: lucide_react_1.Calendar, url: "leads" },
+        { id: 15, title: "Opportunities", icon: lucide_react_1.Calendar, url: "opportunities" },
+        { id: 16, title: "Campaigns", icon: lucide_react_1.Calendar, url: "campaigns" },
+        { id: 17, title: "Documents", icon: lucide_react_1.Calendar, url: "documents" },
+        { id: 18, title: "Files", icon: lucide_react_1.Calendar, url: "files" },
+        { id: 19, title: "Support", icon: lucide_react_1.Calendar, url: "support" },
+        { id: 20, title: "Integrations", icon: lucide_react_1.Calendar, url: "integrations" },
     ];
     var _b = (0, react_1.useState)(true), toggle = _b[0], changeToggle = _b[1];
     var _c = (0, react_1.useState)(""), activeMenu = _c[0], setActiveMenu = _c[1];
@@ -91,7 +101,11 @@ function App() {
             react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
             react_1.default.createElement(react_2.Flex, null,
                 react_1.default.createElement(react_2.Box, null,
-                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo", companyName: "PIXELIZE" })),
+                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, 
+                        // logo={
+                        //   "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
+                        // }
+                        companyName: "PIXELIZE" })),
                 react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
                     react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
                     react_1.default.createElement("br", null),

package/dist/Assets/defaultLogo.d.ts

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

package/dist/Assets/defaultLogo.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var useCustomTheme_1 = require("../Theme/useCustomTheme");
+var DefaultLogo = function () {
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: theme.colors.black }),
+        react_1.default.createElement("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: theme.colors.black }),
+        react_1.default.createElement("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: theme.colors.black })));
+};
+exports.default = DefaultLogo;

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, padding, sx, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, onClick, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -1,15 +1,4 @@
 "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);
@@ -36,54 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Button(_a) {
-    var label = _a.label, onClick = _a.onClick, color = _a.color, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, 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, width = _a.width, padding = _a.padding, sx = _a.sx;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var buttonColor = !color ? theme.colors.primary[500] : color;
-    var variantStyles = {
-        solid: {
-            backgroundColor: theme.colors.primary[500],
-            color: theme.colors.white,
-            _hover: {
-                backgroundColor: theme.colors.primary[600],
-            },
-        },
-        outline: {
-            borderColor: theme.colors.primary[500],
-            color: theme.colors.primary[500],
-            _hover: {
-                backgroundColor: theme.colors.primary[50],
-            },
-        },
-        ghost: {
-            color: theme.colors.primary[500],
-            _hover: {
-                backgroundColor: theme.colors.primary[50],
-            },
-        },
-        link: {
-            color: theme.colors.primary[500],
-            textDecoration: "underline",
-            _hover: {
-                color: theme.colors.primary[600],
-            },
-        },
-        unstyled: {
-            backgroundColor: "transparent",
-            color: "inherit",
-            _hover: {
-                backgroundColor: "transparent",
-            },
-        },
-    };
-    var appliedVariantStyle = !color ? variantStyles[variant] : {};
-    return (react_1.default.createElement(react_2.Button, __assign({ type: type, onClick: onClick, width: width || "fit-content", padding: padding, borderRadius: "4px", bg: "#9A4FE5", color: "white", _hover: { bg: "#8847C5" }, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, sx: sx }, appliedVariantStyle),
-        react_1.default.createElement(react_2.Text, { sx: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                maxWidth: "100%",
-            }, fontSize: "1rem", fontWeight: 500 }, label)));
+    var label = _a.label, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, 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, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref;
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx }, label));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/Button.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Button: ComponentStyleConfig;

package/dist/Components/Button/Button.styles.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+exports.Button = {
+    baseStyle: function (_a) {
+        var theme = _a.theme;
+        return ({
+            borderRadius: "0.25rem",
+            fontWeight: 500,
+            fontSize: "1rem",
+            _disabled: {
+                opacity: 0.6,
+                cursor: "not-allowed",
+            },
+        });
+    },
+    variants: {
+        solid: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                bg: theme.colors[colorScheme][500],
+                color: theme.colors.white,
+                _hover: {
+                    bg: theme.colors[colorScheme][600],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][700],
+                },
+            });
+        },
+        outline: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                border: "0.1rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors[colorScheme][500],
+                    borderColor: theme.colors[colorScheme][600],
+                    color: theme.colors.white,
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][600],
+                    color: theme.colors.white,
+                },
+            });
+        },
+        ghost: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors.gray[200],
+                },
+                _active: {
+                    bg: theme.colors.gray[200],
+                },
+            });
+        },
+        link: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                color: theme.colors[colorScheme][500],
+                textDecoration: "underline",
+                bg: "transparent",
+                _hover: {
+                    color: theme.colors[colorScheme][600],
+                    textDecoration: "none",
+                },
+                _active: {
+                    color: theme.colors[colorScheme][600],
+                },
+            });
+        },
+        unstyled: function () { return ({
+            bg: "transparent",
+            color: "inherit",
+            _hover: {
+                bg: "transparent",
+            },
+        }); },
+    },
+    sizes: {
+        xs: {
+            h: "1.5rem",
+            fontSize: "0.75rem",
+            px: "0.5rem",
+        },
+        sm: {
+            h: "2rem",
+            fontSize: "0.875rem",
+            px: "0.75rem",
+        },
+        md: {
+            h: "2.5rem",
+            fontSize: "1rem",
+            px: "1rem",
+        },
+        lg: {
+            h: "3rem",
+            fontSize: "1.125rem",
+            px: "1.5rem",
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "colorScheme" | "spinner" | "sx"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-    color?: string;
     type?: "button" | "submit" | "reset";
-    padding?: string;
+    colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+    ref?: React.Ref<HTMLButtonElement>;
 };

package/dist/Components/Checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Checkbox: ComponentStyleConfig;

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+exports.Checkbox = {
+    baseStyle: function (_a) {
+        var theme = _a.theme;
+        return {
+            control: {
+                width: "1.25rem",
+                height: "1.25rem",
+                borderWidth: "1.6px",
+                _disabled: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                },
+                _indeterminate: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.primary[500],
+                    svg: {
+                        color: theme.colors.primary[500],
+                    },
+                },
+                _checked: {
+                    bg: theme.colors.primary[600],
+                    borderColor: theme.colors.primary[600],
+                },
+                _hover: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.primary[400],
+                    _checked: {
+                        bg: theme.colors.primary[600],
+                        borderColor: theme.colors.primary[600],
+                    },
+                    _indeterminate: {
+                        bg: "none",
+                        borderColor: theme.colors.primary[600],
+                    },
+                },
+                _focus: {
+                    boxShadow: "0 0 0 2px ".concat(theme.colors.primary[300]),
+                    borderColor: theme.colors.primary[500],
+                },
+                _active: {
+                    bg: theme.colors.primary[600],
+                    borderColor: theme.colors.primary[600],
+                },
+            },
+            icon: {
+                color: theme.colors.background[50],
+            },
+        };
+    },
+};

package/dist/Components/Common/FormLabel.js

@@ -7,12 +7,16 @@ exports.TextLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var TextLabel = function (_a) {
     var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "3px" },
-        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.375rem", fontWeight: 400, fontSize: "0.875rem" },
-            label,
-            isRequired && react_1.default.createElement("span", { style: { color: "red", paddingLeft: "0.4rem" } }, "*"))));
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem" },
+            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
+                label,
+                isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),
+                isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.gray[500], boxSize: 4 })))))));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Divider/Divider.d.ts

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

package/dist/Components/Divider/Divider.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+var VeritcalDivider = function () {
+    var _a;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[500] }));
+};
+exports.default = VeritcalDivider;

package/dist/Components/Input/TextInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { TextInputProps } from "./TextInputProps";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, ref, ...props }: TextInputProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TextInput>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -10,40 +10,34 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "360px" : _g, _h = _a.height, height = _h === void 0 ? "44px" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var getPadding = function () {
-        if (inputLeftIcon && inputRightIcon) {
-            return { pl: "1.9rem", pr: "1.9rem" };
-        }
-        else if (inputLeftIcon) {
-            return { pl: "1.9rem", pr: "1rem" };
-        }
-        else if (inputRightIcon) {
-            return { pl: "1rem", pr: "1.9rem" };
-        }
-        else {
-            return { pl: "1rem", pr: "1rem" };
-        }
-    };
-    var padding = getPadding();
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, w: width },
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "22.5rem" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, ref = _a.ref, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "ref"]);
+    return (react_1.default.createElement(react_2.FormControl, { w: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.InputGroup, { width: "100%", style: inputGroupStyle, height: height },
-            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", display: "flex", alignItems: "center", justifyContent: "center", height: height, width: "2rem", cursor: onLeftIconClick ? "pointer" : "default" }, leftElementStyle), inputLeftIcon)),
-            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, fontWeight: 500, color: "#161B25", bg: "gray.50", fontSize: "0.875rem", letterSpacing: "0.7px", borderRadius: "0.25rem", border: "1px", borderColor: error ? "#F2463A" : "#D6D8DB", _placeholder: { color: "gray.400", fontStyle: "italic" }, pt: "13px", pb: "13px" }, padding, inputStyle)),
-            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", display: "flex", alignItems: "center", justifyContent: "center", height: height, width: "2rem" }, rightElementStyle), inputRightIcon))),
+        react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
+            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),
+            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref }, inputStyle, props)),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle), inputRightIcon))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Input/TextInput.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Input: ComponentStyleConfig;

package/dist/Components/Input/TextInput.styles.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+exports.Input = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            pt: "0.813rem",
+            pb: "0.813rem",
+            borderRadius: "0.25rem",
+            _placeholder: {
+                fontStyle: "italic",
+            },
+        },
+    },
+    sizes: {
+        md: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.875rem",
+            },
+        },
+    },
+    variants: {
+        outline: function (props) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var theme = props.theme;
+            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                field: {
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    border: "0.063rem solid",
+                    borderColor: borderColor,
+                    _hover: {
+                        borderColor: primary,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        _hover: {
+                            borderColor: errorColor,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/Components/Input/TextInputProps.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size"> & {
+export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
     label?: string;
     id?: string;
     name?: string;
@@ -16,4 +17,5 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     informationMessage?: string;
     leftElementStyle?: {};
     rightElementStyle?: {};
+    ref?: React.Ref<HTMLInputElement>;
 };

package/dist/Components/SideBar/SideBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, }: SidebarProps): React.JSX.Element;