@zesty-io/material 0.2.3 → 0.2.5

package/cjs/ConfirmDialog/ConfirmDialog.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomChildren = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const _1 = require(".");
+exports.default = {
+    title: 'ConfirmDialog',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), (0, jsx_runtime_1.jsx)(_1.default, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    title: 'Confirm modal title',
+    content: 'Confirm modal content',
+};
+exports.CustomChildren = Template.bind({});
+exports.CustomChildren.args = {
+    title: 'Confirm modal title',
+    content: 'Confirm modal content',
+    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "error", variant: "contained", children: "Custom 1" }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "success", variant: "contained", children: "Custom 2" })] })
+};

package/cjs/ConfirmDialog/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = require("@mui/material/Dialog");
+const DialogActions_1 = require("@mui/material/DialogActions");
+const DialogContent_1 = require("@mui/material/DialogContent");
+const DialogContentText_1 = require("@mui/material/DialogContentText");
+const DialogTitle_1 = require("@mui/material/DialogTitle");
+const material_1 = require("@mui/material");
+const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: title }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: (0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: content }) }), children ? (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: children }) : ((0, jsx_runtime_1.jsxs)(DialogActions_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => callback(false), children: "No" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
+};
+exports.default = ConfirmDialog;

package/cjs/CopyButton/CopyButton.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+exports.default = {
+    title: 'CopyButton',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    value: 'Copy Me!'
+};

package/cjs/CopyButton/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("@mui/material/Button");
+const ContentCopy_1 = require("@mui/icons-material/ContentCopy");
+const Check_1 = require("@mui/icons-material/Check");
+const CopyButton = ({ value, sx, ...props }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const copyValue = (0, react_1.useCallback)(() => {
+        navigator?.clipboard.writeText(value);
+        setCopied(true);
+    }, [value]);
+    (0, react_1.useEffect)(() => {
+        const iconTimer = setTimeout(() => {
+            setCopied(false);
+        }, 500);
+        return () => {
+            clearTimeout(iconTimer);
+        };
+    }, [copied]);
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: 'outlined', onClick: copyValue, size: "small", title: props.children ? `Copy ${props.children}` : `Copy ${value}`, sx: {
+            textTransform: 'unset',
+            // Spread sx prop at the end to allow sx prop overrides
+            ...sx,
+        }, startIcon: copied ? ((0, jsx_runtime_1.jsx)(Check_1.default, { color: 'success', fontSize: 'small' })) : ((0, jsx_runtime_1.jsx)(ContentCopy_1.default, { fontSize: 'small' })), ...props, children: props.children ? props.children : value }));
+};
+exports.default = CopyButton;

package/cjs/FieldTypeColor/FieldTypeColor.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeColor',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Color label',
+    helperText: 'Color helper text',
+};

package/cjs/FieldTypeColor/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const Brush_1 = require("@mui/icons-material/Brush");
+const FieldTypeColor = ({ InputProps, label, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', type: 'color', InputProps: {
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
+                                // References color input via event in order to open color picker
+                                const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild;
+                                input?.click();
+                            }, children: (0, jsx_runtime_1.jsx)(Brush_1.default, { fontSize: 'small' }) }) })),
+                    // Spread props at the end to allow Input prop overrides
+                    ...InputProps,
+                }, ...props })] }));
+};
+exports.default = FieldTypeColor;

package/cjs/FieldTypeDate/FieldTypeDate.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+exports.default = {
+    title: 'FieldTypeDate',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: (value) => setValue(value) }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    label: 'Date label',
+    helperText: 'Date helper text',
+};

package/cjs/FieldTypeDate/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const material_1 = require("@mui/material");
+;
+const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
+};
+exports.default = FieldTypeDate;

package/cjs/FieldTypeDateTime/FieldTypeDateTime.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+exports.default = {
+    title: 'FieldTypeDateTime',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: (value) => setValue(value) }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    label: 'Date label',
+    helperText: 'Date helper text',
+};

