@learningpool/ui 1.3.0-beta.3 → 1.4.0-beta.2

package/components/atoms/Autocomplete/Autocomplete.js

@@ -11,8 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIAutocomplete from '@mui/material/Autocomplete';
-import { AutocompleteStyles } from './AutocompleteStyles';
 var Autocomplete = function (props) {
-    return (_jsx(MUIAutocomplete, __assign({}, props, { classes: AutocompleteStyles().classes })));
+    return (_jsx(MUIAutocomplete, __assign({}, props)));
 };
 export default Autocomplete;

package/components/atoms/Button/Button.js

@@ -12,6 +12,5 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import MUIButton from '@mui/material/Button';
-import { ButtonStyles } from './ButtonStyles';
-var Button = React.forwardRef(function (props, ref) { return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained' }, props, { classes: ButtonStyles().classes, ref: ref }))); });
+var Button = React.forwardRef(function (props, ref) { return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained' }, props, { ref: ref }))); });
 export default Button;

package/components/atoms/Checkbox/Checkbox.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUICheckbox from '@mui/material/Checkbox';
-import { CheckboxStyles } from './CheckboxStyles';
 export default function Checkbox(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUICheckbox, __assign({ classes: CheckboxStyles().classes }, rest)));
+    return (_jsx(MUICheckbox, __assign({}, rest)));
 }

package/components/atoms/IconButton/IconButton.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIIconButton from '@mui/material/IconButton';
-import { IconButtonStyles } from './IconButtonStyles';
-var IconButton = function (props) { return (_jsx(MUIIconButton, __assign({ classes: IconButtonStyles().classes }, props))); };
+var IconButton = function (props) { return (_jsx(MUIIconButton, __assign({}, props))); };
 IconButton.muiName = 'MUIIconButton';
 export default IconButton;

package/components/atoms/Radio/Radio.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIRadio from '@mui/material/Radio';
-import { RadioStyles } from './RadioStyles';
 export default function Radio(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIRadio, __assign({ classes: RadioStyles().classes }, rest)));
+    return (_jsx(MUIRadio, __assign({}, rest)));
 }

package/components/atoms/Select/Select.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISelect from '@mui/material/Select';
-import { SelectStyles } from './SelectStyles';
 export default function Select(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISelect, __assign({ classes: SelectStyles().classes }, rest)));
+    return (_jsx(MUISelect, __assign({}, rest)));
 }

package/components/atoms/Slider/Slider.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISlider from '@mui/material/Slider';
-import { SliderStyles } from './SliderStyles';
 export default function Slider(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISlider, __assign({ classes: SliderStyles().classes }, rest)));
+    return (_jsx(MUISlider, __assign({}, rest)));
 }

package/components/atoms/Switch/Switch.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISwitch from '@mui/material/Switch';
-import { SwitchStyles } from './SwitchStyles';
 export default function Switch(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISwitch, __assign({ classes: SwitchStyles().classes }, rest)));
+    return (_jsx(MUISwitch, __assign({}, rest)));
 }

package/components/atoms/TextField/TextField.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUITextField from '@mui/material/TextField';
-import { TextFieldStyles } from './TextFieldStyles';
 export default function TextField(props) {
-    return (_jsx(MUITextField, __assign({ classes: TextFieldStyles().classes }, props)));
+    return (_jsx(MUITextField, __assign({}, props)));
 }

package/components/atoms/ToggleButton/ToggleButton.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIToggleButton from '@mui/material/ToggleButton';
-import { ToggleButtonStyles } from './ToggleButtonStyles';
 export default function ToggleButton(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIToggleButton, __assign({ classes: ToggleButtonStyles().classes }, rest)));
+    return (_jsx(MUIToggleButton, __assign({}, rest)));
 }

package/components/datadisplay/Chip/Chip.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIChip from '@mui/material/Chip';
-import { ChipStyles } from './ChipStyles';
 export default function Chip(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIChip, __assign({ classes: ChipStyles().classes }, rest)));
+    return (_jsx(MUIChip, __assign({}, rest)));
 }

package/components/datadisplay/List/List.js

@@ -11,6 +11,5 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIList from '@mui/material/List';
-import { ListStyles } from './ListStyles';
-var List = function (props) { return (_jsx(MUIList, __assign({}, props, { classes: ListStyles().classes }))); };
+var List = function (props) { return (_jsx(MUIList, __assign({}, props))); };
 export default List;

package/components/datadisplay/Tooltip/Tooltip.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUITooltip from '@mui/material/Tooltip';
-import { TooltipStyles } from './TooltipStyles';
-var Tooltip = function (props) { return (_jsx(MUITooltip, __assign({}, props, { classes: TooltipStyles().classes }))); };
+var Tooltip = function (props) { return (_jsx(MUITooltip, __assign({}, props))); };
 Tooltip.muiName = 'MUITooltip';
 export default Tooltip;

package/components/feedback/Alert/Alert.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIAlert from '@mui/material/Alert';
-import { AlertStyles } from './AlertStyles';
 export default function Alert(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIAlert, __assign({ classes: AlertStyles().classes }, rest)));
+    return (_jsx(MUIAlert, __assign({}, rest)));
 }

package/components/navigation/Drawer/Drawer.d.ts

@@ -3,5 +3,5 @@ import { DrawerProps } from '@mui/material/Drawer';
 interface IDrawerProps extends DrawerProps {
     component?: string | JSX.Element;
 }
-declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "checkedLink" | "valueLink" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "anchor" | "transitionDuration" | "elevation" | "open" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "checkedLink" | "valueLink" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "anchor" | "transitionDuration" | "elevation" | "open" | "onClose" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -133,11 +133,11 @@ var VerticalNavigation = function (props) {
                                             } }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '7wxswYRq238tj65RVina32VSzmpGamju7Edvbrab', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : 'https://6cqjg9ua08.execute-api.us-east-1.amazonaws.com/dev-api', token: 'hfcfgcgfcgfhcfhgcfg' }) })), _jsx(ListItemText, { primary: 'App switcher', sx: { opacity: isDrawerOpen ? 1 : 0 } })] })) })))
                             : null, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (item, index) {
                             var _a;
-                            return (_jsx(ListItem, { children: _jsxs(ListItemButton
+                            return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
                                 // @ts-expect-error
                                 , __assign({ 
                                     // @ts-expect-error
-                                    component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) }));
+                                    component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
                         }), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemAvatar
                             // @ts-expect-error
                             , __assign({ 

package/components/pages/SideInSide/SideInSideStyles.d.ts

@@ -1,7 +1,12 @@
 import { Theme } from '@mui/material/styles';
-export declare const SideInSideStyles: (params: void) => {
+export declare const SideInSideStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
     classes: Record<"root" | "pageBackgroundContainer" | "pageBackgroundLogoContainer" | "pageBackgroundLogo" | "contentPanel" | "contentPanelImageContainer" | "contentPanelImage" | "submitButton" | "streamHomeButton" | "footerContent", string>;
     theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@learningpool/ui",
   "author": "Learning Pool",
+  "description": "UI library for use on modern Learning Pool projects, built on top of MUI.",
   "license": "MIT",
   "keywords": [
     "learning-pool",
@@ -8,20 +9,16 @@
     "components",
     "ui"
   ],
-  "version": "1.3.0-beta.3",
+  "version": "1.4.0-beta.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "peerDependencies": {
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
-  },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@learningpool/app-switcher": "^1.0.4",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.3.1",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -31,7 +28,9 @@
     "@types/react-dom": "^17.0.11",
     "anysort": "^2.0.0",
     "focus-trap-react": "^8.11.0",
-    "react-scripts": "5.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.1",
     "tss-react": "^3.3.6",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"
@@ -40,14 +39,15 @@
     "analyze:build": "source-map-explorer 'build/static/js/*.js'",
     "analyze:module": "source-map-explorer 'dist/*.js'",
     "build": "build-storybook",
-    "build:module": "rm -rf dist && yarn run tsc",
+    "build:module": "rm -rf dist && tsc && npm run generate:package",
+    "generate:package": "node ./merge.js",
     "lint": "eslint --ext .tsx ./src",
     "lint:fix": "eslint --ext .tsx ./src --fix",
     "semantic-release": "ht2-release-public-circleci-lib-dist",
     "start": "start-storybook -p 6006",
-    "start:run-tests": "yarn test:generate-output && yarn start",
+    "start:run-tests": "npm run test:generate-output && npm run start",
     "test": "jest",
-    "test:u": "jest --updateSnapshot && yarn run lint:fix",
+    "test:u": "jest --updateSnapshot && npm run lint:fix",
     "test:update-snapshot": "test:u",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
@@ -64,12 +64,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.8",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
-    "@ht2-labs/semantic-release": "2.0.100",
+    "@babel/cli": "7.17.10",
+    "@babel/core": "7.18.5",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "7.17.12",
+    "@babel/preset-typescript": "7.17.12",
+    "@ht2-labs/semantic-release": "3.0.0",
     "@storybook/addon-a11y": "6.5.6",
     "@storybook/addon-actions": "6.5.6",
     "@storybook/addon-essentials": "6.5.6",
@@ -82,15 +82,15 @@
     "@storybook/preset-create-react-app": "4.1.1",
     "@storybook/react": "6.5.6",
     "@storybook/theming": "6.5.6",
-    "babel-preset-minify": "0.5.1",
+    "babel-preset-minify": "0.5.2",
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-with-typescript": "21.0.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "4.2.1",
     "source-map-explorer": "2.5.2",
     "source-map-loader": "3.0.1",
-    "ts-node": "10.7.0",
-    "webpack": "5.71.0"
+    "ts-node": "10.8.0",
+    "webpack": "5.72.1"
   },
   "release": {
     "branches": [

package/readme.md

@@ -1,6 +1,7 @@
 # @learningpool/ui
 
 ![npm (scoped)](https://img.shields.io/npm/v/@learningpool/ui)
+![npm (tag)](https://img.shields.io/npm/v/@learningpool/ui/beta)
 ![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@learningpool/ui)
 ![NPM](https://img.shields.io/npm/l/@learningpool/ui)
 ![Website](https://img.shields.io/website?label=documentation&url=https%3A%2F%2Fmain.d5creizgamf62.amplifyapp.com)
@@ -13,13 +14,13 @@ Our documentation is provided via [Storybook](https://storybook.js.org) and our
 
 First clone the repo then run:
 
-### `yarn install`
+### `npm install`
 
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm run start`
 
 Runs the app in the development mode.\
 Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
@@ -27,19 +28,19 @@ Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn start:run-test`
-The same as the `yarn start` command but runs the `yarn test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
+### `npm run start:run-test`
+The same as the `npm run start` command but runs the `npm run test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
 
-### `yarn build-storybook`
+### `npm run build-storybook`
 Builds the Storybook app for pushing to the public subdomain.
 
-### `yarn test`
+### `npm run test`
 Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.
 
-### `yarn test:update-snapshot`
+### `npm run test:update-snapshot`
 Updates the Jest snapshot.
 
-### `yarn test:generate-output`
+### `npm run test:generate-output`
 Runs the tests and outputs the results to a file `.jest-test-results.json` for use within the [Storybook addon Jest](https://storybook.js.org/addons/@storybook/addon-jest/)
 
 ## Getting started

package/components/atoms/Autocomplete/AutocompleteStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AutocompleteStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Autocomplete/AutocompleteStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AutocompleteStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Button/ButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Button/ButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Checkbox/CheckboxStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const CheckboxStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Checkbox/CheckboxStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var CheckboxStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/IconButton/IconButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const IconButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/IconButton/IconButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var IconButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Radio/RadioStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const RadioStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Radio/RadioStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var RadioStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Select/SelectStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SelectStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Select/SelectStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SelectStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Slider/SliderStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SliderStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Slider/SliderStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SliderStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Switch/SwitchStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SwitchStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Switch/SwitchStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SwitchStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/TextField/TextFieldStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TextFieldStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/TextField/TextFieldStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TextFieldStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/ToggleButton/ToggleButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ToggleButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/ToggleButton/ToggleButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ToggleButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Chip/ChipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ChipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Chip/ChipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ChipStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/List/ListStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ListStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/List/ListStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ListStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Tooltip/TooltipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TooltipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Tooltip/TooltipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TooltipStyles = makeStyles()(function (theme) { return ({}); });

package/components/feedback/Alert/AlertStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AlertStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/feedback/Alert/AlertStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AlertStyles = makeStyles()(function (theme) { return ({}); });