Update literally everything

src/App.scss

@@ -89,6 +89,5 @@ $nitro-guide-tool-width: 250px;
 }
 
 @import './common';
-@import "./layout/Layout";
 @import './components';
 @import "./views/Styles";

src/App.tsx

@@ -1,14 +1,13 @@
 import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
-import { Base } from './common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/main/MainView';
 import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
 import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
-import { TransitionAnimation, TransitionAnimationTypes } from './layout';
 
 export const App: FC<{}> = props =>
 {

src/api/utils/index.ts

@@ -4,4 +4,5 @@ export * from './LocalizeBageName';
 export * from './LocalizeFormattedNumber';
 export * from './LocalizeShortNumber';
 export * from './LocalizeText';
+export * from './PlaySound';
 export * from './Randomizer';

src/common/card/NitroCardContentView.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
-import { Column, ColumnProps } from '../../../common';
+import { Column, ColumnProps } from '..';
-import { useNitroCardContext } from '../context';
+import { useNitroCardContext } from './NitroCardContext';
 
 export const NitroCardContentView: FC<ColumnProps> = props =>
 {

src/common/card/NitroCardContext.tsx

@@ -1,12 +1,17 @@
-import { createContext, FC, useContext } from 'react';
+import { createContext, FC, ProviderProps, useContext } from 'react';
-import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
+
+interface INitroCardContext
+{
+    theme: string;
+    simple: boolean;
+}
 
 const NitroCardContext = createContext<INitroCardContext>({
     theme: null,
     simple: false
 });
 
-export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>
+export const NitroCardContextProvider: FC<ProviderProps<INitroCardContext>> = props =>
 {
     return <NitroCardContext.Provider value={ props.value }>{ props.children }</NitroCardContext.Provider>
 }

src/common/card/NitroCardHeaderView.tsx

@@ -0,0 +1,46 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, MouseEvent, useCallback, useMemo } from 'react';
+import { Base, Column, ColumnProps, Flex } from '..';
+import { useNitroCardContext } from './NitroCardContext';
+
+interface NitroCardHeaderViewProps extends ColumnProps
+{
+    headerText: string;
+    theme?: string;
+    noCloseButton?: boolean;
+    onCloseClick: (event: MouseEvent) => void;
+}
+
+export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
+{
+    const { headerText = null, noCloseButton = false, onCloseClick = null, overflow = 'hidden', justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { simple = false } = useNitroCardContext();
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'drag-handler', 'container-fluid', 'nitro-card-header' ];
+
+        if(simple) newClassNames.push('bg-tertiary-split');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ simple, classNames ]);
+
+    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
+    {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    }, []);
+
+    return (
+        <Column center overflow={ overflow } classNames={ getClassNames } { ...rest }>
+            <Flex fullWidth center position="relative">
+                <span className="nitro-card-header-text">{ headerText }</span>
+                <Base position="absolute" className="header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
+                    <FontAwesomeIcon icon="times" />
+                </Base>
+            </Flex>
+        </Column>
+    );
+}

src/common/card/NitroCardSubHeaderView.tsx

@@ -1,5 +1,5 @@
 import { FC, useMemo } from 'react';
-import { Flex, FlexProps } from '../../../common';
+import { Flex, FlexProps } from '..';
 
 export const NitroCardSubHeaderView: FC<FlexProps> = props =>
 {
@@ -14,7 +14,5 @@ export const NitroCardSubHeaderView: FC<FlexProps> = props =>
         return newClassNames;
     }, [ classNames ]);
 
-    return (
+    return <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />;
-        <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />
-    );
 }

src/common/card/NitroCardView.scss

@@ -0,0 +1,124 @@
+$nitro-card-header-height: 33px;
+$nitro-card-tabs-height: 33px;
+
+.nitro-card {
+    resize: both;
+
+    @include media-breakpoint-down(lg) {
+        max-width: 100vw !important;
+        max-height: 100vh !important;
+    }
+
+    &.theme-primary {
+        border: $border-width solid $border-color;
+
+        .nitro-card-header {
+            min-height: 33px;
+            max-height: 33px;
+            background-color: $primary;
+
+            &.bg-tertiary-split {
+                position: relative;
+                border-bottom: 2px solid darken($quaternary, 5);
+                box-shadow: 0 2px white;
+                width: 100%;
+                margin: 0;
+        
+                &:before {
+                    position: absolute;
+                    content: " ";
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background-color: rgba($white, 0.3);
+                }
+            }
+
+            .nitro-card-header-text {
+                color: $white;
+                text-shadow: 0px 4px 4px rgba($black, 0.25);
+                @include font-size($h4-font-size);
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: $secondary;
+        }
+
+        .content-area {
+            background-color: $light;
+        }
+    }
+}
+
+.content-area {
+    height: 100%;
+    padding-top: $container-padding-x;
+    padding-bottom: $container-padding-x;
+    overflow: auto;
+
+    &.theme-dark {
+        background-color: #1C323F !important;
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .content-area {
+        height: 100% !important;
+        min-height: auto !important;
+        max-height: 100% !important;
+    }
+}
+
+.nitro-card-header {
+    height: 100%;
+
+    .header-close {
+        right: 6px;
+        border-radius: $border-radius;
+        box-shadow: 0 0 0 1.5px $white;
+        border: 2px solid #921911;
+        background: repeating-linear-gradient(
+            rgba(245, 80, 65, 1),
+            rgba(245, 80, 65, 1) 50%,
+            rgba(194, 48, 39, 1) 50%,
+            rgba(194, 48, 39, 1) 100%
+        );
+        cursor: pointer;
+        line-height: 1;
+        padding: 1px 3px;
+
+        &:hover {
+            filter: brightness(1.2);
+        }
+
+        &:active {
+            filter: brightness(0.8);
+        }
+    }
+}
+
+.nitro-card-tabs {
+    min-height: $nitro-card-tabs-height;
+    max-height: $nitro-card-tabs-height;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+}
+
+.nitro-card-accordion {
+    display: flex;
+    height: 100%;
+}
+
+.nitro-card-accordion-set {
+
+    &.active {
+        height: 100%;
+        background: rgba($white, 0.5);
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+
+    .nitro-card-accordion-set-header {
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+}

src/common/card/NitroCardView.tsx

@@ -0,0 +1,36 @@
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '..';
+import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
+import { NitroCardContextProvider } from './NitroCardContext';
+
+export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
+{
+    simple?: boolean;
+    theme?: string;
+}
+
+export const NitroCardView: FC<NitroCardViewProps> = props =>
+{
+    const { simple = false, theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-card', 'rounded', 'shadow', ];
+
+        if(simple) newClassNames.push('bg-tertiary-split');
+
+        newClassNames.push(`theme-${ theme || 'primary' }`);
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ simple, theme, classNames ]);
+
+    return (
+        <NitroCardContextProvider value={ { theme, simple } }>
+            <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
+                <Column overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
+            </DraggableWindow>
+        </NitroCardContextProvider>
+    );
+}

src/common/card/accordion/NitroCardAccordionItemView.tsx

@@ -0,0 +1,22 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardAccordionItemView: FC<FlexProps> = props =>
+{
+    const { alignItems = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'px-2, py-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Flex alignItems={ alignItems } gap={ gap } classNames={ getClassNames } { ...rest }>
+            { children }
+        </Flex>
+    );
+}

src/common/card/accordion/NitroCardAccordionSetView.tsx

@@ -1,9 +1,13 @@
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { NitroLayoutFlex } from '../../..';
+import { Base, BaseProps, Flex } from '../..';
-import { NitroLayoutBase } from '../../../base';
+import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
-import { useNitroCardAccordionContext } from '../NitroCardAccordionContext';
+
-import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types';
+interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement>
+{
+    headerText: string;
+    isExpanded?: boolean;
+}
 
 export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
 {
@@ -80,18 +84,18 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
     }, [ close, setClosers ]);
 
     return (
-        <NitroLayoutBase className={ getClassName } { ...rest }>
+        <Base className={ getClassName } { ...rest }>
-            <NitroLayoutFlex className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
+            <Flex className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
                 <div className="w-100">
                     { headerText }
                 </div>
                 <div className="justify-self-center">
                     <i className={ 'fas fa-caret-' + (isOpen ? 'up' : 'down') } />
                 </div>
-            </NitroLayoutFlex>
+            </Flex>
-            <NitroLayoutBase className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
+            <Base className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
                 { children }
-            </NitroLayoutBase>
+            </Base>
-        </NitroLayoutBase>
+        </Base>
     );
 }

src/common/card/accordion/NitroCardAccordionView.tsx

@@ -1,7 +1,11 @@
 import { FC, useCallback, useMemo, useState } from 'react';
-import { NitroLayoutFlexColumn } from '../..';
+import { Column, ColumnProps } from '../..';
 import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
-import { NitroCardAccordionViewProps } from './NitroCardAccordionView.types';
+
+interface NitroCardAccordionViewProps extends ColumnProps
+{
+    
+}
 
 export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
 {
@@ -24,9 +28,9 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
 
     return (
         <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
-            <NitroLayoutFlexColumn className={ getClassName } { ...rest }>
+            <Column className={ getClassName } { ...rest }>
                 { children }
-            </NitroLayoutFlexColumn>
+            </Column>
         </NitroCardAccordionContextProvider>
     );
 }

src/common/card/accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './NitroCardAccordionContext';
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionSetView';
+export * from './NitroCardAccordionView';

src/common/card/index.ts

@@ -0,0 +1,7 @@
+export * from './accordion';
+export * from './NitroCardContentView';
+export * from './NitroCardContext';
+export * from './NitroCardHeaderView';
+export * from './NitroCardSubHeaderView';
+export * from './NitroCardView';
+export * from './tabs';

src/common/card/tabs/NitroCardTabsItemView.tsx

@@ -1,7 +1,13 @@
 import classNames from 'classnames';
-import { FC } from 'react';
+import { FC, MouseEventHandler } from 'react';
-import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
+import { ItemCountView } from '../../../views/shared/item-count/ItemCountView';
-import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types';
+
+interface NitroCardTabsItemViewProps
+{
+    isActive?: boolean;
+    count?: number;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+}
 
 export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
 {

src/common/card/tabs/NitroCardTabsView.tsx

@@ -0,0 +1,24 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardTabsView: FC<FlexProps> = props =>
+{
+    const { justifyContent = 'center', classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
+            <ul className="nav nav-tabs border-0 gap-1">
+                { children }
+            </ul>
+        </Flex>
+    );
+}

src/common/card/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroCardTabsItemView';
+export * from './NitroCardTabsView';

src/common/draggable-window/DraggableWindow.tsx

@@ -1,25 +1,27 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { DetailedHTMLProps, FC, HTMLAttributes, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Base } from '..';
 import { BatchUpdates } from '../../hooks';
-import { DraggableWindowPosition } from './DraggableWindow.types';
+import { DraggableWindowPosition } from './DraggableWindowPosition';
 
 const CURRENT_WINDOWS: HTMLElement[] = [];
 const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;
 
-export interface DraggableWindowProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+export interface DraggableWindowProps
 {
     uniqueKey?: Key;
     handleSelector?: string;
-    position?: string;
+    windowPosition?: string;
     disableDrag?: boolean;
+    dragStyle?: CSSProperties
 }
 
 export const DraggableWindow: FC<DraggableWindowProps> = props =>
 {
-    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null, ...rest } = props;
+    const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null } = props;
     const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
     const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
     const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
@@ -170,7 +172,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
         let offsetX = 0;
         let offsetY = 0;
 
-        switch(position)
+        switch(windowPosition)
         {
             case DraggableWindowPosition.TOP_CENTER:
                 element.style.top = '50px';
@@ -205,7 +207,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
 
             if(index >= 0) CURRENT_WINDOWS.splice(index, 1);
         }
-    }, [ handleSelector, position, uniqueKey, disableDrag, bringToTop ]);
+    }, [ handleSelector, windowPosition, uniqueKey, disableDrag, bringToTop ]);
 
     useEffect(() =>
     {
@@ -253,8 +255,8 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
 
     return (
         createPortal(
-        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } { ...rest }>
+        <Base position="absolute" innerRef={ elementRef } className="draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } style={ dragStyle }>
             { children }
-        </div>, document.getElementById('draggable-windows-container'))
+        </Base>, document.getElementById('draggable-windows-container'))
     );
 }

src/common/draggable-window/index.ts

@@ -0,0 +1,2 @@
+export * from './DraggableWindow';
+export * from './DraggableWindowPosition';

src/common/index.scss

@@ -44,3 +44,213 @@
         }
     }
 }
+
+.nitro-room-thumbnail-camera {
+    width: 132px;
+    height: 192px;
+    background-image: url('../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
+
+    .camera-frame {
+        position: absolute;
+        width: 110px;
+        height: 110px;
+        margin-top: 38px;
+        margin-left: 3px;
+    }
+}
+
+.nitro-layout-trophy {
+    position: relative;
+    width: 340px;
+    height: 173px;
+    color: black;
+    pointer-events: all;
+    
+    background-position: 0px 0px;
+    background-image: url('../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
+    
+    &.trophy-2 {
+        background-position: 0px 173px;
+    }
+
+    &.trophy-3 {
+        background-position: 0px 346px;
+    }
+
+    .trophy-header {
+        .trophy-close {
+            position: absolute;
+            cursor: pointer;
+            width: 15px;
+            height: 15px;
+            top: 5px;
+            right: 5px;
+        }
+
+        .trophy-title {
+            padding-top: 3px;
+        }
+    }
+
+    .trophy-content {
+        width: 297px;
+        height: 110px;
+        margin-top: 3px;
+        margin-left: 23px;
+        white-space: pre-wrap;
+    }
+
+    .trophy-footer {
+        width: 297px;
+        margin-top: 5px;
+        margin-left: 23px;
+    }
+}
+
+.nitro-gift-card {
+    width: 306px;
+    height: 159px;
+    background: url('../assets/images/gift/gift_tag.png') center no-repeat;
+
+    .gift-face {
+        width: 65px;
+
+        .gift-incognito {
+            width: 37px;
+            height: 48px;
+            background: url('../assets/images/gift/incognito.png') center no-repeat;
+        }
+
+        .gift-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 40px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                left: -25px;
+                top: -20px;
+            }
+        }
+    }
+
+    .gift-message {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 90px;
+        min-height: 90px;
+        max-height: 90px;
+        border: none;
+        resize: none;
+        outline: none;
+        line-height: 17px;
+    }
+}
+
+.spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .spinner {
+        margin: 2px;
+        width: 10px;
+        height: 10px;
+        border: $border-width solid $white;
+        background-color: rgba($white, 0.8);
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+
+        &:nth-child(1) {
+            -webkit-animation-delay: -0.32s;
+            animation-delay: -0.32s;
+        }
+
+        &:nth-child(2) {
+            -webkit-animation-delay: -0.16s;
+            animation-delay: -0.16s;
+        }
+    }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+}
+  
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% { 
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% { 
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+}
+
+.room-thumbnail {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    background: url("../assets/images/navigator/thumbnail_placeholder.png") no-repeat center;
+    background-color: rgba($black, .125);
+}
+
+.nitro-alert {
+    width: 350px;
+
+    .content-area {
+        min-height: 125px;
+        max-height: 300px;
+    }
+}
+
+.nitro-notification-bubble {
+    pointer-events: all;
+    padding: 6px 5px;
+    background-color: rgba($dark,.95);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    font-size: $font-size-sm;
+    margin-bottom: 5px;
+
+    .bubble-image {
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        object-fit: none;
+        margin-right: 5px;
+    }
+}
+
+#draggable-windows-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+
+    @include media-breakpoint-down(lg) {
+        display: flex;
+        justify-content: center;
+
+        .draggable-window {
+            top: unset !important;
+            left: unset !important;
+            transform: none !important;
+        }
+    }
+
+    .draggable-window {
+        display: inline-block;
+        visibility: hidden;
+        pointer-events: all;
+    }
+}
+
+@import './card/NitroCardView';

src/common/index.ts

@@ -2,7 +2,11 @@ export * from './AutoGrid';
 export * from './Base';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './card';
+export * from './card/accordion';
+export * from './card/tabs';
 export * from './Column';
+export * from './draggable-window';
 export * from './Flex';
 export * from './FormGroup';
 export * from './Grid';
@@ -10,5 +14,6 @@ export * from './GridContext';
 export * from './HorizontalRule';
 export * from './layout';
 export * from './Text';
+export * from './transitions';
 export * from './types';
 export * from './utils';

src/common/layout/LayoutGiftTagView.tsx

@@ -1,9 +1,17 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../api';
 import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
-import { NitroLayoutGiftCardViewProps } from './NitroLayoutGiftCardView.types';
 
-export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =>
+interface LayoutGiftTagViewProps
+{
+    figure?: string;
+    userName?: string;
+    message?: string;
+    editable?: boolean;
+    onChange?: (value: string) => void;
+}
+
+export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
 {
     const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
     

src/common/layout/LayoutLoadingSpinnerView.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Base, BaseProps } from '../Base';
+
+export const LayoutLoadingSpinnerView: FC<BaseProps<HTMLDivElement>> = props =>
+{
+    const { ...rest } = props;
+    
+    return (
+        <Base classNames={ [ 'spinner-container' ] } { ...rest } >
+            <Base className="spinner" />
+            <Base className="spinner" />
+            <Base className="spinner" />
+        </Base>
+    );
+}

src/common/layout/LayoutMiniCameraView.tsx

@@ -1,11 +1,17 @@
-import { NitroRectangle } from '@nitrots/nitro-renderer';
+import { NitroRectangle, NitroRenderTexture } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../api';
 import { CAMERA_SHUTTER, PlaySound } from '../../api/utils/PlaySound';
 import { DraggableWindow } from '../draggable-window';
-import { NitroLayoutMiniCameraViewProps } from './NitroLayoutMiniCameraView.types';
 
-export const NitroLayoutMiniCameraView: FC<NitroLayoutMiniCameraViewProps> = props =>
+interface LayoutMiniCameraViewProps
+{
+    roomId: number;
+    textureReceiver: (texture: NitroRenderTexture) => void;
+    onClose: () => void;
+}
+
+export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
 {
     const { roomId = -1, textureReceiver = null, onClose = null } = props;
     const elementRef = useRef<HTMLDivElement>();

src/common/layout/LayoutNotificationAlertView.tsx

@@ -0,0 +1,31 @@
+import { FC, useMemo } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
+
+interface LayoutNotificationAlertViewProps extends NitroCardViewProps
+{
+    title: string;
+    close: () => void;
+}
+
+export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
+{
+    const { title = '', close = null, simple = true, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-alert' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <NitroCardView classNames={ getClassNames } simple={ simple } { ...rest }>
+            <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
+            <NitroCardContentView justifyContent="between" className="text-black">
+                { children }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/common/layout/LayoutNotificationBubbleView.tsx

@@ -1,15 +1,15 @@
 import { FC, useEffect, useMemo, useState } from 'react';
-import { Base, BaseProps } from '../../common';
+import { Base, BaseProps } from '..';
 import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
 
-interface NotificationBubbleViewProps extends BaseProps<HTMLDivElement>
+interface LayoutNotificationBubbleViewProps extends BaseProps<HTMLDivElement>
 {
     fadesOut?: boolean;
     timeoutMs?: number;
     close: () => void;
 }
 
-export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
+export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps> = props =>
 {
     const { fadesOut = true, timeoutMs = 8000, close = null, classNames = [], ...rest } = props;
     const [ isVisible, setIsVisible ] = useState(false);

src/common/layout/LayoutRoomThumbnailView.tsx

@@ -1,14 +1,14 @@
 import { FC, useMemo } from 'react';
 import { GetConfiguration } from '../../api';
-import { Base, BaseProps } from '../../common/Base';
+import { Base, BaseProps } from '../Base';
 
-export interface RoomThumbnailViewProps extends BaseProps<HTMLDivElement>
+export interface LayoutRoomThumbnailViewProps extends BaseProps<HTMLDivElement>
 {
     roomId?: number;
     customUrl?: string;
 }
 
-export const RoomThumbnailView: FC<RoomThumbnailViewProps> = props =>
+export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =>
 {
     const { roomId = -1, customUrl = null, shrink = true, overflow = 'hidden', classNames = [], children = null, ...rest } = props;
 

src/common/layout/LayoutTrophyView.tsx

@@ -1,9 +1,18 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../api';
 import { DraggableWindow } from '../draggable-window';
-import { NitroLayoutTrophyViewProps } from './NitroLayoutTrophyView.types';
 
-export const NitroLayoutTrophyView: FC<NitroLayoutTrophyViewProps> = props =>
+interface LayoutTrophyViewProps
+{
+    color: string;
+    message: string;
+    date: string;
+    senderName: string;
+    customTitle?: string;
+    onCloseClick: () => void;
+}
+
+export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
 {
     const { color = '', message = '', date = '', senderName = '', customTitle = null, onCloseClick = null } = props;
 

src/common/layout/UserProfileIconView.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
 import { GetUserProfile } from '../../api';
-import { Base, BaseProps } from '../../common/Base';
+import { Base, BaseProps } from '../Base';
 
 export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
 {

src/common/layout/index.ts

@@ -1,2 +1,10 @@
+export * from './LayoutGiftTagView';
 export * from './LayoutGridItem';
 export * from './LayoutImage';
+export * from './LayoutLoadingSpinnerView';
+export * from './LayoutMiniCameraView';
+export * from './LayoutNotificationAlertView';
+export * from './LayoutNotificationBubbleView';
+export * from './LayoutRoomThumbnailView';
+export * from './LayoutTrophyView';
+export * from './UserProfileIconView';

src/common/transitions/TransitionAnimation.tsx

@@ -1,8 +1,15 @@
 import { FC, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
-import { TransitionAnimationProps } from './TransitionAnimation.types';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
 
+interface TransitionAnimationProps
+{
+    type: string;
+    inProp: boolean;
+    timeout?: number;
+    className?: string;
+}
+
 export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
 {
     const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;

src/common/transitions/TransitionAnimationStyles.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { TransitionStatus } from 'react-transition-group';
 import { ENTERING, EXITING } from 'react-transition-group/Transition';
-import { TransitionAnimationTypes } from './TransitionAnimation.types';
+import { TransitionAnimationTypes } from './TransitionAnimationTypes';
 
 export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
 {

src/common/transitions/TransitionAnimationTypes.ts

@@ -1,11 +1,3 @@
-export interface TransitionAnimationProps
-{
-    type: string;
-    inProp: boolean;
-    timeout?: number;
-    className?: string;
-}
-
 export class TransitionAnimationTypes
 {
     public static BOUNCE: string = 'bounce';

src/common/transitions/index.ts

@@ -1,3 +1,3 @@
 export * from './TransitionAnimation';
-export * from './TransitionAnimation.types';
 export * from './TransitionAnimationStyles';
+export * from './TransitionAnimationTypes';

src/components/achievements/AchievementsView.tsx

@@ -1,6 +1,7 @@
 import { AchievementData, AchievementEvent, AchievementsEvent, AchievementsScoreEvent, RequestAchievementsMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView } from '../../common';
 import { Base } from '../../common/Base';
 import { Column } from '../../common/Column';
 import { Flex } from '../../common/Flex';
@@ -8,8 +9,6 @@ import { Text } from '../../common/Text';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView } from '../../layout';
-import { NitroLayoutBase } from '../../layout/base';
 import { AchievementCategory } from './common/AchievementCategory';
 import { AchievementUtilities } from './common/AchievementUtilities';
 import { AchievementsCategoryListView } from './views/category-list/AchievementsCategoryListView';
@@ -220,7 +219,7 @@ export const AchievementsView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
             { getSelectedCategory &&
                 <NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
-                    <NitroLayoutBase onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
+                    <Base onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
                     <Column grow gap={ 0 }>
                         <Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ getSelectedCategory.code }.name`) }</Text>
                         <Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }</Text>

src/components/avatar-editor/AvatarEditorView.tsx

@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Button } from '../../common/Button';
 import { ButtonGroup } from '../../common/ButtonGroup';
 import { Column } from '../../common/Column';
@@ -9,7 +10,6 @@ import { Grid } from '../../common/Grid';
 import { AvatarEditorEvent } from '../../events/avatar-editor';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { AvatarEditorAction } from './common/AvatarEditorAction';
 import { AvatarEditorUtilities } from './common/AvatarEditorUtilities';
 import { BodyModel } from './common/BodyModel';

src/components/camera/views/capture/CameraWidgetCaptureView.tsx

@@ -1,11 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
-import { GetRoomEngine, GetRoomSession, LocalizeText } from '../../../../api';
+import { CAMERA_SHUTTER, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound } from '../../../../api';
-import { CAMERA_SHUTTER, PlaySound } from '../../../../api/utils/PlaySound';
+import { Column, DraggableWindow, Flex } from '../../../../common';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { DraggableWindow } from '../../../../layout';
 import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useCameraWidgetContext } from '../../CameraWidgetContext';
 import { CameraPicture } from '../../common/CameraPicture';

src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx

@@ -1,14 +1,9 @@
 import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetRoomEngine, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
+import { Button, Column, Flex, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { LayoutImage } from '../../../../common/layout/LayoutImage';
-import { Text } from '../../../../common/Text';
 import { InventoryEvent } from '../../../../events';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
 
 export interface CameraWidgetCheckoutViewProps

src/components/camera/views/editor/CameraWidgetEditorView.tsx

@@ -3,14 +3,7 @@ import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RoomCameraWid
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetRoomCameraWidgetManager, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
+import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
-import { ButtonGroup } from '../../../../common/ButtonGroup';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { Grid } from '../../../../common/Grid';
-import { LayoutImage } from '../../../../common/layout/LayoutImage';
-import { Text } from '../../../../common/Text';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { CameraEditorTabs } from '../../common/CameraEditorTabs';
 import { CameraPicture } from '../../common/CameraPicture';
 import { CameraPictureThumbnail } from '../../common/CameraPictureThumbnail';

src/components/catalog/CatalogView.tsx

@@ -2,13 +2,13 @@ import { FrontPageItem, GetCatalogIndexComposer, GetCatalogPageComposer, GetClub
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { CREDITS, PlaySound } from '../../api/utils/PlaySound';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Column } from '../../common/Column';
 import { Grid } from '../../common/Grid';
 import { CatalogPurchasedEvent } from '../../events';
 import { BatchUpdates } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { CatalogContextProvider } from './CatalogContext';
 import { CatalogMessageHandler } from './CatalogMessageHandler';
 import { CatalogPage } from './common/CatalogPage';

src/components/catalog/views/gift/CatalogGiftView.tsx

@@ -3,17 +3,10 @@ import { PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../api';
-import { Base } from '../../../../common/Base';
+import { Base, Button, ButtonGroup, Column, Flex, FormGroup, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { Button } from '../../../../common/Button';
-import { ButtonGroup } from '../../../../common/ButtonGroup';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { FormGroup } from '../../../../common/FormGroup';
-import { Text } from '../../../../common/Text';
 import { CatalogEvent, CatalogPurchasedEvent } from '../../../../events';
 import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
 import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../../views/shared/furni-image/FurniImageView';
 import { useCatalogContext } from '../../CatalogContext';
@@ -184,7 +177,7 @@ export const CatalogGiftView: FC<{}> = props =>
                     { receiverNotFound &&
                         <Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
                 </FormGroup>
-                <NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
+                <LayoutGiftTagView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
                 <Base className="form-check">
                     <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
                     <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>

src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx

@@ -7,12 +7,12 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
+import { LayoutLoadingSpinnerView } from '../../../../../common/layout/LayoutLoadingSpinnerView';
 import { Text } from '../../../../../common/Text';
 import { CatalogPurchasedEvent, CatalogPurchaseFailureEvent } from '../../../../../events';
 import { CatalogEvent } from '../../../../../events/catalog/CatalogEvent';
 import { useUiEvent } from '../../../../../hooks';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
-import { LoadingSpinnerView } from '../../../../../layout/loading-spinner/LoadingSpinnerView';
 import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { GLOBAL_PURSE } from '../../../../purse/PurseView';
@@ -131,7 +131,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
             case CatalogPurchaseState.CONFIRM:
                 return <Button fullWidth variant="warning" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
             case CatalogPurchaseState.PURCHASE:
-                return <Button fullWidth variant="primary" size="sm" disabled><LoadingSpinnerView /></Button>;
+                return <Button fullWidth variant="primary" size="sm" disabled><LayoutLoadingSpinnerView /></Button>;
             case CatalogPurchaseState.FAILED:
                 return <Button fullWidth variant="danger" size="sm" disabled>{ LocalizeText('generic.failed') }</Button>;
             case CatalogPurchaseState.NONE:

src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx

@@ -1,15 +1,9 @@
 import { ImageResult, MakeOfferMessageComposer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../../../api';
-import { Base } from '../../../../../../common/Base';
+import { Base, Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
-import { Button } from '../../../../../../common/Button';
+import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
-import { Column } from '../../../../../../common/Column';
-import { Grid } from '../../../../../../common/Grid';
-import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
-import { Text } from '../../../../../../common/Text';
-import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events/catalog/CatalogPostMarketplaceOfferEvent';
 import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
 import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
 import { useCatalogContext } from '../../../../CatalogContext';

src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx

@@ -1,13 +1,9 @@
 import { PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetClubMemberLevel, LocalizeText } from '../../../../../api';
-import { Button } from '../../../../../common/Button';
+import { Button, LayoutLoadingSpinnerView } from '../../../../../common';
-import { CatalogEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent } from '../../../../../events';
+import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogWidgetEvent } from '../../../../../events';
-import { CatalogInitGiftEvent } from '../../../../../events/catalog/CatalogInitGiftEvent';
-import { CatalogInitPurchaseEvent } from '../../../../../events/catalog/CatalogInitPurchaseEvent';
-import { CatalogWidgetEvent } from '../../../../../events/catalog/CatalogWidgetEvent';
 import { dispatchUiEvent, SendMessageHook, useUiEvent } from '../../../../../hooks';
-import { LoadingSpinnerView } from '../../../../../layout';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
@@ -162,7 +158,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
             case CatalogPurchaseState.CONFIRM:
                 return <Button onClick={ event => purchase() }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
             case CatalogPurchaseState.PURCHASE:
-                return <Button disabled><LoadingSpinnerView /></Button>;
+                return <Button disabled><LayoutLoadingSpinnerView /></Button>;
             case CatalogPurchaseState.FAILED:
                 return <Button variant="danger">{ LocalizeText('generic.failed') }</Button>;
             case CatalogPurchaseState.SOLD_OUT:

src/components/chat-history/ChatHistoryView.tsx

@@ -3,9 +3,8 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
 import { RenderedRows } from 'react-virtualized/dist/es/List';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Flex, Text } from '../../common';
+import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { BatchUpdates } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ChatHistoryContextProvider } from './ChatHistoryContext';
 import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
 import { ChatEntryType } from './common/ChatEntryType';

src/components/groups/views/GroupCreatorView.tsx

@@ -1,9 +1,8 @@
 import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { HasHabboClub, LocalizeText } from '../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../common';
+import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { IGroupData } from '../common/IGroupData';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';

src/components/groups/views/GroupInformationStandaloneView.tsx

@@ -1,8 +1,8 @@
 import { GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { GroupInformationView } from './GroupInformationView';
 
 export const GroupInformationStandaloneView: FC<{}> = props =>

src/components/groups/views/GroupManagerView.tsx

@@ -1,9 +1,8 @@
 import { GroupBadgePart, GroupInformationEvent, GroupSettingsEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Column, Flex, Text } from '../../../common';
+import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../layout';
 import { IGroupData } from '../common/IGroupData';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';

src/components/groups/views/GroupMembersView.tsx

@@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../api';
-import { Base, Button, Column, Flex, Grid, Text } from '../../../common';
+import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';

src/components/groups/views/GroupRoomInformationView.tsx

@@ -5,7 +5,6 @@ import { GetGroupInformation, GetSessionDataManager, LocalizeText, TryJoinGroup
 import { GetGroupManager } from '../../../api/groups/GetGroupManager';
 import { Base, Button, Column, Flex, Text } from '../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NotificationBubbleView } from '../../../layout';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 import { GroupMembershipType } from '../common/GroupMembershipType';
@@ -120,7 +119,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
     if(!groupInformation) return null;
 
     return (
-        <NotificationBubbleView fadesOut={ false } close={ null }>
+        <Base className="nitro-notification-bubble rounded">
             <Column>
                 <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
@@ -141,6 +140,6 @@ export const GroupRoomInformationView: FC<{}> = props =>
                             }
                     </> }
             </Column>
-        </NotificationBubbleView>
+        </Base>
     );
 };

src/components/guide-tool/GuideToolView.tsx

@@ -1,9 +1,9 @@
 import { GuideOnDutyStatusMessageEvent, GuideSessionAttachedMessageEvent, GuideSessionDetachedMessageEvent, GuideSessionEndedMessageEvent, GuideSessionInvitedToGuideRoomMessageEvent, GuideSessionMessageMessageEvent, GuideSessionOnDutyUpdateMessageComposer, GuideSessionPartnerIsTypingMessageEvent, GuideSessionStartedMessageEvent, ILinkEventTracker, PerkAllowancesMessageEvent, PerkEnum } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetConfiguration, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { GuideToolEvent, NotificationAlertEvent } from '../../events';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { GuideSessionState } from './common/GuideSessionState';
 import { GuideToolMessage } from './common/GuideToolMessage';
 import { GuideToolMessageGroup } from './common/GuideToolMessageGroup';

src/components/guide-tool/views/GuideToolOngoingView.tsx

@@ -4,7 +4,6 @@ import { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../api';
 import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroLayoutBase } from '../../../layout/base';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';
 
@@ -101,9 +100,9 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                         { group.messages.map((chat, index) => <Base key={ index } className="text-break">{ chat.message }</Base>) }
                                     </Base>
                                     { (isOwnChat(group.userId)) &&
-                                        <NitroLayoutBase className="message-avatar flex-shrink-0">
+                                        <Base className="message-avatar flex-shrink-0">
                                             <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                        </NitroLayoutBase> }
+                                        </Base> }
                                 </Flex>
                             );
                         }) } 

src/components/help/HelpView.tsx

@@ -1,10 +1,9 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Base, Column, Grid } from '../../common';
+import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
 import { useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { IHelpReportState } from './common/IHelpReportState';
 import { HelpContextProvider } from './HelpContext';
 import { HelpMessageHandler } from './HelpMessageHandler';

src/components/help/views/SanctionStatusView.tsx

@@ -1,9 +1,8 @@
 import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Button, Column, Grid } from '../../../common';
+import { Base, Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 
 export const SanctionSatusView:FC<{}> = props =>
 {

src/components/help/views/name-change/NameChangeView.tsx

@@ -1,8 +1,8 @@
 import { FC, useCallback, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { HelpNameChangeEvent } from '../../../../events/help/HelpNameChangeEvent';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { HelpNameChangeEvent } from '../../../../events';
 import { useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { NameChangeConfirmationView } from './NameChangeConfirmationView';
 import { NameChangeInitView } from './NameChangeInitView';
 import { NameChangeInputView } from './NameChangeInputView';

src/components/inventory/InventoryView.tsx

@@ -1,12 +1,12 @@
 import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { InventoryBadgesUpdatedEvent, InventoryEvent, InventoryTradeRequestEvent } from '../../events';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities';
 import { TradeState } from './common/TradeState';
 import { IUnseenItemTracker } from './common/unseen/IUnseenItemTracker';

src/components/main/MainView.tsx

@@ -1,9 +1,8 @@
 import { HabboWebTools, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
-import { Base } from '../../common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
-import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { CampaignView } from '../../views/campaign/CampaignView';
 import { FloorplanEditorView } from '../../views/floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../../views/friends/FriendsView';

src/components/mod-tools/ModToolsView.tsx

@@ -2,14 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
-import { Button } from '../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ModToolsContextProvider } from './ModToolsContext';
 import { ModToolsMessageHandler } from './ModToolsMessageHandler';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';

src/components/mod-tools/views/room/ModToolsChatlogView.tsx

@@ -1,7 +1,7 @@
 import { ChatRecordData, GetRoomChatlogMessageComposer, RoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';
 
 interface ModToolsChatlogViewProps

src/components/mod-tools/views/room/ModToolsRoomView.tsx

@@ -1,11 +1,10 @@
 import { GetModeratorRoomInfoMessageComposer, ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModeratorRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { TryVisitRoom } from '../../../../api';
-import { Button, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { BatchUpdates, dispatchUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 
 interface ModToolsRoomViewProps
 {

src/components/mod-tools/views/tickets/CfhChatlogView.tsx

@@ -1,7 +1,7 @@
 import { CfhChatlogData, CfhChatlogEvent, GetCfhChatlogMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';
 
 interface CfhChatlogViewProps

src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx

@@ -1,10 +1,9 @@
 import { CloseIssuesMessageComposer, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Grid, Text } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { ModToolsOpenUserInfoEvent } from '../../../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { getSourceName } from '../../common/IssueCategoryNames';
 import { useModToolsContext } from '../../ModToolsContext';
 import { CfhChatlogView } from './CfhChatlogView';

src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx

@@ -1,7 +1,7 @@
 import { IssueMessageData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { GetSessionDataManager } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
 import { useModToolsContext } from '../../ModToolsContext';
 import { ModToolsIssueInfoView } from './ModToolsIssueInfoView';
 import { ModToolsMyIssuesTabView } from './ModToolsMyIssuesTabView';

src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx

@@ -1,7 +1,7 @@
 import { ChatRecordData, GetUserChatlogMessageComposer, UserChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';
 
 interface ModToolsUserChatlogViewProps

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -1,9 +1,8 @@
 import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { NotificationAlertType } from '../../../../views/notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useModToolsContext } from '../../ModToolsContext';

src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx

@@ -2,9 +2,8 @@ import { GetRoomVisitsMessageComposer, RoomVisitsData, RoomVisitsEvent } from '@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AutoSizer, List, ListRowProps } from 'react-virtualized';
 import { TryVisitRoom } from '../../../../api';
-import { Base, Column, Grid, Text } from '../../../../common';
+import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 
 interface ModToolsUserRoomVisitsViewProps
 {

src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx

@@ -1,9 +1,8 @@
 import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { Button, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { NotificationAlertEvent } from '../../../../events';
 import { dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ISelectedUser } from '../../utils/ISelectedUser';
 
 interface ModToolsUserSendMessageViewProps

src/components/mod-tools/views/user/ModToolsUserView.tsx

@@ -1,10 +1,9 @@
 import { FriendlyTime, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Grid } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ModToolsUserModActionView } from './ModToolsUserModActionView';
 import { ModToolsUserRoomVisitsView } from './ModToolsUserRoomVisitsView';
 import { ModToolsUserSendMessageView } from './ModToolsUserSendMessageView';

src/components/navigator/NavigatorView.tsx

@@ -2,13 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Column } from '../../common/Column';
 import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
 import { UseMountEffect } from '../../hooks';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { NavigatorContextProvider } from './NavigatorContext';
 import { NavigatorMessageHandler } from './NavigatorMessageHandler';
 import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';

src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx

@@ -1,11 +1,11 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { CreateRoomSession, GoToDesktop, LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 
 export interface NavigatorRoomDoorbellViewProps
 {

src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -3,18 +3,9 @@ import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, Security
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetGroupInformation, GetSessionDataManager, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
+import { Button, Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
-import { Column } from '../../../../common/Column';
+import { FloorplanEditorEvent, NavigatorEvent, RoomWidgetThumbnailEvent } from '../../../../events';
-import { Flex } from '../../../../common/Flex';
+import { BatchUpdates, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { Text } from '../../../../common/Text';
-import { NavigatorEvent } from '../../../../events';
-import { FloorplanEditorEvent } from '../../../../events/floorplan-editor/FloorplanEditorEvent';
-import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail';
-import { BatchUpdates } from '../../../../hooks';
-import { dispatchUiEvent } from '../../../../hooks/events';
-import { SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, UserProfileIconView } from '../../../../layout';
-import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
 import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
 import { useNavigatorContext } from '../../NavigatorContext';
 import { NavigatorActions } from '../../reducers/NavigatorReducer';
@@ -132,9 +123,9 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 { roomInfoData.enteredGuestRoom &&
                     <>
                         <Flex gap={ 2 } overflow="hidden">
-                            <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
+                            <LayoutRoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
                                 { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
-                            </RoomThumbnailView>
+                            </LayoutRoomThumbnailView>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <Flex gap={ 1 }>
                                     <Column grow gap={ 1 }>

src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx

@@ -1,10 +1,6 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetConfiguration, GetNitroInstance, LocalizeText } from '../../../../api';
-import { Column } from '../../../../common/Column';
+import { Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { Flex } from '../../../../common/Flex';
-import { Text } from '../../../../common/Text';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
 import { useNavigatorContext } from '../../NavigatorContext';
 
 export class NavigatorRoomLinkViewProps
@@ -59,7 +55,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black d-flex align-items-center">
                 <Flex gap={ 2 }>
-                    <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef } />
+                    <LayoutRoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef } />
                     <Column>
                         <Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
                         <Text>{ LocalizeText('navigator.embed.info') }</Text>

src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx

@@ -1,11 +1,11 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateRoomSession, LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 
 export interface NavigatorRoomPasswordViewProps
 {

src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -1,8 +1,8 @@
 import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import RoomSettingsData from '../../common/RoomSettingsData';
 import { NavigatorRoomSettingsAccessTabView } from './views/NavigatorRoomSettingsAccessTabView';
 import { NavigatorRoomSettingsBasicTabView } from './views/NavigatorRoomSettingsBasicTabView';

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx

@@ -1,13 +1,13 @@
 import { RemoveAllRightsMessageComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../api';
+import { UserProfileIconView } from '../../../../../common';
 import { Button } from '../../../../../common/Button';
 import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
 import { SendMessageHook } from '../../../../../hooks';
-import { UserProfileIconView } from '../../../../../layout';
 import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
 
 export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>

src/components/room-host/RoomHostView.tsx

@@ -1,10 +1,9 @@
 import { IRoomSession, RoomEngineEvent, RoomId, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
-import { Base } from '../../common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
-import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { RoomView } from '../../views/room/RoomView';
 
 export const RoomHostView: FC<{}> = props =>

src/components/toolbar/ToolbarView.tsx

@@ -1,7 +1,8 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
-import { Base, Flex } from '../../common';
+import { Base, Flex, TransitionAnimationTypes } from '../../common';
+import { TransitionAnimation } from '../../common/transitions/TransitionAnimation';
 import { AvatarEditorEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
@@ -9,8 +10,6 @@ import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { BatchUpdates, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
-import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
-import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
 import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
 import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
 import { ToolbarViewItems } from './common/ToolbarViewItems';

src/components/user-profile/UserProfileView.tsx

@@ -1,9 +1,8 @@
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../api';
-import { Column, Flex, Grid } from '../../common';
+import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { BadgesContainerView } from './views/BadgesContainerView';
 import { FriendsContainerView } from './views/FriendsContainerView';
 import { GroupsContainerView } from './views/GroupsContainerView';

src/components/user-profile/views/BadgesContainerView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { Grid, LayoutGridItem } from '../../../common';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 
 interface BadgesContainerViewProps
@@ -13,16 +13,16 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
 
     return (
         <div className="row">
-            <NitroCardGridView>
+            <Grid>
                 { badges && (badges.length > 0) && badges.map((badge, index) =>
                         {
                             return (
-                                <NitroCardGridItemView key={ index }>
+                                <LayoutGridItem key={ index }>
                                     <BadgeImageView badgeCode={ badge }/>
-                                </NitroCardGridItemView>
+                                </LayoutGridItem>
                             )
                         }) }
-            </NitroCardGridView>
+            </Grid>
         </div>
     )
 }

src/components/user-settings/UserSettingsView.tsx

@@ -2,11 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../api';
-import { Column, Flex, Text } from '../../common';
+import { Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView } from '../../layout';
-import { NitroCardView } from '../../layout/card/NitroCardView';
 
 export const UserSettingsView: FC<{}> = props =>
 {

src/components/wired/views/WiredBaseView.tsx

@@ -1,5 +1,6 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { Button } from '../../../common/Button';
 import { Column } from '../../../common/Column';
 import { Flex } from '../../../common/Flex';
@@ -7,7 +8,6 @@ import { Text } from '../../../common/Text';
 import { WiredEvent } from '../../../events';
 import { BatchUpdates } from '../../../hooks';
 import { dispatchUiEvent } from '../../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { WiredFurniType } from '../common/WiredFurniType';
 import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
 import { useWiredContext } from '../context/WiredContext';

src/events/catalog/index.ts

@@ -1,8 +1,15 @@
 export * from './CatalogEvent';
+export * from './CatalogGiftReceiverNotFoundEvent';
+export * from './CatalogInitGiftEvent';
+export * from './CatalogInitPurchaseEvent';
 export * from './CatalogNameResultEvent';
+export * from './CatalogPostMarketplaceOfferEvent';
 export * from './CatalogPurchasedEvent';
 export * from './CatalogPurchaseFailureEvent';
 export * from './CatalogPurchaseNotAllowedEvent';
+export * from './CatalogPurchaseOverrideEvent';
 export * from './CatalogPurchaseSoldOutEvent';
 export * from './CatalogSetExtraPurchaseParameterEvent';
+export * from './CatalogSetRoomPreviewerStuffDataEvent';
+export * from './CatalogWidgetEvent';
 export * from './SetRoomPreviewerStuffDataEvent';

src/events/floorplan-editor/index.ts

@@ -0,0 +1 @@
+export * from './FloorplanEditorEvent';

src/events/hc-center/index.ts

@@ -0,0 +1 @@
+export * from './HcCenterEvent';

src/events/help/index.ts

@@ -0,0 +1,2 @@
+export * from './HelpNameChangeEvent';
+export * from './HelpReportUserEvent';

src/events/index.ts

@@ -1,10 +1,17 @@
+export * from './achievements';
 export * from './avatar-editor';
 export * from './camera';
 export * from './catalog';
+export * from './floorplan-editor';
 export * from './friends';
 export * from './guide-tool';
+export * from './hc-center';
+export * from './help';
 export * from './inventory';
+export * from './mod-tools';
 export * from './navigator';
 export * from './notification-center';
 export * from './room-widgets';
+export * from './room-widgets/thumbnail';
+export * from './user-settings';
 export * from './wired';

src/events/inventory/index.ts

@@ -1,3 +1,4 @@
+export * from './InventoryBadgesRequestEvent';
 export * from './InventoryBadgesUpdatedEvent';
 export * from './InventoryEvent';
 export * from './InventoryTradeRequestEvent';

src/events/mod-tools/index.ts

@@ -0,0 +1,5 @@
+export * from './ModToolsEvent';
+export * from './ModToolsOpenRoomChatlogEvent';
+export * from './ModToolsOpenRoomInfoEvent';
+export * from './ModToolsOpenUserChatlogEvent';
+export * from './ModToolsOpenUserInfoEvent';

src/events/user-settings/index.ts

@@ -0,0 +1 @@
+export * from './UserSettingsUIEvent';

src/layout/Layout.scss

@@ -1,34 +0,0 @@
-.nitro-text-shadow {
-    text-shadow: 2px 2px 0px rgba(0, 0, 0, .2)
-}
-
-.nitro-close {
-    right: 5px;
-    border-radius: $border-radius;
-    box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
-    border: 1px solid $white;
-    background: rgb(245,80,65);
-    background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
-    cursor: pointer;
-    line-height: 1;
-    padding: 4px 6px;
-
-    &:hover {
-        filter: brightness(1.2);
-    }
-
-    &:active {
-        filter: brightness(0.8);
-    }
-}
-
-@import './card/NitroCardView';
-@import './draggable-window/DraggableWindow';
-@import './loading-habbos/LoadingHabbosView';
-@import './loading-spinner/LoadingSpinnerView';
-@import './mini-camera/NitroLayoutMiniCameraView';
-@import './notification-alert/NotificationAlertView';
-@import './notification-bubble/NotificationBubbleView';
-@import './room-thumbnail/RoomThumbnailView';
-@import './trophy/NitroLayoutTrophyView';
-@import './gift-card/NitroLayoutGiftCardView';

src/layout/base/NitroLayoutBase.tsx

@@ -1,28 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
-
-export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
-{
-    const { className = '', overflow = null, position = null, gap = null, ref = null, innerRef = null, children = null, ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = '';
-
-        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
-
-        if(position && position.length) newClassName += ` position-${ position }`;
-
-        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className, overflow, position, gap ]);
-
-    return (
-        <div className={ getClassName } ref={ innerRef } { ...rest }>
-            { children }
-        </div>
-    );
-}

src/layout/base/NitroLayoutBase.types.ts

@@ -1,10 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, LegacyRef } from 'react';
-import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
-
-export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-{
-    innerRef?: LegacyRef<HTMLDivElement>;
-    overflow?: NitroLayoutOverflow;
-    position?: NitroLayoutPosition;
-    gap?: NitroLayoutSpacing;
-}

src/layout/base/index.ts

@@ -1,2 +0,0 @@
-export * from './NitroLayoutBase';
-export * from './NitroLayoutBase.types';

src/layout/button-group/NitroLayoutButtonGroup.tsx

@@ -1,19 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutBase } from '../base';
-import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types';
-
-export const NitroLayoutButtonGroup: FC<NitroLayoutButtonGroupProps> = props =>
-{
-    const { className = '', ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = 'btn-group';
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className ]);
-
-    return <NitroLayoutBase className={ getClassName } { ...rest } />;
-}

src/layout/button-group/NitroLayoutButtonGroup.types.ts

@@ -1,6 +0,0 @@
-import { NitroLayoutBaseProps } from '../base';
-
-export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps
-{
-
-}

src/layout/button-group/index.ts

@@ -1,2 +0,0 @@
-export * from './NitroLayoutButtonGroup';
-export * from './NitroLayoutButtonGroup.types';

src/layout/button/NitroLayoutButton.tsx

@@ -1,26 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
-
-export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
-{
-    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = 'd-flex justify-content-center align-items-center btn';
-
-        if(variant && variant.length) newClassName += ` btn-${ variant }`;
-
-        if(size && size.length) newClassName += ` btn-${ size }`;
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className, variant, size ]);
-
-    return (
-        <button type="button" className={ getClassName } { ...rest }>
-            { children }
-        </button>
-    );
-}

src/layout/button/NitroLayoutButton.types.ts

@@ -1,8 +0,0 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
-import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
-
-export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-{
-    variant?: NitroLayoutVariant;
-    size?: NitroLayoutButtonSize;
-}