pixelize-design-library 2.2.149 → 2.2.151

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -20,7 +20,8 @@ export type BaseDatePickerProps = {
     disabled?: boolean;
     width?: string | number;
     disableToday?: boolean;
-    size?: "sm" | "md" | "lg";
+    /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
+    size?: "xs" | "sm" | "md" | "lg";
 };
 export type SingleDatePickerProps = BaseDatePickerProps & {
     isRange?: false;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -47,6 +47,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var textInputIconSize_1 = require("../Input/textInputIconSize");
 var TimePicker_1 = __importDefault(require("./TimePicker"));
 var TimePickerInput_1 = require("./TimePickerInput");
 // helper to set time on date while preserving date part
@@ -56,20 +57,23 @@ var setTimeFrom = function (base, time) {
 };
 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;
+    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 theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _s = (0, react_2.useDisclosure)(), isOpen = _s.isOpen, onOpen = _s.onOpen, onClose = _s.onClose;
+    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 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 _t = (0, react_1.useState)(new Date()), currentMonth = _t[0], setCurrentMonthState = _t[1];
-    var _u = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _u[0], setTempRangeStart = _u[1];
-    var _v = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _v[0], setTempRangeEnd = _v[1];
-    var _w = (0, react_1.useState)(true), selectingStart = _w[0], setSelectingStart = _w[1];
-    var _x = (0, react_1.useState)(""), inputValue = _x[0], setInputValue = _x[1];
+    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 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;
@@ -181,8 +185,8 @@ var RangeDatePicker = function (props) {
         react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
             react_1.default.createElement(react_2.PopoverTrigger, null,
                 react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
-                    react_1.default.createElement(react_2.InputGroup, null,
-                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: function () {
+                    react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
+                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: function () {
                                 if (!isOpen)
                                     handleOpen();
                             }, onClick: function () {
@@ -196,8 +200,9 @@ 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, pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
-                            react_1.default.createElement(lucide_react_1.CalendarIcon, { size: 18, color: theme.colors.gray[500] }))))),
+                        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.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 }),
@@ -217,7 +222,7 @@ var RangeDatePicker = function (props) {
                                         return;
                                     }
                                     setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart }))),
+                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))),
                         react_1.default.createElement(react_2.Box, null,
                             react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "End time"),
                             shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: endTimeBaseDate, onChange: function (updated) {
@@ -233,7 +238,7 @@ var RangeDatePicker = function (props) {
                                         return;
                                     }
                                     setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd }))))),
+                                }, 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"))))),

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -43,6 +43,7 @@ var date_fns_1 = require("date-fns");
 var lucide_react_1 = require("lucide-react");
 var Button_1 = __importDefault(require("../Button/Button"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var textInputIconSize_1 = require("../Input/textInputIconSize");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -275,9 +276,12 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
 };
 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;
+    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 theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _q = (0, react_2.useDisclosure)(), isOpen = _q.isOpen, onOpen = _q.onOpen, onClose = _q.onClose;
+    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 inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -335,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 _r = (0, react_1.useState)(selectedDate
+    var _s = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _r[0], setCurrentMonth = _r[1];
-    var _s = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _s[0], setTempDate = _s[1];
-    var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
-    var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
-    var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
-    var _w = (0, react_1.useState)(0), setCurrentSegmentIndex = _w[1];
+            : 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];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -952,8 +956,8 @@ var SingleDatePicker = function (props) {
             }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
             react_1.default.createElement(react_2.PopoverTrigger, null,
                 react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
-                    react_1.default.createElement(react_2.InputGroup, null,
-                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
+                    react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
+                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
                                 borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
                                 boxShadow: error
                                     ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
@@ -961,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, pointerEvents: "auto", onClick: function (e) {
+                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {
                                     handleOpen();
@@ -970,7 +974,8 @@ var SingleDatePicker = function (props) {
                                     onClose();
                                 }
                             }, style: { cursor: "pointer" } },
-                            react_1.default.createElement(lucide_react_1.CalendarIcon, { size: 18, color: theme.colors.gray[500] }))))),
+                            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,
                     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 })),
