pixelize-design-library 2.2.199 → 2.3.1-beta.10

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -47,6 +47,7 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var fieldStyles_1 = require("../Common/fieldStyles");
 var countWords = function (text) {
     if (text === void 0) { text = ""; }
     var t = text.trim();
@@ -160,43 +161,45 @@ function NoteTextArea(_a) {
         var start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
         return "".concat(start, "...").concat(extension);
     };
-    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
-        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, customPlaceholder))),
+    var noteWordCount = countWords(noteValue);
+    var isOverLimit = noteWordCount > maxNoteWordCount;
+    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], bg: isActive ? theme.colors.gray[50] : theme.colors.white, transition: "border-color 0.2s" },
+        !isActive && (react_1.default.createElement(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] } },
+            react_1.default.createElement(lucide_react_1.SquarePen, { size: 16, color: theme.colors.gray[500] }),
+            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[500], fontSize: "sm" }, customPlaceholder))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
-                titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
-                        if (e.target.value.length === 0)
-                            setTitleShow(false);
-                        setTitleValue(e.target.value);
-                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
-                        fontStyle: "italic",
-                        color: theme.colors.gray[300],
-                        background: theme.colors.white,
-                    } })),
-                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
-                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
-            react_1.default.createElement(react_2.Divider, null),
-            react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
-                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, minW: 0 },
-                        react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", gap: 2 },
-                            react_1.default.createElement(lucide_react_1.Paperclip, { size: 18 })),
-                        react_1.default.createElement(react_2.Box, { h: "18px", w: "1px", bg: theme.colors.gray[200] }),
-                        !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
-                            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, titleValue || "Title")))),
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
-                        cancelButtonHide ? null : (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"))),
-                        react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
+                titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
+                            if (e.target.value.length === 0)
+                                setTitleShow(false);
+                            setTitleValue(e.target.value);
+                        }, placeholder: "Add a title...", variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
+                            fontStyle: "italic",
+                            color: theme.colors.gray[300],
+                        } }),
+                    react_1.default.createElement(react_2.Divider, { borderColor: theme.colors.gray[200] }))),
+                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "76px", px: 3, pt: 2.5, position: "relative" },
+                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
+            react_1.default.createElement(react_2.Divider, { borderColor: theme.colors.gray[200] }),
+            react_1.default.createElement(react_2.Box, { px: 3, py: 2.5 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3 },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                        react_1.default.createElement(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top" },
+                            react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.gray[600], transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] } },
+                                react_1.default.createElement(lucide_react_1.Paperclip, { size: 16 }))),
+                        react_1.default.createElement(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }),
+                        !titleShow ? (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setTitleShow(true); }, px: 2, py: 1, borderRadius: "md", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] } }, "+ Add a title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
+                            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px" }, titleValue || "Title")))),
+                    react_1.default.createElement(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0 },
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semantic.error[500] : theme.colors.gray[500], whiteSpace: "nowrap" },
+                            noteWordCount,
+                            "/",
+                            maxNoteWordCount),
+                        cancelButtonHide ? null : (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea }, "Cancel")),
+                        react_1.default.createElement(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
                             saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
                             "Save"))),
-                react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, align: "center", color: theme.colors.gray[600], fontSize: "sm" },
-                    react_1.default.createElement(react_2.Text, { fontWeight: 600 }, "Note:"),
-                    react_1.default.createElement(react_2.Text, null,
-                        "You can add up to ",
-                        maxNoteWordCount,
-                        " words only")),
                 react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
                         var newFiles = Array.from(e.target.files || []);
                         var validFiles = newFiles.filter(function (f) { return f.size <= maxFileSize; });
@@ -211,12 +214,13 @@ function NoteTextArea(_a) {
                             setFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), validFiles, true); });
                         }
                     }, multiple: true }),
-                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.red[500], mt: 2, fontSize: "sm" }, fileError)),
-                files.length > 0 && (react_1.default.createElement(react_2.Box, { mt: 3 }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", justify: "space-between", w: "320px", mb: 2 },
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center" },
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm" }, shortenFileName(f.name)),
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formatBytes(f.size))),
-                    react_1.default.createElement(lucide_react_1.X, { size: 16, cursor: "pointer", color: theme.colors.red[600], onClick: function () {
+                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.semantic.error[500], mt: 2, fontSize: "xs" }, fileError)),
+                files.length > 0 && (react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap" }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%" },
+                    react_1.default.createElement(lucide_react_1.File, { size: 13, color: theme.colors.gray[500] }),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px" }, shortenFileName(f.name)),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], whiteSpace: "nowrap" }, formatBytes(f.size)),
+                    react_1.default.createElement(react_2.Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.gray[500], transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semantic.error[500] }, onClick: function () {
                             return setFiles(function (prev) { return prev.filter(function (fileItem) { return fileItem !== f; }); });
-                        } }))); }))))))));
+                        } },
+                        react_1.default.createElement(lucide_react_1.X, { size: 13 })))); }))))))));
 }

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

