@evoke-platform/ui-components 1.0.0-dev.1.10.6

package/dist/published/stories/FormField.stories.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { FormField } from '../index';
+export default {
+    title: 'Input/FormField',
+    component: FormField,
+};
+const FormFieldTemplate = (args) => React.createElement(FormField, Object.assign({}, args));
+export const InputField = FormFieldTemplate.bind({});
+InputField.args = {
+    property: {
+        id: 'fullName',
+        name: 'Full Name',
+        type: 'text',
+        // enum?: string[],
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: 'Hello World',
+    error: false,
+    required: true,
+    readOnly: false,
+    selectOptions: [],
+    locale: 'string',
+    size: 'small',
+    placeholder: 'string',
+};
+export const ChoicesSelectField = FormFieldTemplate.bind({});
+ChoicesSelectField.args = {
+    property: {
+        id: 'license type',
+        name: 'License Type',
+        type: 'choices',
+        enum: ['Commercial', 'Non-Commercial', 'Government'],
+        required: true,
+    },
+    onChange: (id, value) => console.log('id=', id, 'Value=', value),
+    defaultValue: 'Non-Commercial',
+    error: false,
+    required: true,
+    readOnly: false,
+    selectOptions: ['Commercial', 'Non-Commercial', 'Government'],
+    locale: 'string',
+    size: 'small',
+    placeholder: 'string',
+};
+export const DatePickerField = FormFieldTemplate.bind({});
+DatePickerField.args = {
+    property: {
+        id: 'date',
+        name: 'Date',
+        type: 'date',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: '2023-03-01',
+    error: false,
+    required: true,
+    readOnly: false,
+    size: 'small',
+};
+export const BooleanField = FormFieldTemplate.bind({});
+BooleanField.args = {
+    property: {
+        id: 'expired',
+        name: 'Expired',
+        type: 'boolean',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: true,
+    error: false,
+    required: true,
+    readOnly: false,
+    size: 'small',
+};
+export const FileUploadField = FormFieldTemplate.bind({});
+FileUploadField.args = {
+    property: {
+        id: 'file',
+        name: 'File',
+        type: 'fileUpload',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    error: false,
+    required: true,
+    readOnly: false,
+    size: 'small',
+};
+export const ArraySelectField = FormFieldTemplate.bind({});
+ArraySelectField.args = {
+    property: {
+        id: 'Industries',
+        name: 'Industries',
+        enum: [
+            'Agriculture',
+            'Automotive',
+            'Banking',
+            'Construction',
+            'Education',
+            'Energy',
+            'Entertainment',
+            'Finance',
+            'Food',
+        ],
+        type: 'array',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: ['Agriculture', 'Automotive'],
+    error: false,
+    required: true,
+    readOnly: false,
+    selectOptions: [
+        'Agriculture',
+        'Automotive',
+        'Banking',
+        'Construction',
+        'Education',
+        'Energy',
+        'Entertainment',
+        'Finance',
+        'Food',
+    ],
+    locale: 'string',
+    size: 'small',
+    placeholder: 'string',
+};

package/dist/published/stories/FormGroup.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").FormGroupProps) => JSX.Element>;
+export default _default;
+export declare const FormGroup: ComponentStory<(props: import("@mui/material").FormGroupProps) => JSX.Element>;

package/dist/published/stories/FormGroup.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FormGroup as CustomFormGroup, FormControlLabel, Switch } from '../index';
+export default {
+    title: 'Form Elements/FormGroup',
+    component: CustomFormGroup,
+};
+const FormGroupTemplate = (args) => (React.createElement(CustomFormGroup, Object.assign({}, args),
+    React.createElement(FormControlLabel, { control: React.createElement(Switch, { defaultChecked: true }), label: "Label" }),
+    React.createElement(FormControlLabel, { disabled: true, control: React.createElement(Switch, null), label: "Disabled" })));
+export const FormGroup = FormGroupTemplate.bind({});

package/dist/published/stories/FormHelperText.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material/FormHelperText/FormHelperText").FormHelperTextProps<"p", {}>) => JSX.Element>;
+export default _default;
+export declare const FormHelperText: ComponentStory<(props: import("@mui/material/FormHelperText/FormHelperText").FormHelperTextProps<"p", {}>) => JSX.Element>;

package/dist/published/stories/FormHelperText.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FormHelperText as CustomFormHelperText, FormControl, TextField } from '../index';
+export default {
+    title: 'Form Elements/FormHelperText',
+    component: CustomFormHelperText,
+};
+const FormHelperTextTemplate = (args) => (React.createElement(FormControl, null,
+    React.createElement(TextField, null),
+    React.createElement(CustomFormHelperText, Object.assign({ id: "my-helper-text" }, args), "Form Helper text.")));
+export const FormHelperText = FormHelperTextTemplate.bind({});

package/dist/published/stories/FormLabel.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").FormLabelProps<"label", {}>) => JSX.Element>;
+export default _default;
+export declare const FormLabel: ComponentStory<(props: import("@mui/material").FormLabelProps<"label", {}>) => JSX.Element>;

package/dist/published/stories/FormLabel.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormControl, FormControlLabel, FormLabel as CustomFormLabel } from '../index';
+import { Radio, RadioGroup } from '@mui/material';
+export default {
+    title: 'Form Elements/FormLabel',
+    component: CustomFormLabel,
+};
+const FormLabelTemplate = (args) => (React.createElement(FormControl, null,
+    React.createElement(CustomFormLabel, Object.assign({ id: "demo-row-radio-buttons-group-label" }, args), "Gender"),
+    React.createElement(RadioGroup, { row: true, "aria-labelledby": "demo-row-radio-buttons-group-label", name: "row-radio-buttons-group" },
+        React.createElement(FormControlLabel, { value: "female", control: React.createElement(Radio, null), label: "Female" }),
+        React.createElement(FormControlLabel, { value: "male", control: React.createElement(Radio, null), label: "Male" }))));
+export const FormLabel = FormLabelTemplate.bind({});

package/dist/published/stories/Grid.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").GridProps<"div", {}>) => JSX.Element>;
+export default _default;
+export declare const Grid: ComponentStory<(props: import("@mui/material").GridProps<"div", {}>) => JSX.Element>;

package/dist/published/stories/Grid.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Grid as CustomGrid } from '../index';
+export default {
+    title: 'Layout/Grid',
+    component: CustomGrid,
+};
+const GridTemplate = (args) => React.createElement(CustomGrid, Object.assign({}, args));
+export const Grid = GridTemplate.bind({});

package/dist/published/stories/IconButton.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").IconButtonProps<"button", {}>) => JSX.Element>;
+export default _default;
+export declare const IconButton: ComponentStory<(props: import("@mui/material").IconButtonProps<"button", {}>) => JSX.Element>;

package/dist/published/stories/IconButton.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconButton as CustomIconButton, Stack } from '../index';
+import { Delete, Alarm, ShoppingCart } from '@mui/icons-material';
+export default {
+    title: 'Data Display/IconButton',
+    component: CustomIconButton,
+};
+const IconButtonTemplate = (args) => (React.createElement(Stack, { direction: "row", spacing: 1 },
+    React.createElement(CustomIconButton, Object.assign({ "aria-label": "delete" }, args),
+        React.createElement(Delete, null)),
+    React.createElement(CustomIconButton, Object.assign({ "aria-label": "delete", disabled: true, color: "primary" }, args),
+        React.createElement(Delete, null)),
+    React.createElement(CustomIconButton, Object.assign({ color: "secondary", "aria-label": "add an alarm" }, args),
+        React.createElement(Alarm, null)),
+    React.createElement(CustomIconButton, Object.assign({ color: "primary", "aria-label": "add to shopping cart" }, args),
+        React.createElement(ShoppingCart, null))));
+export const IconButton = IconButtonTemplate.bind({});