@@ -978,7 +983,7 @@ var SingleDatePicker = function (props) {
                             setTempDate(updatedDate);
                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                             setIsTyping(false);
-                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText })) : (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: function (updatedDate) {
+                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: function (updatedDate) {
                             setTempDate(updatedDate);
                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                             setIsTyping(false);

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -50,15 +50,16 @@ var formatToPlaceholder = function (formatStr) {
 };
 var TimeOnlyPicker = function (props) {
     var _a;
-    var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d;
-    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
+    var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? "md" : _e;
+    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var inputWrapperRef = (0, react_1.useRef)(null);
     var today = new Date();
     var tomorrow = (0, date_fns_1.addDays)(today, 1);
+    var sizeKey = typeof size === "string" ? size : "md";
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _f = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _f[0], setTempDate = _f[1];
+    var _g = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _g[0], setTempDate = _g[1];
     (0, react_1.useEffect)(function () {
         setTempDate(selectedDate ? new Date(selectedDate) : null);
     }, [selectedDate]);
@@ -114,7 +115,7 @@ var TimeOnlyPicker = function (props) {
                             }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: function () {
                                 if (!disabled && !isOpen)
                                     onOpen();
-                            }, error: error })))),
+                            }, error: error, size: sizeKey })))),
             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(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: function (updatedDate) {

package/dist/Components/DatePicker/TimePickerInput.d.ts

@@ -8,6 +8,7 @@ interface TimePickerInputProps {
     onFocus?: () => void;
     onBlur?: () => void;
     error?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
 }
 export declare const TimePickerInput: React.FC<TimePickerInputProps>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -39,6 +39,7 @@ var react_2 = require("@chakra-ui/react");
 var date_fns_1 = require("date-fns");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var textInputIconSize_1 = require("../Input/textInputIconSize");
 var sanitizeDigits = function (input) { return input.replace(/\D/g, "").slice(0, 4); };
 var adjustDigits = function (digits, is12Hour) {
     var result = sanitizeDigits(digits);
@@ -125,18 +126,21 @@ var formatToPlaceholder = function (formatStr) {
     return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 };
 var TimePickerInput = function (_a) {
-    var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur, error = _a.error;
+    var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur, error = _a.error, _c = _a.size, size = _c === void 0 ? "md" : _c;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var sizeKey = typeof size === "string" ? size : "md";
+    var iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
+    var iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     var inputRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(""), digits = _c[0], setDigits = _c[1];
+    var _d = (0, react_1.useState)(""), digits = _d[0], setDigits = _d[1];
     var digitsRef = (0, react_1.useRef)("");
-    var _d = (0, react_1.useState)(false), setIsFocused = _d[1];
+    var _e = (0, react_1.useState)(false), setIsFocused = _e[1];
     var isFocusedRef = (0, react_1.useRef)(false);
-    var _e = (0, react_1.useState)("hour"), setActiveSegment = _e[1];
+    var _f = (0, react_1.useState)("hour"), setActiveSegment = _f[1];
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
     var ampmRef = (0, react_1.useRef)("AM");
-    var _f = (0, react_1.useState)("AM"), ampm = _f[0], setAmpm = _f[1];
+    var _g = (0, react_1.useState)("AM"), ampm = _g[0], setAmpm = _g[1];
     var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
         requestAnimationFrame(function () {
             var el = inputRef.current;
@@ -434,9 +438,10 @@ var TimePickerInput = function (_a) {
             inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (react_1.default.createElement(react_2.InputGroup, null,
-        react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error }),
-        react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none" },
-            react_1.default.createElement(lucide_react_1.ClockIcon, { size: 18, color: theme.colors.gray[500] }))));
+    return (react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
+        react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }),
+        react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center" },
+            react_1.default.createElement(react_2.Box, { as: "span", sx: iconWrapperSx },
+                react_1.default.createElement(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] })))));
 };
 exports.TimePickerInput = TimePickerInput;

package/dist/Components/Input/PhoneNumberInput.js

@@ -63,6 +63,7 @@ var react_2 = require("@chakra-ui/react");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var FormLabel_1 = require("../Common/FormLabel");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var getFlagEmoji = function (countryCode) {
     if (!countryCode)
         return "";
@@ -72,8 +73,11 @@ var getFlagEmoji = function (countryCode) {
         return String.fromCodePoint(127397 + char.charCodeAt(0));
     });
 };
