@symply.io/basic-components 1.4.0-alpha.6 → 1.4.0-alpha.8

package/ConfirmPasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmPasswordInputProps } from "./types";
+declare function ConfirmPasswordInput(props: ConfirmPasswordInputProps): JSX.Element;
+export default ConfirmPasswordInput;
+export type { ConfirmPasswordInputProps };

package/{PasswordInput/ConfirmPassword.js → ConfirmPasswordInput/index.js}

@@ -25,7 +25,7 @@ import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-function ConfirmPassword(props) {
+function ConfirmPasswordInput(props) {
     var password = props.password, _a = props.helperText, helperText = _a === void 0 ? "Passwords do not match" : _a, value = props.value, _b = props.label, label = _b === void 0 ? "Confirm Password" : _b, _c = props.name, name = _c === void 0 ? "confirmPassword" : _c, _d = props.variant, variant = _d === void 0 ? "outlined" : _d, _e = props.margin, margin = _e === void 0 ? "dense" : _e, disabled = props.disabled, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isMatched = useMemo(function () {
@@ -39,4 +39,4 @@ function ConfirmPassword(props) {
                 onChange(event.target.value);
             }, fullWidth: true, required: true }, rest)) })));
 }
-export default ConfirmPassword;
+export default ConfirmPasswordInput;

package/ConfirmPasswordInput/types.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
+export interface ConfirmPasswordInputProps extends Omit<TextFieldProps, "onChange"> {
+    password: string;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: string) => void;
+}

package/ConfirmPasswordInput/types.js

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

package/DataTable/index.d.ts

@@ -1,6 +1,6 @@
-import useTable from "./useTable";
+import useDataTable from "./useTable";
 import { DataTableProps, KvProps } from "./types";
 declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): JSX.Element;
 export default DataTable;
 export * from "./types";
-export { useTable };
+export { useDataTable };

package/DataTable/index.js

@@ -15,7 +15,7 @@ import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-import useTable from "./useTable";
+import useDataTable from "./useTable";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
@@ -59,4 +59,4 @@ function DataTable(props) {
 }
 export default DataTable;
 export * from "./types";
-export { useTable };
+export { useDataTable };

package/DigitInput/index.d.ts

@@ -1,4 +1,4 @@
-import { DigitInputProps } from "./types";
+import type { DigitInputProps } from "./types";
 declare function DigitInput(props: DigitInputProps): JSX.Element;
 export default DigitInput;
-export * from "./types";
+export type { DigitInputProps };

package/DigitInput/index.js

@@ -35,4 +35,3 @@ function DigitInput(props) {
                 }, onChange: handleChange }, rest)) })) })));
 }
 export default DigitInput;
-export * from "./types";

package/DigitInput/types.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties } from "react";
-import { InputProps } from "@mui/material/Input";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { InputProps } from "@mui/material/Input";
+import type { TextFieldProps } from "@mui/material/TextField";
 export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;

package/DynamicHeaderBar/HeaderBar.d.ts

@@ -1,15 +1,3 @@
-import { ReactElement, CSSProperties } from "react";
-import { HeaderButtonProps } from "./types";
-export interface HeaderBarProps {
-    title: string | ReactElement;
-    color?: CSSProperties["color"];
-    subtitle?: string | ReactElement;
-    bottomEl?: ReactElement;
-    buttons?: Array<HeaderButtonProps>;
-    showBackButton?: boolean;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-    onBack?: () => void;
-}
+import type { HeaderBarProps } from "./types";
 declare function HeaderBar(props: HeaderBarProps): JSX.Element;
 export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 import { HeaderButtonProps } from "./types";