package/dist/published/stories/LinearProgress.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").LinearProgressProps) => JSX.Element>;
+export default _default;
+export declare const LinearProgress: ComponentStory<(props: import("@mui/material").LinearProgressProps) => JSX.Element>;

package/dist/published/stories/LinearProgress.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LinearProgress as CustomLinearProgress } from '../index';
+export default {
+    title: 'Data Display/LinearProgress',
+    component: CustomLinearProgress,
+};
+const LinearProgressTemplate = (args) => (React.createElement(CustomLinearProgress, Object.assign({}, args)));
+export const LinearProgress = LinearProgressTemplate.bind({});

package/dist/published/stories/Link.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").LinkProps<"a", {}>) => JSX.Element>;
+export default _default;
+export declare const Link: ComponentStory<(props: import("@mui/material").LinkProps<"a", {}>) => JSX.Element>;

package/dist/published/stories/Link.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link as CustomLink } from '../index';
+export default {
+    title: 'Navigation/Link',
+    component: CustomLink,
+    argTypes: {
+        props: {
+            control: 'object',
+            defaultValue: {
+                children: 'Link',
+            },
+        },
+    },
+};
+const LinkTemplate = (args) => React.createElement(CustomLink, Object.assign({}, args), "Link");
+export const Link = LinkTemplate.bind({});

package/dist/published/stories/List.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").ListProps<"ul", {}>) => JSX.Element>;
+export default _default;
+export declare const List: ComponentStory<(props: import("@mui/material").ListProps<"ul", {}>) => JSX.Element>;

package/dist/published/stories/List.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Divider, List as CustomList, ListItem, ListItemButton, ListItemText } from '../index';
+import { ListItemIcon } from '@mui/material';
+import { Mail, Backpack } from '@mui/icons-material';
+export default {
+    title: 'Data Display/List',
+    component: CustomList,
+};
+const ListTemplate = (args) => (React.createElement(Box, { sx: { width: '100%', maxWidth: 360, bgcolor: 'background.paper' } },
+    React.createElement("nav", { "aria-label": "main mailbox folders" },
+        React.createElement(CustomList, Object.assign({}, args),
+            React.createElement(ListItem, { disablePadding: true },
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Mail, null)),
+                    React.createElement(ListItemText, { primary: "Inbox" }))),
+            React.createElement(ListItem, { disablePadding: true },
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Backpack, null)),
+                    React.createElement(ListItemText, { primary: "Drafts" }))))),
+    React.createElement(Divider, null),
+    React.createElement("nav", { "aria-label": "secondary mailbox folders" },
+        React.createElement(CustomList, Object.assign({}, Object.assign({}, args.props)),
+            React.createElement(ListItem, { disablePadding: true },
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemText, { primary: "Trash" }))),
+            React.createElement(ListItem, { disablePadding: true },
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemText, { primary: "Spam" })))))));
+export const List = ListTemplate.bind({});

package/dist/published/stories/Menu.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").MenuProps) => JSX.Element>;
+export default _default;
+export declare const Menu: ComponentStory<(props: import("@mui/material").MenuProps) => JSX.Element>;

package/dist/published/stories/Menu.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Menu as CustomMenu, Button, MenuItem } from '../index';
+export default {
+    title: 'Navigation/Menu',
+    component: CustomMenu,
+};
+const MenuTemplate = (args) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement("div", null,
+        React.createElement(Button, { id: "basic-button", "aria-controls": open ? 'basic-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick }, "Dashboard"),
+        React.createElement(CustomMenu, Object.assign({ id: "basic-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+                'aria-labelledby': 'basic-button',
+            } }, args),
+            React.createElement(MenuItem, { onClick: handleClose }, "Profile"),
+            React.createElement(MenuItem, { onClick: handleClose }, "My account"),
+            React.createElement(MenuItem, { onClick: handleClose }, "Logout"))));
+};
+export const Menu = MenuTemplate.bind({});

package/dist/published/stories/MenuBar.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MenuBar as CustomMenuBar } from '../index';
+declare const _default: ComponentMeta<typeof CustomMenuBar>;
+export default _default;
+export declare const MenuBar: ComponentStory<typeof CustomMenuBar>;

package/dist/published/stories/MenuBar.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { MenuBar as CustomMenuBar } from '../index';
+import { Link } from '@mui/material';
+const logo = require('../SA_logo.jpeg');
+export default {
+    title: 'Data Display/MenuBar',
+    component: CustomMenuBar,
+    argTypes: {
+        navItems: {
+            control: 'object',
+            defaultValue: React.createElement(Link, null, "Object"),
+        },
+        showNotifications: {
+            defaultValue: true,
+            type: 'boolean',
+        },
+        logo: {
+            defaultValue: logo,
+        },
+        envName: { defaultValue: 'System Automation' },
+    },
+};
+const Template = (props) => React.createElement(CustomMenuBar, Object.assign({}, props));
+export const MenuBar = Template.bind({});

package/dist/published/stories/MultiSelect.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MultiSelect as CustomMultiSelect } from '../index';
+declare const _default: ComponentMeta<typeof CustomMultiSelect>;
+export default _default;
+export declare const MultiSelect: ComponentStory<typeof CustomMultiSelect>;

package/dist/published/stories/MultiSelect.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Grid, MultiSelect as CustomMultiSelect, Typography } from '../index';
+export default {
+    title: 'Input/MultiSelect',
+    component: CustomMultiSelect,
+    args: {
+        options: [
+            { id: 'id', label: 'ID', value: false },
+            { id: 'name', label: 'Last Name', value: false },
+            { id: 'type', label: 'Type', value: false },
+            { id: 'status', label: 'Status', value: false },
+            { id: 'date', label: 'Date', value: false },
+        ],
+    },
+};
+const MultiSelectTemplate = (args) => (React.createElement(Grid, { container: true, gap: 10 },
+    React.createElement(Grid, { item: true, sm: 4 },
+        React.createElement(Typography, { variant: "h4" }, "More than 4 options:"),
+        React.createElement(CustomMultiSelect, Object.assign({}, args, { isSortable: true }))),
+    React.createElement(Grid, { item: true, sm: 4 },
+        React.createElement(Typography, { variant: "h4" }, "Less than 4 options:"),
+        React.createElement(CustomMultiSelect, Object.assign({}, args, { options: [
+                { id: 'name', label: 'Name', value: false },
+                { id: 'type', label: 'Type', value: false },
+            ] })))));
+export const MultiSelect = MultiSelectTemplate.bind({});

package/dist/published/stories/Palette.stories.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: React.ReactNode;
+    component?: React.ElementType<any> | undefined;
+    ref?: React.Ref<unknown> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {
+    sx?: object | undefined;
+    component?: React.ElementType<any> | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Palette: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: React.ReactNode;
+    component?: React.ElementType<any> | undefined;
+    ref?: React.Ref<unknown> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {
+    sx?: object | undefined;
+    component?: React.ElementType<any> | undefined;
+}) => JSX.Element>;

package/dist/published/stories/Palette.stories.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Box, Grid, Container, Typography } from '../index';
+export default {
+    title: 'Theme/Palette',
+    component: Box,
+};
+const classes = {
+    contentCenter: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    mainColorSection: {
+        height: '120px',
+        backgroundColor: 'primary.main',
+        borderRadius: '8px',
+        flexDirection: 'column',
+    },
+    textColor: {
+        color: '#FFFF',
+    },
+    otherColorSection: {
+        height: '56px',
+        width: '104px',
+        borderRadius: '8px',
+        flexDirection: 'column',
+    },
+};
+const colors = [
+    { colorName: 'primary', main: '#0075A7', light: '#99C8DC', dark: '#014E7B', darker: '#013860' },
+    { colorName: 'secondary', main: '##9c27b0', light: '#ba68c8', dark: '#7b1fa2', darker: '#7b1fa9' },
+    { colorName: 'info', main: '#1890FF', light: '#74CAFF', dark: '#0C53B7', darker: '#04297A' },
+    { colorName: 'warning', main: '#FFC107', light: '#FFE16A', dark: '#B78103', darker: '#7A4F01' },
+    { colorName: 'success', main: '#54D62C', light: '#AAF27F', dark: '#229A16', darker: '#08660D' },
+    { colorName: 'error', main: '#A12723', light: '#FF695C', dark: '#B72136', darker: '#7A0C2E' },
+];
+const PaletteTemplate = (args) => {
+    return (React.createElement(Grid, { container: true, spacing: 2 }, colors.map((item) => (React.createElement(Grid, { item: true, xs: 12, sm: 12, md: 6 },
+        React.createElement(Grid, { container: true, sx: { backgroundColor: 'rgba(145, 158, 171, 0.08)', padding: 2 } },
+            React.createElement(Grid, { item: true, xs: 6, sm: 6, sx: { px: '5px' } },
+                React.createElement(Container, { sx: [
+                        classes.contentCenter,
+                        classes.mainColorSection,
+                        {
+                            backgroundColor: `${item === null || item === void 0 ? void 0 : item.colorName}.main`,
+                        },
+                    ] },
+                    React.createElement(Typography, { color: classes.textColor }, item === null || item === void 0 ? void 0 : item.colorName.toUpperCase()),
+                    React.createElement(Typography, { variant: "caption", color: classes.textColor }, item === null || item === void 0 ? void 0 : item.main))),
+            React.createElement(Grid, { item: true, xs: 6, sm: 6 },
+                React.createElement(Grid, { container: true, gap: 1 },
+                    React.createElement(Box, { sx: [
+                            classes.contentCenter,
+                            classes.otherColorSection,
+                            {
+                                backgroundColor: `${item === null || item === void 0 ? void 0 : item.colorName}.main`,
+                            },
+                        ] },
+                        React.createElement(Typography, { variant: "body2", color: classes.textColor }, "Main"),
+                        React.createElement(Typography, { variant: "caption", color: classes.textColor }, item === null || item === void 0 ? void 0 : item.main)),
+                    React.createElement(Box, { sx: [
+                            classes.contentCenter,
+                            classes.otherColorSection,
+                            {
+                                backgroundColor: `${item === null || item === void 0 ? void 0 : item.colorName}.light`,
+                            },
+                        ] },
+                        React.createElement(Typography, { variant: "body2", color: classes.textColor }, "Light"),
+                        React.createElement(Typography, { variant: "caption", color: classes.textColor }, item === null || item === void 0 ? void 0 : item.light)),
+                    React.createElement(Box, { sx: [
+                            classes.contentCenter,
+                            classes.otherColorSection,
+                            {
+                                backgroundColor: `${item === null || item === void 0 ? void 0 : item.colorName}.dark`,
+                            },
+                        ] },
+                        React.createElement(Typography, { variant: "body2", color: classes.textColor }, "Dark"),
+                        React.createElement(Typography, { variant: "caption", color: classes.textColor }, item === null || item === void 0 ? void 0 : item.dark)),
+                    React.createElement(Box, { sx: [
+                            classes.contentCenter,
+                            classes.otherColorSection,
+                            {
+                                backgroundColor: item === null || item === void 0 ? void 0 : item.darker,
+                            },
+                        ] },
+                        React.createElement(Typography, { variant: "body2", color: classes.textColor }, "Darker"),
+                        React.createElement(Typography, { variant: "caption", color: classes.textColor }, item === null || item === void 0 ? void 0 : item.darker))))))))));
+};
+export const Palette = PaletteTemplate.bind({});

package/dist/published/stories/Paper.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").PaperProps<"div", {}>) => JSX.Element>;
+export default _default;
+export declare const Paper: ComponentStory<(props: import("@mui/material").PaperProps<"div", {}>) => JSX.Element>;

package/dist/published/stories/Paper.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Paper as CustomPaper, Box } from '../index';
+export default {
+    title: 'Data Display/Paper',
+    component: CustomPaper,
+};
+const PaperTemplate = (args) => (React.createElement(Box, { sx: {
+        '& > :not(style)': {
+            m: 1,
+            width: 128,
+            height: 128,
+        },
+    } },
+    React.createElement(CustomPaper, Object.assign({ elevation: 3 }, args))));
+export const Paper = PaperTemplate.bind({});

package/dist/published/stories/RadioGroup.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").RadioGroupProps) => JSX.Element>;
+export default _default;
+export declare const RadioGroup: ComponentStory<(props: import("@mui/material").RadioGroupProps) => JSX.Element>;

package/dist/published/stories/RadioGroup.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup as CustomRadioGroup } from '../index';
+export default {
+    title: 'Input/RadioGroup',
+    component: CustomRadioGroup,
+};
+const RadioGroupTemplate = (args) => (React.createElement(FormControl, null,
+    React.createElement(FormLabel, { id: "demo-radio-buttons-group-label" }, "Gender"),
+    React.createElement(CustomRadioGroup, Object.assign({ "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "female", name: "radio-buttons-group" }, args),
+        React.createElement(FormControlLabel, { value: "female", control: React.createElement(Radio, null), label: "Female" }),
+        React.createElement(FormControlLabel, { value: "male", control: React.createElement(Radio, null), label: "Male" }),
+        React.createElement(FormControlLabel, { value: "other", control: React.createElement(Radio, null), label: "Other" }))));
+export const RadioGroup = RadioGroupTemplate.bind({});

package/dist/published/stories/RepeatableField.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RepeatableField as CustomRepeatableField } from '../index';
+declare const _default: ComponentMeta<typeof CustomRepeatableField>;
+export default _default;
+export declare const RepeatableField: ComponentStory<typeof CustomRepeatableField>;

package/dist/published/stories/RepeatableField.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { RepeatableField as CustomRepeatableField, TextField, Checkbox, Autocomplete } from '../index';
+export default {
+    title: 'Input/RepeatableField',
+    component: CustomRepeatableField,
+};
+const Template = (props) => {
+    const dynamicHeaders = {
+        field: 'movies',
+        displayTitle: 'Condition',
+        mapping: '$.value',
+    };
+    const top100Films = [
+        { label: 'The Shawshank Redemption', value: 'The Shawshank Redemption' },
+        { label: 'The Godfather', value: 'The Godfather' },
+        { label: 'The Godfather: Part II', value: 'The Godfather: Part II' },
+        { label: 'The Dark Knight', value: 'The Dark Knight' },
+        { label: '12 Angry Men', value: '12 Angry Men' },
+        { label: "Schindler's List", value: 'schindler List' },
+        { label: 'Pulp Fiction', value: 'Pulp Fiction' },
+    ];
+    const defaultValues = {
+        textField: 'Some defaults',
+        checkbox: false
+    };
+    return (React.createElement(CustomRepeatableField, Object.assign({}, props, { dynamicHeaders: dynamicHeaders }), (handler, index, selectedField) => {
+        var _a, _b, _c;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(TextField, { variant: "outlined", label: "Button Label", labelPlacement: "outside-top", placeholder: "Label", name: "textField", value: ((_a = selectedField[index]) === null || _a === void 0 ? void 0 : _a.textField) || defaultValues.textField, onChange: (event) => handler(event, index) }),
+            React.createElement(Checkbox, { name: "checkbox", onChange: (event) => handler(event, index), checked: ((_b = selectedField[index]) === null || _b === void 0 ? void 0 : _b.checkbox) || false, sx: { width: 0 } }),
+            React.createElement(Autocomplete, { label: "Movies", disablePortal: true, id: "combo-box-demo", options: top100Films, value: (_c = selectedField[index]) === null || _c === void 0 ? void 0 : _c.movies, onChange: (event, value) => {
+                    handler(Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: value, name: 'movies' }) }), index);
+                }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { label: "Movie" })) })));
+    }));
+};
+export const RepeatableField = Template.bind({});

package/dist/published/stories/Skeleton.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").SkeletonProps<"span", {}>) => JSX.Element>;
+export default _default;
+export declare const Skeleton: ComponentStory<(props: import("@mui/material").SkeletonProps<"span", {}>) => JSX.Element>;