+var sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
+var sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
 var PhoneNumberInput = function (_a) {
     var _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, _c = _a.codeValueReturn, codeValueReturn = _c === void 0 ? true : _c, country = _a.country, countries = _a.countries, _d = _a.placeholder, placeholder = _d === void 0 ? "Enter phone number" : _d, onChange = _a.onChange, inputId = _a.inputId, selectId = _a.selectId, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, _e = _a.width, width = _e === void 0 ? "100%" : _e, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, onBlur = _a.onBlur, onFocus = _a.onFocus, isReadOnly = _a.isReadOnly, height = _a.height, autoComplete = _a.autoComplete, _f = _a.showCountrySelect, showCountrySelect = _f === void 0 ? true : _f, ref = _a.ref, name = _a.name, minW = _a.minW, maxW = _a.maxW, rest = __rest(_a, ["size", "value", "codeValueReturn", "country", "countries", "placeholder", "onChange", "inputId", "selectId", "error", "errorMessage", "helperText", "label", "id", "width", "isInformation", "informationMessage", "isRequired", "onBlur", "onFocus", "isReadOnly", "height", "autoComplete", "showCountrySelect", "ref", "name", "minW", "maxW"]);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var getCountryTelCode = (0, react_1.useCallback)(function (countryCode) {
         var _a;
         if (!countryCode)
@@ -121,9 +125,9 @@ var PhoneNumberInput = function (_a) {
     return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, __assign({ size: size }, rest),
-            react_1.default.createElement(react_2.InputLeftElement, { width: showCountrySelect ? "4rem" : "2rem", height: "100%" },
+            react_1.default.createElement(react_2.InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%" },
                 showCountrySelect && react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(react_2.Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: "4rem", opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, lineHeight: "1.5rem" },
+                    react_1.default.createElement(react_2.Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500] },
                         react_1.default.createElement("option", { value: "" }, "Select Country"),
                         countries.map(function (option) { return (react_1.default.createElement("option", { key: option.code, value: option.code }, option.country)); }))),
                 react_1.default.createElement(react_2.Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between" }, selectedCountry ? (react_1.default.createElement(react_2.Box, { fontSize: "1.2rem" }, getFlagEmoji(selectedCountry))) : (react_1.default.createElement(react_2.Icon, { viewBox: "0 0 24 24", boxSize: "1rem" },

package/dist/Components/Input/TextInput.js

@@ -60,17 +60,24 @@ 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 textInputIconSize_1 = require("./textInputIconSize");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
     var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, height = _a.height, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "md" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var sizeKey = typeof size === "string" ? size : "md";
+    var iconScaleSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height },
-            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputLeftIcon)),
+            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }),
+                react_1.default.createElement(react_2.Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500] }, inputLeftIcon))),
             react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size }, (height != null && { height: height }), { isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
-            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputRightIcon))),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }),
+                react_1.default.createElement(react_2.Box, { as: "span", sx: iconScaleSx }, inputRightIcon)))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 });

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

@@ -0,0 +1,10 @@
+import type { SystemStyleObject } from "@chakra-ui/styled-system";
+/**
+ * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
+ */
+export declare function getTextInputIconSizePx(size: string | undefined): number;
+/**
+ * Scales any SVG in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
+ * affect them because they set explicit width/height.
+ */
+export declare function getTextInputIconWrapperSx(size: string | undefined): SystemStyleObject;

package/dist/Components/Input/textInputIconSize.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextInputIconSizePx = getTextInputIconSizePx;
+exports.getTextInputIconWrapperSx = getTextInputIconWrapperSx;
+/** Pixels: aligned with `Input` field density (Chakra `sizes.6`–`12` and typical Lucide use). */
+var TEXT_INPUT_ICON_PX = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 24,
+};
+/**
+ * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
+ */
+function getTextInputIconSizePx(size) {
+    var _a;
+    if (!size)
+        return TEXT_INPUT_ICON_PX.md;
+    return (_a = TEXT_INPUT_ICON_PX[size]) !== null && _a !== void 0 ? _a : TEXT_INPUT_ICON_PX.md;
+}
+/**
+ * Scales any SVG in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
+ * affect them because they set explicit width/height.
+ */
+function getTextInputIconWrapperSx(size) {
+    var px = getTextInputIconSizePx(size);
+    return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 0,
+        flexShrink: 0,
+        // Override Lucide/inline width on SVG; cover direct or nested (e.g. one wrapper) icons
+        "& > svg, & > * svg, & svg": {
+            width: "".concat(px, "px !important"),
+            height: "".concat(px, "px !important"),
+        },
+    };
+}

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

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

