pixelize-design-library 2.2.198 → 2.3.1-beta.2

package/dist/Components/DatePicker/CalendarPanel.js

@@ -1,4 +1,15 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,10 +22,44 @@ var lucide_react_1 = require("lucide-react");
 var Button_1 = __importDefault(require("../Button/Button"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var CalendarPanel = function (_a) {
-    var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, renderWeekdays = _a.renderWeekdays;
+    var _b;
+    var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, hoveredDate = _a.hoveredDate, onDayHover = _a.onDayHover, renderWeekdays = _a.renderWeekdays;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var rangeBg = theme.colors.primary.opacity[16];
     var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
         currentMonth.getMonth() === today.getMonth();
+    // Effective range end: the committed end, or a tentative end from hover.
+    var tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
+        ? hoveredDate
+        : null;
+    var rangeStart = tempRangeStart;
+    var rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
+    var isTentative = !tempRangeEnd && !!tentativeEnd;
+    var hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
+    var selectStyles = {
+        border: "1px solid",
+        borderColor: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300],
+        borderRadius: "md",
+        px: 2,
+        py: 1,
+        fontSize: "xs",
+        fontWeight: 600,
+        color: theme.colors.text[700],
+        cursor: "pointer",
+        bg: theme.colors.white,
+        outline: "none",
+        _hover: { borderColor: theme.colors.primary[300] },
+        _focus: {
+            outline: "none",
+            borderColor: theme.colors.primary[500],
+            boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+        },
+        style: {
+            WebkitAppearance: "menulist",
+            MozAppearance: "menulist",
+            appearance: "menulist",
+        },
+    };
     var renderDays = function () {
         var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
@@ -28,90 +73,84 @@ var CalendarPanel = function (_a) {
                 var thisDay = day;
                 var isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
                 var isToday = isSameDay(thisDay, today);
-                var isStart = isRange && tempRangeStart && isSameDay(thisDay, tempRangeStart);
-                var isEnd = isRange && tempRangeEnd && isSameDay(thisDay, tempRangeEnd);
-                var isInRange = isRange &&
-                    tempRangeStart &&
-                    tempRangeEnd &&
-                    isAfter(thisDay, tempRangeStart) &&
-                    isBefore(thisDay, tempRangeEnd);
-                var isSelected = !isRange && tempDate && isSameDay(thisDay, tempDate);
+                var isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
+                var isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
+                var isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
+                var isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
+                var isTentativeEnd = isEnd && isTentative;
+                var circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
                 var disabled = !isInCurrentMonth ||
-                    (minDate && isBefore(thisDay, minDate)) ||
-                    (maxDate && isAfter(thisDay, maxDate)) ||
-                    (disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    (disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    (disableToday && isToday);
-                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "xs", variant: isStart || isEnd || isSelected ? "solid" : isInRange ? "outline" : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.45, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, isDisabled: disabled, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "md" }, (0, date_fns_1.format)(thisDay, "d")));
+                    !!(minDate && isBefore(thisDay, minDate)) ||
+                    !!(maxDate && isAfter(thisDay, maxDate)) ||
+                    !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableToday && isToday);
+                // Connected range band painted on the cell background; start/end use a
+                // half gradient so the band meets the solid day circle cleanly.
+                var cellBg = void 0;
+                if (isRange && hasRange) {
+                    if (isInRange)
+                        cellBg = rangeBg;
+                    else if (isStart && isEnd)
+                        cellBg = undefined;
+                    else if (isStart)
+                        cellBg = "linear-gradient(to right, transparent 50%, ".concat(rangeBg, " 50%)");
+                    else if (isEnd)
+                        cellBg = "linear-gradient(to right, ".concat(rangeBg, " 50%, transparent 50%)");
+                }
+                var circleColor = circleSolid
+                    ? theme.colors.white
+                    : isInCurrentMonth
+                        ? theme.colors.text[700]
+                        : theme.colors.gray[400];
+                var circleBorder = circleSolid
+                    ? "1px solid transparent"
+                    : isTentativeEnd
+                        ? "1px solid ".concat(theme.colors.primary[400])
+                        : isToday
+                            ? "1px solid ".concat(theme.colors.primary[300])
+                            : "1px solid transparent";
+                days.push(react_1.default.createElement(react_2.Box, { key: thisDay.toString(), h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined },
+                    react_1.default.createElement(react_2.Box, { as: "button", type: "button", disabled: disabled, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, onMouseEnter: function () { return !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))); }, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? theme.colors.primary[500] : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                            ? {}
+                            : circleSolid
+                                ? { bg: theme.colors.primary[600] }
+                                : { bg: rangeBg } }, (0, date_fns_1.format)(thisDay, "d"))));
                 day = (0, date_fns_1.addDays)(day, 1);
             };
             for (var i = 0; i < 7; i++) {
                 _loop_1(i);
             }
