@symply.io/basic-components 1.3.11-alpha.9 → 1.4.0-alpha.10

package/NumberInput/index.js

@@ -1,3 +1,25 @@
+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 } from "react/jsx-runtime";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
@@ -5,12 +27,12 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    const { onChange, value, size = "small", tooltip, integerOnly = false, minValue = Number.MIN_SAFE_INTEGER, maxValue = Number.MAX_SAFE_INTEGER, error, helperText, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const EXCEED_ERROR = "Your value exceeds the exceptable input range";
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than the `miniValue`!");
-    const { exceedError, tooltipOpen, handleBlur, handleChange, onOpenTooltip, onCloseTooltip } = useInteractions({ maxValue, minValue, value, onChange });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tooltip, { arrow: true, placement: "top", title: tooltip ?? "", open: !!tooltip && tooltipOpen, children: _jsx(Field, { size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), ...rest }) }) }));
+    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
 }
 export default NumberInput;

package/NumberInput/useInteractions.js

@@ -1,11 +1,11 @@
 import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value, integerOnly, minValue = Number.MIN_SAFE_INTEGER, maxValue = Number.MAX_SAFE_INTEGER, onChange } = props;
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const exceedError = useMemo(() => !!value && (Number(value) < minValue || Number(value) > maxValue), [value, minValue, maxValue]);
-    const handleChange = useCallback((event) => {
+    var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
+    var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
+    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
+    var handleChange = useCallback(function (event) {
         event.preventDefault();
-        const val = event.currentTarget.value;
+        var val = event.currentTarget.value;
         if (val !== "" && minValue >= 0 && val.includes("-"))
             return;
         if (integerOnly) {
@@ -16,8 +16,8 @@ function useInteractions(props) {
             return;
         onChange(val);
     }, [onChange, minValue, integerOnly]);
-    const handleBlur = useCallback(() => {
-        const excludedValue = [
+    var handleBlur = useCallback(function () {
+        var excludedValue = [
             null,
             undefined,
             ".",
@@ -27,9 +27,9 @@ function useInteractions(props) {
             "null",
             "undefined"
         ];
-        const strVal = String(value).trim();
+        var strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
-            const newValue = strVal.substring(0, String(value).length - 1);
+            var newValue = strVal.substring(0, String(value).length - 1);
             onChange(newValue);
         }
         else if (excludedValue.includes(strVal)) {
@@ -39,19 +39,19 @@ function useInteractions(props) {
             onChange(Number(strVal).toString());
         }
     }, [value, onChange]);
-    const onOpenTooltip = useCallback(() => {
+    var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
-    const onCloseTooltip = useCallback(() => {
+    var onCloseTooltip = useCallback(function () {
         setTooltipOpen(false);
     }, []);
     return {
-        exceedError,
-        tooltipOpen,
-        handleBlur,
-        handleChange,
-        onOpenTooltip,
-        onCloseTooltip
+        exceedError: exceedError,
+        tooltipOpen: tooltipOpen,
+        handleBlur: handleBlur,
+        handleChange: handleChange,
+        onOpenTooltip: onOpenTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

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/PhoneNumberInput/index.js

@@ -1,3 +1,25 @@
+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 } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import Typography from "@mui/material/Typography";
@@ -7,38 +29,38 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function onValidatePhone(str) {
-    const reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
+    var reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
     return reg.test(str);
 }
 export function phoneFormat(str) {
-    const digits = (str.match(/\d+/g) || []).join("");
-    const chars = digits.split("");
-    return chars.reduce((prev, curr, index) => {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
         if (index === 3) {
-            return `${prev}) ${curr}`;
+            return "".concat(prev, ") ").concat(curr);
         }
         else if (index === 6) {
-            return `${prev}-${curr}`;
+            return "".concat(prev, "-").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, `(`);
+    }, "(");
 }
 function PhoneInput(props) {
-    const { value, error, endAdornment, primaryColor, secondaryColor, helperText = "Please enter a valid phone number", onChange, onValidate, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var value = props.value, error = props.error, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid phone number" : _a, onChange = props.onChange, onValidate = props.onValidate, rest = __rest(props, ["value", "error", "endAdornment", "primaryColor", "secondaryColor", "helperText", "onChange", "onValidate"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _b = useInteractions({ value: value }), valLength = _b.valLength, addMask = _b.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: phoneFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { value: rifm.value, InputProps: {
-                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "+1" }) })),
-                endAdornment
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ sx: { fontSize: 16, fontWeight: 500 } }, { children: "+1" })) }))),
+                endAdornment: endAdornment
             }, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(rifm.value) : !onValidatePhone(rifm.value))
                 ? helperText
@@ -46,6 +68,6 @@ function PhoneInput(props) {
                 (valLength > 0 &&
                     (onValidate
                         ? !onValidate(rifm.value)
-                        : !onValidatePhone(rifm.value))), ...rest }) }));
+                        : !onValidatePhone(rifm.value))) }, rest)) })));
 }
 export default PhoneInput;

package/PhoneNumberInput/useInteractions.js

@@ -1,17 +1,17 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value } = props;
-    const addMask = useCallback((str) => {
-        const digits = (str.match(/\d+/g) || []).join("");
-        const areaCode = digits.slice(0, 3).padEnd(3, "_");
-        const prefixCode = digits.slice(3, 6).padEnd(3, "_");
-        const subscriber = digits.slice(6, 10).padEnd(4, "_");
-        return `(${areaCode}) ${prefixCode}-${subscriber}`;
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var areaCode = digits.slice(0, 3).padEnd(3, "_");
+        var prefixCode = digits.slice(3, 6).padEnd(3, "_");
+        var subscriber = digits.slice(6, 10).padEnd(4, "_");
+        return "(".concat(areaCode, ") ").concat(prefixCode, "-").concat(subscriber);
     }, []);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength, addMask };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/README.md

@@ -237,9 +237,7 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
 ```typescript
 import { CheckBox } from '@symply.io/basic-components/';
 // or 
-import { CheckBox } from '@symply.io/basic-components/CheckBox'; 
-// or 
-import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox'; 
+import CheckBox from '@symply.io/basic-components/CheckBox'; 
 ```
 
 <h5>Props</h5>
@@ -262,9 +260,7 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
 ```typescript
 import { CheckBoxGroup } from '@symply.io/basic-components/';
 // or 
-import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox'; 
-// or 
-import CheckBoxGroup from '@symply.io/basic-components/CheckBox/CheckBoxGroup'; 
+import CheckBoxGroup from '@symply.io/basic-components/CheckBoxGroup'; 
 ```
 
 <h5>Props</h5>
@@ -701,9 +697,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 
 ```typescript
 // Password
-import { Password } from '@symply.io/basic-components/PasswordInput';
+import Password from '@symply.io/basic-components/PasswordInput';
 // Confirm Password 
-import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput'; 
+import ConfirmPassword from '@symply.io/basic-components/ConfirmPasswordInput'; 
 ```
 
 <h5>Password Props</h5>

package/Sidebar/SidebarItem.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Chip from "@mui/material/Chip";
 import ListItemText from "@mui/material/ListItemText";
@@ -8,9 +19,9 @@ import { useTheme, alpha } from "@mui/material/styles";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function SidebarItem(props) {
-    const { icon, name, active, expand, lock, beta, isSub, hasChildren, betaTagColor = "#00A2A9", showIconOnly = false, onClick } = props;
-    const theme = useTheme();
-    return (_jsxs(ListItemButton, { onClick: onClick, disabled: lock, sx: {
+    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
+    var theme = useTheme();
+    return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
             paddingLeft: isSub ? theme.spacing(4) : undefined,
             display: "flex",
             width: "100%",
@@ -22,12 +33,12 @@ function SidebarItem(props) {
             backgroundColor: active
                 ? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
                 : undefined
-        }, children: [_jsx(ListItemIcon, { sx: {
+        } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
                     color: active ? theme.palette.primary.main : undefined,
                     borderRadius: active ? "5px" : undefined,
                     opacity: active ? "1" : undefined,
                     fontWeight: active ? 600 : undefined
-                }, children: icon }), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
+                } }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
                             color: active ? theme.palette.primary.main : "textPrimary",
                             sx: {
                                 overflow: "hidden",
@@ -44,6 +55,6 @@ function SidebarItem(props) {
                             height: theme.spacing(2.5),
                             fontSize: theme.spacing(1.25),
                             padding: theme.spacing(0, 0.75)
-                        } })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] }));
+                        } })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
 }
 export default SidebarItem;

package/Sidebar/SidebarItemsGroup.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo, useMemo, useEffect, useCallback } from "react";
 import { Match, useLocation } from "@reach/router";
@@ -7,20 +18,20 @@ import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 import SidebarLink from "./SidebarLink";
 function SidebarItemsGroup(props) {
-    const { item, showIconOnly } = props;
-    const { id, name, path, icon, children, lock, beta, titleForLock, betaTagColor } = item;
-    const { pathname } = useLocation();
-    const match = useMemo(() => {
+    var item = props.item, showIconOnly = props.showIconOnly;
+    var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
+    var pathname = useLocation().pathname;
+    var match = useMemo(function () {
         return pathname.includes(path);
     }, [path, pathname]);
-    const [expand, setExpand] = useState(match);
-    const onToggleExpand = useCallback(() => {
-        setExpand(v => !v);
+    var _a = useState(match), expand = _a[0], setExpand = _a[1];
+    var onToggleExpand = useCallback(function () {
+        setExpand(function (v) { return !v; });
     }, []);
-    useEffect(() => {
+    useEffect(function () {
         setExpand(match);
     }, [match]);
-    const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(List, { component: "div", disablePadding: true, children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) }), children && (_jsx(Collapse, { in: expand, timeout: "auto", children: _jsx(List, { component: "div", disablePadding: true, children: children.map((c) => (_jsx(Match, { path: c.path, children: prop => (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })) }, c.name))) }) }))] }));
+    var theme = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.js

@@ -1,14 +1,36 @@
+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 } from "react/jsx-runtime";
 import { Link, useLocation } from "@reach/router";
 import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 function SidebarLink(props) {
-    const { pathname } = useLocation();
-    const { id, name, path, icon, lock, beta, active, titleForLock, betaTagColor, ...rest } = props;
-    const theme = useTheme();
-    return (_jsx(Link, { id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
+    var pathname = useLocation().pathname;
+    var id = props.id, name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["id", "name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
+    var theme = useTheme();
+    return (_jsx(Link, __assign({ id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
             color: theme.palette.primary.main,
             textDecoration: "none"
-        }, children: _jsx(SidebarItem, { name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, ...rest }, name) }));
+        } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
 }
 export default SidebarLink;

package/Sidebar/index.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Match } from "@reach/router";
 import List from "@mui/material/List";
@@ -7,12 +18,12 @@ import SidebarItem from "./SidebarItem";
 import SidebarItemsGroup from "./SidebarItemsGroup";
 import SidebarLink from "./SidebarLink";
 function Sidebar(props) {
-    const { items, showIconOnly, primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(List, { children: items.map((i) => {
-                const { id, children, path, icon, name, lock, beta, titleForLock, betaTagColor } = i;
-                return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, { path: path === "/" ? path : path.concat("/*"), children: prop => (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)) }, name));
-            }) }) }));
+    var items = props.items, showIconOnly = props.showIconOnly, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
+                var id = i.id, children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
+                return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
+            }) }) })));
 }
 export default Sidebar;
 export { SidebarItem, SidebarItemsGroup };

package/SocialInput/index.d.ts

@@ -1,6 +1,6 @@
-import { SocialInputProps } from "./types";
+import type { SocialInputProps } from "./types";
 export declare function SocialInputFormat(str: string): string;
 export declare function onValidateSocial(socialString: string): boolean;
 declare function SocialInput(props: SocialInputProps): JSX.Element;
 export default SocialInput;
-export * from "./types";
+export type { SocialInputProps };