package/dist/Components/Input/textInputIconSize.test.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var textInputIconSize_1 = require("./textInputIconSize");
+describe("getTextInputIconSizePx", function () {
+    it("maps Chakra input sizes to increasing pixel values", function () {
+        var xs = (0, textInputIconSize_1.getTextInputIconSizePx)("xs");
+        var sm = (0, textInputIconSize_1.getTextInputIconSizePx)("sm");
+        var md = (0, textInputIconSize_1.getTextInputIconSizePx)("md");
+        var lg = (0, textInputIconSize_1.getTextInputIconSizePx)("lg");
+        expect(xs).toBeLessThan(sm);
+        expect(sm).toBeLessThan(md);
+        expect(md).toBeLessThan(lg);
+    });
+    it("defaults to md for missing or unknown size", function () {
+        expect((0, textInputIconSize_1.getTextInputIconSizePx)(undefined)).toBe(18);
+        expect((0, textInputIconSize_1.getTextInputIconSizePx)("nope")).toBe(18);
+    });
+});
+describe("getTextInputIconWrapperSx", function () {
+    it("includes the resolved pixel size in svg rules for xs", function () {
+        var sx = (0, textInputIconSize_1.getTextInputIconWrapperSx)("xs");
+        var svg = sx["& > svg, & > * svg, & svg"];
+        expect(svg).toBeDefined();
+        expect(svg === null || svg === void 0 ? void 0 : svg.width).toContain("14");
+        expect(svg === null || svg === void 0 ? void 0 : svg.height).toContain("14");
+    });
+});

package/dist/Components/MultiSelect/MultiSelect.js

@@ -61,8 +61,11 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var Tag_1 = __importDefault(require("../Tag/Tag"));
+var lucide_react_1 = require("lucide-react");
 var generateUniqueId = (function () {
     var counter = 0;
     return function () {
@@ -72,11 +75,12 @@ 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, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
+    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 theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _k = (0, react_1.useState)(value), options = _k[0], setOptions = _k[1];
-    var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
-    var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
+    var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+    var _l = (0, react_1.useState)(value), options = _l[0], setOptions = _l[1];
+    var _m = (0, react_1.useState)(""), inputValue = _m[0], setInputValue = _m[1];
+    var _o = (0, react_1.useState)(""), localError = _o[0], setLocalError = _o[1];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setOptions(value);
@@ -117,9 +121,9 @@ function MultiSelect(_a) {
     };
     return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: error || localError
+        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: "42px", _focusWithin: {
+                : theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: s.minH, _focusWithin: {
                 borderColor: error || localError
                     ? theme.colors.red[500]
                     : theme.colors.primary[500],
@@ -128,10 +132,8 @@ function MultiSelect(_a) {
                         ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
                         : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
             } },
-            options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "primary" },
-                react_1.default.createElement(react_2.TagLabel, null, option.label),
-                react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
-            react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", flex: "1", style: __assign(__assign({}, inputStyle), { backgroundColor: "transparent", fontWeight: 500, color: theme.colors.gray[700], fontSize: 15, letterSpacing: 0.3 }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
+            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 : "" })),
         (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

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

@@ -12,7 +12,7 @@ export type MultiSelectProps = {
     isDisabled?: boolean;
     isReadOnly?: boolean;
     error?: boolean;
-    size?: string;
+    size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: {};
     errorMessage?: string;
     helperText?: string;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -66,6 +66,7 @@ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
+var searchSelectSize_1 = require("./searchSelectSize");
 var normalizeSingleValue = function (val) {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -80,21 +81,23 @@ var normalizeMultiValue = function (val) {
 };
 var SearchSelect = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, _u = _a.height, height = _u === void 0 ? "2.75rem" : _u, _v = _a.size, size = _v === void 0 ? "md" : _v, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _w = _a.isSelectAll, isSelectAll = _w === void 0 ? false : _w, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
-    var _x = (0, react_1.useState)(searchQuery), inputValue = _x[0], setInputValue = _x[1];
-    var _y = (0, react_1.useState)(false), isOpen = _y[0], setIsOpen = _y[1];
-    var _z = (0, react_1.useState)(true), hasMore = _z[0], setHasMore = _z[1];
+    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, height = _a.height, _u = _a.size, size = _u === void 0 ? "md" : _u, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
+    var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+    var insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
+    var _w = (0, react_1.useState)(searchQuery), inputValue = _w[0], setInputValue = _w[1];
+    var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
+    var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
     var inputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _0 = (0, react_1.useState)(false), focused = _0[0], setFocused = _0[1];
-    var _1 = (0, react_1.useState)(false), customSelectOpen = _1[0], setCustomSelectOpen = _1[1];
+    var _z = (0, react_1.useState)(false), focused = _z[0], setFocused = _z[1];
+    var _0 = (0, react_1.useState)(false), customSelectOpen = _0[0], setCustomSelectOpen = _0[1];
     var customSelectRef = (0, react_1.useRef)(null);
-    var _2 = (0, react_1.useState)({
+    var _1 = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 0,
-    }), customSelectPos = _2[0], setCustomSelectPos = _2[1];
+    }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
@@ -220,7 +223,7 @@ var SearchSelect = function (_a) {
     return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
         react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, pr: "2rem", position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error
+            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
                     ? theme.colors.semantic.error[500]
                     : focused
                         ? theme.colors.primary[500]
@@ -231,12 +234,12 @@ var SearchSelect = function (_a) {
                     : error
                         ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
                         : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: function () { return setIsOpen(true); } },
-                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
-                    react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
-                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_h = (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
-                        customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
+                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
+                    react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.5rem" },
+                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_h = (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem", fontSize: s.fieldFontSize }),
+                        customSelectOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))),
                     customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_j = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
+                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_j = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", minH: s.optionRowMinH, px: "0.75rem", fontSize: s.dropdownTextFontSize, _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
                                 e.stopPropagation();
                                 handleCustomSelect(item);
                             } }, item.label)); })))))),