package/cjs/FieldTypeDateTime/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const material_1 = require("@mui/material");
+;
+const FieldTypeDateTime = ({ label, helperText, error, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DesktopDateTimePicker, { "data-testid": "zds-date-time-picker", renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
+};
+exports.default = FieldTypeDateTime;

package/cjs/FieldTypeNumber/FieldTypeNumber.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeNumber',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('0');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Number label',
+    helperText: 'Number helper text',
+};

package/cjs/FieldTypeNumber/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const TextField_1 = require("@mui/material/TextField");
+const FieldTypeText = ({ label, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', type: 'number', ...props })] }));
+};
+exports.default = FieldTypeText;

package/cjs/FieldTypeOneToMany/FieldTypeOneToMany.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+exports.default = {
+    title: 'FieldTypeOneToMany',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)([]);
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: (0, jsx_runtime_1.jsx)("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, values) => {
+        setValue(values);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'OneToMany label',
+    helperText: 'OneToMany helperText',
+};

package/cjs/FieldTypeOneToMany/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const Autocomplete_1 = require("@mui/material/Autocomplete");
+const virtualization_1 = require("../utils/virtualization");
+const FieldTypeOneToMany = ({ label, helperText, placeholder, error, onOpen, options, required, ...props }) => {
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleOpen = () => {
+        if (!loaded && onOpen) {
+            onOpen().then(() => {
+                setLoading(false);
+            });
+            setLoading(true);
+            setLoaded(true);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { onOpen: handleOpen, loading: loading, fullWidth: true, multiple: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: virtualization_1.ListboxComponent, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
+};
+exports.default = FieldTypeOneToMany;
+const StyledPopper = (0, material_1.styled)(material_1.Popper)({
+    [`& .${Autocomplete_1.autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/cjs/FieldTypeOneToOne/FieldTypeOneToOne.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeOneToOne',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: (0, jsx_runtime_1.jsx)("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    label: 'OneToOne label',
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/cjs/FieldTypeOneToOne/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const Autocomplete_1 = require("@mui/material/Autocomplete");
+const virtualization_1 = require("../utils/virtualization");
+const FieldTypeOneToOne = ({ label, helperText, placeholder, error, onOpen, options, required, startAdornment, endAdornment, ...props }) => {
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleOpen = () => {
+        if (!loaded && onOpen) {
+            onOpen().then(() => {
+                setLoading(false);
+            });
+            setLoading(true);
+            setLoaded(true);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { onOpen: handleOpen, loading: loading, fullWidth: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: virtualization_1.ListboxComponent, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                        ...params.InputProps,
+                        startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: 'end', children: startAdornment }),
+                        endAdornment: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [params.InputProps.endAdornment, (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+                    } })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
+};
+exports.default = FieldTypeOneToOne;
+const StyledPopper = (0, material_1.styled)(material_1.Popper)({
+    [`& .${Autocomplete_1.autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/cjs/FieldTypeSort/FieldTypeSort.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeSort',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('3');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Sort label',
+    helperText: 'Sort helper text',
+    error: false,
+};

package/{es → cjs}/FieldTypeSort/index.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MuiTextField from '@mui/material/TextField';
-import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const Add_1 = require("@mui/icons-material/Add");
+const Remove_1 = require("@mui/icons-material/Remove");
 const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
-                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
+                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
                                 e.stopPropagation();
                                 // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
@@ -15,8 +17,8 @@ const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props
                                 // Mocks an event change
                                 const event = { target: { value: newValue } };
                                 onChange && onChange(event);
-                            }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
-                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                            }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, { fontSize: 'small' }) }) })),
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
                                 e.stopPropagation();
                                 // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
@@ -26,9 +28,9 @@ const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props
                                 // Mocks an event change
                                 const event = { target: { value: newValue } };
                                 onChange && onChange(event);
-                            }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
+                            }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: 'small' }) }) })),
                     // Spread props at the end to allow Input prop overrides
                     ...InputProps,
                 }, ...props })] }));
 };
-export default FieldTypeSort;
+exports.default = FieldTypeSort;

package/cjs/FieldTypeText/FieldTypeText.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeText',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }) }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Text label',
+    helperText: 'Text helper text',
+};
+exports.TextArea = Template.bind({});
+exports.TextArea.args = {
+    multiline: true,
+    rows: 4,
+    placeholder: 'Placeholder Text...',
+    label: 'Text Label',
+    helperText: 'Text helper text',
+};

package/cjs/FieldTypeText/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsxs)(material_1.FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { order: 1 }, children: label }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props })] }));
+};
+exports.default = FieldTypeText;

package/cjs/FieldTypeUrl/FieldTypeUrl.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeUrl',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Some label',
+    fullWidth: true,
+};

package/cjs/FieldTypeUrl/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
+    // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+    const [inputRef, setInputRef] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsxs)(material_1.FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { order: 1 }, children: label }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
+                    ref: (inputRef) => setInputRef(inputRef),
+                    // Spread props at the end to allow inputProps prop overrides
+                    ...inputProps,
+                }, error: (value && !inputRef?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
+};
+exports.default = FieldTypeUrl;

package/{es → cjs}/LegacyTheme/index.js

@@ -1,11 +1,13 @@
-import palette from './palette';
-import typography from './typography';
-import { createTheme } from '@mui/material/styles';
-let theme = createTheme({
-    palette,
-    typography,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_1 = require("./palette");
+const typography_1 = require("./typography");
+const styles_1 = require("@mui/material/styles");
+let theme = (0, styles_1.createTheme)({
+    palette: palette_1.default,
+    typography: typography_1.default,
 });
-theme = createTheme(theme, {
+theme = (0, styles_1.createTheme)(theme, {
     components: {
         MuiAccordionSummary: {
             styleOverrides: {
@@ -78,4 +80,4 @@ theme = createTheme(theme, {
         },
     },
 });
-export default theme;
+exports.default = theme;