-export interface HeaderButtonsProps {
+interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DynamicHeaderBar/HeaderLine.d.ts

@@ -1,8 +1,3 @@
-import { CSSProperties } from "react";
-interface HeaderLineProps {
-    color?: CSSProperties["color"];
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-}
+import type { HeaderLineProps } from "./types";
 declare function HeaderLine(props: HeaderLineProps): JSX.Element;
 export default HeaderLine;

package/DynamicHeaderBar/index.d.ts

@@ -1,23 +1,7 @@
-import { ReactElement, CSSProperties } from "react";
-import { SxProps } from "@mui/material/styles";
-import { HeaderBarProps } from "./HeaderBar";
-interface HeaderProviderProps {
-    sx?: SxProps;
-    children: ReactElement;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-}
-interface HeaderContextProps {
-    onInit: (props: HeaderBarProps) => void;
-    onShow: () => void;
-    onHide: () => void;
-}
+import type { HeaderContextProps, HeaderProviderProps } from "./types";
 export declare function HeaderProvider(props: HeaderProviderProps): JSX.Element;
-export declare function useHeaderBar(): HeaderContextProps;
-export { default } from "./HeaderBar";
+export default function useHeaderBar(): HeaderContextProps;
+export { default as HeaderBar } from "./HeaderBar";
 export { default as HeaderButtons } from "./HeaderButtons";
 export { default as HeaderLine } from "./HeaderLine";
-export * from "./HeaderBar";
-export * from "./HeaderButtons";
-export * from "./HeaderLine";
 export * from "./types";

package/DynamicHeaderBar/index.js

@@ -45,13 +45,10 @@ export function HeaderProvider(props) {
                     }
                 })] }) })));
 }
-export function useHeaderBar() {
+export default function useHeaderBar() {
     return useContext(HeaderContext);
 }
-export { default } from "./HeaderBar";
+export { default as HeaderBar } from "./HeaderBar";
 export { default as HeaderButtons } from "./HeaderButtons";
 export { default as HeaderLine } from "./HeaderLine";
-export * from "./HeaderBar";
-export * from "./HeaderButtons";
-export * from "./HeaderLine";
 export * from "./types";

package/DynamicHeaderBar/types.d.ts

@@ -1,8 +1,9 @@
-import { ReactElement } from "react";
-import { ButtonProps } from "@mui/material/Button";
-import { IconButtonProps } from "@mui/material/IconButton";
-import { FabProps } from "@mui/material/Fab";
-import { MenuButtonGroupProps } from "../MenuButtonGroup";
+import type { ReactElement, CSSProperties } from "react";
+import type { ButtonProps } from "@mui/material/Button";
+import type { IconButtonProps } from "@mui/material/IconButton";
+import type { FabProps } from "@mui/material/Fab";
+import type { SxProps } from "@mui/material/styles";
+import type { MenuButtonGroupProps } from "../MenuButtonGroup";
 export declare enum HeaderButtonCategory {
     IconButton = "icon",
     TextButton = "text",
@@ -43,4 +44,31 @@ declare type HeaderMenuButtonProps = {
     type: HeaderButtonCategory.MenuButton;
 } & MenuButtonGroupProps;
 export declare type HeaderButtonProps = HeaderFabButtonProps | HeaderTextButtonProps | HeaderIconButtonProps | HeaderMenuButtonProps;
+export interface HeaderLineProps {
+    color?: CSSProperties["color"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
+export interface HeaderBarProps {
+    title: string | ReactElement;
+    color?: CSSProperties["color"];
+    subtitle?: string | ReactElement;
+    bottomEl?: ReactElement;
+    buttons?: Array<HeaderButtonProps>;
+    showBackButton?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onBack?: () => void;
+}
+export interface HeaderProviderProps {
+    sx?: SxProps;
+    children: ReactElement;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
+export interface HeaderContextProps {
+    onInit: (props: HeaderBarProps) => void;
+    onShow: () => void;
+    onHide: () => void;
+}
 export {};

package/FeinInput/index.d.ts

@@ -1,6 +1,6 @@
-import { FeinInputProps } from "./types";
+import type { FeinInputProps } from "./types";
 export declare function FeinInputFormat(str: string): string;
 export declare function onValidateFein(feinString: string): boolean;
 declare function FeinInput(props: FeinInputProps): JSX.Element;
 export default FeinInput;
-export * from "./types";
+export type { FeinInputProps };

package/FeinInput/index.js

@@ -72,4 +72,3 @@ function FeinInput(props) {
             } }, rest)) })));
 }
 export default FeinInput;
-export * from "./types";

package/FeinInput/types.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
 export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value?: string) => boolean;

package/LoadingModal/index.d.ts

@@ -1,4 +1,5 @@
-export { default } from "./Modal";
-export { default as useLoadingModal } from "./useLoadingModal";
-export * from "./useLoadingModal";
+import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
+export default LoadingModal;
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/LoadingModal/index.js

@@ -1,5 +1,6 @@
 "use client";
-export { default } from "./Modal";
-export { default as useLoadingModal } from "./useLoadingModal";
-export * from "./useLoadingModal";
+import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
+export default LoadingModal;
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/PasswordInput/index.d.ts