@@ -245,42 +248,42 @@ var SearchSelect = function (_a) {
                         .slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
                         .map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
                             ? item.label.slice(0, chip.maxText) + "…"
-                            : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
+                            : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize })); })
                     : selectedValues.length === 1 &&
-                        !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0 },
-                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)" }))),
-                (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
-                (isOpen || inputValue || !selectedValues.length) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", 
+                        !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0 },
+                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }))),
+                (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: s.tagSize })),
+                (isOpen || inputValue || !selectedValues.length) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
                     // minW="5rem"
                     minW: "0", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
                         setFocused(true);
                         setIsOpen(true);
                     }, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })),
-                react_1.default.createElement(react_2.Box, { position: "absolute", right: "0.75rem", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1 },
+                react_1.default.createElement(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1 },
                     isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
+                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                 bg: "transparent",
                                 _hover: { bg: "transparent" },
                                 _active: { bg: "transparent" },
                                 _focus: { boxShadow: "none", bg: "transparent" },
                             } }))),
-                    isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
+                    isLoading ? (react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
                             e.preventDefault();
                             e.stopPropagation();
                             setIsOpen(function (prev) { return !prev; });
-                        }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))))),
+                        }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
         isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
-            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? "Unselect All" : "Select All"))),
-            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { p: 3, display: "flex", alignItems: "center", gap: 2 },
-                react_1.default.createElement(react_2.Spinner, { size: "sm" }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
-                option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label)))); }))),
-            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
-                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || "Add New"))))),
+            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", size: s.checkboxSize }),
+                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
+            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
+                react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
+                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue", size: s.checkboxSize })),
+                option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }))),
+            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
+                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
+                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
 };

package/dist/Components/SearchSelect/SelectTruncatedLabel.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-declare const SelectTruncatedLabel: ({ label, maxWidth, }: {
+import { TextProps } from "@chakra-ui/react";
+import React from "react";
+declare const SelectTruncatedLabel: ({ label, maxWidth, fontSize, }: {
     label: string;
     maxWidth?: string;
-}) => React.JSX.Element;
+} & Pick<TextProps, "fontSize">) => React.JSX.Element;
 export default SelectTruncatedLabel;

package/dist/Components/SearchSelect/SelectTruncatedLabel.js

