@jars-labs/jars-components 1.0.2 → 1.0.4

package/dist/Input/Input.d.ts

@@ -13,5 +13,35 @@ export interface InputProps extends TextInputProps {
     rightSection?: React.ReactNode;
     hideLabel?: boolean;
 }
-export declare const Input: ({ error, name, placeholder, value, onChange, label, description, leftSection, rightSection, type, holdSpace, hideLabel, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Input component that extends the TextInput component from Mantine.
+ * It includes additional features like error handling, description, and label visibility.
+ *
+ * @param {string} name - The name of the input field.
+ * @param {string} label - The label for the input field.
+ * @param {string} placeholder - The placeholder text for the input field.
+ * @param {string} value - The value of the input field.
+ * @param {function} onChange - The function to call when the input value changes.
+ * @param {function} onBlur - The function to call when the input loses focus.
+ * @param {string} error - The error message to display.
+ * @param {string} description - The description text to display below the input field.
+ * @param {boolean} holdSpace - Whether to hold space for the error message even when there is no error.
+ * @param {React.ReactNode} leftSection - The icon to display on the left side of the input field.
+ * @param {React.ReactNode} rightSection - The icon to display on the right side of the input field.
+ * @param {boolean} hideLabel - Whether to hide the label when it's not required.
+ * @param {string} type - The type of the input field (default is 'text').
+ *
+ * @example
+ * <Input
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ *   onBlur={() => console.log('Input blurred')}
+ *   error="Username is required"
+ *   description="Your unique username"
+ * />
+ */
+export declare const Input: ({ error, name, placeholder, value, onChange, label, description, leftSection, rightSection, type, holdSpace, hideLabel, disabled, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

package/dist/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,KAAK,sIAcf,UAAU,4CA4EZ,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,KAA4B,MAAM,OAAO,CAAA;AAOhD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,KAAK,gJAef,UAAU,4CA8EZ,CAAA"}

package/dist/NavBar/NavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAIhD,eAAO,MAAM,MAAM,iBAAkB,iBAAiB,4CAcrD,CAAA"}
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/NavBar/NavBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAIhD,eAAO,MAAM,MAAM,iBAAkB,iBAAiB,4CAmBrD,CAAA"}

package/dist/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Input } from '../Input/Input';
+export interface PasswordInputProps extends React.ComponentProps<typeof Input> {
+}
+/**
+ * PasswordInput component
+ * It allows toggling visibility of the password.
+ * It extends the Input component.
+ *
+ * @param {string} name - The name of the input password field.
+ * @param {string} label - The label for the input password field.
+ * @param {string} placeholder - The placeholder text for the input password field.
+ * @param {string} value - The value of the input password field.
+ * @param {function} onChange - The function to call when the input password value changes.
+ * @param {function} onBlur - The function to call when the input password loses focus.
+ * @param {string} error - The error message to display.
+ *
+ * @return Attaches PasswordInput to target element and displays options
+ *
+ * @example
+ * <PasswordInput
+ *   name="password"
+ *   label="Password"
+ *   placeholder="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   onBlur={() => console.log('Password blurred')}
+ *   error="Password is required"
+ * />
+ *
+ */
+export declare const PasswordInput: ({ name, label, placeholder, value, onChange, onBlur, error, }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/PasswordInput/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC;CAAG;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,eAAO,MAAM,aAAa,kEAQvB,kBAAkB,4CAwCpB,CAAA"}

package/dist/assets/index.css

@@ -150,6 +150,10 @@
   color: var(--color-red-300);
 }
 
+.mcfb7df269_labelDisabled {
+  color: var(--color-neutral-500);
+}
+
 .mcfb7df269_input:focus,
 .mcfb7df269_input:hover {
   border: 1px solid var(--color-primary-300);

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './FileInput/FileInput';
 export * from './FileInput/FileUpload';
 export * from './IncrementNumber/IncrementNumber';
 export * from './Input/Input';
+export * from './PasswordInput/PasswordInput';
 export * from './Link/Link';
 export * from './LinkModal/LinkModal';
 export * from './Loader/Loader';
@@ -79,4 +80,5 @@ export * from './Icons/Upload';
 export * from './Icons/Visa';
 export * from './Icons/Warning';
 export * from './Icons/World';
+export * from './utils/stringUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAGnB,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AAGzC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAGnB,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,aAAa,CAAA;AAC3B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AAGzC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAE7B,cAAc,qBAAqB,CAAA"}

package/dist/index.esm.js

@@ -375,6 +375,7 @@ const inputRightIcon = "mcfb7df269_inputRightIcon";
 const label$6 = "mcfb7df269_label";
 const labelFocused$1 = "mcfb7df269_labelFocused";
 const labelError$1 = "mcfb7df269_labelError";
+const labelDisabled$1 = "mcfb7df269_labelDisabled";
 const description$1 = "mcfb7df269_description";
 const error$1 = "mcfb7df269_error";
 const errorText$1 = "mcfb7df269_errorText";
@@ -389,6 +390,7 @@ inputRightIcon,
 label: label$6,
 labelFocused: labelFocused$1,
 labelError: labelError$1,
+labelDisabled: labelDisabled$1,
 description: description$1,
 error: error$1,
 errorText: errorText$1,
@@ -486,32 +488,81 @@ var elementType = {
     h4: 'h4',
 };
 var Text = t.forwardRef(function (props, ref) {
-    var children = props.children, variant = props.variant, weight = props.weight, color = props.color, style = props.style, className = props.className, rest = __rest(props, ["children", "variant", "weight", "color", "style", "className"]);
+    var as = props.as, children = props.children, className = props.className, color = props.color, style = props.style, variant = props.variant, weight = props.weight, rest = __rest(props, ["as", "children", "className", "color", "style", "variant", "weight"]);
     var combinedStyle = __assign(__assign({}, style), { color: color });
     var combinedClassName = classNames(className, styles$j['text'], styles$j[variant || ''], styles$j[weight || '']);
-    return t.createElement(props.as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
+    return t.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function capitalizeFirstSentenceLetter(input) {
+    var str;
+    if (typeof input !== 'string') {
+        if (Array.isArray(input)) {
+            str = input.join(' ');
+        }
+        else {
+            return String(input);
+        }
+    }
+    else {
+        str = input;
+    }
+    var lowerCaseString = str.toLowerCase().replace(/_/g, ' ');
+    return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+}
+
+/**
+ * Input component that extends the TextInput component from Mantine.
+ * It includes additional features like error handling, description, and label visibility.
+ *
+ * @param {string} name - The name of the input field.
+ * @param {string} label - The label for the input field.
+ * @param {string} placeholder - The placeholder text for the input field.
+ * @param {string} value - The value of the input field.
+ * @param {function} onChange - The function to call when the input value changes.
+ * @param {function} onBlur - The function to call when the input loses focus.
+ * @param {string} error - The error message to display.
+ * @param {string} description - The description text to display below the input field.
+ * @param {boolean} holdSpace - Whether to hold space for the error message even when there is no error.
+ * @param {React.ReactNode} leftSection - The icon to display on the left side of the input field.
+ * @param {React.ReactNode} rightSection - The icon to display on the right side of the input field.
+ * @param {boolean} hideLabel - Whether to hide the label when it's not required.
+ * @param {string} type - The type of the input field (default is 'text').
+ *
+ * @example
+ * <Input
+ *   name="username"
+ *   label="Username"
+ *   placeholder="Enter your username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ *   onBlur={() => console.log('Input blurred')}
+ *   error="Username is required"
+ *   description="Your unique username"
+ * />
+ */
 var Input = function (_a) {
     var _b, _c;
-    var _d = _a.error, error = _d === void 0 ? '' : _d, name = _a.name, placeholder = _a.placeholder, _e = _a.value, value = _e === void 0 ? '' : _e, onChange = _a.onChange, label = _a.label, description = _a.description, leftSection = _a.leftSection, rightSection = _a.rightSection, _f = _a.type, type = _f === void 0 ? 'text' : _f, _g = _a.holdSpace, holdSpace = _g === void 0 ? true : _g, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, rest = __rest(_a, ["error", "name", "placeholder", "value", "onChange", "label", "description", "leftSection", "rightSection", "type", "holdSpace", "hideLabel"]);
-    var _j = useState(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _d = _a.error, error = _d === void 0 ? '' : _d, name = _a.name, placeholder = _a.placeholder, _e = _a.value, value = _e === void 0 ? '' : _e, onChange = _a.onChange, label = _a.label, description = _a.description, leftSection = _a.leftSection, rightSection = _a.rightSection, _f = _a.type, type = _f === void 0 ? 'text' : _f, _g = _a.holdSpace, holdSpace = _g === void 0 ? true : _g, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, rest = __rest(_a, ["error", "name", "placeholder", "value", "onChange", "label", "description", "leftSection", "rightSection", "type", "holdSpace", "hideLabel", "disabled"]);
+    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = useState(false), isHovered = _l[0], setIsHovered = _l[1];
     var showLabel = !hideLabel && (isFocused || value.trim());
     var placeHolderValue = showLabel ? placeholder : label;
     var ErrorSection = useMemo(function () {
-        return holdSpace && (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
+        return holdSpace && (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: capitalizeFirstSentenceLetter(error) })] }));
     }, [error]);
     return (jsxs("div", { className: styles$k.container, children: [showLabel && (jsx("label", { className: classNames(styles$k.label, (_b = {},
                     _b[styles$k.labelError] = error && !isFocused,
                     _b[styles$k.labelFocused] = isFocused || isHovered,
+                    _b[styles$k.labelDisabled] = disabled,
                     _b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(TextInput, __assign({ classNames: {
                         input: classNames(styles$k.input, (_c = {},
                             _c[styles$k.inputLeftIcon] = leftSection,
                             _c[styles$k.inputRightIcon] = rightSection,
                             _c[styles$k.inputError] = error,
                             _c)),
-                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$k.description }, errorProps: { className: styles$k.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$k.leftSection }, rightSectionProps: { className: styles$k.rightSection } }, rest, { type: type })) })] }));
+                    }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$k.description }, errorProps: { className: styles$k.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$k.leftSection }, rightSectionProps: { className: styles$k.rightSection }, type: type, disabled: disabled }, rest)) })] }));
 };
 
 var Loader = function (props) {
@@ -1114,6 +1165,50 @@ var IncrementNumber = function (props) {
                     } }) }))] }));
 };
 