@@ -1,4 +1,6 @@
-export { default as Password } from "./Password";
-export * from "./Password";
-export { default as ConfirmPassword } from "./ConfirmPassword";
-export * from "./ConfirmPassword";
+import type { PasswordInputProps, PasswordStrategyProps } from "./types";
+declare function onValidatePassword(password: string): boolean;
+declare function PasswordInput(props: PasswordInputProps): JSX.Element;
+export default PasswordInput;
+export { onValidatePassword };
+export type { PasswordInputProps, PasswordStrategyProps };

package/PasswordInput/index.js

@@ -1,4 +1,79 @@
-export { default as Password } from "./Password";
-export * from "./Password";
-export { default as ConfirmPassword } from "./ConfirmPassword";
-export * from "./ConfirmPassword";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function onValidatePassword(password) {
+    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
+    return reg.test(password);
+}
+function PasswordInput(props) {
+    var _a = props.strategies, strategies = _a === void 0 ? {
+        uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
+        lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
+        specialCharacter: {
+            label: "1 Special Character",
+            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
+        },
+        number: { label: "1 Number", regex: /\d+/ },
+        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isValidPassword = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return onValidate ? onValidate(value) : onValidatePassword(value);
+        }
+        return true;
+    }, [value, onValidate, onValidatePassword]);
+    var helperTextColor = useMemo(function () {
+        var textColors = Object.keys(strategies).reduce(function (temp, key) {
+            var regex = strategies[key].regex;
+            if (value === "") {
+                temp[key] = undefined;
+            }
+            else if (regex.test(value)) {
+                temp[key] = successColor;
+            }
+            else {
+                temp[key] = "red";
+            }
+            return temp;
+        }, {});
+        return textColors;
+    }, [value, strategies]);
+    var helperText = useMemo(function () {
+        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
+                var label = strategies[key].label;
+                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
+            }) }));
+    }, [helperTextColor, strategies]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+                event.preventDefault();
+                onChange(event.target.value);
+            }, fullWidth: true, required: true }, rest)) })));
+}
+export default PasswordInput;
+export { onValidatePassword };

package/PasswordInput/{Password.d.ts → types.d.ts}

@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
         regex: RegExp;
     };
 }
-export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
+export interface PasswordInputProps extends Omit<TextFieldProps, "onChange"> {
     strategies?: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
@@ -15,6 +15,3 @@ export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value: string) => boolean;
 }
-export declare function onValidatePassword(password: string): boolean;
-declare function Password(props: PasswordProps): JSX.Element;
-export default Password;

package/PasswordInput/types.js

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

package/index.d.ts

@@ -5,6 +5,7 @@ export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -34,6 +35,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as CheckBox } from "./CheckBox";
 export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -45,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/index.js

@@ -5,6 +5,7 @@ export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -34,6 +35,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as CheckBox } from "./CheckBox";
 export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -45,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.4.0-alpha.6",
+  "version": "1.4.0-alpha.8",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
-export interface ConfirmPasswordProps extends Omit<TextFieldProps, "onChange"> {
-    password: string;
-    value: string;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-    onChange: (value: string) => void;
-}
-declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
-export default ConfirmPassword;

package/PasswordInput/Password.js

@@ -1,78 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-export function onValidatePassword(password) {
-    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
-    return reg.test(password);
-}
-function Password(props) {
-    var _a = props.strategies, strategies = _a === void 0 ? {
-        uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
-        lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
-        specialCharacter: {
-            label: "1 Special Character",
-            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
-        },
-        number: { label: "1 Number", regex: /\d+/ },
-        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var isValidPassword = useMemo(function () {
-        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
-            return onValidate ? onValidate(value) : onValidatePassword(value);
-        }
-        return true;
-    }, [value, onValidate, onValidatePassword]);
-    var helperTextColor = useMemo(function () {
-        var textColors = Object.keys(strategies).reduce(function (temp, key) {
-            var regex = strategies[key].regex;
-            if (value === "") {
-                temp[key] = undefined;
-            }
-            else if (regex.test(value)) {
-                temp[key] = successColor;
-            }
-            else {
-                temp[key] = "red";
-            }
-            return temp;
-        }, {});
-        return textColors;
-    }, [value, strategies]);
-    var helperText = useMemo(function () {
-        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
-                var label = strategies[key].label;
-                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
-            }) }));
-    }, [helperTextColor, strategies]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
-                event.preventDefault();
-                onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest)) })));
-}
-export default Password;