@@ -40,16 +40,16 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var SelectTruncatedLabel = function (_a) {
-    var label = _a.label, _b = _a.maxWidth, maxWidth = _b === void 0 ? "6rem" : _b;
+    var label = _a.label, _b = _a.maxWidth, maxWidth = _b === void 0 ? "6rem" : _b, _c = _a.fontSize, fontSize = _c === void 0 ? "sm" : _c;
     var textRef = (0, react_2.useRef)(null);
-    var _c = (0, react_2.useState)(false), isOverflowing = _c[0], setIsOverflowing = _c[1];
+    var _d = (0, react_2.useState)(false), isOverflowing = _d[0], setIsOverflowing = _d[1];
     (0, react_2.useEffect)(function () {
         var el = textRef.current;
         if (el) {
             setIsOverflowing(el.scrollWidth > el.clientWidth);
         }
     }, [label, maxWidth]);
-    var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap", fontWeight: 500, fontSize: "0.875rem", letterSpacing: "0.044rem" }, label));
+    var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap", fontWeight: 500, fontSize: fontSize, letterSpacing: "0.044rem" }, label));
     return isOverflowing ? react_2.default.createElement(ToolTip_1.default, { label: label, placement: "top" }, textElement) : textElement;
 };
 exports.default = SelectTruncatedLabel;

package/dist/Components/SearchSelect/searchSelectSize.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Layout tokens for SearchSelect so `size` matches Chakra input density (xs–lg).
+ */
+export type SearchSelectControlSize = "xs" | "sm" | "md" | "lg";
+export type SearchSelectSizeStyles = {
+    minH: string;
+    /** Horizontal padding of the main field (Chakra spacing scale or rem). */
+    px: number;
+    /** Right padding to clear the absolute-positioned action icons. */
+    pr: string;
+    /** Vertical gap for wrapped chips. */
+    gap: string;
+    chevronSize: number;
+    iconButtonSize: "xs" | "sm" | "md" | "lg";
+    tagSize: "sm" | "md" | "lg";
+    spinnerSize: "sm" | "md" | "lg" | "xl" | "xs";
+    /** Default height for the `insideSelect` trigger when `height` prop is omitted. */
+    insideSelectDefaultHeight: string;
+    rightOffset: string;
+    clearIconSize: number;
+    addNewIconSize: number;
+    /** Offset for the nested select segment (aligns with field padding). */
+    insideSelectMarginLeft: string;
+    /** “Select all” / option row text in the dropdown. */
+    dropdownTextFontSize: "xs" | "sm" | "md";
+    /** Min row height for main option list items. */
+    optionRowMinH: string;
+    optionRowPy: number;
+    /** Chakra `Checkbox` only supports sm | md | lg. */
+    checkboxSize: "sm" | "md" | "lg";
+    /**
+     * Chakra `Input` uses these font tokens per `size` (unstyled still needs explicit fontSize).
+     */
+    fieldFontSize: "xs" | "sm" | "md" | "lg";
+    /**
+     * Matches Chakra `Input` field height (`sizes.6`..`12`) so `unstyled` + `height: auto` does
+     * not prevent `size` from affecting the control.
+     */
+    fieldHeight: string;
+};
+/**
+ * Returns layout and child control tokens for a SearchSelect `size`.
+ */
+export declare function getSearchSelectSizeStyles(size: SearchSelectControlSize): SearchSelectSizeStyles;

