@symply.io/basic-components 1.0.0-alpha.9 → 1.0.0-beta.2

package/MenuButtonGroup/MenuItem.js

@@ -18,6 +18,6 @@ import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
     var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
     var theme = useCustomTheme();
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0) }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }), _jsx(ListItemText, { primary: buttonText })] })) })));
 }
 export default ButtonMenuItem;

package/MenuButtonGroup/index.js

@@ -75,7 +75,7 @@ function MenuButtonGroup(props) {
     var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled }, { children: buttonText })), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
@@ -98,6 +98,6 @@ function MenuButtonGroup(props) {
                                 }
                             });
                         }); } }), buttonText));
-                }) }), void 0)] }), void 0));
+                }) }))] })));
 }
 export default MenuButtonGroup;

package/NumberInput/index.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     integerOnly?: boolean;
@@ -11,5 +10,5 @@ export interface NumberInputProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
+declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

package/NumberInput/index.js

@@ -36,6 +36,6 @@ function NumberInput(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ 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, onFocus: onOpenTooltip, onBlur: function () {
                     onCloseTooltip();
                     handleBlur();
-                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0) }), void 0));
+                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
 }
 export default NumberInput;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,12 +1,11 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface ConfirmPasswordProps {
+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 & TextInputProps): JSX.Element;
+declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
 export default ConfirmPassword;

package/PasswordInput/ConfirmPassword.js

@@ -36,6 +36,6 @@ function ConfirmPassword(props) {
     }, [value, password]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.d.ts

@@ -1,14 +1,13 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
         regex: RegExp;
     };
 }
-export interface PasswordProps {
-    strategies: PasswordStrategyProps;
+export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
+    strategies?: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
     primaryColor?: CSSProperties["color"];
@@ -16,5 +15,5 @@ export interface PasswordProps {
     onChange: (value: string) => void;
     onVerify?: (value: string) => boolean;
 }
-declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+declare function Password(props: PasswordProps): JSX.Element;
 export default Password;

package/PasswordInput/Password.js

@@ -67,10 +67,10 @@ function Password(props) {
         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));
-            }) }, void 0));
+            }) }));
     }, [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) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default Password;

package/PhoneNumberInput/index.d.ts

@@ -1,8 +1,7 @@
 import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface PhoneInputProps {
+export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     value: string;
     endAdornment?: InputProps["endAdornment"];
     primaryColor?: CSSProperties["color"];
@@ -10,5 +9,5 @@ export interface PhoneInputProps {
     onChange: (val: string) => void;
 }
 export declare function phoneFormat(str: string): string;
-declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
+declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -55,8 +55,8 @@ function PhoneInput(props) {
         format: phoneFormat
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
-                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" })) }))),
                 endAdornment: endAdornment
-            }, onChange: rifm.onChange }, rest), void 0) }), void 0));
+            }, onChange: rifm.onChange }, rest)) })));
 }
 export default PhoneInput;

package/README.md

@@ -12,8 +12,19 @@
 - [License](#license)
 - [Components](#components)
   - [AlertDialog](#alertdialog)
+  - [Autocomplete](#autocomplete)
+  - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BreadCrumbs](#breadcrumbs)
+  - [CheckBox](#checkbox)
+  - [CheckBoxGroup](#checkboxgroup)
+  - [Copyright](#copyright)
+  - [DateInput](#dateinput)
+    - [FullDateInput](#fulldateinput)
+    - [MonthDayInput](#monthdayinput)
+    - [MonthYearInput](#monthyearinput)
   - [DigitInput](#digitinput)
+  - [FeinInput](#feininput)
   - [FormRadioGroup](#formradiogroup)
   - [FormSelector](#formselector)
   - [HelpCaption](#helpcaption)
@@ -22,7 +33,10 @@
   - [NumberInput](#numberinput)
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
+  - [Sidebar](#sidebar)
+  - [SocialInput](#socialinput)
   - [TabGroup](#tabgroup)
+  - [TablePagination](#tablepagination)
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
@@ -46,7 +60,18 @@ yarn add @symply.io/basic-components
 
 <h2>License</h2>
 
-This project is licensed under the terms of the [MIT license](https://github.com/rinxun/symply-basic-components/blob/main/LICENSE).
+This project is licensed under the terms of the [MIT license](https://github.com/baseline-software/symply-basic-components/blob/main/LICENSE).
+
+
+
+<h2>Common Properties</h2>
+
+All components include these 2 properties to customize the theme
+
+| Name           | Type                   | Default | Required | Description                   |
+| -------------- | ---------------------- | ------- | -------- | ----------------------------- |
+| primaryColor   | CSSProperties["color"] |         | false    | Primary color for the theme   |
+| secondaryColor | CSSProperties["color"] |         | false    | Secondary color for the theme |
 
 
 
@@ -77,6 +102,71 @@ import AlertDialog from '@symply.io/basic-components/AlertDialog';
 
 
 
+<h3>Autocomplete</h3>
+
+A normal text input enhanced by a panel of suggested options.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { Autocomplete } from '@symply.io/basic-components/';
+// or 
+import Autocomplete from '@symply.io/basic-components/Autocomplete'; 
+```
+
+<h5>Option Props (AutocompleteOptionType)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name     | Type                            | Default | Required | Description                                                  |
+| -------- | ------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| multiple | bool                            | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange | func                            |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<AutocompleteOptionType)|AutocompleteOptionType|null => void`<br/>*value:* The value of the `Input` element. |
+| options  | Array\<AutocompleteOptionType\> |         | true     | Array of suggestion options.                                 |
+| value    | AutocompleteOptionType          |         | true     | The value of the `Input` element.                            |
+
+
+
+<h3>AutocompleteWithFilter</h3>
+
+A normal text input enhanced by a panel of suggested options and filter.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { AutocompleteWithFilter } from '@symply.io/basic-components/';
+// or 
+import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter'; 
+```
+
+<h5>Option Props (AutocompleteOptionType)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name                 | Type                            | Default | Required | Description                                                  |
+| -------------------- | ------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| disableCloseOnSelect | bool                            | false   | false    | If `true`, the popup won't close when a value is selected.   |
+| multiple             | bool                            | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange             | func                            |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<AutocompleteOptionType)|AutocompleteOptionType|null => void`<br/>*value:* The value of the `Input` element. |
+| options              | Array\<AutocompleteOptionType\> |         | true     | Array of suggestion options.                                 |
+| value                | AutocompleteOptionType          |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>BasicModal</h3>
 
 Reusable modal component.
@@ -111,6 +201,177 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BreadCrumbs</h3>
+
+A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
+
+<h5>Import</h5>
+
+```typescript
+import { BreadCrumbs } from '@symply.io/basic-components/';
+// or 
+import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs'; 
+```
+
+<h5>Props</h5>
+
+| Name   | Type                                    | Default | Required | Description               |
+| ------ | --------------------------------------- | ------- | -------- | ------------------------- |
+| routes | Array<{ href?: string; label: string }> |         | true     | All routes of "ancestors" |
+
+
+
+<h3>CheckBox</h3>
+
+Checkboxes allow the user to select one or more items from a set.
+
+It is extended from `@mui/material/Checkbox`, so it includes all properties of `@mui/material/Checkbox`.
+
+<h5>Import</h5>
+
+```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'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type                | Default | Required | Description                                                  |
+| -------- | ------------------- | ------- | -------- | ------------------------------------------------------------ |
+| label    | string \| ReactNode |         | true     | The label of the checkbox.                                   |
+| onChange | func                |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
+
+
+
+<h3>CheckBoxGroup</h3>
+
+Checkboxes allow the user to select one or more items from a set for a group.
+
+It is extended from `@mui/material/FormGroup`, so it includes all properties of `@mui/material/FormGroup`.
+
+<h5>Import</h5>
+
+```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'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                   | Default | Required | Description                                                  |
+| ---------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| Checkboxes | Array\<CheckBoxProps\> |         | true     | The array of checkboxes.<br />See the property of [CheckBox](#checkbox) |
+
+
+
+<h3>Copyright</h3>
+
+A common component for rendering the copyright
+
+<h5>Import</h5>
+
+```typescript
+import { Copyright } from '@symply.io/basic-components/';
+// or 
+import Copyright from '@symply.io/basic-components/Copyright'; 
+```
+
+
+
+<h3>DateInput</h3>
+
+<h4>FullDateInput</h4>
+
+Input component for full date (MM/DD/YYYY)
+
+<h5>Import</h5>
+
+```typescript
+import { FullDateInput } from '@symply.io/basic-components/';
+// or 
+import { FullDateInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+<h4>MonthDayInput</h4>
+
+Input component for month day (MM/DD)
+
+<h5>Import</h5>
+
+```typescript
+import { MonthDayInput } from '@symply.io/basic-components/';
+// or 
+import { MonthDayInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+<h4>MonthYearInput</h4>
+
+Input component for month year (MM/YYYY)
+
+<h5>Import</h5>
+
+```typescript
+import { MonthYearInput } from '@symply.io/basic-components/';
+// or 
+import { MonthYearInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+
+
 <h3>DigitInput</h3>
 
 Input component for digits. 
@@ -138,6 +399,30 @@ import DigitInput from '@symply.io/basic-components/DigitInput';
 
 
 
+<h3>FeinInput</h3>
+
+Input component for FEIN. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { FeinInput } from '@symply.io/basic-components/';
+// or 
+import FeinInput from '@symply.io/basic-components/FeinInput'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type   | Default | Required | Description                                                  |
+| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| value    | string |         | true     | The value of the `Input` element.                            |
+| verifyFn | func   |         | false    | Customized verification function.                            |
+
+
+
 <h3>FormRadioGroup</h3>
 
 Radio Group allow the user to select one option from a set.
@@ -165,7 +450,7 @@ import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
 | color     | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' | 'primary' | false    | The main color of the component.                             |
 | disabled  | bool                                                         | false     | false    | If `true`, the component is disabled.                        |
 | formLabel | string                                                       |           | false    | The label of the `Radio` element.                            |
-| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Radio` element. |
+| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string|number|boolean) => void`<br/>*value:* The value of the `Radio` element. |
 | options   | Array\<IRadioOption\>                                        |           | true     | The radio options. See the **Radio Option Props** above.     |
 | value     | string \| number \| bool                                     |           | true     | The value of the `Radio` element.                            |
 | tooltip   | string                                                       |           | false    | A tooltip for the `Radio` element.                           |
@@ -391,6 +676,63 @@ import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
 
 
 
+<h3>Sidebar</h3>
+
+Sidebars for navigation.
+
+<h5>Import</h5>
+
+```typescript
+import { Sidebar } from '@symply.io/basic-components/';
+// or 
+import Sidebar from '@symply.io/basic-components/Sidebar'; 
+```
+
+<h5>Sidebar Item Props</h5>
+
+| Name         | Type                      | Default                               | Required | Description                                                  |
+| ------------ | ------------------------- | ------------------------------------- | -------- | ------------------------------------------------------------ |
+| beta         | boolean                   |                                       | false    | If `true` the beta tag will be rendered.                     |
+| betaTagColor | CSSProperties["color"]    | \#00A2A9                              | false    | The value of the `Input` element.                            |
+| children     | Array\<SidebarItemProps\> |                                       | false    | If not undefined the sub sidebar items would be rendered.    |
+| icon         | Element                   |                                       | true     | The icon adornment.                                          |
+| lock         | boolean                   |                                       | false    | If `true` the lock icon will be rendered, and the sidebar item would be disabled. |
+| name         | string                    |                                       | true     | The sidebar item label.                                      |
+| path         | string                    |                                       | true     | The link path of the sidebar item.                           |
+| titleForLock | string                    | "Feature is unavailable on Free plan" | false    | The tip when the lock is `true`                              |
+
+<h5>Props</h5>
+
+| Name  | Type                      | Default | Required | Description    |
+| ----- | ------------------------- | ------- | -------- | -------------- |
+| items | Array\<SidebarItemProps\> |         | true     | Sidebar items. |
+
+
+
+<h3>SocialInput</h3>
+
+Input component for Social Security Number (SSN). 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { SocialInput } from '@symply.io/basic-components/';
+// or 
+import SocialInput from '@symply.io/basic-components/SocialInput'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type   | Default | Required | Description                                                  |
+| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| value    | string |         | true     | The value of the `Input` element.                            |
+| verifyFn | func   |         | false    | Customized verification function.                            |
+
+
+
 <h3>TabGroup</h3>
 
 Tabs group. 
@@ -415,6 +757,32 @@ import TabGroup from '@symply.io/basic-components/TabGroup';
 
 
 
+<h3>TablePagination</h3>
+
+Reusable pagination component for the material table
+
+<h5>Import</h5>
+
+```typescript
+import { TablePagination } from '@symply.io/basic-components/';
+// or 
+import TablePagination from '@symply.io/basic-components/TablePagination'; 
+```
+
+<h5>Props</h5>
+
+| Name                | Type            | Default | Required | Description                                                  |
+| ------------------- | --------------- | ------- | -------- | ------------------------------------------------------------ |
+| colSpan             | number          |         | true     | The number of columns a cell should span.                    |
+| count               | number          |         | true     | The total count of all data.                                 |
+| onPageChange        | func            |         | true     | Callback fired when the `page` value is changed.<br />**Signature:**<br/>`function(event: MouseEvent<HTMLButtonElement> ) => void,value: number`<br/>*value:* The value of the `page` . |
+| onRowsPerPageChange | func            |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(event: ChangeEvent<HTMLInputElement ` |
+| page                | number          |         | true     | The current page index.                                      |
+| rowsPerPage         | number          |         | true     | How many rows per page.                                      |
+| rowsPerPageOptions  | Array\<number\> |         | true     | The options for setting how many rows per page.              |
+
+
+
 <h3>TextInput</h3>
 
 Regular Input component. 

package/Sidebar/SidebarItem.d.ts

@@ -0,0 +1,3 @@
+import { SidebarItemProps } from "./types";
+declare function SidebarItem(props: SidebarItemProps): JSX.Element;
+export default SidebarItem;

package/Sidebar/SidebarItem.js

@@ -0,0 +1,62 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import colorAlpha from "color-alpha";
+import Chip from "@mui/material/Chip";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import LockIcon from "@mui/icons-material/LockRounded";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function SidebarItem(props) {
+    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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onClick = props.onClick;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
+                paddingLeft: isSub ? theme.spacing(4) : undefined,
+                display: "flex",
+                width: "100%",
+                "&:hover": {
+                    backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+                },
+                backgroundColor: active
+                    ? colorAlpha(theme.palette.primary.main, 0.2)
+                    : undefined
+            } }, { 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 })), _jsx(ListItemText, { primaryTypographyProps: {
+                        color: active ? theme.palette.primary.main : "textPrimary",
+                        sx: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            borderRadius: active ? "5px" : undefined,
+                            opacity: active ? "1" : undefined,
+                            fontWeight: active ? 600 : undefined
+                        }
+                    }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
+                        fontSize: "1rem"
+                    }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
+                        borderRadius: theme.spacing(0.5),
+                        backgroundColor: betaTagColor,
+                        color: "white",
+                        height: theme.spacing(2.5),
+                        fontSize: theme.spacing(1.25),
+                        padding: theme.spacing(0, 0.75)
+                    } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
+}
+export default SidebarItem;