@learningpool/ui 1.2.1 → 1.3.0-beta.2

package/assets/Images.d.ts

@@ -0,0 +1,6 @@
+export declare const StreamSuiteLogo: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const LearningPoolLogo: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/assets/Images.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSvgIcon } from '@mui/material/utils';
+export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
+export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');

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

@@ -9,7 +9,7 @@ declare const Button: React.ForwardRefExoticComponent<Pick<{
     endIcon?: React.ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
     startIcon?: React.ReactNode;
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;
@@ -31,5 +31,5 @@ declare const Button: React.ForwardRefExoticComponent<Pick<{
     touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "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" | "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" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & React.RefAttributes<HTMLButtonElement>>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "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" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/components/datadisplay/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps } from '@mui/material/Avatar';
+declare const Avatar: (props: AvatarProps | any) => React.ReactElement;
+export default Avatar;

package/components/datadisplay/Avatar/Avatar.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import MUIAvatar from '@mui/material/Avatar';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { styled } from '@mui/material/styles';
+var StyledAvatar = styled(MUIAvatar, { shouldForwardProp: function (prop) { return prop !== 'sx'; } })(function (_a) {
+    var _b;
+    var theme = _a.theme, sx = _a.sx;
+    return ({
+        backgroundColor: (sx === null || sx === void 0 ? void 0 : sx.bgcolor)
+            ? sx.bgcolor
+            : theme.palette.primary.main,
+        color: (sx === null || sx === void 0 ? void 0 : sx.bgcolor)
+            ? (_b = sx.color) !== null && _b !== void 0 ? _b : theme.palette.getContrastText(sx.bgcolor)
+            : theme.palette.primary.contrastText,
+        fontSize: '0.9rem',
+        textTransform: 'uppercase'
+    });
+});
+var Avatar = function (props) { return (_jsxs(_Fragment, { children: [_jsx(GlobalStyles, { styles: {
+                '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
+                    backgroundColor: '#eee',
+                    color: '#333'
+                }
+            } }), _jsx(StyledAvatar, __assign({}, props))] })); };
+export default Avatar;

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

@@ -1,4 +1,7 @@
 import React from 'react';
 import { DrawerProps } from '@mui/material/Drawer';
-declare const Drawer: (props: DrawerProps) => React.ReactElement;
+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>>;
 export default Drawer;

package/components/navigation/Drawer/Drawer.js

@@ -9,8 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import MUIDrawer from '@mui/material/Drawer';
-import { DrawerStyles } from './DrawerStyles';
-var Drawer = function (props) { return (_jsx(MUIDrawer, __assign({}, props, { classes: DrawerStyles().classes }))); };
+import { styled } from '@mui/material/styles';
+var StyledDrawer = styled(MUIDrawer)(function (_a) {
+    var theme = _a.theme;
+    return ({});
+});
+var Drawer = React.forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(StyledDrawer, __assign({}, rest, { ref: ref })));
+});
 export default Drawer;

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface VerticalNaviationItemProps {
+    label: string;
+    icon: React.ReactElement;
+    onClick?: any;
+    isActive?: boolean;
+}
+interface VerticalNaviationProps {
+    logo?: string;
+    logoText?: string;
+    items?: VerticalNaviationItemProps[];
+    secondaryItems?: VerticalNaviationItemProps[];
+    hasStreamHome?: boolean;
+    avatarName?: string;
+    isDrawerOpen?: boolean;
+}
+declare const VerticalNavigation: (props: VerticalNaviationProps) => React.ReactElement;
+export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,194 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Avatar, Drawer as SSDrawer, List, ListItemText } from '../../../index';
+import { Box, Link } from '@mui/material';
+import MailIcon from '@mui/icons-material/Mail';
+import { StreamSuiteLogo } from '../../../assets/Images';
+import { AppSwitcher } from '@learningpool/app-switcher';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import { DRAWER_WIDTH, paperStyles, openedMixin, closedMixin, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon } from './VerticalNavigationStyles';
+var Drawer = styled(SSDrawer)(function (_a) {
+    var theme = _a.theme, open = _a.open;
+    return (__assign(__assign({ width: DRAWER_WIDTH.Expanded, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', boxShadow: 'none' }, (open && __assign(__assign({}, openedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin(theme)) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
+});
+var VerticalNavigation = function (props) {
+    var _a;
+    var theme = useTheme();
+    var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText;
+    var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
+    var _b = React.useState(false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
+    var isMediumAndUp = useMediaQuery(theme.breakpoints.up('sm'));
+    var logoHeight = isMediumAndUp ? '46px' : '38px';
+    var logoWidth = isMediumAndUp ? '46px' : '38px';
+    var toggleDrawer = function (open) { return function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        if (event.type === 'keydown') {
+            if (event.key === 'Tab' || event.key === 'Shift') {
+                return;
+            }
+        }
+        setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
+    }; };
+    var listContent = function () {
+        var _a, _b, _c, _d;
+        return (_jsxs(Box
+        // onClick={toggleDrawer(false)}
+        // onKeyDown={toggleDrawer(false)}
+        , __assign({ 
+            // onClick={toggleDrawer(false)}
+            // onKeyDown={toggleDrawer(false)}
+            sx: {
+                display: 'flex',
+                flex: '1 auto',
+                flexDirection: 'column',
+                justifyContent: 'flex-start'
+            } }, { children: [_jsxs(DrawerHeader, { children: [logo
+                            ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
+                                    marginRight: isMediumAndUp ? '20px' : '24px'
+                                }, alt: "Site Logo" }))
+                            : (_jsx(StreamSuiteLogo, { style: {
+                                    height: logoHeight,
+                                    width: logoWidth,
+                                    marginRight: isMediumAndUp ? '20px' : '24px',
+                                    fill: theme.palette.mode === 'dark'
+                                        ? theme.palette.primary.contrastText
+                                        : theme.palette.primary.main
+                                } })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '' })] }), _jsxs("div", __assign({ style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        height: 'auto',
+                        marginTop: "-".concat(theme.spacing(0.5)),
+                        position: 'relative',
+                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+                        width: '100%',
+                        zIndex: '-1'
+                    } }, { children: [_jsx("div", { style: {
+                                flex: '1',
+                                width: 'auto',
+                                height: 'auto',
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper
+                            } }), _jsx("div", { style: {
+                                display: 'flex',
+                                width: '45px',
+                                height: '85px',
+                                clipPath: 'url("#notch")',
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper
+                            } }), _jsx("div", { style: {
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper,
+                                height: '90px',
+                                position: 'absolute',
+                                right: '25px',
+                                top: '-2px',
+                                width: 'calc(100% - 25px)'
+                            } })] })), _jsx("svg", __assign({ className: 'notch-svg', style: {
+                        width: '0',
+                        height: '0',
+                        position: 'absolute'
+                    } }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), _jsx(List, __assign({ sx: {
+                        height: '100%',
+                        // padding: `${theme.spacing(0)} 10px`,
+                        backgroundColor: theme.palette.mode === 'dark'
+                            ? theme.palette.primary.main
+                            : theme.palette.background.paper,
+                        marginTop: "-".concat(theme.spacing(0.5))
+                    } }, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                        var _a;
+                        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) })));
+                    }) })), _jsxs(List, __assign({ sx: {
+                        marginTop: 'auto',
+                        backgroundColor: theme.palette.mode === 'dark'
+                            ? theme.palette.primary.main
+                            : theme.palette.background.paper
+                    } }, { children: [hasStreamHome
+                            ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
+                                        minHeight: 48,
+                                        justifyContent: isDrawerOpen ? 'initial' : 'center'
+                                    } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+                                                minWidth: 0,
+                                                mr: isDrawerOpen ? 2.5 : 'auto',
+                                                justifyContent: 'center'
+                                            } }, { 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
+                                // @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) }));
+                        }), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemAvatar
+                            // @ts-expect-error
+                            , __assign({ 
+                                // @ts-expect-error
+                                component: Link }, { children: [_jsx(ListItemIcon, __assign({ sx: { mr: isDrawerOpen ? 3.5 : 'auto' } }, { children: _jsxs(Avatar, __assign({ sx: {
+                                                bgcolor: theme.palette.mode === 'dark'
+                                                    ? theme.palette.primary.contrastText
+                                                    : theme.palette.primary.main
+                                            } }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName, sx: {
+                                            opacity: isDrawerOpen ? 1 : 0,
+                                            textAlign: 'left'
+                                        } })] })) }))] }))] })));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'drawerShadow', style: {
+                    position: 'fixed',
+                    top: '0',
+                    left: '27px',
+                    content: '',
+                    background: 'rgba(0,0,0,0.125)',
+                    height: '100%',
+                    width: '40px',
+                    display: 'block',
+                    visibility: 'visible',
+                    filter: 'blur(13px)'
+                } }), _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close drawer' : 'Open drawer', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
+                    left: isDrawerOpen ? '229px' : (isMediumAndUp ? '44px' : '36px')
+                } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                        ? (_jsx(ChevronLeft, { sx: {
+                                fontSize: '1.75rem',
+                                height: '1.75rem',
+                                width: '1.75rem'
+                            } }))
+                        : (_jsx(ChevronRight, { sx: {
+                                fontSize: '1.75rem',
+                                height: '1.75rem',
+                                width: '1.75rem'
+                            } })) }) })), _jsx(Drawer, __assign({ "aria-label": "Navigation menu", id: "vertical-navigation", component: 'aside', role: "complementary", anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
+                    keepMounted: true
+                }, sx: {
+                    '.MuiDrawer-paper': {
+                        background: 'transparent none',
+                        boxShadow: 'none',
+                        visibility: 'visible !important',
+                        transform: 'translateX(0) !important',
+                        // width: isDrawerOpen
+                        //   ? `${DRAWER_WIDTH.Expanded}px`
+                        //   : `${DRAWER_WIDTH.Collapsed}px`,
+                        // boxShadow: 'none',
+                        overflow: 'hidden',
+                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important'
+                    }
+                } }, { children: listContent() }))] }));
+};
+export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+/// <reference types="react-addons-linked-state-mixin" />
+import { Theme } from '@mui/material';
+import { CSSObject } from '@mui/material/styles';
+export declare const DRAWER_WIDTH: {
+    Collapsed: number;
+    Expanded: number;
+};
+export declare const paperStyles: (theme: Theme) => CSSObject;
+export declare const openedMixin: (theme: Theme) => CSSObject;
+export declare const closedMixin: (theme: Theme) => CSSObject;
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    children?: import("react").ReactNode;
+}, {}, {}>;
+export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -0,0 +1,146 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemIcon as SSListItemIcon, IconButton } from '../../../index';
+import { styled } from '@mui/material/styles';
+export var DRAWER_WIDTH = {
+    Collapsed: 60,
+    Expanded: 250
+};
+export var paperStyles = function (theme) { return ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.primary.main
+        : theme.palette.background.paper,
+    border: 0,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.primary.contrastText
+        : theme.palette.getContrastText(theme.palette.background.paper),
+    boxShadow: 'none'
+}); };
+export var openedMixin = function (theme) { return ({
+    width: DRAWER_WIDTH.Expanded,
+    transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+    overflowX: 'hidden',
+    boxShadow: 'none'
+}); };
+export var closedMixin = function (theme) {
+    var _a;
+    return (_a = {
+            transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+            width: "calc(".concat(theme.spacing(7), " + 1px)")
+        },
+        _a[theme.breakpoints.up('sm')] = {
+            width: "calc(".concat(theme.spacing(8), " + 1px)")
+        },
+        _a.overflowX = 'hidden',
+        _a.boxShadow = theme.shadows[1],
+        _a);
+};
+export var DrawerHeader = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
+                ? theme.palette.primary.main
+                : theme.palette.background.paper, minHeight: '56px !important' }, _b[theme.breakpoints.up('sm')] = {
+        minHeight: '64px !important'
+    }, _b)));
+});
+export var ListItem = styled(SSListItem)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.primary.contrastText
+            : theme.palette.getContrastText(theme.palette.background.paper)
+        // paddingLeft: theme.spacing(2),
+        // paddingRight: theme.spacing(2),
+        // [theme.breakpoints.up('sm')]: {
+        //   paddingLeft: theme.spacing(2.5),
+        //   paddingRight: theme.spacing(2.5)
+        // }
+    });
+});
+export var DrawerToggle = styled(IconButton)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            width: '44px',
+            height: '44px',
+            position: 'fixed',
+            zIndex: theme.zIndex.drawer + 1,
+            background: 'transparent',
+            paddingLeft: theme.spacing(2),
+            paddingRight: theme.spacing(2),
+            top: '80.5px'
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            paddingLeft: theme.spacing(2.5),
+            paddingRight: theme.spacing(2.5),
+            top: '88.5px'
+        },
+        _b.transition = 'left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+        _b);
+});
+export var DrawerToggleHitboxContent = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : theme.palette.background.paper,
+        borderRadius: '50%',
+        boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
+        height: '1.75rem',
+        padding: theme.spacing(0.5),
+        width: '1.75rem'
+    });
+});
+export var ListItemButton = styled(SSListItemButton)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignItems: 'center',
+            color: theme.palette.mode === 'dark'
+                ? theme.palette.primary.contrastText
+                : theme.palette.getContrastText(theme.palette.background.paper),
+            display: 'flex',
+            textTransform: 'none',
+            textDecoration: 'none',
+            padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2))
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            paddingLeft: theme.spacing(2.5),
+            paddingRight: theme.spacing(2.5)
+        },
+        _b.width = '100%',
+        _b);
+});
+export var ListItemAvatar = styled(ListItemButton)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        minHeight: 48,
+        '& .MuiListItemIcon-root': {
+            justifyContent: 'center',
+            minWidth: 0,
+            marginLeft: '-4px'
+        },
+        '& .MuiAvatar-root': {
+            height: 32,
+            width: 32
+        }
+    });
+});
+export var ListItemIcon = styled(SSListItemIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.primary.contrastText
+            : theme.palette.getContrastText(theme.palette.background.paper)
+    });
+});

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function SideInSide(props: any): React.ReactElement;

package/components/pages/SideInSide/SideInSide.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../index';
+import CssBaseline from '@mui/material/CssBaseline';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { SideInSideStyles } from './SideInSideStyles';
+import { LearningPoolLogo, StreamSuiteLogo } from '../../../assets/Images';
+import { Link } from '@mui/material';
+function Copyright(props) {
+    return (_jsxs(Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', _jsx(Link, __assign({ color: "inherit", href: "https://learningpool.com/" }, { children: "Learning Pool" })), ' ', new Date().getFullYear(), '.'] })));
+}
+var theme = createTheme();
+export default function SideInSide(props) {
+    var classes = SideInSideStyles(props).classes;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, component: "main", className: classes.root, style: props === null || props === void 0 ? void 0 : props.style }, { children: [_jsx(CssBaseline, {}), _jsx(Grid, __assign({ item: true, xs: false, sm: false, md: 6, lg: 7, xl: 8, className: classes.pageBackgroundContainer }, { children: _jsx(Box, __assign({ className: classes.pageBackgroundLogoContainer }, { children: (props === null || props === void 0 ? void 0 : props.pageBackgroundLogo)
+                            ? (_jsx("img", { src: "".concat(String(props.pageBackgroundLogo)), alt: "".concat(String(props.pageBackgroundLogoAlt)), className: classes.pageBackgroundLogo }))
+                            : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '200px', width: '200px' } }) })) })), _jsx(Grid, __assign({ item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 4, component: Paper, elevation: 6, square: true }, { children: _jsxs(Box, __assign({ className: classes.contentPanel }, { children: [_jsx(Box, __assign({ className: classes.contentPanelImageContainer }, { children: (props === null || props === void 0 ? void 0 : props.formLogo)
+                                    ? (_jsx("img", { src: "".concat(String(props.formLogo)), alt: "".concat(String(props.formLogoAlt)), className: classes.contentPanelImage }))
+                                    : _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '250px', height: '60px' } }) })), _jsx(Typography, __assign({ component: "h1", variant: "h6" }, { children: props.welcomeMessage })), (props === null || props === void 0 ? void 0 : props.children) ? props.children : null, (props === null || props === void 0 ? void 0 : props.isStreamHomeEnabled)
+                                ? (_jsxs(_Fragment, { children: [_jsx(Divider, __assign({ sx: { mt: 1 } }, { children: "Or" })), _jsx(Button, __assign({ type: "submit", onClick: props === null || props === void 0 ? void 0 : props.handleStreamHomeLogin, fullWidth: true, className: classes.streamHomeButton, startIcon: (props === null || props === void 0 ? void 0 : props.startIcon)
+                                                ? props.startIcon
+                                                : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '25px', width: '25px' } }) }, { children: "Log in with Stream Home" }))] }))
+                                : null, _jsx(Box, __assign({ className: classes.footerContent }, { children: (props === null || props === void 0 ? void 0 : props.footerContent) ? props.footerContent : _jsx(Copyright, {}) }))] })) }))] })) })));
+}

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

@@ -0,0 +1,7 @@
+import { Theme } from '@mui/material/styles';
+export declare const SideInSideStyles: (params: void) => {
+    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;
+};

package/components/pages/SideInSide/SideInSideStyles.js

@@ -0,0 +1,60 @@
+import { makeStyles } from 'tss-react/mui';
+export var SideInSideStyles = makeStyles()(function (theme, props) { return ({
+    root: {
+        height: '100vh',
+        width: '100%'
+    },
+    pageBackgroundContainer: {
+        backgroundImage: (props === null || props === void 0 ? void 0 : props.pageBackgroundImage)
+            ? "url(".concat(String(props.pageBackgroundImage), ")")
+            : 'url(https://source.unsplash.com/YWIOwHvRBvU)',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        flex: 1
+    },
+    pageBackgroundLogoContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        justifyContent: 'center'
+    },
+    pageBackgroundLogo: {
+        maxWidth: '250px'
+    },
+    contentPanel: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        marginLeft: theme.spacing(6),
+        marginRight: theme.spacing(6),
+        paddingBottom: theme.spacing(2),
+        paddingTop: theme.spacing(8)
+    },
+    contentPanelImageContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: theme.spacing(3),
+        marginTop: theme.spacing(1)
+    },
+    contentPanelImage: {
+        maxWidth: '400px',
+        width: '66%'
+    },
+    submitButton: {
+        marginBottom: theme.spacing(2),
+        marginTop: theme.spacing(3)
+    },
+    streamHomeButton: {
+        marginBottom: "".concat(theme.spacing(5), " !important"),
+        marginTop: "".concat(theme.spacing(3), " !important")
+    },
+    footerContent: {
+        marginTop: 'auto',
+        width: '100%'
+    }
+}); });

package/index.d.ts

@@ -1,7 +1,16 @@
+export { default as Avatar } from './components/datadisplay/Avatar/Avatar';
 export { default as Button } from './components/atoms/Button/Button';
+export { default as IconButton } from './components/atoms/IconButton/IconButton';
+export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as TextField } from './components/atoms/TextField/TextField';
 export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
+export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
+export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
+export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as CircularProgress } from '@mui/material/CircularProgress';
+export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';
 export { default as ListItemAvatar } from '@mui/material/ListItemAvatar';
 export { default as ListItemButton } from '@mui/material/ListItemButton';
@@ -9,3 +18,4 @@ export { default as ListItemIcon } from '@mui/material/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction';
 export { default as ListItemText } from '@mui/material/ListItemText';
 export { default as ListSubheader } from '@mui/material/ListSubheader';
+export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/index.js

@@ -1,9 +1,18 @@
 // Learning Pool intercepted
+export { default as Avatar } from './components/datadisplay/Avatar/Avatar';
 export { default as Button } from './components/atoms/Button/Button';
+export { default as IconButton } from './components/atoms/IconButton/IconButton';
+export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as TextField } from './components/atoms/TextField/TextField';
 export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
+export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
+export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 // Straight through MUI
+export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as CircularProgress } from '@mui/material/CircularProgress';
+export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';
 export { default as ListItemAvatar } from '@mui/material/ListItemAvatar';
 export { default as ListItemButton } from '@mui/material/ListItemButton';
@@ -11,3 +20,5 @@ export { default as ListItemIcon } from '@mui/material/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction';
 export { default as ListItemText } from '@mui/material/ListItemText';
 export { default as ListSubheader } from '@mui/material/ListSubheader';
+// Stream Suite components
+export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/package.json

@@ -8,13 +8,14 @@
     "components",
     "ui"
   ],
-  "version": "1.2.1",
+  "version": "1.3.0-beta.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "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",
     "@testing-library/jest-dom": "^5.16.1",
@@ -25,6 +26,7 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "anysort": "^2.0.0",
+    "focus-trap-react": "^8.11.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
@@ -43,7 +45,8 @@
     "start": "start-storybook -p 6006",
     "start:run-tests": "yarn test:generate-output && yarn start",
     "test": "jest",
-    "test:update-snapshot": "jest --updateSnapshot",
+    "test:u": "jest --updateSnapshot && yarn run lint:fix",
+    "test:update-snapshot": "test:u",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
   "browserslist": {
@@ -65,18 +68,18 @@
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@ht2-labs/semantic-release": "2.0.100",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-actions": "6.5.0-alpha.57",
-    "@storybook/addon-essentials": "6.5.0-alpha.57",
-    "@storybook/addon-jest": "6.4.20",
-    "@storybook/addon-links": "6.5.0-alpha.57",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.5.0-alpha.57",
-    "@storybook/manager-webpack5": "6.5.0-alpha.57",
-    "@storybook/node-logger": "6.5.0-alpha.57",
-    "@storybook/preset-create-react-app": "4.1.0",
-    "@storybook/react": "6.5.0-alpha.57",
-    "@storybook/theming": "6.4.20",
+    "@storybook/addon-a11y": "6.5.6",
+    "@storybook/addon-actions": "6.5.6",
+    "@storybook/addon-essentials": "6.5.6",
+    "@storybook/addon-jest": "6.5.6",
+    "@storybook/addon-links": "6.5.6",
+    "@storybook/addons": "6.5.6",
+    "@storybook/builder-webpack5": "6.5.6",
+    "@storybook/manager-webpack5": "6.5.6",
+    "@storybook/node-logger": "6.5.6",
+    "@storybook/preset-create-react-app": "4.1.1",
+    "@storybook/react": "6.5.6",
+    "@storybook/theming": "6.5.6",
     "babel-preset-minify": "0.5.1",
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-with-typescript": "21.0.1",
@@ -89,7 +92,14 @@
   },
   "release": {
     "branches": [
-      "main"
+      {
+        "name": "main"
+      },
+      {
+        "name": "beta",
+        "channel": "beta",
+        "prerelease": true
+      }
     ]
   },
   "publishConfig": {

package/utils/theme.js

@@ -19,6 +19,16 @@ var DEFAULT_BODY_TYPOGRAPHY = {
 // @TODO: Discuss this with the experience design team, according to the UUI Figma
 export var defaultTheme = {
     typography: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { h1: DEFAULT_HEADER_TYPOGRAPHY, h2: DEFAULT_HEADER_TYPOGRAPHY, h3: DEFAULT_HEADER_TYPOGRAPHY, h4: DEFAULT_HEADER_TYPOGRAPHY, h5: DEFAULT_HEADER_TYPOGRAPHY, h6: DEFAULT_HEADER_TYPOGRAPHY, subtitle1: DEFAULT_BODY_TYPOGRAPHY, subtitle2: DEFAULT_BODY_TYPOGRAPHY, body1: DEFAULT_BODY_TYPOGRAPHY, body2: DEFAULT_BODY_TYPOGRAPHY, button: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { fontWeight: 700 }), caption: DEFAULT_BODY_TYPOGRAPHY, overline: DEFAULT_BODY_TYPOGRAPHY })
+    // overrides: {
+    //   MuiCssBaseline: {
+    //     '@global': {
+    //       '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
+    //         backgroundColor: '#eee',
+    //         color: '#333'
+    //       }
+    //     }
+    //   }
+    // }
 };
 export var lightTheme = {
     palette: {

package/components/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './atoms/Button/Button';

package/components/index.js

@@ -1,3 +0,0 @@
-/* Export */
-/* Atoms */
-export { default as Button } from './atoms/Button/Button';

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

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

package/components/navigation/Drawer/DrawerStyles.js

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