@learningpool/ui 1.6.3 → 1.6.6

package/src/docs.tsx

@@ -1,167 +0,0 @@
-export const DOCS = {
-  Button: {
-    Default: 'Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like; Modal windows, Forms, Cards, Toolbars. The Button comes with three variants: text (default), contained, and outlined.',
-    Text: 'Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.',
-    Contained: 'Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.',
-    Outlined: 'Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren\'t the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.',
-    Colors: '',
-    Sizes: 'For larger or smaller buttons, use the size prop.',
-    WithIcon: 'Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.',
-    IconButtons: 'Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.',
-    All: ''
-  },
-  Checkbox: {
-    Default: 'Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.',
-    Label: 'You can provide a label to the Checkbox thanks to the FormControlLabel component.',
-    Colors: '',
-    Sizes: 'Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes.',
-    Icon: '',
-    Controlled: 'You can control the checkbox with the checked and onChange props:',
-    Indeterminate: 'A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn\'t. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.\n\n ⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.',
-    CheckboxesGroup: 'FormGroup is a helpful wrapper used to group selection control components.',
-    LabelPosition: 'You can change the placement of the label:',
-    All: ''
-  },
-  Switch: {
-    Default: 'Switches toggle the state of a single setting on or off. Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it\'s in, should be made clear from the corresponding inline label.',
-    Label: 'You can provide a label to the `Switch` thanks to the `FormControlLabel` component.',
-    Colors: '',
-    Sizes: 'Use the `size` prop to change the size of the switch.',
-    Controlled: 'You can control the switch with the `checked` and `onChange` props:',
-    SwitchesGroup: '`FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API. However, you are encouraged to use Checkboxes instead if multiple related controls are required. (See: [When to use](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)).',
-    LabelPosition: 'You can change the placement of the label:',
-    All: ''
-  },
-  Radio: {
-    Default: '`RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group.',
-    Direction: 'To lay out the buttons horizontally, set the `row` prop:',
-    Controlled: 'You can control the radio with the `value` and `onChange` props:',
-    Standalone: '`Radio` can also be used standalone, without the RadioGroup wrapper.',
-    Sizes: 'Use the `size` prop or customize the font size of the svg icons to change the size of the radios.',
-    Colors: '',
-    Indeterminate: 'A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn\'t. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.\n\n ⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.',
-    LabelPosition: 'You can change the placement of the label with the `FormControlLabel` component\'s `labelPlacement` prop:',
-    ShowError: 'In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:',
-    All: ''
-  },
-  Select: {
-    Default: 'Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport.\n\nThe Select component is meant to be interchangeable with a native <select> element.If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the `Autocomplete` component. It\'s meant to be an improved version of the \'react-select\' and \'downshift\' packages.',
-    Variants: 'The Select component is implemented as a custom `<input>` element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and many of the same props. Refer to the respective component\'s API page for details.',
-    HelperText: '⚠ Note that when using FormControl with the outlined variant of the Select, you need to provide a label in two places: in the InputLabel component and in the `label` prop of the Select component (see the above demo).',
-    AutoWidth: '',
-    OtherProps: '',
-    NativeSelect: 'As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.',
-    MultipleSelect: 'The `Select` component can handle multiple selections. It\'s enabled with the `multiple` prop.\n\nLike with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It\'s always an array.',
-    Checkmarks: '',
-    Chips: '',
-    Placeholder: '',
-    Native: '',
-    Controlled: 'You can control the open state of the select with the `open` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultOpen` prop.',
-    WithDialog: 'While it\'s discouraged by the Material Design guidelines, you can use a select inside a dialog.',
-    Grouping: 'Display categories with the `ListSubheader` component or the native `<optgroup>` element.',
-    All: ''
-  },
-  TextField: {
-    Basic: 'The `TextField` wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard.',
-    Validation: 'The `error` prop toggles the error state. The `helperText` prop can then be used to provide feedback to the user about the error.',
-    Sizes: 'Fancy smaller inputs? Use the `size` prop.',
-    Colors: 'The `color` prop changes the highlight color of the text field when focused.',
-    All: ''
-  },
-  Slider: {
-    Default: 'Continuous sliders allow users to select a value along a subjective range.',
-    Colors: '',
-    Sizes: 'For smaller slider, use the prop `size=\'small\'`.',
-    Discrete: 'Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with `marks={true}`.',
-    Range: 'The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop.',
-    All: ''
-  },
-  ToggleButton: {
-    Default: '',
-    ExclusiveSection: 'With exclusive selection, selecting one option deselects any other. Note: Exclusive selection does not enforce that a button must be active. For that effect see [enforce value set](https://mui.com/components/toggle-button/#enforce-value-set).',
-    MultipleSection: 'Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.',
-    Sizes: 'For larger or smaller buttons, use the `size` prop.',
-    Colors: '',
-    EnforceValues: 'If you want to enforce that at least one button must be active, you can adapt your `handleChange` function.',
-    All: ''
-  },
-  Alert: {
-    Default: 'The alert offers four severity levels that set a distinctive icon and color.',
-    Description: 'You can use the `AlertTitle` component to display a formatted title above the content.',
-    Actions: 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert.',
-    Icons: 'The icon prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity.',
-    Variants: 'Two variants are available - outlined, and filled:',
-    All: ''
-  },
-  Chip: {
-    Default: 'The Chip component supports outlined and filled styling.',
-    Colors: 'You can use the `color` prop to define a color from theme palette.',
-    Sizes: 'You can use the `size` prop to define a small Chip.',
-    Adornments: 'You can add ornaments to the beginning of the component. Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.',
-    Actions: 'Chips can be both clickable and deletable.',
-    All: ''
-  },
-  Autocomplete: {
-    Default: '',
-    ComboBox: 'The value must be chosen from a predefined set of allowed values.',
-    FreeSolo: 'Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search input with suggestions, e.g. Google search or react-autowhatever.',
-    Grouped: 'You can group the options with the `groupBy` prop. If you do so, make sure that the options are also sorted with the same dimension that they are grouped by, otherwise, you will notice duplicate headers.',
-    DisabledOptions: 'Use the `getOptionDisabled` prop to set the disabled state of an option.',
-    MultipleValues: 'Also known as tags, the user is allowed to enter more than one value.',
-    Sizes: 'Use the `size` prop to render smaller inputs.',
-    All: ''
-  },
-  Tooltip: {
-    Default: 'When activated, Tooltips display a text label identifying an element, such as a description of its function.',
-    Position: 'The `Tooltip` has 12 placements choice. They don\'t have directional arrows; instead, they rely on motion emanating from the source to convey direction.',
-    Arrow: 'You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to.',
-    Triggers: 'You can define the types of events that cause a tooltip to show. The touch action requires a long press due to the `enterTouchDelay` prop being set to 700ms by default.',
-    Transitions: 'There are 3 different transition props available: `grow` `fade` and `zoom`',
-    FollowCursor: 'You can enable the tooltip to follow the cursor by setting `followCursor={true}.`',
-    ShowingAndHiding: 'The tooltip is normally shown immediately when the user\'s mouse hovers over the element, and hides immediately when the user\'s mouse leaves. A delay in showing or hiding the tooltip can be added through the `enterDelay` and `leaveDelay` props.',
-    All: ''
-  },
-  List: {
-    Default: '',
-    Basic: 'Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.',
-    Nested: 'List items can easily be nested inside of one another.',
-    Folder: '',
-    SelectedListItem: '',
-    AlignListItems: 'When displaying three lines or more, the avatar is not aligned at the top. You should set the `alignItems="flex-start"` prop to align the avatar at the top, following the Material Design guidelines:',
-    ListControls: 'List controls can include both a primary and secondary action. The primary action is triggered when a user clicks on the list item. The secondary action is triggered when a user clicks on the secondary action element.',
-    StickySubheader: 'Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. This feature relies on CSS sticky positioning.',
-    All: ''
-  },
-  Drawer: {
-    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
-    TemporaryDrawer: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.',
-    PersistentDrawer: 'Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session. When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport.',
-    PermanentDrawer: 'Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.'
-  },
-  Avatar: {
-    Default: 'Hi',
-    ImageAvatars: 'Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component.',
-    LetterAvatars: 'Avatars containing simple characters can be created by passing a string as `children`.',
-    Sizes: 'You can change the size of the avatar using the `sx` prop with height and width properties.',
-    Colors: 'You can use different background colors for the avatar using the `sx` prop with a `bgcolor` property.',
-    IconAvatars: 'Icon avatars are created by passing an icon as `children`.',
-    Variants: 'If you need square or rounded avatars, use the `variant` prop.',
-    Grouped: '`AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars.',
-    TotalAvatars: 'If you need to control the total number of avatars not shown, you can use the `total` prop.',
-    BadgeAvatars: '',
-    All: ''
-  },
-  VerticalNavigation: {
-    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
-    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.',
-    Empty: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
-  },
-  MobileNavigation: {
-    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
-    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
-  },
-  Header: {
-    Default: 'Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.',
-    Overview: 'Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the `Esc` key. It closes when an item is selected, handled by controlling the `open` prop.'
-  }
-}

package/src/lib/assets/Images.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react'
-import { createSvgIcon } from '@mui/material/utils'
-
-export const StreamSuiteLogo = createSvgIcon(
-  <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 447.9 484.8">
-    <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"/>
-  </svg>,
-  'StreamSuite'
-)
-
-export const LearningPoolLogo = createSvgIcon(
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 804 174">
-    <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"/>
-  </svg>,
-  'LearningPool'
-)
-
-export const NotchSVG = createSvgIcon(
-  <svg className='notch-svg'>
-    <clipPath id='notch' clipPathUnits='objectBoundingBox'>
-      <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'></path>
-    </clipPath>
-  </svg>,
-  'Notch'
-)
-
-export const NotchMiniSVG = createSvgIcon(
-  <svg className='notch-mini-svg' width="100%" height="100%" viewBox="0 0 15 26">
-    <path d="M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z"/>
-    <path d="M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z"/>
-  </svg>,
-  'NotchMini'
-)
-
-export const NotchExtendSVG = createSvgIcon(
-  <svg className='notch-extend-svg' viewBox="0 0 22 85" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" />
-  </svg>,
-  'NotchExtend'
-)
-
-export const NotchBackgroundSVG = createSvgIcon(
-  <svg className='notch-background-svg' viewBox="0 0 25 865" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" />
-  </svg>,
-  'NotchBackground'
-)

package/src/lib/assets/stream-suite-logo.svg

@@ -1,38 +0,0 @@
-<svg width="199" height="203" viewBox="0 0 199 203" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="48" y="0" width="116" height="118">
-<path d="M89.5 117.5L48 39L121.5 0L163.5 80.5L89.5 117.5Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask0_121_40535)">
-<path d="M108.125 153.152C102.068 159.877 89.0204 158.715 87.568 142.649L68.767 156.377C76.068 175.816 94.7604 182.131 111.068 177.877C125.876 174.014 135.647 154.052 136.129 142.649C119.538 111.259 108.763 91.4168 101.777 78.8767L96.568 86.8768L99.8756 77.6227C99.8756 77.6227 91.8756 63.2484 89.0204 57.3658C87.3756 53.2484 88.1993 44.834 95.8652 42.2199C108.978 37.7484 115.068 52.3768 115.068 57.3658L134.068 44.8767C123.068 19.8767 101.068 14.8768 81.5378 25.3461C63.304 37.0947 68.767 60.8729 68.767 60.8729C68.767 60.8729 87.9054 95.4522 100.876 120.543L106.876 110.623L102.461 123.623C108.526 135.459 112.867 144.593 112.532 145.884C111.484 149.926 109.158 152.414 108.125 153.152Z" fill="#ffffff"/>
-</g>
-<mask id="mask1_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="30" width="119" height="78">
-<path d="M102 108L80 89.5L126.5 30L174 46.5L198.5 92.5L102 108Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask1_121_40535)">
-<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
-</g>
-<mask id="mask2_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="79" width="85" height="84">
-<path d="M97 163V79H182V163H97Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask2_121_40535)">
-<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
-</g>
-<mask id="mask3_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="85" width="116" height="118">
-<path d="M84.5 202.5L43 124L116.5 85L158.5 165.5L84.5 202.5Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask3_121_40535)">
-<path d="M108.125 154.152C102.068 160.877 89.0204 159.715 87.568 143.649L68.767 157.377C76.068 176.816 94.7604 183.131 111.068 178.877C125.876 175.014 135.647 155.052 136.129 143.649C119.538 112.259 108.763 92.4168 101.777 79.8767L96.568 87.8768L99.8756 78.6227C99.8756 78.6227 91.8756 64.2484 89.0204 58.3658C87.3756 54.2484 88.1993 45.834 95.8652 43.2199C108.978 38.7484 115.068 53.3768 115.068 58.3658L134.068 45.8767C123.068 20.8767 101.068 15.8768 81.5378 26.3461C63.304 38.0947 68.767 61.8729 68.767 61.8729C68.767 61.8729 87.9054 96.4522 100.876 121.543L106.876 111.623L102.461 124.623C108.526 136.459 112.867 145.593 112.532 146.884C111.484 150.926 109.158 153.414 108.125 154.152Z" fill="#ffffff"/>
-</g>
-<mask id="mask4_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="88" width="119" height="78">
-<path d="M96.5 88L118.5 106.5L72 166L24.5 149.5L0 103.5L96.5 88Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask4_121_40535)">
-<path d="M55.1406 132.916C51.2692 130.98 46.461 124.361 50.2358 113.058C50.4347 112.462 50.0652 111.819 49.4542 111.673C43.1861 110.181 37.8988 105.621 35.7147 103.51C35.1945 103.007 34.3076 103.162 34.0259 103.829C26.2326 122.27 28.1933 138.968 42.333 150.67C53.8428 160.195 72.0471 158.202 82.0981 152.798C82.2541 152.714 82.3854 152.583 82.4764 152.431C130.828 71.6707 128.143 72.0377 130.833 68.1699C133.009 65.0415 140.533 61.7699 147.333 66.1699C154.935 71.8856 152.231 80.571 150.568 85.3253C150.352 85.9426 150.778 86.5921 151.427 86.6735C160.247 87.7801 165.695 92.6631 167.817 94.9634C168.315 95.5037 169.232 95.4325 169.544 94.7665C174.558 84.0309 178.382 57.5911 155.641 45.4159C137.009 36.339 119.01 51.2295 117.443 52.574L117.434 52.582C117.36 52.6459 117.335 52.6673 117.283 52.7573C115.585 55.7185 71.2564 132.993 67.333 134.17C62.1406 135.728 59.1406 134.916 55.1406 132.916Z" fill="#ffffff"/>
-</g>
-<mask id="mask5_121_40535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="43" width="85" height="84">
-<path d="M16 127V43H101V127H16Z" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask5_121_40535)">
-<path d="M151.697 119.826C154.719 128.357 144.861 139.052 130.048 132.667L133.548 155.667C155.821 160.167 170.547 149.167 174.832 129.03C179.547 100.167 157.24 90.2953 151.047 90.1669C144.855 90.0385 58.3942 90.9357 58.3942 90.9357C54.8906 89.8938 48.1891 83.6516 49.5475 75.6669C52.0641 60.8736 69.1624 64.7876 73.5475 67.1669C64.855 57.4129 70.855 46.4129 68.9009 45.385C39.355 43.4129 24.855 63.4129 26.682 82.242C28.355 100.185 48.355 109.413 51.8177 110.41C59.855 113.913 141.855 107.413 147.41 112.486C150.464 115.334 151.54 118.566 151.697 119.826Z" fill="#ffffff"/>
-</g>
-</svg>

package/src/lib/components/atoms/Autocomplete/Autocomplete.test.tsx

@@ -1,179 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Autocomplete from './Autocomplete'
-import TextField from '../TextField/TextField'
-
-const testData = ['One', 'Two', 'Three']
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Autocomplete component', () => {
-  it('renders a Autocomplete', () => {
-    render(
-      <Autocomplete
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    expect(screen.getByRole('combobox')).toMatchInlineSnapshot(`
-      <input
-        aria-autocomplete="list"
-        aria-expanded="false"
-        aria-invalid="false"
-        autocapitalize="none"
-        autocomplete="off"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
-        id="combo-box-demo"
-        role="combobox"
-        spellcheck="false"
-        type="text"
-        value=""
-      />
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Autocomplete
-        renderInput={(params) => (
-          <TextField {...params} label="Label" onClick={mockCallBack} />
-        )}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    userEvent.click(screen.getByLabelText('Label'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('properly renders the options on click', () => {
-    render(
-      <Autocomplete
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    // Check that the options are not rendered
-    expect(screen.queryByText('One')).toBeNull()
-
-    // Click on the input and check that the options are rendered
-    userEvent.click(screen.getByLabelText('Label'))
-    expect(screen.getByText('One')).toBeInTheDocument()
-  })
-
-  it('properly renders the options on focus', () => {
-    render(
-      <Autocomplete
-        openOnFocus
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    // Check that the options are not rendered
-    expect(screen.queryByText('One')).toBeNull()
-
-    // Tab to set focus and check that the options are rendered
-    userEvent.tab()
-    expect(screen.getByText('One')).toBeInTheDocument()
-  })
-
-  it('displays a default value', () => {
-    render(
-      <Autocomplete
-        defaultValue={['test']}
-        // Prevents the console.warn
-        // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid#answer-65347275
-        isOptionEqualToValue={(option, value) => option.id === value.id}
-        getOptionLabel={() => 'test'}
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={['test']}
-        sx={{ width: 300 }}
-      />
-    )
-
-    expect(screen.getByLabelText('Label')).toHaveValue('test')
-    expect(screen.getByLabelText('Label')).toBeVisible()
-  })
-
-  it('displays the label text', () => {
-    render(
-      <Autocomplete
-        getOptionLabel={(option) => option}
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    expect(screen.getByLabelText('Label')).toBeVisible()
-  })
-
-  it.skip('has the proper attributes', () => {
-    // Need to revisit this as the selection for the input
-    // is not correct - role and aria-expanded are checking
-    // an incorrect element
-    render(
-      <Autocomplete
-        data-testid="AutocompleteTest"
-        renderInput={(params) => <TextField {...params} label="Label" />}
-        id="combo-box-demo"
-        options={testData}
-        sx={{ width: 300 }}
-      />
-    )
-
-    // Check the default container attributes
-    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
-      'role',
-      'combobox'
-    )
-    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
-      'aria-expanded',
-      'false'
-    )
-
-    // Check the default input attributes
-    expect(screen.getByLabelText('Label')).toHaveAttribute(
-      'aria-invalid',
-      'false'
-    )
-    expect(screen.getByLabelText('Label')).toHaveAttribute(
-      'aria-autocomplete',
-      'list'
-    )
-    expect(screen.getByLabelText('Label')).toHaveAttribute(
-      'autocomplete',
-      'off'
-    )
-
-    // Click the input
-    userEvent.click(screen.getByLabelText('Label'))
-
-    // Check the expanded container attributes
-    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
-      'aria-expanded',
-      'true'
-    )
-    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
-      'aria-owns',
-      'combo-box-demo-listbox'
-    )
-  })
-})

package/src/lib/components/atoms/Autocomplete/Autocomplete.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import MUIAutocomplete, { AutocompleteProps } from '@mui/material/Autocomplete'
-
-interface IAutocompleteProps extends AutocompleteProps<any, true, true, true, 'div'> {}
-
-const Autocomplete = (
-  props: IAutocompleteProps
-): JSX.Element => {
-  return (
-    <MUIAutocomplete {...props} />
-  )
-}
-
-export default Autocomplete

package/src/lib/components/atoms/Button/Button.test.tsx

@@ -1,166 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Button from './Button'
-// import AllCombinations from "./AllCombinations";
-import DeleteIcon from '@mui/icons-material/Delete'
-
-/*
-
-  1. Displays a label
-  2. Conforms to accessibility
-  3. (multiple tests) renders differently based on props
-    a. Renders button with startIcon
-    b. Renders button with endIcon
-  4. Calls a function onClick
-
-*/
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Button component', () => {
-  it('renders button text', () => {
-    render(<Button>Button</Button>)
-
-    expect(screen.getByText(/Button/i)).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        tabindex="0"
-        type="button"
-      >
-        Button
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-  })
-
-  it('renders button with startIcon', () => {
-    render(
-      <Button data-testid="Button" startIcon={<DeleteIcon />}>
-        Button
-      </Button>
-    )
-
-    expect(screen.getByTestId('Button')).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        data-testid="Button"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="DeleteIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-            />
-          </svg>
-        </span>
-        Button
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Button data-testid="Button" onClick={mockCallBack}>
-        Ok!
-      </Button>
-    )
-
-    userEvent.click(screen.getByTestId('Button'))
-
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper aria attributes', () => {
-    const { rerender } = render(<Button>Hello</Button>)
-
-    // button has role="button"
-    let button = screen.getByRole('button')
-    expect(button).not.toHaveAttribute('aria-disabled')
-
-    // isLoading sets aria-disabled="true"
-    // rerender(<Button isLoading>Hello</Button>)
-    // button = screen.getByRole("button")
-    // expect(button).toHaveAttribute("data-loading", "")
-
-    // isDisabled sets aria-disabled="true"
-    rerender(<Button disabled>Hello</Button>)
-    button = screen.getByRole('button')
-    expect(button).toHaveAttribute('disabled', '')
-  })
-
-  it('has the proper type attribute', () => {
-    const { rerender } = render(<Button data-testid="btn">Email</Button>)
-    expect(screen.getByTestId('btn')).toHaveAttribute('type', 'button')
-
-    rerender(
-      <Button data-testid="btn" type="submit">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).toHaveAttribute('type', 'submit')
-
-    rerender(
-      <Button data-testid="btn" component="button">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        data-testid="btn"
-        tabindex="0"
-        type="button"
-      >
-        Email
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-    expect(screen.getByTestId('btn')).toHaveAttribute('type')
-
-    rerender(
-      <Button data-testid="btn" component="span">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).not.toHaveAttribute('type')
-  })
-
-  it('should be disabled', () => {
-    render(
-      <Button disabled data-testid="btn">
-        I'm a invalid button
-      </Button>
-    )
-    const button = screen.getByRole('button')
-    expect(button).toBeDisabled()
-  })
-
-  it('should take up full width', () => {
-    render(
-      <Button fullWidth data-testid="btn">
-        i'm a big button
-      </Button>
-    )
-    expect(screen.getByRole('button')).toHaveStyle('width: 100%')
-  })
-})

package/src/lib/components/atoms/Button/Button.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import MUIButton, { ButtonProps } from '@mui/material/Button'
-
-const Button = React.forwardRef((
-  props: ButtonProps,
-  ref: React.Ref<HTMLButtonElement>
-): JSX.Element => (
-  <MUIButton
-    disableElevation
-    variant='contained'
-    {...props}
-    ref={ref}
-  />
-))
-
-export default Button