-            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 0.5 }, days));
+            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 0 }, days));
         }
         return rows;
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 },
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
-                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 18 })),
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getMonth(), onChange: function (e) {
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1 },
+            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
+                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 16 })),
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0 },
+                react_1.default.createElement(react_2.Box, __assign({ as: "select", value: currentMonth.getMonth(), onChange: function (e) {
                         var newMonth = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
-                        borderColor: "gray.400",
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                    }, _focus: {
-                        outline: "none",
-                        borderColor: theme.colors.primary[500],
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                        boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
-                    }, style: {
-                        border: "1px solid ".concat(theme.colors.gray[300]),
-                        fontSize: "12px",
-                        lineHeight: "1.25rem",
-                        WebkitAppearance: "menulist",
-                        MozAppearance: "menulist",
-                        appearance: "menulist",
-                    } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
-                react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getFullYear(), onChange: function (e) {
+                    } }, selectStyles), Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
+                react_1.default.createElement(react_2.Box, __assign({ as: "select", value: currentMonth.getFullYear(), onChange: function (e) {
                         var newYear = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
-                        borderColor: "gray.400",
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                    }, _focus: {
-                        outline: "none",
-                        borderColor: theme.colors.primary[500],
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                        boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
-                    }, style: {
-                        border: "1px solid ".concat(theme.colors.gray[300]),
-                        fontSize: "12px",
-                        lineHeight: "1.25rem",
-                        WebkitAppearance: "menulist",
-                        MozAppearance: "menulist",
-                        appearance: "menulist",
-                    } }, Array.from({ length: 100 }).map(function (_, i) {
+                    } }, selectStyles), Array.from({ length: 100 }).map(function (_, i) {
                     var year = new Date().getFullYear() - 50 + i;
                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                 }))),
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
-                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () {
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0 },
+                !isRange && !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () {
                         setCurrentMonth(function (_prev) { return new Date(today.getFullYear(), today.getMonth(), 1); });
                         if (!disableToday) {
                             onDaySelect(new Date(today));
                         }
-                    }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2 }, isDisabled: disableToday }, "Today")),
-                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
-                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 18 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0.5, fontWeight: "semibold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "xs", color: "gray.600", py: 1 }, day)); }))),
-        renderDays()));
+                    }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday }, "Today")),
+                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
+                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 16 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1 }, day)); }))),
+        react_1.default.createElement(react_2.Box, { onMouseLeave: function () { return onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null); } }, renderDays())));
 };
 exports.CalendarPanel = CalendarPanel;
 exports.default = exports.CalendarPanel;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -56,24 +56,25 @@ var setTimeFrom = function (base, time) {
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
 var RangeDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r, _s = props.size, size = _s === void 0 ? "md" : _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _q = props.dateFormat, dateFormat = _q === void 0 ? "dd/MM/yyyy" : _q, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _r = props.autoComplete, autoComplete = _r === void 0 ? "off" : _r, disabled = props.disabled, _s = props.width, width = _s === void 0 ? "100%" : _s, _t = props.disableToday, disableToday = _t === void 0 ? false : _t, _u = props.size, size = _u === void 0 ? "md" : _u;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeKey = typeof size === "string" ? size : "md";
     var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _t = (0, react_2.useDisclosure)(), isOpen = _t.isOpen, onOpen = _t.onOpen, onClose = _t.onClose;
+    var _v = (0, react_2.useDisclosure)(), isOpen = _v.isOpen, onOpen = _v.onOpen, onClose = _v.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var today = new Date();
     var placeholder = (0, react_1.useMemo)(function () { return placeholderText || "".concat(dateFormat, " - ").concat(dateFormat); }, [placeholderText, dateFormat]);
     var selectedRange = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null;
-    var _u = (0, react_1.useState)(new Date()), currentMonth = _u[0], setCurrentMonthState = _u[1];
-    var _v = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _v[0], setTempRangeStart = _v[1];
-    var _w = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _w[0], setTempRangeEnd = _w[1];
-    var _x = (0, react_1.useState)(true), selectingStart = _x[0], setSelectingStart = _x[1];
-    var _y = (0, react_1.useState)(""), inputValue = _y[0], setInputValue = _y[1];
+    var _w = (0, react_1.useState)(new Date()), currentMonth = _w[0], setCurrentMonthState = _w[1];
+    var _x = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _x[0], setTempRangeStart = _x[1];
+    var _y = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _y[0], setTempRangeEnd = _y[1];
+    var _z = (0, react_1.useState)(true), selectingStart = _z[0], setSelectingStart = _z[1];
+    var _0 = (0, react_1.useState)(""), inputValue = _0[0], setInputValue = _0[1];
+    var _1 = (0, react_1.useState)(null), hoveredDate = _1[0], setHoveredDate = _1[1];
     var formatHasTime = (0, react_1.useMemo)(function () { return /(h{1,2}|H{1,2})/.test(dateFormat); }, [dateFormat]);
     var formatHasSeconds = (0, react_1.useMemo)(function () { return /s{1,2}/i.test(dateFormat); }, [dateFormat]);
     var shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
@@ -143,9 +144,25 @@ var RangeDatePicker = function (props) {
             setTempRangeStart(finalStart);
             setTempRangeEnd(finalEnd);
             setSelectingStart(true);
+            setHoveredDate(null);
             // no auto-close; wait for OK
         }
     };
+    var applyPreset = function (from, to) {
+        setTempRangeStart(from);
+        setTempRangeEnd(to);
+        setSelectingStart(true);
+        setHoveredDate(null);
+        setCurrentMonthState(from);
+        setInputValue("".concat((0, date_fns_1.format)(from, dateFormat), " - ").concat((0, date_fns_1.format)(to, dateFormat)));
+    };
+    var presets = [
+        { label: "Today", getRange: function () { return [today, today]; } },
+        { label: "Yesterday", getRange: function () { var d = (0, date_fns_1.subDays)(today, 1); return [d, d]; } },
+        { label: "Last 7 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 6), today]; } },
+        { label: "Last 30 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 29), today]; } },
+        { label: "This month", getRange: function () { return [(0, date_fns_1.startOfMonth)(today), (0, date_fns_1.endOfMonth)(today)]; } },
+    ];
     (0, react_1.useEffect)(function () {
         if (!isOpen)
             return;
@@ -200,13 +217,17 @@ var RangeDatePicker = function (props) {
                             }, _hover: {
                                 borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : undefined,
                             }, cursor: "pointer" }),
-                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
+                        react_1.default.createElement(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
                             react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
                                 react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
-            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
-                react_1.default.createElement(react_2.PopoverBody, null,
-                    react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
-                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 },
+            react_1.default.createElement(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500] },
+                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
+                    react_1.default.createElement(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3 }, presets.map(function (p) { return (react_1.default.createElement(Button_1.default, { key: p.label, size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: function () {
+                            var _a = p.getRange(), from = _a[0], to = _a[1];
+                            applyPreset(from, to);
+                        } }, p.label)); })),
+                    react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
+                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2 },
                         react_1.default.createElement(react_2.Box, null,
                             react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "Start time"),
                             shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: startTimeBaseDate, onChange: function (updated) {
@@ -239,9 +260,9 @@ var RangeDatePicker = function (props) {
                                     }
                                     setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
                                 }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))))),
-                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: handleClear }, "Clear"),
-                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: requestClose }, "OK"))))),
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[300] },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear }, "Clear"),
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose }, "Apply"))))),
         error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 };

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -275,13 +275,13 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
     return { value: buf, completed: buf.length >= segmentLength };
 };
 var SingleDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p, _q = props.size, size = _q === void 0 ? "md" : _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r, _s = props.size, size = _s === void 0 ? "md" : _s;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeKey = typeof size === "string" ? size : "md";
     var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _r = (0, react_2.useDisclosure)(), isOpen = _r.isOpen, onOpen = _r.onOpen, onClose = _r.onClose;
+    var _t = (0, react_2.useDisclosure)(), isOpen = _t.isOpen, onOpen = _t.onOpen, onClose = _t.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -339,18 +339,18 @@ var SingleDatePicker = function (props) {
         resolvedDateFormat.toLowerCase().includes("mm") ||
         resolvedDateFormat.toLowerCase().includes("ss");
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _s = (0, react_1.useState)(selectedDate
+    var _u = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _s[0], setCurrentMonth = _s[1];
-    var _t = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _t[0], setTempDate = _t[1];
-    var _u = (0, react_1.useState)(""), inputValue = _u[0], setInputValue = _u[1];
-    var _v = (0, react_1.useState)(false), isTyping = _v[0], setIsTyping = _v[1];
-    var _w = (0, react_1.useState)(false), isMaskActive = _w[0], setIsMaskActive = _w[1];
-    var _x = (0, react_1.useState)(0), setCurrentSegmentIndex = _x[1];
+            : today), currentMonth = _u[0], setCurrentMonth = _u[1];
+    var _v = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _v[0], setTempDate = _v[1];
+    var _w = (0, react_1.useState)(""), inputValue = _w[0], setInputValue = _w[1];
+    var _x = (0, react_1.useState)(false), isTyping = _x[0], setIsTyping = _x[1];
+    var _y = (0, react_1.useState)(false), isMaskActive = _y[0], setIsMaskActive = _y[1];
+    var _z = (0, react_1.useState)(0), setCurrentSegmentIndex = _z[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -965,7 +965,7 @@ var SingleDatePicker = function (props) {
                             }, _hover: {
                                 borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
                             }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
-                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
+                        react_1.default.createElement(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {
                                     handleOpen();
@@ -976,8 +976,8 @@ var SingleDatePicker = function (props) {
                             }, style: { cursor: "pointer" } },
                             react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
                                 react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
-            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
-                react_1.default.createElement(react_2.PopoverBody, null,
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", border: "1px solid", borderColor: (_l = theme.colors.boxborder) === null || _l === void 0 ? void 0 : _l[500] },
+                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
                     showDate && (react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonth(function (prev) { return updater(prev); }); }, today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })),
                     showTime && (react_1.default.createElement(react_2.Box, { mt: showDate ? 3 : 0 }, resolvedPickerType === "time" ? (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (updatedDate) {
                             setTempDate(updatedDate);
@@ -988,12 +988,12 @@ var SingleDatePicker = function (props) {
                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                             setIsTyping(false);
                         }, disabled: disabled })))),
-                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_m = theme.colors.boxborder) === null || _m === void 0 ? void 0 : _m[300] },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: function () {
                                 setTempDate(null);
                                 requestClose(null);
                             } }, "Clear"),
-                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () { return requestClose(); } }, "OK"))))),
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "gradient", onClick: function () { return requestClose(); } }, "Apply"))))),
         error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 };

package/dist/Components/DatePicker/TimePicker.js