+var EyeHide = function (props) {
+    return (jsx(Icon, __assign({}, props, { children: jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
+};
+
+var EyeShow = function (props) {
+    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
+};
+
+/**
+ * PasswordInput component
+ * It allows toggling visibility of the password.
+ * It extends the Input component.
+ *
+ * @param {string} name - The name of the input password field.
+ * @param {string} label - The label for the input password field.
+ * @param {string} placeholder - The placeholder text for the input password field.
+ * @param {string} value - The value of the input password field.
+ * @param {function} onChange - The function to call when the input password value changes.
+ * @param {function} onBlur - The function to call when the input password loses focus.
+ * @param {string} error - The error message to display.
+ *
+ * @return Attaches PasswordInput to target element and displays options
+ *
+ * @example
+ * <PasswordInput
+ *   name="password"
+ *   label="Password"
+ *   placeholder="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   onBlur={() => console.log('Password blurred')}
+ *   error="Password is required"
+ * />
+ *
+ */
+var PasswordInput = function (_a) {
+    var name = _a.name, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error;
+    var _b = useState(false), showPassword = _b[0], setShowPassword = _b[1];
+    var togglePasswordVisibility = function () {
+        setShowPassword(function (prevShowPassword) { return !prevShowPassword; });
+    };
+    return (jsx(Input, { "data-testid": name, name: name, label: label, placeholder: placeholder, type: showPassword ? 'text' : 'password', value: value, onChange: onChange, onBlur: onBlur, error: error, rightSection: jsx(Flex, { onClick: togglePasswordVisibility, align: 'center', style: { cursor: 'pointer' }, children: showPassword ? (jsx(EyeShow, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) : (jsx(EyeHide, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) }) }));
+};
+
 const link = "mc234e3a09_link";
 const s = "mc234e3a09_s";
 const m$1 = "mc234e3a09_m";
@@ -1251,7 +1346,7 @@ var Umbrello = function (props) {
 
 var NavBar = function (_a) {
     var children = _a.children;
-    return (jsxs(Flex, { p: "24px 120px", bg: "var(--color-white)", children: [jsx("a", { href: "/dashboard/management-companies", children: jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
+    return (jsxs(Flex, { p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", children: [jsx("a", { href: "/dashboard/management-companies", children: jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
 };
 
 var Pagination = function (_a) {
@@ -1721,14 +1816,6 @@ var Dog = function (props) {
     return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.642 18.223v0a.66.66 0 01-.652-.667v0a.22.22 0 01.218-.222h.87c.12 0 .216.1.216.222v0a.66.66 0 01-.652.667z", clipRule: "evenodd" }), jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M23.467 17.334c0 .737.584 1.334 1.304 1.334v0c1.44 0 2.608-1.195 2.608-2.668v-4.002c0-2.21-1.752-4.001-3.912-4.001h-.544M10.493 23.798l-1.371 4.207M20.792 23.798l1.37 4.207M8.362 7.997h-.544c-2.16 0-3.912 1.791-3.912 4.001V16c0 1.473 1.167 2.668 2.608 2.668v0c.72 0 1.304-.597 1.304-1.334M18.25 23.775v.895c0 1.105-.875 2.001-1.956 2.001H14.99c-1.08 0-1.956-.896-1.956-2v-.896" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.642 18.223v1.779c0 2.21-1.751 4.001-3.912 4.001v0c-2.16 0-3.912-1.791-3.912-4.001v-9.338c0-3.683 2.92-6.669 6.52-6.669h2.609c3.6 0 6.52 2.986 6.52 6.67v9.337c0 2.21-1.752 4.001-3.912 4.001v0c-2.161 0-3.913-1.791-3.913-4.001v-1.779z", clipRule: "evenodd" }), jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.577 12.666a.33.33 0 01-.327.333.33.33 0 01-.326-.334.33.33 0 01.326-.333c.087 0 .17.035.231.098a.337.337 0 01.096.236M13.36 12.666a.33.33 0 01-.326.333.33.33 0 01-.326-.334.33.33 0 01.326-.333c.086 0 .17.035.23.098a.337.337 0 01.096.236" })] })));
 };
 
-var EyeHide = function (props) {
-    return (jsx(Icon, __assign({}, props, { children: jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
-};
-
-var EyeShow = function (props) {
-    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
-};
-
 var Fingerprint = function (_a) {
     var _b = _a.width, width = _b === void 0 ? '32px' : _b, _c = _a.height, height = _c === void 0 ? '32px' : _c, _d = _a.viewBox, viewBox = _d === void 0 ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === void 0 ? 'currentColor' : _e, _f = _a.fill, fill = _f === void 0 ? 'none' : _f;
     return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: [jsx("path", { stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M10.272 23.728l.452-.452A3.22 3.22 0 0113 22.333v0c.854 0 1.672.34 2.276.943l.452.452A4.342 4.342 0 0018.798 25h.526a4.343 4.343 0 004.343-4.343v0a4.343 4.343 0 00-1.934-3.613v0a10.638 10.638 0 01-3.31-3.527l-1.226-2.122A4.793 4.793 0 0013.047 9v0a4.793 4.793 0 00-4.11 2.327l-1.373 2.288a10.637 10.637 0 01-3.22 3.378l-.077.051a4.343 4.343 0 00-1.934 3.613v0A4.343 4.343 0 006.676 25H7.2a4.343 4.343 0 003.07-1.272v0z", clipRule: "evenodd" }), jsx("circle", { cx: "3", cy: "9.667", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), jsx("circle", { cx: "23", cy: "9.667", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), jsx("ellipse", { cx: "8.714", cy: "3", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", rx: "2", ry: "2" }), jsx("circle", { cx: "17.286", cy: "3", r: "2", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }));
@@ -21931,5 +22018,5 @@ var lottie$1 = /*#__PURE__*/_mergeNamespaces({
     default: lottie
 }, [lottieExports]);
 
-export { Accordion, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, Alert, Animation, Arrow, Attachment, Autocomplete, AvatarPlaceholder, Badge, Bell, Button, Calendar, Card, CardStatus, Cat, Checkbox, Chevron, Clock, Close, Cloud, DateInput, Delete, Document, Dog, Dropdown, EnterCodeInput, EyeHide, EyeShow, FileInput, FileUpload, Fingerprint, Google, Grid, HappyFace, House, HouseTime, Identification, IncrementNumber, Info, Input, Link, LinkModal, Loader, Location, Mail, Menu, MenuTouched, Message, Modal, Multiselect, NavBar, Notification, Open, Pagination, Pets, Phone, Plaid, Plus, RadioButton, Remove, Search, SegmentedControl, Select, StatusBadge, Table, Tabs, Text, Textarea, ThreeDots, ThumbsDown, Tick, ToastContainer, Tooltip, Umbrello, Upload, Visa, Warning, World, badgeVariantMap, cardStatusVariantMap };
+export { Accordion, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, Alert, Animation, Arrow, Attachment, Autocomplete, AvatarPlaceholder, Badge, Bell, Button, Calendar, Card, CardStatus, Cat, Checkbox, Chevron, Clock, Close, Cloud, DateInput, Delete, Document, Dog, Dropdown, EnterCodeInput, EyeHide, EyeShow, FileInput, FileUpload, Fingerprint, Google, Grid, HappyFace, House, HouseTime, Identification, IncrementNumber, Info, Input, Link, LinkModal, Loader, Location, Mail, Menu, MenuTouched, Message, Modal, Multiselect, NavBar, Notification, Open, Pagination, PasswordInput, Pets, Phone, Plaid, Plus, RadioButton, Remove, Search, SegmentedControl, Select, StatusBadge, Table, Tabs, Text, Textarea, ThreeDots, ThumbsDown, Tick, ToastContainer, Tooltip, Umbrello, Upload, Visa, Warning, World, badgeVariantMap, capitalizeFirstSentenceLetter, cardStatusVariantMap };
 //# sourceMappingURL=index.esm.js.map