@@ -9,7 +9,8 @@ exports.NumberInput = {
             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/PinInput/PinInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ChakraPinInputProps } from "./PinInputProps";
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React.JSX.Element;
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): React.JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -7,11 +7,12 @@ exports.default = PinInputs;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
 function PinInputs(_a) {
-    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label;
+    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label, id = _a.id, isRequired = _a.isRequired, isInformation = _a.isInformation, informationMessage = _a.informationMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.HStack, null,
             react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[300], _focus: {
                     borderColor: theme.colors.primary[500],

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

@@ -6,4 +6,8 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
+    id?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
-export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React.JSX.Element;
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): React.JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -50,10 +50,12 @@ var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ProfilePhotoViewer(_a) {
-    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
-    var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _z = _a.imageWidth, imageWidth = _z === void 0 ? "100px" : _z, _0 = _a.imageAlt, imageAlt = _0 === void 0 ? "Profile Photo" : _0, _1 = _a.imageObjectFit, imageObjectFit = _1 === void 0 ? "cover" : _1, _2 = _a.imageBorderRadius, imageBorderRadius = _2 === void 0 ? "full" : _2, _3 = _a.editIconSize, editIconSize = _3 === void 0 ? "sm" : _3, _4 = _a.editIconPositionRight, editIconPositionRight = _4 === void 0 ? "0px" : _4, _5 = _a.editIconPositionBottom, editIconPositionBottom = _5 === void 0 ? "0px" : _5, _6 = _a.isRound, isRound = _6 === void 0 ? true : _6, boxStyle = _a.boxStyle, _7 = _a.isEditable, isEditable = _7 === void 0 ? false : _7, _8 = _a.isView, isView = _8 === void 0 ? false : _8, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText, _9 = _a.revealOnHover, revealOnHover = _9 === void 0 ? true : _9;
+    var _10 = (0, react_1.useState)(photoUrl), photo = _10[0], setPhoto = _10[1];
     var fileInputRef = (0, react_1.useRef)(null);
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var handlePhotoChange = function (event) {
         var _a;
         if (!isEditable)
@@ -76,31 +78,47 @@ function ProfilePhotoViewer(_a) {
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, sx: {
-            "&:hover .icon-button": {
-                opacity: 1,
+    var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
+    // Shared modern frame for whichever media we render (photo / pdf / fallback).
+    var mediaFrame = {
+        boxSize: imageWidth,
+        borderRadius: imageBorderRadius,
+        border: "0.063rem solid ".concat(border),
+        boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.sm,
+    };
+    var renderMedia = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (photo) {
+            return isPdf ? (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }),
+                react_1.default.createElement(lucide_react_1.FileText, { size: "45%" }))) : (react_1.default.createElement(react_2.Image, __assign({ src: photo, alt: imageAlt, objectFit: imageObjectFit }, mediaFrame)));
+        }
+        // Fallback: branded tinted avatar (initials or user glyph).
+        return (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500] }), fallbackText ? (react_1.default.createElement(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1" }, fallbackText)) : (react_1.default.createElement(lucide_react_1.User, { size: "48%" }))));
+    };
+    var hasActions = isEditable || isView;
+    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+            "&:hover .ppv-overlay": { opacity: 1 },
+            "&:hover .ppv-actions": { opacity: 1 },
+            "&:hover .ppv-media": {
+                boxShadow: "0 0 0 0.1875rem ".concat((_j = (_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[24]) !== null && _j !== void 0 ? _j : "transparent"),
             },
         } },
-        photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
-            react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
-        (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
-                    opacity: 0,
-                    transition: "opacity 0.3s",
-                } },
-                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
+        react_1.default.createElement(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease" }, renderMedia()),
+        hasActions && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }),
+            react_1.default.createElement(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease" },
+                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_k = c.primary) === null || _k === void 0 ? void 0 : _k[500], color: (_l = c.white) !== null && _l !== void 0 ? _l : "#fff", border: "0.125rem solid ".concat((_m = c.white) !== null && _m !== void 0 ? _m : "#fff"), boxShadow: (_o = theme.shadows) === null || _o === void 0 ? void 0 : _o.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_p = c.primary) === null || _p === void 0 ? void 0 : _p[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } }))),
-                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md }), _hover: {
+                            boxShadow: (_q = theme.shadows) === null || _q === void 0 ? void 0 : _q.lg,
+                        }, _active: { bg: (_r = c.primary) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = c.white) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: "0.063rem solid ".concat(border), boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
+                            color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } })))),
+                            boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
+                        }, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -15,4 +15,6 @@ export type ProfilePhotoViewerProps = {
     style?: React.CSSProperties;
     handleIsView?: () => void;
     fallbackText?: string;
+    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    revealOnHover?: boolean;
 };

package/dist/Components/RadioButton/RadioButton.js

@@ -25,7 +25,7 @@ var RadioButton = function (_a) {
                 boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
             },
         } },
-        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
+        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true })));
 };
 exports.RadioButton = RadioButton;
 var RadioButtonGroup = function (_a) {

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { SearchSelectProps } from "./SearchSelectProps";
-declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => React.JSX.Element;
+declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => React.JSX.Element;
 export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -82,7 +82,7 @@ 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, 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 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, isInformation = _a.isInformation, informationMessage = _a.informationMessage, 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];