@@ -85,13 +85,13 @@ var TimePicker = function (_a) {
         updateTime(hour, minute, newMeridiem);
     };
     var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (react_1.default.createElement(react_2.HStack, { spacing: 1.5, mt: 3 },
-        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
+    return (react_1.default.createElement(react_2.HStack, { spacing: 1.5, w: "100%" },
+        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
             var value = is12HourFormat ? i + 1 : i;
             return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
         })),
-        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
-        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "3.8rem", size: "sm", isDisabled: disabled },
+        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
+        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled },
             react_1.default.createElement("option", { value: "AM" }, "AM"),
             react_1.default.createElement("option", { value: "PM" }, "PM")))));
 };

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, isInformation, informationMessage, }: InputProps) => React.JSX.Element>;
 export default _default;

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

@@ -39,11 +39,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 Label_1 = __importDefault(require("../../Common/Label"));
+var FormLabel_1 = require("../../Common/FormLabel");
+var fieldStyles_1 = require("../../Common/fieldStyles");
 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 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, isInformation = _a.isInformation, informationMessage = _a.informationMessage;
     var theme = (0, react_2.useTheme)();
     var colors = theme.colors;
     var _s = (0, react_1.useState)(false), showPassword = _s[0], setShowPassword = _s[1];
@@ -57,9 +58,9 @@ var Input = function (_a) {
     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(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }),
         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: {
+            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: fieldStyles_1.FIELD_RADIUS, 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

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

@@ -14,4 +14,6 @@ export type InputProps = {
     autoComplete?: string;
     autoFocus?: boolean;
     isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

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

@@ -11,7 +11,8 @@ exports.Input = {
             pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",
             },

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -8,7 +8,8 @@ exports.Textarea = {
         letterSpacing: "0.044rem",
         pt: "0.813rem",
         pb: "0.813rem",
-        borderRadius: "0.25rem",
+        borderRadius: "0.5rem",
+        transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
             fontStyle: "italic",
         },

package/dist/Components/MultiSelect/MultiSelect.js

@@ -74,13 +74,13 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    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, _k = _a.size, size = _k === void 0 ? "md" : _k, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
+    var _b, _c, _d, _e;
+    var value = _a.value, onValueChange = _a.onValueChange, _f = _a.width, width = _f === void 0 ? "100%" : _f, _g = _a.label, label = _g === void 0 ? "label" : _g, _h = _a.isRequired, isRequired = _h === void 0 ? true : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, name = _a.name, id = _a.id, _l = _a.placeholderText, placeholderText = _l === void 0 ? "Type valid email and press enter" : _l, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _m = _a.size, size = _m === void 0 ? "md" : _m, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
     var options = value;
-    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 _o = (0, react_1.useState)(""), inputValue = _o[0], setInputValue = _o[1];
+    var _p = (0, react_1.useState)(""), localError = _p[0], setLocalError = _p[1];
     var inputRef = (0, react_1.useRef)(null);
     var handleInputChange = (0, react_1.useCallback)(function (e) {
         setInputValue(e.target.value);
@@ -112,16 +112,15 @@ function MultiSelect(_a) {
     }, [options, onValueChange]);
     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: s.gap, align: "center", px: s.px, border: "1px solid", borderColor: error || localError
-                ? theme.colors.red[500]
-                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: s.minH, _focusWithin: {
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", borderColor: error || localError
+                ? theme.colors.semantic.error[500]
+                : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.5rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                 borderColor: error || localError
-                    ? theme.colors.red[500]
+                    ? theme.colors.semantic.error[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),
+                boxShadow: "0 0 0 0.125rem ".concat(error || localError
+                    ? (_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error
+                    : (_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary),
             } },
             options.map(function (option) { return (react_1.default.createElement(Tag_1.default, { key: option.id, size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: function () { return handleRemove(option); }, icon: lucide_react_1.X })); }),
             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", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: __assign({ backgroundColor: "transparent" }, inputStyle), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;