pixelize-design-library 2.2.145 → 2.2.146

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -10,58 +10,107 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var react_2 = require("@chakra-ui/react");
+var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
 var ApexPolarChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColors = _a.chartColors, _d = _a.titlePosition, titlePosition = _d === void 0 ? "center" : _d, _e = _a.titleStyle, titleStyle = _e === void 0 ? {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    } : _e, _f = _a.legendStyle, legendStyle = _f === void 0 ? {
-        colors: "#000",
-        position: "bottom",
-        useSeriesColors: false,
-    } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
-    var extraOptions = {};
-    switch (variant) {
-        case "basic":
-            extraOptions = {
-                stroke: { colors: ["#fff"] },
-                fill: { opacity: 0.8 },
-            };
-            break;
-        case "monochrome":
-            extraOptions = {
-                theme: {
-                    monochrome: {
-                        enabled: true,
-                        shadeTo: "light",
-                        shadeIntensity: 0.6,
+    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColors = _a.chartColors, _d = _a.titlePosition, titlePosition = _d === void 0 ? "center" : _d, titleStyle = _a.titleStyle, legendStyle = _a.legendStyle, _e = _a.variant, variant = _e === void 0 ? "basic" : _e;
+    var theme = (0, react_2.useTheme)();
+    var palette = theme.colors;
+    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
+    var mergedLegendStyle = (0, react_1.useMemo)(function () {
+        var defaults = {
+            colors: palette.text[900],
+            position: "bottom",
+            useSeriesColors: false,
+        };
+        return __assign(__assign({}, defaults), legendStyle);
+    }, [palette, legendStyle]);
+    var resolvedChartColors = (0, react_1.useMemo)(function () { return chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColors, palette]);
+    var options = (0, react_1.useMemo)(function () {
+        var extraOptions = {};
+        switch (variant) {
+            case "basic":
+                extraOptions = {
+                    stroke: { colors: [palette.white] },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            case "monochrome":
+                extraOptions = {
+                    theme: {
+                        monochrome: {
+                            enabled: true,
+                            shadeTo: "light",
+                            shadeIntensity: 0.6,
+                        },
                     },
+                    stroke: { colors: [palette.white] },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            default:
+                break;
+        }
+        return __assign({ chart: { type: "polarArea" }, labels: labels, colors: resolvedChartColors, legend: {
+                position: mergedLegendStyle.position,
+                labels: {
+                    colors: mergedLegendStyle.colors,
+                    useSeriesColors: mergedLegendStyle.useSeriesColors,
                 },
-                stroke: { colors: ["#fff"] },
-                fill: { opacity: 0.8 },
-            };
-            break;
-        default:
-            break;
-    }
-    var options = __assign({ chart: { type: "polarArea" }, labels: labels, colors: chartColors !== null && chartColors !== void 0 ? chartColors : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
-            position: legendStyle.position,
-            labels: {
-                colors: legendStyle.colors,
-                useSeriesColors: legendStyle.useSeriesColors,
-            },
-        }, title: {
-            text: title,
-            align: titlePosition,
-            style: titleStyle,
-        }, dataLabels: { enabled: true } }, extraOptions);
+            }, title: {
+                text: title,
+                align: titlePosition,
+                style: mergedTitleStyle,
+            }, dataLabels: { enabled: true } }, extraOptions);
+    }, [
+        variant,
+        labels,
+        resolvedChartColors,
+        mergedLegendStyle,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        palette.white,
+    ]);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width })));
 };

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-declare const ErrorComponent: ({ error, errorClassName }: {
+import React from "react";
+declare const ErrorComponent: ({ error, errorClassName, }: {
     error: string;
     errorClassName?: string;
 }) => React.JSX.Element;

package/dist/Components/Common/ErrorComponent.js

@@ -4,13 +4,19 @@ 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 react_3 = require("@chakra-ui/react");
 var ErrorComponent = function (_a) {
+    var _b, _c, _d, _e;
     var error = _a.error, errorClassName = _a.errorClassName;
-    return (react_1.default.createElement("p", { className: "mt-1 text-sm text-[#F2463A] flex items-center gap-1 ".concat(errorClassName) },
-        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
-            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: "#EF4444" }),
-            react_1.default.createElement("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: "white" }),
-            react_1.default.createElement("circle", { cx: "50", cy: "28", r: "4", fill: "white" })),
-        error));
+    var theme = (0, react_3.useTheme)();
+    var errorFill = (_d = (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[500];
+    var white = theme.colors.white;
+    return (react_1.default.createElement(react_2.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName },
+        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
+            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }),
+            react_1.default.createElement("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: white }),
+            react_1.default.createElement("circle", { cx: "50", cy: "28", r: "4", fill: white })),
+        react_1.default.createElement(react_2.Text, { as: "span" }, error)));
 };
 exports.default = ErrorComponent;

