pixelize-design-library 2.2.1 → 2.2.3

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/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/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,
 };