@@ -90,19 +90,26 @@ var SearchSelect = function (_a) {
     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 controlRef = (0, react_1.useRef)(null);
+    var _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPos = _z[0], setDropdownPos = _z[1];
     var scrollTimeoutRef = (0, react_1.useRef)(null);
-    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 _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 customSelectRef = (0, react_1.useRef)(null);
-    var _1 = (0, react_1.useState)({
+    var _2 = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 0,
-    }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
+    }), customSelectPos = _2[0], setCustomSelectPos = _2[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
-        handler: function () {
+        handler: function (e) {
+            // The options dropdown is portaled to <body>, so a click on it is "outside"
+            // the container — ignore those so selecting an option doesn't close first.
+            var dropdown = document.getElementById("searchselect-dropdown-portal");
+            if (dropdown && dropdown.contains(e.target))
+                return;
             setIsOpen(false);
         },
     });
@@ -223,14 +230,38 @@ var SearchSelect = function (_a) {
             });
         }
     }, [customSelectOpen]);
+    // Keep the portaled options dropdown anchored to the control (on open + while
+    // open if the page/modal scrolls or resizes).
+    var updateDropdownPos = (0, react_1.useCallback)(function () {
+        if (!controlRef.current)
+            return;
+        var rect = controlRef.current.getBoundingClientRect();
+        setDropdownPos({
+            top: rect.bottom + window.scrollY,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        updateDropdownPos();
+        // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
+        window.addEventListener("scroll", updateDropdownPos, true);
+        window.addEventListener("resize", updateDropdownPos);
+        return function () {
+            window.removeEventListener("scroll", updateDropdownPos, true);
+            window.removeEventListener("resize", updateDropdownPos);
+        };
+    }, [isOpen, updateDropdownPos]);
     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 })),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? 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: 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
+            react_1.default.createElement(react_2.Box, { as: "div", ref: controlRef, 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]
-                        : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused
+                        : (_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], boxShadow: focused
                     ? error
                         ? "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error)
                         : "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary)
@@ -275,22 +306,23 @@ var SearchSelect = function (_a) {
                             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: 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, { 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(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { 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 && filteredOptions.length === 0 ? (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))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                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(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, 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)))); }),
-                ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
+        isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.Box, { id: "searchselect-dropdown-portal", position: "absolute", top: "".concat(dropdownPos.top, "px"), left: "".concat(dropdownPos.left, "px"), width: "".concat(dropdownPos.width, "px"), zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
+                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(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { 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 && filteredOptions.length === 0 ? (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)))))),
-            (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"))))),
+                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    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(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, 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)))); }),
+                    ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "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)))))),
+                (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/SearchSelectProps.d.ts

@@ -27,6 +27,8 @@ export type SearchSelectProps = {
         isInformation?: boolean;
         informationMessage?: string;
     };
+    isInformation?: boolean;
+    informationMessage?: string;
     rightIcon?: {
         icon?: React.ReactNode;
         onClick?: () => void;

package/dist/Components/Select/Select.styles.js

@@ -7,7 +7,8 @@ exports.Select = {
             fontWeight: 500,
             fontSize: "0.875rem",
             letterSpacing: "0.044rem",
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
             minWidth: "0", // allow shrinking inside flex
             width: "100%", // full container width
             maxWidth: "100%",

package/dist/Components/SelectSearch/SelectSearch.js

@@ -60,6 +60,7 @@ exports.default = SelectSearch;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
+var fieldStyles_1 = require("../Common/fieldStyles");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -90,7 +91,6 @@ function SelectSearch(_a) {
     BottomIcon = _l === void 0 ? false : _l, BottomText = _a.BottomText, handleBottomClick = _a.handleBottomClick, BottomTextColor = _a.BottomTextColor, isColorOptions = _a.isColorOptions;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var errorBorder = "2px solid ".concat(theme.colors.semantic.error[500]);
-    var defaultBorderThick = "2px solid ".concat(theme.colors.boxborder[500]);
     var defaultBorderThin = "1px solid ".concat(theme.colors.boxborder[500]);
     var _m = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _m[0], setSelectedOptions = _m[1];
     var _o = (0, react_1.useState)(searchQuery), inputValue = _o[0], setInputValue = _o[1];
@@ -239,13 +239,16 @@ function SelectSearch(_a) {
                     react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
                     react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
                 react_1.default.createElement(react_2.InputGroup, null,
-                    react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? errorBorder : defaultBorderThick, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: {
+                    react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                             borderColor: error
                                 ? theme.colors.semantic.error[500]
                                 : theme.colors.primary[500],
                         }, _focus: {
-                            borderColor: error ? "none" : theme.colors.primary[500],
-                        }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? errorBorder : defaultBorderThin }) }),
+                            borderColor: error
+                                ? theme.colors.semantic.error[500]
+                                : theme.colors.primary[500],
+                            boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme, !!error),
+                        }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.gray[50], fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.75rem", fontSize: 15, letterSpacing: 0.7, border: error ? errorBorder : defaultBorderThin }) }),
                     rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
                 isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
                     react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }),