pixelize-design-library 2.2.9 → 2.2.11

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

@@ -10,21 +10,21 @@ var lucide_react_1 = require("lucide-react");
 function VerifyEmailOtp(_a) {
     var resendMail = _a.resendMail, 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(react_2.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "400px", mx: "auto", borderColor: "gray.200", borderRadius: "lg" },
+    return (react_1.default.createElement(react_2.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg" },
         react_1.default.createElement(react_2.Box, { mb: 4 },
             react_1.default.createElement(lucide_react_1.MailCheck, { size: 80, color: theme.colors.primary[500] })),
         react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center" }, title),
-        react_1.default.createElement(react_2.Text, { fontSize: "md", textAlign: "center", color: "gray.600", mb: 6 },
+        react_1.default.createElement(react_2.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6 },
             description,
             react_1.default.createElement("br", null),
             "your new Pixel Account"),
         react_1.default.createElement(react_2.HStack, { spacing: 3, mb: 6 },
-            react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "1px solid", borderColor: "gray.300", _focus: {
+            react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.gray[300], _focus: {
                     borderColor: theme.colors.primary[500],
-                    boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+                    boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
                 } })); }))),
         react_1.default.createElement(react_2.Flex, { justify: "center" },
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] },
                 "Didn\u2019t receive the code?",
                 " ",
                 react_1.default.createElement(react_2.Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail }, "Resend Code")))));

package/dist/Components/Input/Switch/InputSwitch.js

@@ -29,10 +29,12 @@ exports.InputSwitch = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../../Common/FormLabel");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var InputSwitch = function (_a) {
     var switchText = _a.switchText, _b = _a.switchTextPosition, switchTextPosition = _b === void 0 ? "right" : _b, id = _a.id, isChecked = _a.isChecked, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "md" : _c, props = __rest(_a, ["switchText", "switchTextPosition", "id", "isChecked", "label", "isInformation", "informationMessage", "isRequired", "size"]);
-    var activeColor = (0, react_2.useColorModeValue)("blue.500", "blue.300");
-    var inactiveColor = (0, react_2.useColorModeValue)("gray.300", "gray.600");
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var activeColor = (0, react_2.useColorModeValue)(theme.colors.primary[500], theme.colors.primary[300]);
+    var inactiveColor = (0, react_2.useColorModeValue)(theme.colors.gray[300], theme.colors.gray[600]);
     var sizeStyles = {
         sm: { fontSize: "sm", spacing: 1 },
         md: { fontSize: "md", spacing: 2 },

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, errorMessage, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -60,18 +60,19 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, errorMessage = _a.errorMessage;
+    var _b, _c;
+    var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
-    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
-    var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
+    var _k = (0, react_1.useState)(value), options = _k[0], setOptions = _k[1];
+    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setOptions(value);
     }, [value]);
     var handleInputChange = function (e) {
         setInputValue(e.target.value);
-        setError("");
+        setLocalError("");
     };
     var validateEmail = function (email) {
         var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -80,7 +81,7 @@ function MultiSelect(_a) {
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && inputValue.trim() !== "") {
             if (!validateEmail(inputValue)) {
-                setError("Invalid email address");
+                setLocalError("Invalid email address");
                 return;
             }
             var existingOption = options.find(function (option) { return option.label === inputValue; });
@@ -105,15 +106,22 @@ function MultiSelect(_a) {
     };
     return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
-                borderColor: theme.colors.primary[500],
-                boxShadow: "0 0 0 1px " + theme.colors.primary[500],
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: error || localError
+                ? theme.colors.red[500]
+                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
+                borderColor: error || localError
+                    ? theme.colors.red[500]
+                    : theme.colors.primary[500],
+                boxShadow: "0 0 0 0.125rem" +
+                    (error || localError
+                        ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
+                        : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
             } },
             options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
                 react_1.default.createElement(react_2.TagLabel, null, option.label),
                 react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
             react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", flex: "1", style: __assign(__assign({}, inputStyle), { backgroundColor: "transparent", fontWeight: 500, color: theme.colors.gray[700], fontSize: 15, letterSpacing: 0.3 }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = MultiSelect;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -11,6 +11,7 @@ export type MultiSelectProps = {
     placeholderText?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    error?: boolean;
     size?: string;
     inputStyle?: {};
     errorMessage?: string;

package/dist/Components/NumberInput/NumberInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NumberInputProps } from "./NumberInputProps";
-export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, }: NumberInputProps): React.JSX.Element;
+export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width, minW, ...props }: NumberInputProps): React.JSX.Element;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,16 +1,41 @@
 "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 __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 FormLabel_1 = require("../Common/FormLabel");
 function NumberInput(_a) {
-    var defaultValue = _a.defaultValue, min = _a.min, max = _a.max, precision = _a.precision, step = _a.step, clampValueOnBlur = _a.clampValueOnBlur, keepWithinRange = _a.keepWithinRange, value = _a.value, onChange = _a.onChange, size = _a.size, maxW = _a.maxW, allowMouseWheel = _a.allowMouseWheel, NumberIncrementStepperBg = _a.NumberIncrementStepperBg, NumberIncrementStepperActive = _a.NumberIncrementStepperActive, NumberIncrementStepperChildren = _a.NumberIncrementStepperChildren, NumberDecrementStepperBg = _a.NumberDecrementStepperBg, NumberDecrementStepperChildren = _a.NumberDecrementStepperChildren, NumberDecrementStepperActive = _a.NumberDecrementStepperActive;
-    return (react_1.default.createElement(react_2.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel },
-        react_1.default.createElement(react_2.NumberInputField, null),
-        react_1.default.createElement(react_2.NumberInputStepper, null,
-            react_1.default.createElement(react_2.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive }, NumberIncrementStepperChildren),
-            react_1.default.createElement(react_2.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive }, NumberDecrementStepperChildren))));
+    var defaultValue = _a.defaultValue, min = _a.min, max = _a.max, precision = _a.precision, step = _a.step, clampValueOnBlur = _a.clampValueOnBlur, keepWithinRange = _a.keepWithinRange, value = _a.value, onChange = _a.onChange, size = _a.size, maxW = _a.maxW, allowMouseWheel = _a.allowMouseWheel, NumberIncrementStepperBg = _a.NumberIncrementStepperBg, NumberIncrementStepperActive = _a.NumberIncrementStepperActive, NumberIncrementStepperChildren = _a.NumberIncrementStepperChildren, NumberDecrementStepperBg = _a.NumberDecrementStepperBg, NumberDecrementStepperChildren = _a.NumberDecrementStepperChildren, NumberDecrementStepperActive = _a.NumberDecrementStepperActive, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, id = _a.id, _b = _a.width, width = _b === void 0 ? "100%" : _b, minW = _a.minW, props = __rest(_a, ["defaultValue", "min", "max", "precision", "step", "clampValueOnBlur", "keepWithinRange", "value", "onChange", "size", "maxW", "allowMouseWheel", "NumberIncrementStepperBg", "NumberIncrementStepperActive", "NumberIncrementStepperChildren", "NumberDecrementStepperBg", "NumberDecrementStepperChildren", "NumberDecrementStepperActive", "label", "isInformation", "informationMessage", "isRequired", "id", "width", "minW"]);
+    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
+        react_1.default.createElement(react_2.NumberInput, __assign({ defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel }, props),
+            react_1.default.createElement(react_2.NumberInputField, null),
+            react_1.default.createElement(react_2.NumberInputStepper, null,
+                react_1.default.createElement(react_2.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive }, NumberIncrementStepperChildren),
+                react_1.default.createElement(react_2.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive }, NumberDecrementStepperChildren)))));
 }
 exports.default = NumberInput;

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

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

package/dist/Components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+exports.NumberInput = {
+    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, _p, _q;
+            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 ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                        outline: "0"
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        _hover: {
+                            borderColor: errorColor,
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                            outline: "0"
+                        },
+                    },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
+                    _disabled: {
+                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor: borderColor,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -6,6 +6,14 @@ export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "mi
     NumberDecrementStepperBg?: string;
     NumberDecrementStepperChildren?: string;
     NumberDecrementStepperActive?: ActiveStyle;
+    label?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
+    id?: string;
+    width?: string;
+    minW?: string;
+    maxW?: string;
 };
 export type ActiveStyle = {
     bg: string;

package/dist/Components/PinInput/PinInput.js

@@ -5,11 +5,16 @@ 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 PinInputs(_a) {
-    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, color = _a.color, variant = _a.variant, _b = _a.pins, pins = _b === void 0 ? 3 : _b, label = _a.label;
+    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
         react_1.default.createElement(react_2.HStack, null,
-            react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))));
+            react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
+                } })); })))));
 }
 exports.default = PinInputs;

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -3,7 +3,7 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     type?: "alphanumeric" | "number";
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
 };

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -37,10 +37,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ProfilePhotoViewer(_a) {
     var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
     var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
     var fileInputRef = (0, react_1.useRef)(null);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var handlePhotoChange = function (event) {
         var _a;
         if (!isEditable)
@@ -80,13 +82,13 @@ function ProfilePhotoViewer(_a) {
                 isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
                     react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
                             transform: "scale(1.1)",
-                            color: "blue.500",
+                            color: theme.colors.gray[300],
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
                         } }))),
                 isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
                     react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
                             transform: "scale(1.1)",
-                            color: "blue.500",
+                            color: theme.colors.gray[300],
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
                         } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));

package/dist/Components/ProgressBar/ProgressBar.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 function ProgressBar(_a) {
-    var size = _a.size, isIndeterminate = _a.isIndeterminate, color = _a.color, hasStripe = _a.hasStripe, height = _a.height, value = _a.value, isAnimated = _a.isAnimated, max = _a.max, min = _a.min, variant = _a.variant;
+    var size = _a.size, isIndeterminate = _a.isIndeterminate, _b = _a.color, color = _b === void 0 ? "primary" : _b, hasStripe = _a.hasStripe, height = _a.height, value = _a.value, isAnimated = _a.isAnimated, max = _a.max, min = _a.min, variant = _a.variant;
+    //  const theme = useCustomTheme();
     return (react_1.default.createElement(react_2.Progress, { size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
 }
 exports.default = ProgressBar;

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -1,6 +1,6 @@
 import { ProgressProps } from "@chakra-ui/react";
 export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min"> & {
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     size?: "lg" | "md" | "sm" | "xs";
 };

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, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -21,28 +21,36 @@ var Sidebar_1 = require("../../Constants/Sidebar");
 var lucide_react_1 = require("lucide-react");
 var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
+var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 function Sidebar(_a) {
     var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
         react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
-            logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "left", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
+            isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
+                react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
+                react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
+                react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_1.default.Fragment, null, logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
                 react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
-                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 18, fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
+                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
                 react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
                     react_1.default.createElement(defaultLogo_1.default, null)),
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 }, companyName))),
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 },
+                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right" }, companyName)))))),
             react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
             react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
-                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 2 },
-                    react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md", startColor: theme.colors.gray[600], endColor: theme.colors.gray[500] }))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
+                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
+                    react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
+                    react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
+                    react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
                 react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-                !isDisableAddNew && (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
-                    react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
-                    react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
-                        react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
-                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
+                !isDisableAddNew &&
+                    (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
+                        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
+                            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
+                        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
                 react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
                     react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
                     react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));

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

@@ -10,6 +10,7 @@ export type SidebarProps = {
     onAddNewClick?: () => void;
     selectedSubMenu?: string | null;
     isLoading?: boolean;
+    loadingLines?: number;
 };
 export type MenuProps = {
     id: string | number;

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface OverflowWrapperWithTooltipProps {
+    children: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    maxWidth?: string | number;
+    isTooltipDisabled?: boolean;
+}
+declare const OverflowTooltipText: React.FC<OverflowWrapperWithTooltipProps>;
+export default OverflowTooltipText;

package/dist/Components/SideBar/components/OverflowTooltipText.js

@@ -0,0 +1,63 @@
+"use strict";
+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 react_2 = require("@chakra-ui/react");
+var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+var OverflowTooltipText = function (_a) {
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "200px" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d;
+    var contentRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(""), textContent = _e[0], setTextContent = _e[1];
+    var _f = (0, react_1.useState)(false), isOverflowing = _f[0], setIsOverflowing = _f[1];
+    (0, react_1.useEffect)(function () {
+        var el = contentRef.current;
+        if (!el)
+            return;
+        var checkOverflow = function () {
+            setTextContent(el.textContent || "");
+            var sw = Math.round(el.scrollWidth);
+            var cw = Math.round(el.clientWidth);
+            setIsOverflowing(sw > cw + 1);
+        };
+        checkOverflow();
+        var ro = new ResizeObserver(function () { return checkOverflow(); });
+        ro.observe(el);
+        var mo = new MutationObserver(function () { return checkOverflow(); });
+        mo.observe(el, { childList: true, subtree: true, characterData: true });
+        window.addEventListener("resize", checkOverflow);
+        return function () {
+            ro.disconnect();
+            mo.disconnect();
+            window.removeEventListener("resize", checkOverflow);
+        };
+    }, [children]);
+    var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
+    return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
+        react_1.default.createElement(react_2.Box, { ref: contentRef, as: "div", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
+};
+exports.default = OverflowTooltipText;

package/dist/Components/Switch/Switch.js

@@ -1,39 +1,24 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 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 styled_1 = __importDefault(require("@emotion/styled"));
-var react_2 = require("@emotion/react");
-var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: auto;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"], ["\n  position: relative;\n  width: 100%;\n  height: auto;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"])));
-var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #eff7ff;\n  border-radius: 16px;\n  border: 1px solid #88c9f3;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #eff7ff;\n  border-radius: 16px;\n  border: 1px solid #88c9f3;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"])), function (_a) {
-    var position = _a.position;
-    return position === "left" ? "translateX(0%)" : "translateX(100%)";
-});
-// background-color: ${({ backgroundColor }) => backgroundColor};
-var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"], ["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"])));
-var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "])));
-});
-var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"], ["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"])));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Switch(_a) {
     var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
-    return (react_1.default.createElement(SwitchContainerHeader, null,
-        react_1.default.createElement(SwitchContainer, null,
-            react_1.default.createElement(Highlight, { position: switchActive }),
-            react_1.default.createElement(SwitchList, null,
-                react_1.default.createElement(SwitchOption, { isActive: switchActive === "left", onClick: function () { return onSwitchToggle("left"); } },
-                    leftIcon,
-                    leftText),
-                react_1.default.createElement(SwitchOption, { isActive: switchActive === "right", onClick: function () { return onSwitchToggle("right"); } },
-                    rightIcon,
-                    rightText)))));
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var highlightBg = (0, react_2.useColorModeValue)(theme.colors.primary[50], theme.colors.primary[800]);
+    var borderColor = (0, react_2.useColorModeValue)(theme.colors.gray[100], theme.colors.gray[600]);
+    return (react_1.default.createElement(react_2.Box, { bg: "white", border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative" },
+        react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: "0.063rem solid ".concat(theme.colors.primary[500]), borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }),
+        react_1.default.createElement(react_2.Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative" },
+            react_1.default.createElement(react_2.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.black, zIndex: 1, onClick: function () { return onSwitchToggle("left"); } },
+                leftIcon,
+                react_1.default.createElement(react_2.Text, { ml: leftIcon ? 1 : 0 }, leftText)),
+            react_1.default.createElement(react_2.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: "black", zIndex: 1, onClick: function () { return onSwitchToggle("right"); } },
+                rightIcon,
+                react_1.default.createElement(react_2.Text, { ml: rightIcon ? 1 : 0 }, rightText)))));
 }
 exports.default = Switch;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/Theme/componentStyles.d.ts

@@ -5,4 +5,5 @@ export declare const componentStyles: {
     Select: import("@chakra-ui/theme").ComponentStyleConfig;
     Tag: import("@chakra-ui/theme").ComponentStyleConfig;
     Textarea: import("@chakra-ui/theme").ComponentStyleConfig;
+    NumberInput: import("@chakra-ui/theme").ComponentStyleConfig;
 };

package/dist/Theme/componentStyles.js

@@ -7,6 +7,7 @@ var TextInput_styles_1 = require("../Components/Input/TextInput.styles");
 var Select_styles_1 = require("../Components/Select/Select.styles");
 var Tag_styles_1 = require("../Components/Tag/Tag.styles");
 var InputTextArea_style_1 = require("../Components/InputTextArea/InputTextArea.style");
+var NumberInput_styles_1 = require("../Components/NumberInput/NumberInput.styles");
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
     Input: TextInput_styles_1.Input,
@@ -14,4 +15,5 @@ exports.componentStyles = {
     Select: Select_styles_1.Select,
     Tag: Tag_styles_1.Tag,
     Textarea: InputTextArea_style_1.Textarea,
+    NumberInput: NumberInput_styles_1.NumberInput,
 };

package/package.json

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

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -1,6 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import ApexBarChart from './ApexBarChart';
-// import { ApexBarChartProps } from './ApexBarChartProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NumberInput/NumberInput.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Components/NumberInput/NumberInput.stories.js

@@ -1,5 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import NumberInputs from './NumberInput';
-Object.defineProperty(exports, "__esModule", { value: true });