package/dist/Components/SearchSelect/searchSelectSize.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSearchSelectSizeStyles = getSearchSelectSizeStyles;
+var SIZE_STYLES = {
+    xs: {
+        minH: "1.5rem",
+        px: 2,
+        pr: "1.75rem",
+        gap: "0.25rem",
+        fieldFontSize: "xs",
+        fieldHeight: "1.5rem",
+        chevronSize: 14,
+        iconButtonSize: "xs",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: "1.5rem",
+        rightOffset: "0.5rem",
+        clearIconSize: 10,
+        addNewIconSize: 14,
+        insideSelectMarginLeft: "-0.5rem",
+        dropdownTextFontSize: "xs",
+        optionRowMinH: "1.5rem",
+        optionRowPy: 1.5,
+        checkboxSize: "sm",
+    },
+    sm: {
+        minH: "2rem",
+        px: 2.5,
+        pr: "1.85rem",
+        gap: "0.3rem",
+        fieldFontSize: "sm",
+        fieldHeight: "2rem",
+        chevronSize: 16,
+        iconButtonSize: "sm",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: "2rem",
+        rightOffset: "0.5rem",
+        clearIconSize: 12,
+        addNewIconSize: 16,
+        insideSelectMarginLeft: "-0.625rem",
+        dropdownTextFontSize: "sm",
+        optionRowMinH: "2rem",
+        optionRowPy: 2,
+        checkboxSize: "sm",
+    },
+    md: {
+        minH: "2.5rem",
+        px: 3,
+        pr: "2rem",
+        gap: "0.375rem",
+        fieldFontSize: "sm",
+        fieldHeight: "2.5rem",
+        chevronSize: 16,
+        iconButtonSize: "sm",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: "2.5rem",
+        rightOffset: "0.75rem",
+        clearIconSize: 12,
+        addNewIconSize: 16,
+        insideSelectMarginLeft: "-0.75rem",
+        dropdownTextFontSize: "sm",
+        optionRowMinH: "2.5rem",
+        optionRowPy: 2,
+        checkboxSize: "md",
+    },
+    lg: {
+        minH: "3rem",
+        px: 4,
+        pr: "2.25rem",
+        gap: "0.5rem",
+        fieldFontSize: "sm",
+        fieldHeight: "3rem",
+        chevronSize: 18,
+        iconButtonSize: "md",
+        tagSize: "md",
+        spinnerSize: "md",
+        insideSelectDefaultHeight: "3rem",
+        rightOffset: "0.75rem",
+        clearIconSize: 14,
+        addNewIconSize: 18,
+        insideSelectMarginLeft: "-0.875rem",
+        dropdownTextFontSize: "md",
+        optionRowMinH: "2.75rem",
+        optionRowPy: 2.5,
+        checkboxSize: "lg",
+    },
+};
+/**
+ * Returns layout and child control tokens for a SearchSelect `size`.
+ */
+function getSearchSelectSizeStyles(size) {
+    var _a;
+    return (_a = SIZE_STYLES[size]) !== null && _a !== void 0 ? _a : SIZE_STYLES.md;
+}

package/dist/Components/SearchSelect/searchSelectSize.test.d.ts

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

package/dist/Components/SearchSelect/searchSelectSize.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var searchSelectSize_1 = require("./searchSelectSize");
+describe("getSearchSelectSizeStyles", function () {
+    it.each(["xs", "sm", "md", "lg"])("returns minH for %s", function (sz) {
+        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)(sz);
+        expect(t.minH).toMatch(/rem$/);
+        expect(t.insideSelectDefaultHeight).toMatch(/rem$/);
+    });
+    it("xs is more compact than lg", function () {
+        var xs = (0, searchSelectSize_1.getSearchSelectSizeStyles)("xs");
+        var lg = (0, searchSelectSize_1.getSearchSelectSizeStyles)("lg");
+        var parse = function (h) { return parseFloat(h); };
+        expect(parse(xs.minH)).toBeLessThan(parse(lg.minH));
+        expect(parse(xs.insideSelectDefaultHeight)).toBeLessThan(parse(lg.insideSelectDefaultHeight));
+    });
+    it("uses md as fallback for unknown size keys (runtime map lookup)", function () {
+        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)("unknown");
+        var md = (0, searchSelectSize_1.getSearchSelectSizeStyles)("md");
+        expect(t).toEqual(md);
+    });
+});

package/dist/Components/Select/Select.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,11 +50,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Select;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var textInputIconSize_1 = require("../Input/textInputIconSize");
 var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, height = _a.height, formControlStyle = _a.formControlStyle, _h = _a.isInformation, isInformation = _h === void 0 ? false : _h, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
+    var sizeKey = typeof size === "string" ? size : "md";
+    var iconSizePx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     var getOptionsList = (0, react_1.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
@@ -56,9 +70,9 @@ function Select(_a) {
             onChange(selectedOption);
         }
     };
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle },
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, minH: height }, getOptionsList()),
+        react_1.default.createElement(react_2.Select, __assign({ placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: "".concat(iconSizePx, "px"), isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, (height != null && height !== "" ? { minH: height, h: height } : {})), getOptionsList()),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Tag/Tag.js

@@ -9,7 +9,7 @@ var Tag = function (_a) {
     var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
     return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: "pointer", onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
         react_1.default.createElement(react_2.TagLabel, null, label),
-        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", ml: 1.5, cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
+        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
                 e.stopPropagation();
                 onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
             }, transition: "all 0.2s ease", _hover: {

package/package.json

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