pixelize-design-library 2.1.71 → 2.1.73

package/dist/Components/Dropdown/DropDown.js

@@ -79,7 +79,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             var _a;
             return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
                     bg: theme.colors.gray[100],
-                    color: theme.colors.blue[500],
+                    color: theme.colors.primary[500],
                 }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
                     "&:last-child": {
                         borderBottom: "none",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -10,35 +10,23 @@ var lucide_react_1 = require("lucide-react");
 function VerifyEmailOtp(_a) {
     var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement("div", { style: styles },
-        react_1.default.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "3%",
-            } },
-            react_1.default.createElement("div", { style: { padding: "3%" } },
-                react_1.default.createElement(lucide_react_1.MailCheck, { size: "100", color: theme.colors.primary[500] })),
-            react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
-            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
-                description,
-                react_1.default.createElement("br", null),
-                " your new Pixel Account"),
-            react_1.default.createElement("div", { style: { marginBottom: "2%" } },
-                react_1.default.createElement(react_2.HStack, null,
-                    react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
-            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
-                "Didn't receive the code?",
+    return (react_1.default.createElement(react_2.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "400px", mx: "auto", borderColor: "gray.200", borderRadius: "lg" },
+        react_1.default.createElement(react_2.Box, { mb: 4 },
+            react_1.default.createElement(lucide_react_1.MailCheck, { size: 80, color: theme.colors.primary[500] })),
+        react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center" }, title),
+        react_1.default.createElement(react_2.Text, { fontSize: "md", textAlign: "center", color: "gray.600", mb: 6 },
+            description,
+            react_1.default.createElement("br", null),
+            "your new Pixel Account"),
+        react_1.default.createElement(react_2.HStack, { spacing: 3, mb: 6 },
+            react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "1px solid", borderColor: "gray.300", _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+                } })); }))),
+        react_1.default.createElement(react_2.Flex, { justify: "center" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
+                "Didn\u2019t receive the code?",
                 " ",
-                react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
-                        background: "none",
-                        color: theme.colors.primary[700],
-                        border: "none",
-                        padding: "0",
-                        font: "inherit",
-                        cursor: "pointer",
-                        outline: "inherit",
-                    } }, "Resend Code")))));
+                react_1.default.createElement(react_2.Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail }, "Resend Code")))));
 }
 exports.default = VerifyEmailOtp;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, errorMessage, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -42,11 +42,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 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 ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var generateUniqueId = (function () {
     var counter = 0;
     return function () {
@@ -55,11 +60,8 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle;
+    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var getPadding = function () {
-        return "0.5rem";
-    };
     var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
     var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
     var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
@@ -88,9 +90,6 @@ function MultiSelect(_a) {
                 setOptions(updatedOptions);
                 onValueChange(updatedOptions);
                 setInputValue("");
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
             }
         }
         else if (e.key === "Backspace" && inputValue === "") {
@@ -104,12 +103,17 @@ function MultiSelect(_a) {
         setOptions(updatedOptions);
         onValueChange(updatedOptions);
     };
-    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", backgroundColor: "white" },
+    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 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
-            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, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7, borderRadius: "0.125rem" }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholderText, marginTop: 2, marginLeft: 1 }),
-        error && (react_1.default.createElement(react_2.Text, { color: "red.500", marginTop: 2, marginLeft: 1 }, error))));
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
+                borderColor: theme.colors.primary[500],
+                boxShadow: "0 0 0 1px " + theme.colors.primary[500],
+            } },
+            options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
+                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 : "" })),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = MultiSelect;

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

@@ -13,6 +13,8 @@ export type MultiSelectProps = {
     isReadOnly?: boolean;
     size?: string;
     inputStyle?: {};
+    errorMessage?: string;
+    helperText?: string;
 };
 export type MultiSelctOPtions = {
     id: string;

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, }: NoteTextAreaProps): React.JSX.Element;