package/dist/Components/Common/Label.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-declare const Label: ({ label, labelClassName, isRequired }: {
+import React from "react";
+declare const Label: ({ label, labelClassName, isRequired, }: {
     label: string;
     labelClassName?: string;
     isRequired?: boolean;

package/dist/Components/Common/Label.js

@@ -4,10 +4,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 react_3 = require("@chakra-ui/react");
 var Label = function (_a) {
+    var _b, _c, _d, _e, _f;
     var label = _a.label, labelClassName = _a.labelClassName, isRequired = _a.isRequired;
-    return (react_1.default.createElement("label", { className: "block text-sm font-medium text-[#434853] mb-1 ".concat(labelClassName), htmlFor: label },
+    var theme = (0, react_3.useTheme)();
+    var headerColor = (_c = (_b = theme.colors.header) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = theme.colors.text) === null || _d === void 0 ? void 0 : _d[500];
+    var errorColor = (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500];
+    return (react_1.default.createElement(react_2.FormLabel, { htmlFor: label, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor },
         label,
-        isRequired && react_1.default.createElement("span", { className: "text-[#F2463A] ml-1" }, "*")));
+        isRequired && (react_1.default.createElement(react_2.Text, { as: "span", color: errorColor, ml: 1 }, "*"))));
 };
 exports.default = Label;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -71,7 +71,7 @@ var CalendarPanel = function (_a) {
                         borderStyle: "solid",
                         boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
                     }, style: {
-                        border: "1px solid #CBD5E0",
+                        border: "1px solid ".concat(theme.colors.gray[300]),
                         fontSize: "12px",
                         lineHeight: "1.25rem",
                         WebkitAppearance: "menulist",
@@ -92,7 +92,7 @@ var CalendarPanel = function (_a) {
                         borderStyle: "solid",
                         boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
                     }, style: {
-                        border: "1px solid #CBD5E0",
+                        border: "1px solid ".concat(theme.colors.gray[300]),
                         fontSize: "12px",
                         lineHeight: "1.25rem",
                         WebkitAppearance: "menulist",

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -133,7 +133,7 @@ var FilterSidebar = function (_a) {
                     clearFilter(section.id);
                 }, borderRadius: "full", px: 2 }, "Clear")) : react_1.default.createElement(lucide_react_1.ChevronDownIcon, { size: 10 }))),
         content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, py: 0 }, section.range ? ((function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             var range = section.range;
             var step = range.step || 1;
             var currentMin = (_b = (_a = internalSelected[section.id]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : range.min;
@@ -144,13 +144,15 @@ var FilterSidebar = function (_a) {
             var maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
             var primaryColor = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[300];
             var secondaryColor = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.red) === null || _h === void 0 ? void 0 : _h[600];
+            var primaryGlowColor = (_q = (_m = (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[32]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500]) !== null && _q !== void 0 ? _q : theme.colors.gray[500];
+            var thumbShadow = theme.shadows.md;
             return (react_1.default.createElement(react_2.Box, { w: "full", px: 3 },
                 react_1.default.createElement("style", null, "\n                      .custom-range-slider::-webkit-slider-thumb {\n                        pointer-events: auto;\n                        width: 24px;\n                        height: 24px;\n                        -webkit-appearance: none;\n                        cursor: pointer;\n                      }\n                      .custom-range-slider::-moz-range-thumb {\n                        pointer-events: auto;\n                        width: 24px;\n                        height: 24px;\n                        border: none;\n                        cursor: pointer;\n                      }\n                    "),
                 react_1.default.createElement(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center" },
                     react_1.default.createElement(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), width: "".concat(maxPercent - minPercent, "%"), height: "6px", style: { background: "linear-gradient(to right, ".concat(primaryColor, ", ").concat(secondaryColor, ")") }, borderRadius: "full", boxShadow: "0 0 8px rgba(66, 153, 225, 0.4)" }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
-                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: "0 2px 6px rgba(0,0,0,0.15)", zIndex: 2 }),
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), width: "".concat(maxPercent - minPercent, "%"), height: "6px", style: { background: "linear-gradient(to right, ".concat(primaryColor, ", ").concat(secondaryColor, ")") }, borderRadius: "full", boxShadow: "0 0 8px ".concat(primaryGlowColor) }),
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }),
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(maxPercent, "%"), transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: "white", border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }),
                     react_1.default.createElement(react_2.Box, { position: "absolute", left: "".concat(minPercent, "%"), top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.white, border: "1px solid ".concat(theme.colors.gray[200]), borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3 },
                         currentMin,
                         range.unit ? " ".concat(range.unit) : ""),
@@ -343,13 +345,13 @@ var FilterSidebar = function (_a) {
                 }
                 : {
                     padding: panelPadding,
-                    background: theme.colors.white || "#fff",
+                    background: theme.colors.white,
                     borderRadius: 8,
                     overflow: "visible",
                 },
         },
     }); });
-    return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
+    return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
         react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
             react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
             activeCount > 0 && clearAllButton && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { InputProps } from "./InputProps";
-declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired }: InputProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, }: InputProps) => React.JSX.Element>;
 export default _default;

package/dist/Components/Input/Input/Input.js

@@ -37,19 +37,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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 Label_1 = __importDefault(require("../../Common/Label"));
 var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
 var Input = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired;
-    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var theme = (0, react_2.useTheme)();
+    var colors = theme.colors;
+    var _s = (0, react_1.useState)(false), showPassword = _s[0], setShowPassword = _s[1];
     var isPassword = type === "password";
     var inputType = isPassword ? (showPassword ? "text" : "password") : type;
-    return (react_1.default.createElement("div", { className: "mb-4 ".concat(inputBoxClassName !== null && inputBoxClassName !== void 0 ? inputBoxClassName : "") },
+    var borderColor = error
+        ? (_c = (_b = colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]
+        : value
+            ? (_d = colors.primary) === null || _d === void 0 ? void 0 : _d[500]
+            : (_e = colors.boxborder) === null || _e === void 0 ? void 0 : _e[500];
+    var shadowPrimary = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
+    var shadowError = (_g = colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
+    return (react_1.default.createElement(react_2.Box, { className: inputBoxClassName, mb: 4 },
         react_1.default.createElement(Label_1.default, { label: label, isRequired: isRequired }),
-        react_1.default.createElement("div", { className: "relative w-full overflow-hidden" },
-            react_1.default.createElement("input", { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: "".concat(className && " ".concat(className), " w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-purple-500\n                    ").concat(error ? "border-red-500 text-[#161B25]" : '', "\n                    ").concat(value ? "border-purple-500 text-gray-900" : "border-gray-300 text-gray-900", "\n                    ").concat(error ? "focus:ring-red-400" : '', "\n                    ").concat(value ? "focus:ring-purple-500" : "focus:ring-indigo-300", "\n                    ").concat(isPassword ? "pr-10" : "", "\n                    "), required: isRequired }),
-            isPassword && (react_1.default.createElement("button", { type: "button", className: "absolute inset-y-0 right-3 flex items-center text-gray-400", onClick: function () { return setShowPassword(function (prev) { return !prev; }); } }, showPassword ? (react_1.default.createElement(lucide_react_1.Eye, { className: "h-5 w-5" })) : (react_1.default.createElement(lucide_react_1.EyeOff, { className: "h-5 w-5" }))))),
-        error && (react_1.default.createElement(ErrorComponent_1.default, { error: error }))));
+        react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", overflow: "hidden" },
+            react_1.default.createElement(react_2.Input, { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: "md", borderWidth: "1px", borderColor: borderColor, color: (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h[500], pr: isPassword ? 10 : 4, _hover: {
+                    borderColor: error
+                        ? (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[600]
+                        : value
+                            ? (_l = colors.primary) === null || _l === void 0 ? void 0 : _l[600]
+                            : (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[400],
+                }, _focus: {
+                    borderColor: error ? (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.error) === null || _p === void 0 ? void 0 : _p[500] : (_q = colors.primary) === null || _q === void 0 ? void 0 : _q[500],
+                    boxShadow: error
+                        ? "0 0 0 0.125rem ".concat(shadowError)
+                        : "0 0 0 0.125rem ".concat(shadowPrimary),
+                    outline: "none",
+                }, required: isRequired }),
+            isPassword && (react_1.default.createElement(react_2.IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? react_1.default.createElement(lucide_react_1.Eye, { size: 20 }) : react_1.default.createElement(lucide_react_1.EyeOff, { size: 20 }), onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, color: (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[400] }))),
+        error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
 };
 exports.default = react_1.default.memo(Input);

package/dist/Components/Loading/Loading.js

@@ -11,6 +11,7 @@ exports.default = Loading;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var react_3 = require("@emotion/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 // const blurAnimation = keyframes`
 //   0% {
 //     filter: blur(0);
@@ -25,12 +26,13 @@ var react_3 = require("@emotion/react");
 var colorTransition = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"], ["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"])));
 function Loading(_a) {
     var text = _a.text, isLoading = _a.isLoading, onlytext = _a.onlytext;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!isLoading) {
         return null;
     }
-    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "rgba(0, 0, 0, 0.4)", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
+    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "blackAlpha.600", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
         react_1.default.createElement(react_2.Center, { height: "100vh" }, !onlytext ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }),
+            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.primary[500], size: "xl" }),
             react_1.default.createElement(react_2.Text, { mt: "2", ml: "5" }, text))) : (react_1.default.createElement(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              animation: ", " 2s infinite;\n            "], ["\n              animation: ", " 2s infinite;\n            "])), colorTransition) }, text)))));
 }
 var templateObject_1, templateObject_2;

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { PinInputsProps } from './PinInputsProps';
+import React from "react";
+import { PinInputsProps } from "./PinInputsProps";
 declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => React.JSX.Element;
 export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -46,12 +46,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
 var Label_1 = __importDefault(require("../Common/Label"));
 var ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
 var PinInputs = function (_a) {
-    var _b = _a.length, length = _b === void 0 ? 3 : _b, label = _a.label, error = _a.error, onChange = _a.onChange, onComplete = _a.onComplete, _c = _a.mask, mask = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "*" : _d;
-    var _e = (0, react_1.useState)(Array(length).fill("")), values = _e[0], setValues = _e[1];
+    var _b, _c, _d, _e, _f;
+    var _g = _a.length, length = _g === void 0 ? 3 : _g, label = _a.label, error = _a.error, onChange = _a.onChange, onComplete = _a.onComplete, _h = _a.mask, mask = _h === void 0 ? false : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "*" : _j;
+    var theme = (0, react_2.useTheme)();
+    var colors = theme.colors;
+    var _k = (0, react_1.useState)(Array(length).fill("")), values = _k[0], setValues = _k[1];
     var inputsRef = (0, react_1.useRef)([]);
+    var borderColor = error
+        ? (_c = (_b = colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]
+        : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[500];
+    var focusRing = error ? (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.error : (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
+    var focusShadow = focusRing
+        ? "0 0 0 0.125rem ".concat(focusRing)
+        : undefined;
     var handleChange = function (index, value) {
         var _a;
         if (!/^[0-9]?$/.test(value))
@@ -73,9 +84,13 @@ var PinInputs = function (_a) {
             (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_2.Box, null,
         label && react_1.default.createElement(Label_1.default, { label: label }),
-        react_1.default.createElement("div", { className: "flex space-x-2" }, Array.from({ length: length }).map(function (_, index) { return (react_1.default.createElement("input", { key: index, ref: function (el) { return (inputsRef.current[index] = el); }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, className: "w-12 h-12 text-center border rounded-md text-lg focus:outline-none focus:ring-2 ".concat(error ? "border-red-500 focus:ring-red-300" : "border-gray-300 focus:ring-blue-500") })); })),
+        react_1.default.createElement(react_2.HStack, { spacing: 2 }, Array.from({ length: length }).map(function (_, index) { return (react_1.default.createElement(react_2.Input, { key: index, ref: function (el) {
+                inputsRef.current[index] = el;
+            }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
+                ? { boxShadow: focusShadow, outline: "none" }
+                : { outline: "none" } })); })),
         error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
 };
 exports.default = PinInputs;

package/dist/Components/ProductCard/ProductPrice.js

@@ -123,10 +123,10 @@ var ProductPrice = function (_a) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, 
+        isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
             // py={cfg.py}
             rounded: "md", display: "inline-block", w: "100%" },
-            react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, 
+            react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
             // py={cfg.py}
             rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
             react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },

package/dist/Components/ProductCard/ProductTags.js

@@ -23,7 +23,11 @@ var ProductTags = function (_a) {
     return (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1, size: size }, tag)); }))); })));
 };
 var Tag = function (_a) {
-    var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c;
+    var _b, _c, _d, _e;
+    var children = _a.children, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'sm' : _g;
+    var theme = (0, react_2.useTheme)();
+    var tagBorder = (_d = (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[200];
+    var tagText = theme.colors.black;
     // Size map for tags
     var tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
@@ -32,7 +36,7 @@ var Tag = function (_a) {
         lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
     };
     var ref = react_1.default.useRef(null);
-    var _d = react_1.default.useState(false), truncated = _d[0], setTruncated = _d[1];
+    var _h = react_1.default.useState(false), truncated = _h[0], setTruncated = _h[1];
     react_1.default.useEffect(function () {
         var el = ref.current;
         if (!el)
@@ -44,7 +48,7 @@ var Tag = function (_a) {
             window.removeEventListener('resize', check);
         };
     }, [children]);
-    var content = (react_1.default.createElement(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children));
+    var content = (react_1.default.createElement(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children));
     return truncated ? (react_1.default.createElement(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom' }, content)) : (content);
 };
 exports.default = ProductTags;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -34,7 +34,11 @@ var ProfileCardFooter = function (_a) {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard(_a) {
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, CardBodyStyle = _a.CardBodyStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
+    var _b, _c, _d, _e;
+    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, dividercolor = _a.dividercolor, _f = _a.dividersize, dividersize = _f === void 0 ? "0.5px" : _f, _g = _a.dividervariant, dividervariant = _g === void 0 ? "solid" : _g, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, CardBodyStyle = _a.CardBodyStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
+    var theme = (0, react_2.useTheme)();
+    var resolvedDividerColor = (_c = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_b = theme.colors.border) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[300];
+    var accentBorder = "2px solid ".concat((_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[500]);
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };
@@ -42,13 +46,13 @@ function ProfileCard(_a) {
     var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
     var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
     var StylesWithBorder = borderLeftColor
-        ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor
-        ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
+        ? __assign(__assign({}, CardStyle), { borderLeft: accentBorder }) : borderTopColor
+        ? __assign(__assign({}, CardStyle), { borderTop: accentBorder }) : __assign({}, CardStyle);
     return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
         header && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }), py: 15 }, header),
             react_1.default.createElement(react_2.Divider, { style: {
-                    borderColor: dividercolor,
+                    borderColor: resolvedDividerColor,
                     borderWidth: dividersize,
                     borderStyle: dividervariant,
                 } }))),

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -91,16 +91,16 @@ function ProfilePhotoViewer(_a) {
                     transition: "opacity 0.3s",
                 } },
                 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", color: theme.colors.gray[200], 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: {
+                    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", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
                             transform: "scale(1.1)",
                             color: theme.colors.white,
-                            boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                            boxShadow: theme.shadows.lg,
                         } }))),
                 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", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
+                    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", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md }), _hover: {
                             transform: "scale(1.1)",
                             color: theme.colors.white,
-                            boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                            boxShadow: theme.shadows.lg,
                         } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
 }

package/dist/Components/SelectSearch/SelectSearch.js

@@ -65,13 +65,14 @@ var lucide_react_1 = require("lucide-react");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var RenderOptions = function (_a) {
     var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile, isColorOptions = _a.isColorOptions;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isOptionLoading) {
         return (react_1.default.createElement(react_2.VStack, { py: 2 },
-            react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
-            react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText)));
+            react_1.default.createElement(react_2.Spinner, { size: "sm", color: theme.colors.primary[500] }),
+            react_1.default.createElement(react_2.Text, { color: theme.colors.primary[500] }, loadingText)));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); }, display: "flex", alignItems: "center", gap: "0.5rem" },
+        return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: function () { return handleOptionClick(option); }, display: "flex", alignItems: "center", gap: "0.5rem" },
             isProfile && (react_1.default.createElement(react_2.Box, null,
                 react_1.default.createElement(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }))),
             isColorOptions && (react_1.default.createElement(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })),
@@ -88,6 +89,9 @@ function SelectSearch(_a) {
     // BottomIconStyle,
     BottomIcon = _l === void 0 ? false : _l, BottomText = _a.BottomText, handleBottomClick = _a.handleBottomClick, BottomTextColor = _a.BottomTextColor, isColorOptions = _a.isColorOptions;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var errorBorder = "2px solid ".concat(theme.colors.semantic.error[500]);
+    var defaultBorderThick = "2px solid ".concat(theme.colors.boxborder[500]);
+    var defaultBorderThin = "1px solid ".concat(theme.colors.boxborder[500]);
     var _m = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _m[0], setSelectedOptions = _m[1];
     var _o = (0, react_1.useState)(searchQuery), inputValue = _o[0], setInputValue = _o[1];
     var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
@@ -235,7 +239,13 @@ function SelectSearch(_a) {
                     react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
                     react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
                 react_1.default.createElement(react_2.InputGroup, null,
-                    react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "2px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: error ? "none" : "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0" }) }),
+                    react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? errorBorder : defaultBorderThick, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: {
+                            borderColor: error
+                                ? theme.colors.semantic.error[500]
+                                : theme.colors.primary[500],
+                        }, _focus: {
+                            borderColor: error ? "none" : theme.colors.primary[500],
+                        }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? errorBorder : defaultBorderThin }) }),
                     rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
                 isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
                     react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }),