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

package/dist/published/stories/Skeleton.stories.js

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

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

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

package/dist/published/stories/Snackbar.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Snackbar as CustomSnackbar, Button } from '../index';
+export default {
+    title: 'Data Display/Snackbar',
+    component: CustomSnackbar,
+};
+const SnackbarTemplate = (args) => {
+    const [open, setOpen] = React.useState(false);
+    const handleClick = () => {
+        setOpen(true);
+    };
+    const handleClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setOpen(false);
+    };
+    return (React.createElement("div", null,
+        React.createElement(Button, { onClick: handleClick }, "Open simple snackbar"),
+        React.createElement(CustomSnackbar, Object.assign({ open: open, autoHideDuration: 6000, handleClose: handleClose, message: "Note archived. You are good to go.", error: false }, args))));
+};
+export const Snackbar = SnackbarTemplate.bind({});

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

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

package/dist/published/stories/Stack.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Stack as CustomStack } from '../index';
+export default {
+    title: 'Layout/Stack',
+    component: CustomStack,
+    argTypes: {
+        children: {
+            description: 'The content of the component.',
+        },
+        component: {
+            type: 'string',
+            description: 'The component used for the root node. Either a string to use a HTML element or a component',
+        },
+        direction: {
+            control: 'select',
+            options: ['column-reverse', 'column', 'row-reverse', 'row'],
+            defaultValue: 'column',
+            description: 'Defines the flex-direction style property. It is applied for all screen sizes',
+        },
+        divider: {
+            description: 'Add an element between each child.',
+        },
+        spacing: {
+            type: 'number',
+            defaultValue: 4,
+            description: 'Defines the space between immediate children',
+        },
+        sx: {
+            control: 'object',
+            description: 'The system prop that allows defining system overrides as well as additional CSS',
+        },
+    },
+};
+const StackTemplate = (args) => {
+    return (React.createElement(CustomStack, Object.assign({}, args),
+        React.createElement("div", null, "Item1 "),
+        React.createElement("div", null, "Item2 "),
+        React.createElement("div", null, "Item3 ")));
+};
+export const Stack = StackTemplate.bind({});

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StaticDatePickerProps } from '../index';
+declare const _default: ComponentMeta<(props: StaticDatePickerProps) => JSX.Element>;
+export default _default;
+export declare const Desktop: ComponentStory<(props: StaticDatePickerProps) => JSX.Element>;
+export declare const Mobile: ComponentStory<(props: StaticDatePickerProps) => JSX.Element>;

package/dist/published/stories/StaticDatePicker.stories.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import { StaticDatePicker as CustomStaticDatePicker, LocalizationProvider, } from '../index';
+export default {
+    title: 'Input/StaticDatePicker',
+    component: CustomStaticDatePicker,
+    argTypes: {
+        value: {
+            type: {
+                name: 'string',
+            },
+        },
+    },
+};
+const StaticDatePickerTemplate = (args) => {
+    const { value: initialValue, onChange } = args, rest = __rest(args, ["value", "onChange"]);
+    const [value, setValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
+    const handleChange = (newValue, input) => {
+        onChange(newValue, input);
+        setValue(newValue);
+    };
+    return (React.createElement(LocalizationProvider, null,
+        React.createElement(CustomStaticDatePicker, Object.assign({}, rest, { value: value, onChange: handleChange }))));
+};
+export const Desktop = StaticDatePickerTemplate.bind({});
+Desktop.args = {
+    displayStaticWrapperAs: 'desktop',
+};
+export const Mobile = StaticDatePickerTemplate.bind({});
+Mobile.args = {
+    displayStaticWrapperAs: 'mobile',
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").StepperProps<"div", {
+    component?: React.ElementType<any> | undefined;
+}>) => JSX.Element>;
+export default _default;
+export declare const Stepper: ComponentStory<(props: import("@mui/material").StepperProps<"div", {
+    component?: React.ElementType<any> | undefined;
+}>) => JSX.Element>;

package/dist/published/stories/Stepper.stories.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Stepper as CustomStepper, Step, StepLabel, Box, Typography, Button } from '../index';
+export default {
+    title: 'Navigation/Stepper',
+    component: CustomStepper,
+};
+const StepperTemplate = (args) => {
+    const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+    const [activeStep, setActiveStep] = React.useState(0);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const isStepOptional = (step) => {
+        return step === 1;
+    };
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+    const handleNext = () => {
+        let newSkipped = skipped;
+        if (isStepSkipped(activeStep)) {
+            newSkipped = new Set(newSkipped.values());
+            newSkipped.delete(activeStep);
+        }
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setSkipped(newSkipped);
+    };
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+    const handleSkip = () => {
+        if (!isStepOptional(activeStep)) {
+            // You probably want to guard against something like this,
+            // it should never occur unless someone's actively trying to break something.
+            throw new Error("You can't skip a step that isn't optional.");
+        }
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setSkipped((prevSkipped) => {
+            const newSkipped = new Set(prevSkipped.values());
+            newSkipped.add(activeStep);
+            return newSkipped;
+        });
+    };
+    const handleReset = () => {
+        setActiveStep(0);
+    };
+    return (React.createElement(Box, { sx: { width: '100%' } },
+        React.createElement(CustomStepper, Object.assign({ activeStep: activeStep }, args), steps.map((label, index) => {
+            const stepProps = {};
+            const labelProps = {};
+            if (isStepOptional(index)) {
+                labelProps.optional = React.createElement(Typography, { variant: "caption" }, "Optional");
+            }
+            if (isStepSkipped(index)) {
+                stepProps.completed = false;
+            }
+            return (React.createElement(Step, Object.assign({ key: label }, stepProps),
+                React.createElement(StepLabel, Object.assign({}, labelProps), label)));
+        })),
+        activeStep === steps.length ? (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { sx: { mt: 2, mb: 1 } }, "All steps completed - you're finished"),
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row', pt: 2 } },
+                React.createElement(Box, { sx: { flex: '1 1 auto' } }),
+                React.createElement(Button, { onClick: handleReset }, "Reset")))) : (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { sx: { mt: 2, mb: 1 } },
+                "Step ",
+                activeStep + 1),
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row', pt: 2 } },
+                React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1 } }, "Back"),
+                React.createElement(Box, { sx: { flex: '1 1 auto' } }),
+                isStepOptional(activeStep) && (React.createElement(Button, { color: "inherit", onClick: handleSkip, sx: { mr: 1 } }, "Skip")),
+                React.createElement(Button, { onClick: handleNext }, activeStep === steps.length - 1 ? 'Finish' : 'Next'))))));
+};
+export const Stepper = StepperTemplate.bind({});

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

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

package/dist/published/stories/Switch.stories.js

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

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

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

package/dist/published/stories/Table.stories.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Table as CustomTable, TableContainer, TableHead, TableRow, TableCell, TableBody, TablePagination, Paper, } from '../index';
+export default {
+    title: 'Data Display/Table',
+    component: CustomTable,
+};
+function createData(name, calories, fat, carbs, protein) {
+    return { name, calories, fat, carbs, protein };
+}
+const rows = [
+    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+    createData('Eclair', 262, 16.0, 24, 6.0),
+    createData('Cupcake', 305, 3.7, 67, 4.3),
+    createData('Gingerbread', 356, 16.0, 49, 3.9),
+    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+    createData('Jelly Bean', 375, 0.0, 94, 0.0),
+    createData('KitKat', 518, 26.0, 65, 7.0),
+    createData('Lollipop', 392, 0.2, 98, 0.0),
+    createData('Marshmallow', 318, 0, 81, 2.0),
+    createData('Nougat', 360, 19.0, 9, 37.0),
+];
+const TableTemplate = (args) => {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    console.log('🚀 ~ file: Table.stories.tsx ~ line 40 ~ rowsPerPage', rowsPerPage);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    return (React.createElement(TableContainer, { component: Paper },
+        React.createElement(CustomTable, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table" }, args),
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, null,
+                    React.createElement(TableCell, null, "Dessert (100g serving)"),
+                    React.createElement(TableCell, { align: "right" }, "Calories"),
+                    React.createElement(TableCell, { align: "right" }, "Fat\u00A0(g)"),
+                    React.createElement(TableCell, { align: "right" }, "Carbs\u00A0(g)"),
+                    React.createElement(TableCell, { align: "right" }, "Protein\u00A0(g)"))),
+            React.createElement(TableBody, null, rows === null || rows === void 0 ? void 0 : rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (React.createElement(TableRow, { key: row.name, sx: { '&:last-child td, &:last-child th': { border: 0 } } },
+                React.createElement(TableCell, { component: "th", scope: "row" }, row.name),
+                React.createElement(TableCell, { align: "right" }, row.calories),
+                React.createElement(TableCell, { align: "right" }, row.fat),
+                React.createElement(TableCell, { align: "right" }, row.carbs),
+                React.createElement(TableCell, { align: "right" }, row.protein)))))),
+        React.createElement(TablePagination, { rowsPerPageOptions: [5, 10, 25], component: "div", count: rows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage })));
+};
+export const Table = TableTemplate.bind({});

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

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

package/dist/published/stories/Tabs.stories.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import { Box, Tabs as CustomTabs, Tab, Typography } from '../index';
+export default {
+    title: 'Data Display/Tabs',
+    component: CustomTabs,
+};
+function TabPanel(props) {
+    const { children, value, index } = props, other = __rest(props, ["children", "value", "index"]);
+    return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `simple-tabpanel-${index}`, "aria-labelledby": `simple-tab-${index}` }, other), value === index && (React.createElement(Box, { sx: { p: 3 } },
+        React.createElement(Typography, null, children)))));
+}
+function a11yProps(index) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+const TabsTemplate = (args) => {
+    const [value, setValue] = useState(0);
+    const handleChange = (event, newValue) => {
+        event.preventDefault();
+        setValue(newValue);
+    };
+    return (React.createElement(Box, { sx: { width: '100%' } },
+        React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
+            React.createElement(CustomTabs, Object.assign({}, args, { value: value, onChange: handleChange, "aria-label": "basic tabs example" }),
+                React.createElement(Tab, Object.assign({ label: "Item One" }, a11yProps(0))),
+                React.createElement(Tab, Object.assign({ label: "Item Two" }, a11yProps(1))),
+                React.createElement(Tab, Object.assign({ label: "Item Three" }, a11yProps(2))))),
+        React.createElement(TabPanel, { value: value, index: 0 }, "Item One"),
+        React.createElement(TabPanel, { value: value, index: 1 }, "Item Two"),
+        React.createElement(TabPanel, { value: value, index: 2 }, "Item Three")));
+};
+export const Tabs = TabsTemplate.bind({});

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(props: import("@mui/material").TextFieldProps & {
+    labelPlacement?: string | undefined;
+    readOnly?: boolean | undefined;
+    instructionText?: string | undefined;
+    errorMessage?: string | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const TextField: ComponentStory<(props: import("@mui/material").TextFieldProps & {
+    labelPlacement?: string | undefined;
+    readOnly?: boolean | undefined;
+    instructionText?: string | undefined;
+    errorMessage?: string | undefined;
+}) => JSX.Element>;
+export declare const TextFieldReadOnly: ComponentStory<(props: import("@mui/material").TextFieldProps & {
+    labelPlacement?: string | undefined;
+    readOnly?: boolean | undefined;
+    instructionText?: string | undefined;
+    errorMessage?: string | undefined;
+}) => JSX.Element>;

package/dist/published/stories/TextField.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { TextField as CustomTextField } from '../index';
+export default {
+    title: 'Input/TextField',
+    component: CustomTextField,
+};
+const TextFieldTemplate = (args) => React.createElement(CustomTextField, Object.assign({}, args));
+export const TextField = TextFieldTemplate.bind({});
+TextField.argTypes = {
+    variant: {
+        control: 'select',
+        options: ['outlined', 'standard', 'filled'],
+        defaultValue: 'outlined',
+        description: 'The variant to use.',
+    },
+    labelPlacement: {
+        type: 'string',
+        defaultValue: 'outside-top',
+        description: 'outside-top | undefined',
+    },
+    label: {
+        type: 'string',
+        description: 'The label content.',
+        defaultValue: 'Sample Label',
+    },
+    size: {
+        type: 'string',
+        description: 'Size of the input field.',
+        defaultValue: 'small',
+    },
+    placeholder: {
+        type: 'string',
+        defaultValue: 'This is placeholder text.',
+    },
+    margin: {
+        control: 'select',
+        options: ['none', 'dense', 'normal'],
+        defaultValue: 'dense',
+    },
+    'aria-label': {
+        defaultValue: 'Some label',
+    },
+    required: {
+        type: 'boolean',
+        defaultValue: false
+    },
+    instructionText: {
+        type: 'string',
+        description: 'The instruction text content.',
+        defaultValue: undefined,
+    },
+};
+export const TextFieldReadOnly = TextFieldTemplate.bind({});
+TextFieldReadOnly.argTypes = {
+    variant: {
+        defaultValue: 'outlined',
+    },
+    size: {
+        type: 'string',
+        description: 'Size of the input field.',
+        defaultValue: 'small',
+    },
+    placeholder: {
+        type: 'string',
+        defaultValue: 'This is placeholder text.',
+    },
+    margin: {
+        control: 'select',
+        options: ['none', 'dense', 'normal'],
+        defaultValue: 'dense',
+    },
+    readOnly: {
+        type: 'boolean',
+        defaultValue: true,
+    },
+    value: {
+        type: 'string',
+        defaultValue: 'SomeText',
+    },
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<TInputDate, TDate = TInputDate>(props: import("@mui/x-date-pickers").TimePickerProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+}>;
+export default _default;
+export declare const DatePicker: ComponentStory<(<TInputDate, TDate = TInputDate>(props: import("@mui/x-date-pickers").TimePickerProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+}>;

package/dist/published/stories/TimePicker.stories.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import { TimePicker, LocalizationProvider, TextField } from '../index';
+export default {
+    title: 'Input/TimePicker',
+    component: TimePicker,
+    argTypes: {
+        value: {
+            type: {
+                name: 'string',
+            },
+        },
+    },
+};
+const TimePickerTemplate = (args) => {
+    const { value: initialValue, onChange } = args, rest = __rest(args, ["value", "onChange"]);
+    const [value, setValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : null);
+    const handleChange = (newValue, input) => {
+        setValue(newValue);
+    };
+    return (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, Object.assign({}, rest, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { fullWidth: true, size: 'small' }))) }))));
+};
+export const DatePicker = TimePickerTemplate.bind({});

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

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

package/dist/published/stories/ToggleButton.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ToggleButton as CustomToggleButton, ToggleButtonGroup } from '../index';
+import { FormatAlignLeft, FormatAlignCenter, FormatAlignRight, FormatAlignJustify } from '@mui/icons-material';
+export default {
+    title: 'Data Display/ToggleButton',
+    component: CustomToggleButton,
+};
+const ToggleButtonTemplate = (args) => {
+    const [alignment, setAlignment] = React.useState('left');
+    const handleAlignment = (event, newAlignment) => {
+        setAlignment(newAlignment);
+    };
+    return (React.createElement(ToggleButtonGroup, { value: alignment, exclusive: true, onChange: handleAlignment, "aria-label": "text alignment" },
+        React.createElement(CustomToggleButton, Object.assign({ value: "left", "aria-label": "left aligned" }, args),
+            React.createElement(FormatAlignLeft, null)),
+        React.createElement(CustomToggleButton, Object.assign({ value: "center", "aria-label": "centered" }, args),
+            React.createElement(FormatAlignCenter, null)),
+        React.createElement(CustomToggleButton, Object.assign({ value: "right", "aria-label": "right aligned" }, args),
+            React.createElement(FormatAlignRight, null)),
+        React.createElement(CustomToggleButton, Object.assign({ value: "justify", "aria-label": "justified", disabled: true }, args),
+            React.createElement(FormatAlignJustify, null))));
+};
+export const ToggleButton = ToggleButtonTemplate.bind({});

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

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

package/dist/published/stories/Typogrpahy.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Typography as CustomTypography, Box } from '../index';
+export default {
+    title: 'Theme/Typography',
+    component: CustomTypography,
+};
+const TypographyTemplate = (args) => (React.createElement(Box, null,
+    React.createElement(CustomTypography, { variant: "h1", component: "div", gutterBottom: true }, "h1. Heading"),
+    React.createElement(CustomTypography, { variant: "h2", gutterBottom: true, component: "div" }, "h2. Heading"),
+    React.createElement(CustomTypography, { variant: "h3", gutterBottom: true, component: "div" }, "h3. Heading"),
+    React.createElement(CustomTypography, { variant: "h4", gutterBottom: true, component: "div" }, "h4. Heading"),
+    React.createElement(CustomTypography, { variant: "h5", gutterBottom: true, component: "div" }, "h5. Heading"),
+    React.createElement(CustomTypography, { variant: "h6", gutterBottom: true, component: "div" }, "h6. Heading"),
+    React.createElement(CustomTypography, { variant: "subtitle1", gutterBottom: true, component: "div" }, "subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"),
+    React.createElement(CustomTypography, { variant: "subtitle2", gutterBottom: true, component: "div" }, "subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"),
+    React.createElement(CustomTypography, { variant: "body1", gutterBottom: true }, "body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"),
+    React.createElement(CustomTypography, { variant: "body2", gutterBottom: true }, "body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"),
+    React.createElement(CustomTypography, { variant: "button", display: "block", gutterBottom: true }, "button text"),
+    React.createElement(CustomTypography, { variant: "caption", display: "block", gutterBottom: true }, "caption text"),
+    React.createElement(CustomTypography, { variant: "overline", display: "block", gutterBottom: true }, "overline text")));
+export const Typography = TypographyTemplate.bind({});

package/dist/published/theme/UIThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type ThemeProviderPropType = {
+    args?: any;
+    children: React.ReactNode | string;
+};
+declare function UIThemeProvider(props: ThemeProviderPropType): JSX.Element;
+export default UIThemeProvider;

package/dist/published/theme/UIThemeProvider.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material';
+import { defaultTheme } from './defaultTheme';
+function UIThemeProvider(props) {
+    var _a, _b, _c;
+    const { args, children } = props;
+    const theme = !!((_c = (_b = (_a = args === null || args === void 0 ? void 0 : args.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) ? createTheme(args === null || args === void 0 ? void 0 : args.theme) : defaultTheme;
+    return React.createElement(ThemeProvider, { theme: theme }, children);
+}
+export default UIThemeProvider;

package/dist/published/theme/defaultTheme.d.ts

@@ -0,0 +1 @@
+export declare const defaultTheme: import("@mui/material").Theme;