From a3c42875942091e9f9a446981ef1fc2bf4f205a5 Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Thu, 8 Jun 2023 14:10:11 +0200
Subject: [PATCH 1/4] remove zIndex property from props and use increment for
 that

---
 app-typescript/components/Dropdown.tsx        |  279 ++-
 app-typescript/components/Layouts/Panel.tsx   |    5 +-
 app-typescript/components/Menu.tsx            |    7 +-
 app-typescript/components/Modal.tsx           |    6 +-
 app-typescript/components/MultiSelect.tsx     |    6 +-
 app-typescript/components/Popover.tsx         |    2 -
 .../components/SelectWithTemplate.tsx         |    5 +-
 app-typescript/components/ShowPopup.tsx       |   12 +-
 app-typescript/components/SubNav.tsx          |   12 +-
 app-typescript/components/TreeSelect.tsx      |    5 +-
 app-typescript/components/WithPopover.tsx     |    2 -
 app-typescript/components/_Positioner.tsx     |    9 +-
 .../components/avatar/avatar-group.tsx        |    3 -
 app-typescript/zIndex.tsx                     |    5 +
 .../react-playgrounds/CoreLayout.tsx          |  825 ++++-----
 .../react-playgrounds/EditorTest.tsx          |  742 ++++----
 .../react-playgrounds/Multiedit.tsx           |  464 ++---
 .../react-playgrounds/PageLayoutTest.tsx      |   56 +-
 .../react-playgrounds/PersonalProfile.tsx     |   12 +-
 .../react-playgrounds/RundownEditor.tsx       |   48 +-
 .../react-playgrounds/Rundowns.tsx            | 1557 +++++++++--------
 .../react-playgrounds/SamsPlayground.tsx      |    5 +-
 .../react-playgrounds/UiPlayground.tsx        |    5 +-
 examples/pages/react/CreateButton.tsx         |    4 +-
 examples/pages/react/Dropdowns.tsx            |  366 ++--
 examples/pages/react/Modal.tsx                |   12 -
 examples/pages/react/MultiSelect.tsx          |    1 -
 examples/pages/react/NavButtons.tsx           |    8 +-
 examples/pages/react/Panel.tsx                |    1 -
 examples/pages/react/Popover.tsx              |   12 +-
 examples/pages/react/SubNav.tsx               |   19 +-
 31 files changed, 2293 insertions(+), 2202 deletions(-)
 create mode 100644 app-typescript/zIndex.tsx

diff --git a/app-typescript/components/Dropdown.tsx b/app-typescript/components/Dropdown.tsx
index 859fe7e8..530ad09b 100644
--- a/app-typescript/components/Dropdown.tsx
+++ b/app-typescript/components/Dropdown.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createPopper } from '@popperjs/core';
 import { useId } from "react-id-generator";
+import {getNextZIndex} from './../zIndex';
 
 export interface IMenuItem {
     label: string | React.ReactNode;
@@ -33,9 +34,7 @@ interface IMenu {
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    append?: boolean;
     children: React.ReactNode;
-    zIndex?: number;
     onChange?(event?: any): void;
 }
 
@@ -46,11 +45,15 @@ export const Dropdown = ({
     header,
     footer,
     children,
-    append,
     align,
-    zIndex,
     onChange,
 }: IMenu) => {
+    const [zIndex, setZIndex] = React.useState<number>(-1);
+
+    if (zIndex === -1) {
+        setZIndex(getNextZIndex());
+    }
+
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
     const [menuID] = useId();
@@ -84,7 +87,7 @@ export const Dropdown = ({
     }, [change]);
 
     React.useLayoutEffect(() => {
-        if (append && change) {
+        if (change) {
             addInPlaceholder();
         }
         setChange(true);
@@ -93,10 +96,11 @@ export const Dropdown = ({
     function createAppendMenu() {
         if (header && footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
                     id={menuID} role='menu'
                     ref={ref}
-                    style={{zIndex: zIndex}}
+                    style={{zIndex}}
                 >
                     <ul className='dropdown__menu-header'>
                         {headerElements}
@@ -111,10 +115,12 @@ export const Dropdown = ({
             );
         } else if (header) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                id={menuID} role='menu'
-                ref={ref}
-                style={{zIndex: zIndex}}>
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    id={menuID} role='menu'
+                    ref={ref}
+                    style={{zIndex}}
+                >
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -125,11 +131,13 @@ export const Dropdown = ({
             );
         } else if (footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                id={menuID}
-                role='menu'
-                ref={ref}
-                style={{zIndex: zIndex}}>
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    id={menuID}
+                    role='menu'
+                    ref={ref}
+                    style={{zIndex}}
+                >
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
                     </ul>
@@ -140,10 +148,12 @@ export const Dropdown = ({
             );
         } else {
             return (
-                <ul className='dropdown__menu '
-                id={menuID} role='menu'
-                ref={ref}
-                style={{zIndex: zIndex}}>
+                <ul
+                    className='dropdown__menu '
+                    id={menuID} role='menu'
+                    ref={ref}
+                    style={{zIndex}}
+                >
                     {dropdownElements}
                 </ul>
             );
@@ -154,27 +164,19 @@ export const Dropdown = ({
         if (!open) {
             let menuRef: any;
             setOpen(true);
-            if (!append) {
+
+            setTimeout(() => {
                 menuRef = ref.current;
                 let toggleRef = buttonRef.current;
                 if (toggleRef && menuRef) {
                     createPopper(toggleRef, menuRef, {
                         placement: checkAlign() ? 'bottom-end' : 'bottom-start',
+                        strategy: 'fixed',
                     });
+                    menuRef.style.display = 'block';
                 }
-            } else {
-                setTimeout(() => {
-                    menuRef = ref.current;
-                    let toggleRef = buttonRef.current;
-                    if (toggleRef && menuRef) {
-                        createPopper(toggleRef, menuRef, {
-                            placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
-                        });
-                        menuRef.style.display = 'block';
-                    }
-                }, 0);
-            }
+            }, 0);
+
             document.addEventListener('click', closeMenu);
             setTimeout(() => {
                 menuRef.getElementsByTagName('button')[0].focus();
@@ -215,20 +217,23 @@ export const Dropdown = ({
             item['items'].forEach((el: any, key: number) => {
                 submenuItems.push(each(el, key));
             });
+
             return (
                 <DropdownItemWithSubmenu
-                key={index}
-                index={index}
-                item={item}
-                menuID={menuID}
-                subMenuItems={submenuItems}
-                onChange={onChange} />
+                    key={index}
+                    index={index}
+                    item={item}
+                    menuID={menuID}
+                    subMenuItems={submenuItems}
+                    onChange={onChange}
+                />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
             item['items'].forEach((el: any, key: number) => {
                 groupItems.push(each(el, key));
             });
+
             return (
                 <React.Fragment key={index}>
                     <li>
@@ -242,103 +247,49 @@ export const Dropdown = ({
         } else {
             return (
                 <DropdownItem
-                key={index}
-                label={item['label']}
-                icon={item['icon']}
-                active={item['active']}
-                onSelect={item['onSelect']}
-                onChange={onChange} />
+                    key={index}
+                    label={item['label']}
+                    icon={item['icon']}
+                    active={item['active']}
+                    onSelect={item['onSelect']}
+                    onChange={onChange}
+                />
             );
         }
     }
 
     return (
         <div className={'dropdown ' + (open ? 'open' : '')}>
-            {typeof children === 'object' ?
-                (React.isValidElement(children) ?
-                    <div ref={buttonRef} style={{ display: 'content' }}>
-                        {(() => {
-                            const attrs = {
-                                className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
-                                'aria-haspopup': "menu",
-                                'aria-expanded': open,
-                                onClick: toggleDisplay,
-                                ref: buttonRef,
-                            };
-
-                            return React.cloneElement(children, attrs);
-                        })()}
-                    </div> : null)
-                :
-                <button ref={buttonRef}
-                className=' dropdown__toggle dropdown-toggle'
-                aria-haspopup="menu"
-                tabIndex={0}
-                aria-expanded={open}
-                onClick={toggleDisplay}>
-                    {children}
-                    <span className="dropdown__caret"></span>
-                </button>}
-
-            {append ?
-                null : (function() {
-                    if (header && footer) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-header'>
-                                    {headerElements}
-                                </ul>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                                <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                                    {footerElements}
-                                </ul>
-                            </div>
-                        );
-                    } else if (header) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-header'>
-                                    {headerElements}
-                                </ul>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                            </div>
-                        );
-                    } else if (footer) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                                <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                                    {footerElements}
-                                </ul>
-                            </div>
-                        );
-                    } else {
-                        return (
-                            <ul className='dropdown__menu'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                {dropdownElements}
-                            </ul>
-                        );
-                    }
-                })()}
-        </div >
+            {
+                typeof children === 'object'
+                    ? (React.isValidElement(children)
+                        ? <div ref={buttonRef} style={{ display: 'content' }}>
+                            {(() => {
+                                const attrs = {
+                                    className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
+                                    'aria-haspopup': "menu",
+                                    'aria-expanded': open,
+                                    onClick: toggleDisplay,
+                                    ref: buttonRef,
+                                };
+
+                                return React.cloneElement(children, attrs);
+                            })()}
+                        </div>
+                        : null)
+                    : <button
+                        ref={buttonRef}
+                        className=' dropdown__toggle dropdown-toggle'
+                        aria-haspopup="menu"
+                        tabIndex={0}
+                        aria-expanded={open}
+                        onClick={toggleDisplay}
+                    >
+                        {children}
+                        <span className="dropdown__caret"></span>
+                    </button>
+            }
+        </div>
     );
 };
 
@@ -351,16 +302,18 @@ onChange,
 }: IMenuItemRes) => {
     return (
         <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
-            <button tabIndex={0}
-            role='menuitem'
-            onClick={() => {
-                setTimeout(() => {
-                    onSelect();
-                });
-                if (onChange) {
-                    onChange();
-                }
-            }}>
+            <button
+                tabIndex={0}
+                role='menuitem'
+                onClick={() => {
+                    setTimeout(() => {
+                        onSelect();
+                    });
+                    if (onChange) {
+                        onChange();
+                    }
+                }}
+            >
                 <i className={icon ? ('icon-' + icon) : ''}></i>
                 {label}
             </button>
@@ -402,31 +355,35 @@ const DropdownItemWithSubmenu = ({
 
     return (
         <li key={index} ref={refButtonSubMenu}>
-            <div className='dropdown'
-            onMouseLeave={() => setOpen(false)}>
+            <div
+                className='dropdown'
+                onMouseLeave={() => setOpen(false)}
+            >
                 <button
-                className='dropdown__toggle dropdown-toggle'
-                aria-haspopup="menu"
-                tabIndex={0}
-                onClick={() => {
-                    if (item.onSelect) {
-                        setTimeout(() => {
-                            item.onSelect();
-                        });
-                    }
-                    if (onChange) {
-                        onChange();
-                    }
-                }}
-                onMouseOver={() => setOpen(true) }>
+                    className='dropdown__toggle dropdown-toggle'
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    onClick={() => {
+                        if (item.onSelect) {
+                            setTimeout(() => {
+                                item.onSelect();
+                            });
+                        }
+                        if (onChange) {
+                            onChange();
+                        }
+                    }}
+                    onMouseOver={() => setOpen(true)}
+                >
                     {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
                     {item['label']}
                 </button>
                 <ul
-                role='menu'
-                ref={refSubMenu}
-                style={{display: 'none'}}
-                className='dropdown__menu'>
+                    role='menu'
+                    ref={refSubMenu}
+                    style={{display: 'none'}}
+                    className='dropdown__menu'
+                >
                     {subMenuItems}
                 </ul>
             </div>
diff --git a/app-typescript/components/Layouts/Panel.tsx b/app-typescript/components/Layouts/Panel.tsx
index b78b3fa0..38f369b8 100644
--- a/app-typescript/components/Layouts/Panel.tsx
+++ b/app-typescript/components/Layouts/Panel.tsx
@@ -3,6 +3,7 @@ import { IconButton } from '../IconButton';
 import { Spinner, LoadingOverlay } from '../Spinner';
 import classNames from 'classnames';
 import {ButtonGroup} from '../ButtonGroup';
+import {getNextZIndex} from '../../zIndex';
 
 // ============= Panel ============ //
 
@@ -44,7 +45,6 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
 
 interface IPropsPanelHeader {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
-    zIndex?: number;
     title?: string;
     theme?: 'light-ui' | 'dark-ui'; // defaults to 'light
     className?: string;
@@ -53,6 +53,7 @@ interface IPropsPanelHeader {
 }
 
 class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
+    private zIndex: number = getNextZIndex();
     constructor(props: IPropsPanelHeader) {
         super(props);
     }
@@ -66,7 +67,7 @@ class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
         }, this.props.className);
 
         let style = {
-            zIndex: this.props.zIndex ? this.props.zIndex : 10,
+            zIndex: this.zIndex,
         };
 
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
diff --git a/app-typescript/components/Menu.tsx b/app-typescript/components/Menu.tsx
index 556e57bb..4aa7d504 100644
--- a/app-typescript/components/Menu.tsx
+++ b/app-typescript/components/Menu.tsx
@@ -4,6 +4,7 @@ import {SyntheticEvent} from 'react';
 import {TieredMenu} from '@superdesk/primereact/tieredmenu';
 import {MenuItem as IPrimeMenuItem} from '@superdesk/primereact/components/menuitem/MenuItem';
 import {assertNever} from '../helpers';
+import {getNextZIndex} from '../zIndex';
 
 /**
  * Known issues:
@@ -57,11 +58,8 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
-    zIndex?: number;
 }
 
-const superdeskTopBarZIndex = 1030;
-
 function isSeparator(item: IMenuItem): item is ISeparator {
     return (item as any)['separator'] === true;
 }
@@ -77,6 +75,7 @@ function isMenuBranch(item: IMenuItem): item is IMenuBranch {
 export class Menu extends React.Component<IProps, {}> {
     private menu: TieredMenu | null;
     private focusedBefore: Element | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps) {
         super(props);
@@ -164,7 +163,7 @@ export class Menu extends React.Component<IProps, {}> {
                             }
                         }}
                         data-test-id="menu"
-                        baseZIndex={this.props.zIndex ?? superdeskTopBarZIndex}
+                        baseZIndex={this.zIndex}
                     />
                 </div>
             </React.Fragment>
diff --git a/app-typescript/components/Modal.tsx b/app-typescript/components/Modal.tsx
index 1e4814d4..fd95b1d6 100644
--- a/app-typescript/components/Modal.tsx
+++ b/app-typescript/components/Modal.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
 import classNames from 'classnames';
+import {getNextZIndex} from './../zIndex';
 
 interface IProps {
     id?: string;
@@ -16,12 +17,13 @@ interface IProps {
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
-    zIndex?: number;
     onShow?(): void;
     onHide(): void;
 }
 
 export class Modal extends React.Component<IProps, {}> {
+    private zIndex: number = getNextZIndex();
+
     render() {
         let classes = classNames({
             [`p-dialog-content--${this.props.size}`]: this.props.size,
@@ -44,7 +46,7 @@ export class Modal extends React.Component<IProps, {}> {
                     contentClassName={classes}
                     onShow={this.props.onShow}
                     onHide={this.props.onHide}
-                    zIndex={this.props.zIndex ? this.props.zIndex : 1000}
+                    zIndex={this.zIndex}
                     position={this.props.position}
                 >
                     {this.props.children}
diff --git a/app-typescript/components/MultiSelect.tsx b/app-typescript/components/MultiSelect.tsx
index e0662957..80cb6b00 100644
--- a/app-typescript/components/MultiSelect.tsx
+++ b/app-typescript/components/MultiSelect.tsx
@@ -3,6 +3,7 @@ import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multisele
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from "./Form";
+import {getNextZIndex} from '../zIndex';
 
 interface IProps<T> {
     value: Array<T>;
@@ -17,7 +18,6 @@ interface IProps<T> {
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
-    zIndex?: number;
     optionLabel: (option: T) => string;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
@@ -42,6 +42,7 @@ interface IState<T> {
 
 export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private htmlId = nextId();
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps<T>) {
         super(props);
@@ -53,7 +54,6 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
     }
 
     render() {
-
         let classes = classNames({
             'showSelectAll': this.props.showSelectAll,
             'showFilter': this.props.filter,
@@ -78,7 +78,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 options={this.props.options}
                 onChange={({value}) => this.props.onChange(value)}
                 display="chip"
-                zIndex={this.props.zIndex}
+                zIndex={this.zIndex}
                 filter={this.props.filter}
                 appendTo={document.body}
                 placeholder={this.props.placeholder}
diff --git a/app-typescript/components/Popover.tsx b/app-typescript/components/Popover.tsx
index 5b1a5757..1e0fdf34 100644
--- a/app-typescript/components/Popover.tsx
+++ b/app-typescript/components/Popover.tsx
@@ -7,7 +7,6 @@ interface IProps {
     triggerSelector: string; // CSS selector for an element that will be used to toggle the popover.
     displayCloseButton?: boolean; // defaults to true
     placement?: PopperOptions['placement']; // defaults to auto
-    zIndex?: number;
 }
 
 export class Popover extends React.Component<IProps> {
@@ -17,7 +16,6 @@ export class Popover extends React.Component<IProps> {
                 triggerSelector={this.props.triggerSelector}
                 placement={this.props.placement ?? 'auto'}
                 className="sd-popover"
-                zIndex={this.props.zIndex}
             >
                 <div className="sd-popover__header">
                     <h4 className="sd-popover__title" tabIndex={0} id='popoverTitle'>{this.props.title}</h4>
diff --git a/app-typescript/components/SelectWithTemplate.tsx b/app-typescript/components/SelectWithTemplate.tsx
index 72a219fb..27439205 100644
--- a/app-typescript/components/SelectWithTemplate.tsx
+++ b/app-typescript/components/SelectWithTemplate.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {Dropdown} from '@superdesk/primereact/dropdown';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 
@@ -38,7 +37,9 @@ interface IState<T> {
 }
 
 const labelKey = 'label';
-
+/**
+ * @deprecated use MultiSelect or TreeSelect
+ */
 export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
     private htmlId = nextId();
diff --git a/app-typescript/components/ShowPopup.tsx b/app-typescript/components/ShowPopup.tsx
index 60481c3c..a68cc07e 100644
--- a/app-typescript/components/ShowPopup.tsx
+++ b/app-typescript/components/ShowPopup.tsx
@@ -4,11 +4,11 @@ import ReactDOM from 'react-dom';
 import {createPopper, Instance as PopperInstance, Placement, Modifier} from '@popperjs/core';
 import {throttle} from 'lodash';
 import maxSize from 'popper-max-size-modifier';
+import {getNextZIndex} from '../zIndex';
 
 interface IPropsPopupPositioner {
     referenceElement: HTMLElement;
     placement: Placement;
-    zIndex?: number;
     onClose(): void;
     closeOnHoverEnd?: boolean;
 }
@@ -16,6 +16,7 @@ interface IPropsPopupPositioner {
 class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
     private wrapperEl: HTMLDivElement | null;
     private popper: PopperInstance | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IPropsPopupPositioner) {
         super(props);
@@ -123,7 +124,12 @@ class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
                 ref={(el) => {
                     this.wrapperEl = el;
                 }}
-                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw', display: 'flex'}}
+                style={{
+                    zIndex: this.zIndex,
+                    position: 'absolute',
+                    left: '-100vw',
+                    display: 'flex',
+                }}
             >
                 {this.props.children}
             </div>
@@ -138,7 +144,6 @@ export function showPopup(
     referenceElement: HTMLElement,
     placement: Placement,
     Component: React.ComponentType<{closePopup(): void}>,
-    zIndex?: number,
     closeOnHoverEnd?: boolean,
     onClose?: () => void,
 ): {close: () => void} {
@@ -158,7 +163,6 @@ export function showPopup(
                 referenceElement={referenceElement}
                 placement={placement}
                 onClose={closeFn}
-                zIndex={zIndex}
                 closeOnHoverEnd={closeOnHoverEnd || false}
             >
                 <Component
diff --git a/app-typescript/components/SubNav.tsx b/app-typescript/components/SubNav.tsx
index 0d83e480..92dcafaf 100644
--- a/app-typescript/components/SubNav.tsx
+++ b/app-typescript/components/SubNav.tsx
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 
 interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
-    zIndex?: number;
     theme?: 'light' | 'dark'; // defaults to 'light
     className?: string;
 }
@@ -25,6 +24,7 @@ export class SubNavDivider extends React.PureComponent<IPropsDivider> {
 }
 
 export class SubNav extends React.PureComponent<IProps> {
+
     render() {
         const  darkColors = ['blueGrey', 'blueGreyDarker'];
 
@@ -32,14 +32,14 @@ export class SubNav extends React.PureComponent<IProps> {
             'subnav--light': this.props.color === undefined,
             [`subnav--${this.props.color}`]: this.props.color || this.props.color !== undefined,
         }, this.props.className);
-        let style = {
-            zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
-        };
+     
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
 
         return (
-            <div data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
-                className={classes} style={style}>
+            <div
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
+                className={classes}
+            >
                 {this.props.children}
             </div>
         );
diff --git a/app-typescript/components/TreeSelect.tsx b/app-typescript/components/TreeSelect.tsx
index 2662ab04..5efdbb0f 100644
--- a/app-typescript/components/TreeSelect.tsx
+++ b/app-typescript/components/TreeSelect.tsx
@@ -7,6 +7,7 @@ import { InputWrapper } from "./Form";
 import { createPopper, Instance } from '@popperjs/core';
 import {isEqual} from 'lodash';
 import {getTextColor} from './Label';
+import {getNextZIndex} from '../zIndex';
 
 interface IState<T> {
     value: Array<T>;
@@ -43,7 +44,6 @@ interface IPropsBase<T> {
     required?: boolean;
     label?: string;
     disabled?: boolean;
-    zIndex?: number;
     getLabel(item: T): string;
     getId(item: T): string;
     getBackgroundColor?(item: T): string;
@@ -80,6 +80,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private categoryButtonRef: React.RefObject<HTMLButtonElement>;
     private openDropdownRef: React.RefObject<HTMLButtonElement>;
     private htmlId: string = nextId();
+    private zIndex: number = getNextZIndex();
     private popperInstance: Instance | null;
 
     constructor(props: IProps<T>) {
@@ -706,7 +707,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         && <div
                             className={"autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')}
                             ref={this.dropdownRef}
-                            style={{zIndex: this.props.zIndex}}
+                            style={{zIndex: this.zIndex}}
                         >
                             <div className='autocomplete__header'>
                                 <div
diff --git a/app-typescript/components/WithPopover.tsx b/app-typescript/components/WithPopover.tsx
index 3b0a9495..719ae4ac 100644
--- a/app-typescript/components/WithPopover.tsx
+++ b/app-typescript/components/WithPopover.tsx
@@ -7,7 +7,6 @@ export interface IPropsWithPopover {
     children(toggle: (referenceElement: HTMLElement) => void): React.ReactNode;
     placement: Placement;
     component: React.ComponentType<{closePopup(): void}>;
-    zIndex?: number;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
 }
@@ -30,7 +29,6 @@ export class WithPopover extends React.PureComponent<IPropsWithPopover> {
                 referenceElement,
                 this.props.placement,
                 this.props.component,
-                this.props.zIndex,
                 this.props.closeOnHoverEnd,
                 () => {
                     this.closePopup = undefined;
diff --git a/app-typescript/components/_Positioner.tsx b/app-typescript/components/_Positioner.tsx
index e587ab97..8f716aac 100644
--- a/app-typescript/components/_Positioner.tsx
+++ b/app-typescript/components/_Positioner.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as _popper from 'popper.js';
 import {PopperOptions} from 'popper.js';
+import {getNextZIndex} from '../zIndex';
 
 const Popper = _popper.default;
 
@@ -22,7 +23,8 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
     wrapper: HTMLDivElement;
     popperInstance: any;
     previouslyFocusedElement: HTMLElement | undefined;
-
+    public zIndex: number = getNextZIndex();
+    
     constructor(props: IPropsPopperWrapper) {
         super(props);
 
@@ -42,9 +44,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
 
         const dropdownElement = this.wrapper;
 
-        if (this.props.zIndex != null) {
-            dropdownElement.style.zIndex = this.props.zIndex.toString();
-        }
+        dropdownElement.style.zIndex = this.zIndex.toString();
 
         const rect = this.props.triggerElement.getBoundingClientRect();
 
@@ -110,7 +110,6 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
 interface IPropsPositioner {
     triggerSelector: string;
     placement: PopperOptions['placement'];
-    zIndex?: number;
     className?: string;
 }
 
diff --git a/app-typescript/components/avatar/avatar-group.tsx b/app-typescript/components/avatar/avatar-group.tsx
index 71fae0dd..c3fb8c53 100644
--- a/app-typescript/components/avatar/avatar-group.tsx
+++ b/app-typescript/components/avatar/avatar-group.tsx
@@ -24,8 +24,6 @@ export interface IPropsAvatarGroup {
      */
     max?: number | 'show-all';
 
-    zIndex?: number;
-
     // unless a custom onClick handler is passed
     // a popover would get shown when maximum number
     // of avatars is exceeded.
@@ -78,7 +76,6 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
 
         return (
             <WithPopover
-                zIndex={this.props.zIndex ?? 101}
                 placement='bottom-end'
                 component={() => (
                     <div className="avatar-popup">
diff --git a/app-typescript/zIndex.tsx b/app-typescript/zIndex.tsx
new file mode 100644
index 00000000..b1fd7ebc
--- /dev/null
+++ b/app-typescript/zIndex.tsx
@@ -0,0 +1,5 @@
+export let zIndex = 1100;
+
+export function getNextZIndex() {
+    return ++zIndex;
+}
diff --git a/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx b/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx
index b1dac2e3..fcdad32f 100644
--- a/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx
@@ -58,10 +58,10 @@ export class CoreLayout extends React.Component<IProps, IState> {
             mainMenuOpen: false,
             notificationsOpen: false,
             botNavArray: [
-                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
-                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
-                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
-                            { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
+                { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
             ],
             itemType: 'itemtype01',
             dropDownState: '',
@@ -194,65 +194,66 @@ export class CoreLayout extends React.Component<IProps, IState> {
     render() {
         return (
             <Layout.CoreLayout
-            heading='Core Layout'
-            menuOpen={this.state.mainMenuOpen}
-            onClick={this.handleMainMenu}
-            active={this.state.mainMenuOpen}
-            ariaControls='main-menu'
-            menuId='main-menu'
-            editorFullWidth={this.state.fullEditor}
-            openPanel={this.state.rightPanel}
-            slideInMenu={(
-                <Layout.MainMenu
-                headerTitle='Main Menu'
-                poweredBy='Powered by Superdesk technology'
-                header={(null)}
-                footerContent={true}
-                footer={(
-                    <p>Menu footer testing</p>
-                )}>
-                    <LeftMenu 
-                    style='blanc'
-                    reverseItemBorder={true}
-                    size='large'
-                    ariaLabel={'Left navigation'}   
-                    activeItemId='1'
-                    groups={[
-                        { label: 'MAIN SECTIONS', items: [
-                            { id: '1', label: 'Section 1', ref:'section1'},
-                            { id: '2', label: 'Section 2', ref: 'section2' },
-                            { id: '3', label: 'Section 3', ref: 'section3' },
-                        
-                        ]},
-                        { label:'OTHER SECTIONS', items: [
-                            { id: '4', label: 'Section 4', ref: 'section4' },
-                            { id: '5', label: 'Section 5', ref: 'section5' },
-                        ]},
-                        { label:'OTHER SECTIONS', items: [
-                            { id: '6', label: 'Section 6', ref: 'section6' },
-                            { id: '7', label: 'Section 7', ref: 'section7' },
-                        ]}
-                    ]}
-                    onSelect={() => false} />
-                </Layout.MainMenu>
+                heading='Core Layout'
+                menuOpen={this.state.mainMenuOpen}
+                onClick={this.handleMainMenu}
+                active={this.state.mainMenuOpen}
+                ariaControls='main-menu'
+                menuId='main-menu'
+                editorFullWidth={this.state.fullEditor}
+                openPanel={this.state.rightPanel}
+                slideInMenu={(
+                    <Layout.MainMenu
+                        headerTitle='Main Menu'
+                        poweredBy='Powered by Superdesk technology'
+                        header={(null)}
+                        footerContent={true}
+                        footer={(
+                            <p>Menu footer testing</p>
+                        )}
+                    >
+                        <LeftMenu 
+                            style='blanc'
+                            reverseItemBorder={true}
+                            size='large'
+                            ariaLabel={'Left navigation'}   
+                            activeItemId='1'
+                            groups={[
+                                { label: 'MAIN SECTIONS', items: [
+                                    { id: '1', label: 'Section 1', ref:'section1'},
+                                    { id: '2', label: 'Section 2', ref: 'section2' },
+                                    { id: '3', label: 'Section 3', ref: 'section3' },
+                                ]},
+                                { label:'OTHER SECTIONS', items: [
+                                    { id: '4', label: 'Section 4', ref: 'section4' },
+                                    { id: '5', label: 'Section 5', ref: 'section5' },
+                                ]},
+                                { label:'OTHER SECTIONS', items: [
+                                    { id: '6', label: 'Section 6', ref: 'section6' },
+                                    { id: '7', label: 'Section 7', ref: 'section7' },
+                                ]}
+                            ]}
+                            onSelect={() => false}
+                        />
+                    </Layout.MainMenu>
                 )}
                 topMenu={(
                     <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
                 )}
                 footer={(
                     <>
-                    <Layout.BottomBarAction onClick={()=> false} />
-                    <BottomNav
-                        items={this.state.botNavArray} />
+                        <Layout.BottomBarAction onClick={()=> false} />
+                        <BottomNav items={this.state.botNavArray} />
                     </>
                 )}
                 overlay={(
                     <Layout.NotificationPanel
-                    header={(null)}
-                    headerTitle='Notifications'
-                    open={this.state.notificationsOpen}
-                    onClick={this.handleNotifications}
-                    theme='dark'>
+                        header={(null)}
+                        headerTitle='Notifications'
+                        open={this.state.notificationsOpen}
+                        onClick={this.handleNotifications}
+                        theme='dark'
+                    >
                         <BoxedList>
                             <BoxedListItem unread={true}>
                                 <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -277,7 +278,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
                             </BoxedListItem>
                         </BoxedList>
                     </Layout.NotificationPanel>
-                )}>
+                )}
+            >
 
                 <Nav.SideBarMenu
                     items={[
@@ -289,365 +291,400 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         { icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
                         { icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
                         { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor})
-                    }]} />
+                    }]}
+                />
 
                 {!this.state.fullEditor && !this.state.rightPanel
-                && <Layout.LayoutContainer>
-                    <Layout.HeaderPanel>
-                        <SubNav zIndex={2}>
-                            <SearchBar placeholder='Search media'></SearchBar>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <Dropdown
+                    && (
+                        <Layout.LayoutContainer>
+                            <Layout.HeaderPanel>
+                                <SubNav>
+                                    <SearchBar placeholder='Search media'></SearchBar>
+                                    <ButtonGroup align='end' spaces='no-space'>
+                                        <Dropdown
+                                            items={[
+                                                {
+                                                    type: 'group', label: 'Settings', items: [
+                                                        'divider',
+                                                        { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
+                                                        { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
+                                                    ]
+                                                }
+                                            ]}
+                                        >
+                                            <NavButton icon='settings' onClick={() => false} />
+                                        </Dropdown>
+                                        <Dropdown
+                                            header={[
+                                                {
+                                                    type: 'group', label: 'Create', items: []
+                                                },
+                                                {
+                                                    type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
+                                                        { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
+                                                    ]
+                                                },
+                                            ]}
+                                            items={[
+                                                {
+                                                    type: 'group', label: 'Recent Templates', items: [
+                                                        { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                    ]
+                                                }]}
+                                            footer={[
+                                                {
+                                                    type: 'group', items: [
+                                                        { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
+                                                        { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
+                                                    ]
+                                                },
+                                            ]}
+                                        >
+                                            <CreateButton ariaValue='Create' onClick={() => false} />
+                                        </Dropdown>
+                                    </ButtonGroup>
+                                </SubNav>
+
+                                <SubNav>
+                                    <ButtonGroup align='start'>
+                                        <NavButton icon='filter-large' onClick={this.handleFilter} />
+                                    </ButtonGroup>
+                                    <ButtonGroup align='end'>
+                                        <ButtonGroup align='sub' padded={true}>
+                                            <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
+                                            <Button text='Today' style='hollow' onClick={() => false} />
+                                            <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
+                                        </ButtonGroup>
+                                        <RadioButtonGroup
+                                            options={[
+                                                {value:'test10', label:'D'},
+                                                {value:'test11', label:'W'},
+                                                {value:'test12', label:'M'},
+                                            ]}
+                                            group={{padded:false}}
+                                            value={this.state.itemType}
+                                            onChange={(value) => this.setState({ itemType: value })}
+                                        />
+                                        <ButtonGroup align='sub' spaces='no-space'>
+                                            <Dropdown
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Chose a theme', items: [
+                                                            'divider',
+                                                            { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
+                                                            { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
+                                                            { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
+                                                        ]
+                                                    },
+                                                ]}
+                                            >
+                                                <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                            </Dropdown>
+                                            <Dropdown
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                            { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                            { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        ]
+                                                    }
+                                                ]}
+                                            >
+                                                <NavButton icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
+                                        </ButtonGroup>
+                                    </ButtonGroup>
+                                </SubNav>
+                            </Layout.HeaderPanel>
+                            {/* TOOLBAR HEADER */}
+
+                            <Layout.LeftPanel open={this.state.openFilter}>
+                                <Layout.Panel side='left' background='grey'>
+                                    <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
+                                    <Layout.PanelContent>
+                                        <Layout.PanelContentBlock>
+                                            <Form.FormGroup>
+                                                <Form.FormItem>
+                                                    <Select
+                                                        label='Shows'
+                                                        labelHidden={true}
+                                                        value='This is some value'
+                                                        error='This is error message'
+                                                        info='This is some hint message'
+                                                        required={true}
+                                                        disabled={false}
+                                                        invalid={false}
+                                                        onChange={(value) => {}}
+                                                    >
+                                                        <Option>Marker</Option>
+                                                        <Option>Tabu</Option>
+                                                    </Select>
+                                                </Form.FormItem>
+                                            </Form.FormGroup>
+                                            <div className="form__group">
+                                                <div className="form__item">
+                                                    <Input
+                                                        label='Title'
+                                                        error='This is error message'
+                                                        type='text'
+                                                        value='Title'
+                                                        inlineLabel={false}
+                                                        disabled={false}
+                                                        invalid={false}
+                                                        onChange={(value) => {}}
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div className="form__group">
+                                                <div className="form__item">
+                                                    <Select
+                                                        label='Source'
+                                                        value='Select ingest source...'
+                                                        error='This is error message'
+                                                        inlineLabel={false}
+                                                        disabled={false}
+                                                        invalid={false}
+                                                        onChange={(value) => {}}
+                                                    >
+                                                        <Option value="option-1">Select ingest source...</Option>
+                                                        <Option value="option-2">Associated Press</Option>
+                                                        <Option value="option-3">Reuters</Option>
+                                                    </Select>
+                                                </div>
+                                            </div>
+
+                                            <div className="form__group">
+                                                <div className="form__item">
+                                                    <Input
+                                                        label='Keyword'
+                                                        error='This is error message'
+                                                        type='text'
+                                                        value='Keyword'
+                                                        inlineLabel={false}
+                                                        disabled={false}
+                                                        invalid={false}
+                                                        onChange={(value) => {}}
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            <div className="form__group">
+                                                <div className="form__item">
+                                                    <Select
+                                                        label='Usage right'
+                                                        value='--- Not selected ---'
+                                                        error='This is error message'
+                                                        info='Dolor in hendrerit.'
+                                                        inlineLabel={false}
+                                                        disabled={false}
+                                                        invalid={false}
+                                                        onChange={(value) => {}}
+                                                    >
+                                                        <Option value="">--- Not selected ---</Option>
+                                                        <Option value="single">Single usage</Option>
+                                                        <Option value="time">Time restricted</Option>
+                                                        <Option value="bananas">Indefinite usage</Option>
+                                                        <Option value="indefinite">Pears</Option>
+                                                    </Select>
+                                                </div>
+                                            </div>
+                                        </Layout.PanelContentBlock>
+                                    </Layout.PanelContent>
+                                    <Layout.PanelFooter>
+                                        <Button text='Clear' style='hollow' onClick={() => false} />
+                                        <Button text='Submit' type='primary' onClick={() => false} />
+                                    </Layout.PanelFooter>
+                                </Layout.Panel>
+                            </Layout.LeftPanel>
+                            {/* FILTER PANEL*/}
+
+                            <Layout.MainPanel>
+                                <ContentList
                                     items={[
                                         {
-                                            type: 'group', label: 'Settings', items: [
-                                                'divider',
-                                                { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
-                                                { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
-                                            ]
-                                        }]}>
-                                    <NavButton icon='settings' onClick={() => false} />
-                                </Dropdown>
-                                <Dropdown
-                                    header={[
-                                        {
-                                            type: 'group', label: 'Create', items: []
+                                            itemColum: [
+                                                {
+                                                    itemRow: [{
+                                                        content:
+                                                            <>
+                                                                <i className="icon-rundown"></i>
+                                                            </>
+                                                    }],
+                                                    border: true
+                                                },
+                                                {
+                                                    itemRow: [
+                                                        {
+                                                            content:
+                                                                <>
+                                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                                </>
+                                                        },
+                                                        {
+                                                            content:
+                                                                <>
+                                                                    <Label text='Marker' color='blue--800'/>
+                                                                        <span className='sd-list-item__compound-text'>
+                                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                                            <span>Marker Daily</span>
+                                                                        </span>
+                                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                                </>
+                                                        },
+                                                    ],
+                                                    fullwidth: true,
+                                                }
+                                            ],
+                                            action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                            locked: true,
+                                            onClick: () => this.setState({openEditor: !this.state.openEditor}),
                                         },
                                         {
-                                            type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
-                                                { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
-                                            ]
+                                            itemColum: [
+                                                {
+                                                    itemRow: [{
+                                                        content:
+                                                            <>
+                                                                <i className="icon-rundown"></i>
+                                                            </>}], 
+                                                    border: true
+                                                },
+                                                {
+                                                    itemRow: [
+                                                        {
+                                                            content: 
+                                                            <>
+                                                                <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                                <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                                <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                            </>
+                                                        },
+                                                        {
+                                                            content: 
+                                                                <>
+                                                                    <Label text='Tabu' color='blue--800'/>
+                                                                        <span className='sd-list-item__compound-text'>
+                                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                                            <span>Tabu Daily</span>
+                                                                        </span>
+                                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                                    <Label style='translucent' text='Draft' />
+                                                                </>
+                                                        },
+                                                    ],
+                                                    fullwidth: true,
+                                                }
+                                            ],
+                                            action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                            onClick: () => this.setState({openPreview: !this.state.openPreview}),
                                         },
                                     ]}
-                                    items={[
-                                        {
-                                            type: 'group', label: 'Recent Templates', items: [
-                                                { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                            ]
-                                        }]}
-                                        footer={[
-                                            {
-                                                type: 'group', items: [
-                                                    { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
-                                                    { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
-                                                ]
-                                            },
-                                        ]}>
+                                />
 
-                                    <CreateButton ariaValue='Create' onClick={() => false} />
-                                </Dropdown>
-                            </ButtonGroup>
-                        </SubNav>
-                        <SubNav zIndex={1}>
-                            <ButtonGroup align='start'>
-                                <NavButton icon='filter-large' onClick={this.handleFilter} />
-                            </ButtonGroup>
-                            <ButtonGroup align='end'>
-                                <ButtonGroup align='sub' padded={true} >
-                                    <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
-                                    <Button text='Today' style='hollow' onClick={() => false} />
-                                    <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
-                                </ButtonGroup>
-                                <RadioButtonGroup options={[
-                                    {value:'test10', label:'D'},
-                                    {value:'test11', label:'W'},
-                                    {value:'test12', label:'M'},
-                                ]} group={{padded:false}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
-                                <ButtonGroup align='sub' spaces='no-space'>
-                                    <Dropdown
-                                        items={[
-                                            {
-                                                type: 'group', label: 'Chose a theme', items: [
-                                                    'divider',
-                                                    { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
-                                                    { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
-                                                    { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
-                                                ]
-                                            },
-                                        ]}>
-                                        <NavButton type='default' icon='adjust' onClick={()=> false} />
-                                    </Dropdown>
-                                    <Dropdown
-                                        items={[
-                                            {
-                                                type: 'group', label: 'Actions', items: [
-                                                    'divider',
-                                                    { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                ]
-                                            }]}>
-                                        <NavButton icon='dots-vertical' onClick={() => false} />
-                                    </Dropdown>
-                                </ButtonGroup>
-                            </ButtonGroup>
-                        </SubNav>
-                    </Layout.HeaderPanel>
-                    {/* TOOLBAR HEADER */}
+                            </Layout.MainPanel>
+                            {/* MAIN CONTENT (Monitoring) */}
+                            
+                            <Layout.RightPanel open={this.state.openPreview}>
+                                <Layout.Panel side='right'>
+                                    <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
+                                    <Layout.PanelContent>
+                                        <Layout.PanelContentBlock flex={true}>
+                                            <Layout.Container direction='column' gap='x-small'>
+                                                <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
+                                                <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
+                                            </Layout.Container>
 
-                    <Layout.LeftPanel open={this.state.openFilter}>
-                        <Layout.Panel side='left' background='grey'>
-                            <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock>
-                                    <Form.FormGroup>
-                                        <Form.FormItem>
-                                            <Select
-                                                label='Shows'
-                                                labelHidden={true}
-                                                value='This is some value'
-                                                error='This is error message'
-                                                info='This is some hint message'
-                                                required={true}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => {}}>
-                                                    <Option>Marker</Option>
-                                                    <Option>Tabu</Option>
-                                            </Select>
-                                        </Form.FormItem>
-                                    </Form.FormGroup>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input label='Title'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Title'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
-                                        </div>
-                                    </div>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select label='Source'
-                                                value='Select ingest source...'
-                                                error='This is error message'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
-                                                <Option value="option-1">Select ingest source...</Option>
-                                                <Option value="option-2">Associated Press</Option>
-                                                <Option value="option-3">Reuters</Option>
-                                            </Select>
-                                        </div>
-                                    </div>
+                                            <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
+                                                {/* <Dropdown
+                                                    align = 'right'
+                                                    items={[
+                                                        {
+                                                            type: 'group', label: 'Actions', items: [
+                                                                'divider',
+                                                                { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                                { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                                { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                            ]
+                                                        }]}>
+                                                    <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                                </Dropdown> */}
+                                            </Layout.Container>
+                                        </Layout.PanelContentBlock>
 
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input label='Keyword'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Keyword'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
-                                        </div>
-                                    </div>
+                                        <Layout.PanelContentBlock>
+                                            <Layout.Container direction='row'  gap='large' className='sd-margin-b--3'>
+                                                <Label size='large' text='Tabu' color='blue--800'/>
+                                                <Layout.Container direction='row' gap='small'>
+                                                    <Text color='light' size='small' style='italic' >Template:</Text>
+                                                    <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
+                                                </Layout.Container>
+                                            </Layout.Container>
+                                        
+                                            <Layout.Container direction='column' className='sd-margin-y--2'>
+                                                {/* <FormLabel text='Title' /> */}
+                                                <Heading type='h2'>Tabu // 01.06.2022</Heading>
+                                            </Layout.Container>
 
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select label='Usage right'
-                                                value='--- Not selected ---'
-                                                error='This is error message'
-                                                info='Dolor in hendrerit.'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
-                                                <Option value="">--- Not selected ---</Option>
-                                                <Option value="single">Single usage</Option>
-                                                <Option value="time">Time restricted</Option>
-                                                <Option value="bananas">Indefinite usage</Option>
-                                                <Option value="indefinite">Pears</Option>
-                                            </Select>
-                                        </div>
-                                    </div>
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                            <Layout.PanelFooter>
-                                <Button text='Clear' style='hollow' onClick={() => false} />
-                                <Button text='Submit' type='primary' onClick={() => false} />
-                            </Layout.PanelFooter>
-                        </Layout.Panel>
-                    </Layout.LeftPanel>
-                    {/* FILTER PANEL*/}
-                    <Layout.MainPanel>
-                        <ContentList
-                        items={[
-                            {
-                                itemColum: [
-                                    {
-                                        itemRow: [{content:<>
-                                                    <i className="icon-rundown"></i>
-                                                </>}],
-                                        border: true
-                                    },
-                                    {
-                                        itemRow: [
-                                            {
-                                                content:
-                                                <>
-                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                </>
-                                            },
-                                            {
-                                                content:
-                                                <>
-                                                    <Label text='Marker' color='blue--800'/>
-                                                        <span className='sd-list-item__compound-text'>
-                                                            <span className='sd-list-item__text-label'>Template:</span>
-                                                            <span>Marker Daily</span>
-                                                        </span>
-                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                    <Label style='translucent' text='In Progress' type='warning' />
-                                                </>
-                                            },
-                                        ],
-                                        fullwidth: true,
-                                    }
-                                ],
-                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                locked: true,
-                                onClick: () => this.setState({openEditor: !this.state.openEditor}),
-                            },
-                            {
-                                itemColum: [
-                                    {
-                                        itemRow: [{content:<>
-                                                    <i className="icon-rundown"></i>
-                                                </>}], 
-                                        border: true
-                                    },
-                                    {
-                                        itemRow: [
-                                            {
-                                                content: 
-                                                <>
-                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                </>
-                                            },
-                                            {
-                                                content: 
-                                                <>
-                                                    <Label text='Tabu' color='blue--800'/>
-                                                        <span className='sd-list-item__compound-text'>
-                                                            <span className='sd-list-item__text-label'>Template:</span>
-                                                            <span>Tabu Daily</span>
-                                                        </span>
-                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                    <Label style='translucent' text='Draft' />
-                                                </>
-                                            },
-                                        ],
-                                        fullwidth: true,
-                                    }
-                                ],
-                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                onClick: () => this.setState({openPreview: !this.state.openPreview}),
-                            },
-                        ]} />
-
-                    </Layout.MainPanel>
-                    {/* MAIN CONTENT (Monitoring) */}
-                    <Layout.RightPanel open={this.state.openPreview}>
-                        <Layout.Panel side='right'>
-                            <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})}  />
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock flex={true}>
-                                    <Layout.Container direction='column' gap='x-small'>
-                                        <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
-                                        <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
-                                    </Layout.Container>
-                                    <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        {/* <Dropdown
-                                            align = 'right'
-                                            append = {true}
-                                            items={[
-                                                {
-                                                    type: 'group', label: 'Actions', items: [
-                                                        'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                        { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                        { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                    ]
-                                                }]}>
-                                            <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown> */}
-                                    </Layout.Container>
-                                </Layout.PanelContentBlock>
+                                            <ButtonGroup>
+                                                <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
+                                                <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
+                                                <Text color='light' size='small' className='sd-margin--0'>OF</Text>
+                                                <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
+                                            </ButtonGroup>
 
-                                <Layout.PanelContentBlock>
-                                    <Layout.Container direction='row'  gap='large' className='sd-margin-b--3'>
-                                        <Label size='large' text='Tabu' color='blue--800'/>
-                                        <Layout.Container direction='row' gap='small'>
-                                            <Text color='light' size='small' style='italic' >Template:</Text>
-                                            <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
-                                        </Layout.Container>
-                                    </Layout.Container>
-                                
-                                    <Layout.Container direction='column' className='sd-margin-y--2'>
-                                        {/* <FormLabel text='Title' /> */}
-                                        <Heading type='h2'>Tabu // 01.06.2022</Heading>
-                                    </Layout.Container>
-                                    <ButtonGroup>
-                                        <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
-                                        <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
-                                        <Text color='light' size='small' className='sd-margin--0'>OF</Text>
-                                        <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
-                                    </ButtonGroup>
-                                    <TableList
-                                        className='sd-margin-y--4'
-                                        array={this.state.array}
-                                        itemsDropdown={() => [
-                                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                        ]}
-                                    />   
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                        </Layout.Panel>
-                    </Layout.RightPanel>
-                    {/* PREVIEW PANEL*/}
+                                            <TableList
+                                                className='sd-margin-y--4'
+                                                array={this.state.array}
+                                                itemsDropdown={() => [
+                                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                                ]}
+                                            />   
+                                        </Layout.PanelContentBlock>
+                                    </Layout.PanelContent>
+                                </Layout.Panel>
+                            </Layout.RightPanel>
+                            {/* PREVIEW PANEL*/}
 
-                    <Layout.OverlayPanel />
-                    {/* OVERLAY PANEL (Send To) */}
-                </Layout.LayoutContainer>}
+                            <Layout.OverlayPanel />
+                            {/* OVERLAY PANEL (Send To) */}
+                        </Layout.LayoutContainer>
+                    )
+                }
 
                 <Layout.ContentSplitter visible={this.state.openEditor} />
 
                 {/* RUNDOWN EDITOR */}
                 <Layout.AuthoringContainer open={this.state.openEditor}>
-                    <RundownEditor rightPanel={this.state.rightPanel}
-                    openPanel={() => {
-                        if (this.state.fullEditor) {
-                            this.setState({previousState: true})
-                        } else {
-                            this.setState({previousState: false})
-                        }
-                        
-                        this.setState({rightPanel: true})
-                    }}
-                    closePanel={() => {
-                        if (!this.state.previousState) {
-                            this.setState({rightPanel: false, fullEditor: false})
-                        } else {
-                            this.setState({rightPanel: false})
-                        }
-                    }}
+                    <RundownEditor
+                        rightPanel={this.state.rightPanel}
+                        openPanel={() => {
+                            if (this.state.fullEditor) {
+                                this.setState({previousState: true})
+                            } else {
+                                this.setState({previousState: false})
+                            }
+                            
+                            this.setState({rightPanel: true})
+                        }}
+                        closePanel={() => {
+                            if (!this.state.previousState) {
+                                this.setState({rightPanel: false, fullEditor: false})
+                            } else {
+                                this.setState({rightPanel: false})
+                            }
+                        }}
                     />
                 </Layout.AuthoringContainer>
                 {/* END RUNDOWN EDITOR */}
diff --git a/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx b/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx
index 5310d860..83638e9a 100644
--- a/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx
@@ -68,222 +68,266 @@ export class EditorTest extends React.Component<IProps, IState> {
     render() {
         return (
             <Layout.AuthoringFrame
-            header={(
-                <SubNav zIndex={2}>
-                    <ButtonGroup align='end'>
-                        <Button
+                header={(
+                    <SubNav>
+                        <ButtonGroup align='end'>
+                            <Button
                                 text="Open pinned"
                                 style="hollow"
                                 onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
                             />
-                        <Divider size="mini" />
-                        <ButtonGroup subgroup={true} spaces="no-space">
-                            <Dropdown
-                                items={[
-                                    {
-                                        type: 'group', label: 'Chose a theme', items: [
-                                            'divider',
-                                            { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
-                                            { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
-                                        ]
-                                    },
-                                ]}>
-                                <NavButton type='default' icon='adjust' onClick={()=> false} />
-                            </Dropdown>
-                            <Tooltip text='Minimize' flow='left'>
-                                <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
-                            </Tooltip>
-                            <Tooltip text='More actions' flow='left'>
-                                <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
-                            </Tooltip>
-                            <Tooltip text='Send to / Publish' flow='left'>
-                                <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
-                            </Tooltip>
-                        </ButtonGroup>
-                    </ButtonGroup>
-                </SubNav>
-            )}
-            leftPanel={(
-                <Nav.SideBarTabs
-                items={[
-                    { icon: 'semantics', size: 'big', tooltip: 'Semantics', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'create-list', size: 'big', tooltip: 'Create list', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'picture', size: 'big', tooltip: 'Pictures', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'annotation', size: 'big', tooltip: 'Annotations', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
-                    { icon: 'export', size: 'big', tooltip: 'Export', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
-            )}
-            main={(
-                <Layout.AuthoringMain
-                headerPadding='medium'
-                toolBar={(
-                    <React.Fragment>
-                        <div className="sd-editor-toolbar__content">
-                            <dl>
-                                <dt>Created</dt>
-                                <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                                <dt>by</dt>
-                                <dt>Nareg Asmarian</dt>
-                            </dl>
-                            <dl>
-                                <dt>Modified</dt>
-                                <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                            </dl>
-                        </div>
-                        <ButtonGroup align='end'>
-                            <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
-                            <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
-                            <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+
+                            <Divider size="mini" />
+
+                            <ButtonGroup subgroup={true} spaces="no-space">
+                                <Dropdown
+                                    items={[
+                                        {
+                                            type: 'group', label: 'Chose a theme', items: [
+                                                'divider',
+                                                { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                                { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                            ]
+                                        },
+                                    ]}
+                                >
+                                    <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                </Dropdown>
+
+                                <Tooltip text='Minimize' flow='left'>
+                                    <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                                </Tooltip>
+
+                                <Tooltip text='More actions' flow='left'>
+                                    <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                </Tooltip>
+
+                                <Tooltip text='Send to / Publish' flow='left'>
+                                    <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                </Tooltip>
+                            </ButtonGroup>
                         </ButtonGroup>
-                    </React.Fragment>
-                )}
-                authoringHeader ={(
-                    <React.Fragment>
-                        <Form.FormGroup inlineLabel={true}>
-                            <Form.FormItem>
-                                <Input
-                                    type='text'
-                                    label='Slugline'
-                                    value='This is some value'
-                                    maxLength={30}
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    required={false}
-                                    disabled={false}
-                                    invalid={false}
-                                    onChange={(value) => {}} />
-                            </Form.FormItem>
-                            <Form.FormItem>
-                                <Input
-                                    type='text'
-                                    label='Slugline'
-                                    value='This is some value'
-                                    maxLength={30}
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    required={false}
-                                    disabled={false}
-                                    invalid={false}
-                                    onChange={(value) => {}} />
-                            </Form.FormItem>
-                        </Form.FormGroup>
-                        <Form.FormGroup inlineLabel={true}>
-                            <Form.FormItem>
-                                <Input
-                                    type='text'
-                                    label='Genre'
-                                    value='This is some value'
-                                    maxLength={30}
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    required={false}
-                                    disabled={false}
-                                    invalid={false}
-                                    onChange={(value) => {}} />
-                            </Form.FormItem>
-                        </Form.FormGroup>
-                        <Form.FormGroup marginBottom='0' inlineLabel={true}>
-                            <Form.FormItem>
-                                <Input
-                                    type='text'
-                                    label='Subject'
-                                    value='This is some value'
-                                    maxLength={30}
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    required={true}
-                                    disabled={false}
-                                    invalid={false}
-                                    onChange={(value) => {}} />
-                            </Form.FormItem>
-                            <Form.FormItem autoWidth={true}>
-                                <Form.FormText>Just testing:</Form.FormText>
-                            </Form.FormItem>
-                            <Form.FormItem>
-                                <Select
-                                    label='Categories'
-                                    labelHidden={true}
-                                    value='This is some value'
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    required={true}
-                                    disabled={false}
-                                    invalid={false}
-                                    onChange={(value) => {}}>
-                                        <Option>Option 1</Option>
-                                        <Option>Option 2</Option>
-                                </Select>
-                            </Form.FormItem>
-                            <Form.FormItem autoWidth={true}>
-                                <ButtonGroup>
-                                    <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
-                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                    <Button text="Submit" onClick={()=> false} type="primary" />
-                                </ButtonGroup>
-                            </Form.FormItem>
-                        </Form.FormGroup>
-                    </React.Fragment>
+                    </SubNav>
                 )}
-                authoringBookmarks={(
-                    <Nav.QuickNavBar
-                    scrollSpy='#scroll'
-                        offset={-300}
+                leftPanel={(
+                    <Nav.SideBarTabs
                         items={[
-                            { icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
-                            { icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
-                            { icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
-                            { icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]} />
-                        )}>
-                            <div id='scroll' style={{overflow: 'scroll', height: 600}}>
-                                <div id='section1'>
-                                    <Heading type='h1' className='sd-padding--5'>Section 1</Heading>
-                                <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
-                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                                <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
-                                    risus, porta ac consectetur ac, vestibulum at eros.</p>
-                                <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
-                                    vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-                                <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
-                                    augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
-                                    sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
-                                    purus sit amet fermentum.</p>
-                                    <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
-                                        <span>Curabitur blandit tempus porttitor.</span>
-                                        <Button text="Test button" type="primary" onClick={()=> false} />
-                                        <Button text="Test button" type="highlight" onClick={()=> false} />
-                                        <ButtonGroup align="end">
-                                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                            <Button text="Submit" onClick={()=> false} type="primary" />
-                                        </ButtonGroup>
-                                    </Layout.Container>
+                            { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
+                            { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
+                            { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
+                            { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
+                            { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
+                            { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
+                            { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                        ]}
+                        activeTab={this.state.activeTab}
+                        onActiveTabChange={(val) => {
+                            this.setState({
+                                activeTab: val,
+                                sideOverlayOpen: !this.state.sideOverlayOpen,
+                            });
+                        }}
+                    />
+                )}
+                main={(
+                    <Layout.AuthoringMain
+                        headerPadding='medium'
+                        toolBar={(
+                            <React.Fragment>
+                                <div className="sd-editor-toolbar__content">
+                                    <dl>
+                                        <dt>Created</dt>
+                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                        <dt>by</dt>
+                                        <dt>Nareg Asmarian</dt>
+                                    </dl>
+                                    <dl>
+                                        <dt>Modified</dt>
+                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                    </dl>
                                 </div>
-                                <div id='section2'>
-                                <Heading type='h1' className='sd-padding--5'>Section 2</Heading>
-                                <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
-                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                                <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
-                                    risus, porta ac consectetur ac, vestibulum at eros.</p>
-                                <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                    vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
-                                    vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-                                <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
-                                    augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
-                                    sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
-                                    purus sit amet fermentum.</p>
-                                    <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
-                                        <span>Curabitur blandit tempus porttitor.</span>
-                                        <Button text="Test button" type="primary" onClick={()=> false} />
-                                        <Button text="Test button" type="highlight" onClick={()=> false} />
-                                        <ButtonGroup align="end">
+                                <ButtonGroup align='end'>
+                                    <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                                    <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                                    <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                                </ButtonGroup>
+                            </React.Fragment>
+                        )}
+                        authoringHeader ={(
+                            <React.Fragment>
+                                <Form.FormGroup inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Slugline'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            error='This is error message'
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}} />
+                                    </Form.FormItem>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Slugline'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            error='This is error message'
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}} />
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                                <Form.FormGroup inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Genre'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            error='This is error message'
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}} />
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                                <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Subject'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            error='This is error message'
+                                            info='This is some hint message'
+                                            required={true}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}} />
+                                    </Form.FormItem>
+                                    <Form.FormItem autoWidth={true}>
+                                        <Form.FormText>Just testing:</Form.FormText>
+                                    </Form.FormItem>
+                                    <Form.FormItem>
+                                        <Select
+                                            label='Categories'
+                                            labelHidden={true}
+                                            value='This is some value'
+                                            error='This is error message'
+                                            info='This is some hint message'
+                                            required={true}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}}>
+                                                <Option>Option 1</Option>
+                                                <Option>Option 2</Option>
+                                        </Select>
+                                    </Form.FormItem>
+                                    <Form.FormItem autoWidth={true}>
+                                        <ButtonGroup>
+                                            <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
                                             <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
                                             <Button text="Submit" onClick={()=> false} type="primary" />
                                         </ButtonGroup>
-                                    </Layout.Container>
-                                </div>
-                                <div id='section3'>
-                                <Heading type='h1' className='sd-padding--5'>Section 3</Heading>
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                            </React.Fragment>
+                        )}
+                        authoringBookmarks={(
+                            <Nav.QuickNavBar
+                                scrollSpy='#scroll'
+                                offset={-300}
+                                items={[
+                                    { icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
+                                    { icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
+                                    { icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
+                                    { icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]}
+                            />
+                        )}
+                    >
+                        <div id='scroll' style={{overflow: 'scroll', height: 600}}>
+                            <div id='section1'>
+                                <Heading type='h1' className='sd-padding--5'>Section 1</Heading>
+                            <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.</p>
+                            <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                            <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                purus sit amet fermentum.</p>
+                                <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                    <span>Curabitur blandit tempus porttitor.</span>
+                                    <Button text="Test button" type="primary" onClick={()=> false} />
+                                    <Button text="Test button" type="highlight" onClick={()=> false} />
+                                    <ButtonGroup align="end">
+                                        <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                        <Button text="Submit" onClick={()=> false} type="primary" />
+                                    </ButtonGroup>
+                                </Layout.Container>
+                            </div>
+                            <div id='section2'>
+                            <Heading type='h1' className='sd-padding--5'>Section 2</Heading>
+                            <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.</p>
+                            <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                            <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                purus sit amet fermentum.</p>
+                                <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                    <span>Curabitur blandit tempus porttitor.</span>
+                                    <Button text="Test button" type="primary" onClick={()=> false} />
+                                    <Button text="Test button" type="highlight" onClick={()=> false} />
+                                    <ButtonGroup align="end">
+                                        <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                        <Button text="Submit" onClick={()=> false} type="primary" />
+                                    </ButtonGroup>
+                                </Layout.Container>
+                            </div>
+                            <div id='section3'>
+                            <Heading type='h1' className='sd-padding--5'>Section 3</Heading>
+                            <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.</p>
+                            <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
+                                vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+                            <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
+                                augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
+                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
+                                purus sit amet fermentum.</p>
+                                <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                    <span>Curabitur blandit tempus porttitor.</span>
+                                    <Button text="Test button" type="primary" onClick={()=> false} />
+                                    <Button text="Test button" type="highlight" onClick={()=> false} />
+                                    <ButtonGroup align="end">
+                                        <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                        <Button text="Submit" onClick={()=> false} type="primary" />
+                                    </ButtonGroup>
+                                </Layout.Container>
+                            </div>
+
+                            <div id='section4'>
+                            <Heading type='h1' className='sd-padding--5'>Section 4</Heading>
                                 <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
                                     Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                 <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
@@ -305,166 +349,142 @@ export class EditorTest extends React.Component<IProps, IState> {
                                             <Button text="Submit" onClick={()=> false} type="primary" />
                                         </ButtonGroup>
                                     </Layout.Container>
-                                </div>
+                            </div>
+                        </div>
+                    </Layout.AuthoringMain>
+                )}
+                sidePanelPinned={this.state.rightPanelOpen}
+                sidePanel={(
+                    <Layout.Panel side='right' background='grey' open={this.state.rightPanelOpen} size='x-small'>
+                        <Layout.PanelHeader title='Pinned content' onClose={() => this.setState({'rightPanelOpen': false})} />
 
-                                <div id='section4'>
-                                <Heading type='h1' className='sd-padding--5'>Section 4</Heading>
-                                    <p className='sd-margin-b--3'>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
-                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                                    <p className='sd-margin-b--3'>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                        vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
-                                        risus, porta ac consectetur ac, vestibulum at eros.</p>
-                                    <p className='sd-margin-b--3'>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-                                        vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
-                                        vestibulum at eros. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-                                    <p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra
-                                        augue. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus
-                                        sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
-                                        purus sit amet fermentum.</p>
-                                        <Layout.Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
-                                            <span>Curabitur blandit tempus porttitor.</span>
-                                            <Button text="Test button" type="primary" onClick={()=> false} />
-                                            <Button text="Test button" type="highlight" onClick={()=> false} />
+                        <Layout.PanelContent>
+                            <Layout.PanelContentBlock>
+                                <BoxedList density='comfortable'>
+                                    <BoxedListItem
+                                        type="success"
+                                        clickable={true}
+                                        media={(
+                                            <Icon name='slideshow' />
+                                        )}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                        </BoxedListContentRow>
+                                        <BoxedListContentRow>
+                                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+
+                                    <BoxedListItem
+                                        type="warning"
+                                        media={(
+                                            <AvatarWrapper
+                                                size="medium"
+                                                >
+                                                <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                            </AvatarWrapper>
+                                        )}
+                                        footer={(
                                             <ButtonGroup align="end">
-                                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                                <Button text="Submit" onClick={()=> false} type="primary" />
+                                                <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                                <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
                                             </ButtonGroup>
-                                        </Layout.Container>
-                                </div>
-                            </div>
-
-                </Layout.AuthoringMain>
-            )}
-            sidePanelPinned={this.state.rightPanelOpen}
-            sidePanel={(
-                <Layout.Panel side='right' background='grey' open={this.state.rightPanelOpen} size='x-small'>
-                    <Layout.PanelHeader title='Pinned content' onClose={() => this.setState({'rightPanelOpen': false})}>
-                    </Layout.PanelHeader>
-                    <Layout.PanelContent>
-                        <Layout.PanelContentBlock>
-                            <BoxedList density='comfortable'>
-                                <BoxedListItem
-                                    type="success"
-                                    clickable={true}
-                                    media={(
-                                        <Icon name='slideshow'  />
-                                    )}
-                                    actions={(
-                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                    )}
-                                >
-                                    <BoxedListContentRow>
-                                        Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-                                    </BoxedListContentRow>
-                                    <BoxedListContentRow>
-                                        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-                                    </BoxedListContentRow>
-                                </BoxedListItem>
-                                <BoxedListItem
-                                    type="warning"
-                                    media={(
-                                        <AvatarWrapper
-                                            size="medium"
-                                            >
-                                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
-                                        </AvatarWrapper>
-                                    )}
-                                    footer={(
-                                        <ButtonGroup align="end">
-                                            <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
-                                            <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
-                                        </ButtonGroup>
-                                    )}
-                                    actions={(
-                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                    )}
-                                >
-                                    <BoxedListContentRow>
-                                        Maecenas sed diam eget risus varius blandit sit amet magna.
-                                    </BoxedListContentRow>
-                                </BoxedListItem>
-                                <BoxedListItem
-                                    selected={true}
-                                    actions={(
-                                        <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                    )}
-                                >
-                                    <BoxedListContentRow>
-                                        Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
-                                    </BoxedListContentRow>
-                                </BoxedListItem>
-                            </BoxedList>
-                        </Layout.PanelContentBlock>
-                    </Layout.PanelContent>
-                </Layout.Panel>
-            )}
-            sideOverlayOpen={this.state.sideOverlayOpen}
-            sideOverlay={(
-                <Layout.Panel background='light' open={this.state.sideOverlayOpen} size='x-small'>
-                    <Layout.PanelHeader title="Metadata (overlay pannel)" onClose={() => this.setState({'sideOverlayOpen': false})}>
-                        {/* <Tabs onClick={()=> false}>
-                            <TabLabel label='Content' indexValue={0}/>
-                            <TabLabel label='Metadata' indexValue={1}/>
-                            <TabLabel label='Duplicates' indexValue={2}/>
-                        </Tabs> */}
+                                        )}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet magna.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+                                    
+                                    <BoxedListItem
+                                        selected={true}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+                                </BoxedList>
+                            </Layout.PanelContentBlock>
+                        </Layout.PanelContent>
+                    </Layout.Panel>
+                )}
+                sideOverlayOpen={this.state.sideOverlayOpen}
+                sideOverlay={(
+                    <Layout.Panel background='light' open={this.state.sideOverlayOpen} size='x-small'>
+                        <Layout.PanelHeader title="Metadata (overlay pannel)" onClose={() => this.setState({'sideOverlayOpen': false})}>
+                            {/* <Tabs onClick={()=> false}>
+                                <TabLabel label='Content' indexValue={0}/>
+                                <TabLabel label='Metadata' indexValue={1}/>
+                                <TabLabel label='Duplicates' indexValue={2}/>
+                            </Tabs> */}
 
-                        {/* <SlidingToolbar>
-                            <Button text="Cancel" onClick={()=> false} />
-                            <Button text="Save" type="primary" onClick={()=> false} />
-                        </SlidingToolbar> */}
-                        {/* <Alert icon="warning-sign" size='small' type='warning'>
-                            Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in.
-                        </Alert> */}
-                    </Layout.PanelHeader>
-                    <Layout.PanelContent
-                        loading={false}
-                        empty={false}
-                        emptyTemplate={(
-                            <EmptyState title="test" />
-                        )} >
-                        <Layout.PanelContentBlock>
-                            <SimpleList border={true}>
-                                <SimpleListItem justify="space-between">
-                                    <Form.FormLabel text="My label" />
-                                    <Switch toolTipFlow='left' label={{text:'My label', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
-                                </SimpleListItem>
-                                <SimpleListItem justify="space-between">
-                                    <Form.FormLabel text="Form label" />
-                                    <Switch toolTipFlow='left' label={{text:'Form label', hidden: true}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
-                                </SimpleListItem>
-                                <SimpleListItem stacked={true}>
-                                    <Form.FormLabel text="Label two" />
-                                    <Text size="small" weight="light">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</Text>
-                                </SimpleListItem>
-                            </SimpleList>
-                        </Layout.PanelContentBlock>
-                    </Layout.PanelContent>
-                </Layout.Panel>
-            )}
-            sideBar={(
-                <Nav.SideBarTabs
-                    items={[
-                        { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
-                        { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
-                        { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
-                        { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
-                        { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
-                        { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
-                        { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
-                    ]}
-                    activeTab={this.state.activeTab}
-                    onActiveTabChange={(val) => {
-                        this.setState({
-                            activeTab: val,
-                            sideOverlayOpen: !this.state.sideOverlayOpen,
-                        });
-                    }}
-                />
-            )}
-            overlayPanel={(
-                <div></div>
-            )}
-        />
+                            {/* <SlidingToolbar>
+                                <Button text="Cancel" onClick={()=> false} />
+                                <Button text="Save" type="primary" onClick={()=> false} />
+                            </SlidingToolbar> */}
+                            {/* <Alert icon="warning-sign" size='small' type='warning'>
+                                Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in.
+                            </Alert> */}
+                        </Layout.PanelHeader>
+                        <Layout.PanelContent
+                            loading={false}
+                            empty={false}
+                            emptyTemplate={(
+                                <EmptyState title="test" />
+                            )} >
+                            <Layout.PanelContentBlock>
+                                <SimpleList border={true}>
+                                    <SimpleListItem justify="space-between">
+                                        <Form.FormLabel text="My label" />
+                                        <Switch toolTipFlow='left' label={{content:'My label', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                    </SimpleListItem>
+                                    <SimpleListItem justify="space-between">
+                                        <Form.FormLabel text="Form label" />
+                                        <Switch toolTipFlow='left' label={{content:'Form label', hidden: true}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
+                                    </SimpleListItem>
+                                    <SimpleListItem stacked={true}>
+                                        <Form.FormLabel text="Label two" />
+                                        <Text size="small" weight="light">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</Text>
+                                    </SimpleListItem>
+                                </SimpleList>
+                            </Layout.PanelContentBlock>
+                        </Layout.PanelContent>
+                    </Layout.Panel>
+                )}
+                sideBar={(
+                    <Nav.SideBarTabs
+                        items={[
+                            { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
+                            { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
+                            { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
+                            { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
+                            { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
+                            { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
+                            { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                        ]}
+                        activeTab={this.state.activeTab}
+                        onActiveTabChange={(val) => {
+                            this.setState({
+                                activeTab: val,
+                                sideOverlayOpen: !this.state.sideOverlayOpen,
+                            });
+                        }}
+                    />
+                )}
+                overlayPanel={(
+                    <div></div>
+                )}
+            />
         );
     }
 }
diff --git a/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx b/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx
index 0518895e..17d0399b 100644
--- a/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx
@@ -70,22 +70,25 @@ export class Multiedit extends React.Component<IProps, IState> {
     render() {
         return (
             <Modal
-            className='p-dialog-flex'
-            onHide={() => false}
-            maximized={true} contentPadding={"none"}
-            headerTemplate="Multiedit"
-            visible={true} >
+                className='p-dialog-flex'
+                onHide={() => false}
+                maximized={true} contentPadding={"none"}
+                headerTemplate="Multiedit"
+                visible={true}
+            >
                 <Spacer children={this.state.arr} gap={'0'}></Spacer>
-                <div style={{
-                    padding: '0 20px',
-                    display: 'flex',
-                    alignItems: 'center'
-                }}>
+                <div
+                    style={{
+                        padding: '0 20px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    }}
+                >
                     <Dropdown
-                    append
-                    items={[
-                            { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
-                    ]}>
+                        items={[
+                                { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
+                        ]}
+                    >
                         <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                     </Dropdown>
                 </div>
@@ -105,227 +108,228 @@ export class Editor extends React.Component<{}, IEditor> {
         this.state = {
             sideBarOpen: false,
             activeTab: '1',
-
         }
     }
 
     render() {
-    return <div style={{borderRight: '4px solid grey'}}>
-        <Layout.AuthoringFrame
-        header={(
-            <SubNav zIndex={2}>
-                <ButtonGroup align='end'>
-                    <ButtonGroup subgroup={true} spaces="no-space">
-                        <Tooltip text='More actions' flow='left'>
-                            <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
-                        </Tooltip>
-                    </ButtonGroup>
-                </ButtonGroup>
-            </SubNav>
-        )}
-        main={(
-            <Layout.AuthoringMain
-            headerPadding='medium'
-            toolBar={(
-                <React.Fragment>
-                    <div className="sd-editor-toolbar__content">
-                        <dl>
-                            <dt>Created</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                            <dt>by</dt>
-                            <dt>Nareg Asmarian</dt>
-                        </dl>
-                        <dl>
-                            <dt>Modified</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                        </dl>
-                    </div>
-                    <ButtonGroup align='end'>
-                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
-                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
-                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
-                    </ButtonGroup>
-                </React.Fragment>
-            )}
-            authoringHeader ={(
-                <React.Fragment>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Genre'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Subject'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <Form.FormText>Just testing:</Form.FormText>
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Select
-                                label='Categories'
-                                labelHidden={true}
-                                value='This is some value'
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                            </Select>
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <ButtonGroup>
-                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
-                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                <Button text="Submit" onClick={()=> false} type="primary" />
+        return (
+            <div style={{borderRight: '4px solid grey'}}>
+                <Layout.AuthoringFrame
+                    header={(
+                        <SubNav>
+                            <ButtonGroup align='end'>
+                                <ButtonGroup subgroup={true} spaces="no-space">
+                                    <Tooltip text='More actions' flow='left'>
+                                        <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='Send to / Publish' flow='left'>
+                                        <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='Send to / Publish' flow='left'>
+                                        <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
+                                    </Tooltip>
+                                </ButtonGroup>
                             </ButtonGroup>
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                </React.Fragment>
-            )}>
-            </Layout.AuthoringMain>
-        )}
-        sidePanel={(
-            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
-                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
-                </Layout.PanelHeader>
-                <Layout.PanelContent>
-                    <Layout.PanelContentBlock>
-                        <BoxedList density='comfortable'>
-                            <BoxedListItem
-                                type="success"
-                                clickable={true}
-                                media={(
-                                    <Icon name='slideshow'  />
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                                <BoxedListContentRow>
-                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                type="warning"
-                                media={(
-                                    <AvatarWrapper
-                                        size="medium"
-                                        >
-                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
-                                    </AvatarWrapper>
-                                )}
-                                footer={(
-                                    <ButtonGroup align="end">
-                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
-                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                        </SubNav>
+                    )}
+                    main={(
+                        <Layout.AuthoringMain
+                            headerPadding='medium'
+                            toolBar={(
+                                <React.Fragment>
+                                    <div className="sd-editor-toolbar__content">
+                                        <dl>
+                                            <dt>Created</dt>
+                                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                            <dt>by</dt>
+                                            <dt>Nareg Asmarian</dt>
+                                        </dl>
+                                        <dl>
+                                            <dt>Modified</dt>
+                                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                        </dl>
+                                    </div>
+                                    <ButtonGroup align='end'>
+                                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
                                     </ButtonGroup>
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                selected={true}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                        </BoxedList>
-                    </Layout.PanelContentBlock>
-                </Layout.PanelContent>
-            </Layout.Panel>
-        )}
-
-        sideBarClosed={this.state.sideBarOpen}
-        sideBar={(
-            <Nav.SideBarTabs
-                items={[
-                    { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
-                    { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
-                    { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
-                    { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
-                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
-                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
-                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
-                ]}
-                activeTab={this.state.activeTab}
-                onActiveTabChange={(val) => {
-                    this.setState({
-                        activeTab: val,
-                    })
-                }}
-            />
-        )}
-    />
-    </div>
+                                </React.Fragment>
+                            )}
+                            authoringHeader ={(
+                                <React.Fragment>
+                                    <Form.FormGroup inlineLabel={true}>
+                                        <Form.FormItem>
+                                            <Input
+                                                type='text'
+                                                label='Slugline'
+                                                value='This is some value'
+                                                maxLength={30}
+                                                error='This is error message'
+                                                info='This is some hint message'
+                                                required={false}
+                                                disabled={false}
+                                                invalid={false}
+                                                onChange={(value) => {}} />
+                                        </Form.FormItem>
+                                        <Form.FormItem>
+                                            <Input
+                                                type='text'
+                                                label='Slugline'
+                                                value='This is some value'
+                                                maxLength={30}
+                                                error='This is error message'
+                                                info='This is some hint message'
+                                                required={false}
+                                                disabled={false}
+                                                invalid={false}
+                                                onChange={(value) => {}} />
+                                        </Form.FormItem>
+                                    </Form.FormGroup>
+                                    <Form.FormGroup inlineLabel={true}>
+                                        <Form.FormItem>
+                                            <Input
+                                                type='text'
+                                                label='Genre'
+                                                value='This is some value'
+                                                maxLength={30}
+                                                error='This is error message'
+                                                info='This is some hint message'
+                                                required={false}
+                                                disabled={false}
+                                                invalid={false}
+                                                onChange={(value) => {}} />
+                                        </Form.FormItem>
+                                    </Form.FormGroup>
+                                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                                        <Form.FormItem>
+                                            <Input
+                                                type='text'
+                                                label='Subject'
+                                                value='This is some value'
+                                                maxLength={30}
+                                                error='This is error message'
+                                                info='This is some hint message'
+                                                required={true}
+                                                disabled={false}
+                                                invalid={false}
+                                                onChange={(value) => {}} />
+                                        </Form.FormItem>
+                                        <Form.FormItem autoWidth={true}>
+                                            <Form.FormText>Just testing:</Form.FormText>
+                                        </Form.FormItem>
+                                        <Form.FormItem>
+                                            <Select
+                                                label='Categories'
+                                                labelHidden={true}
+                                                value='This is some value'
+                                                error='This is error message'
+                                                info='This is some hint message'
+                                                required={true}
+                                                disabled={false}
+                                                invalid={false}
+                                                onChange={(value) => {}}>
+                                                    <Option>Option 1</Option>
+                                                    <Option>Option 2</Option>
+                                            </Select>
+                                        </Form.FormItem>
+                                        <Form.FormItem autoWidth={true}>
+                                            <ButtonGroup>
+                                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                                <Button text="Submit" onClick={()=> false} type="primary" />
+                                            </ButtonGroup>
+                                        </Form.FormItem>
+                                    </Form.FormGroup>
+                                </React.Fragment>
+                            )}
+                        >
+                        </Layout.AuthoringMain>
+                    )}
+                    sidePanel={(
+                        <Layout.Panel side='right' background='grey' open={false} size='x-small'>
+                            <Layout.PanelHeader title='Pinned content' onClose={() => false}>
+                            </Layout.PanelHeader>
+                            <Layout.PanelContent>
+                                <Layout.PanelContentBlock>
+                                    <BoxedList density='comfortable'>
+                                        <BoxedListItem
+                                            type="success"
+                                            clickable={true}
+                                            media={(
+                                                <Icon name='slideshow' />
+                                            )}
+                                            actions={(
+                                                <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                            )}
+                                        >
+                                            <BoxedListContentRow>
+                                                Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                            </BoxedListContentRow>
+                                            <BoxedListContentRow>
+                                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                            </BoxedListContentRow>
+                                        </BoxedListItem>
+                                        <BoxedListItem
+                                            type="warning"
+                                            media={(
+                                                <AvatarWrapper
+                                                    size="medium"
+                                                    >
+                                                    <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                                </AvatarWrapper>
+                                            )}
+                                            footer={(
+                                                <ButtonGroup align="end">
+                                                    <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                                    <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                                </ButtonGroup>
+                                            )}
+                                            actions={(
+                                                <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                            )}
+                                        >
+                                            <BoxedListContentRow>
+                                                Maecenas sed diam eget risus varius blandit sit amet magna.
+                                            </BoxedListContentRow>
+                                        </BoxedListItem>
+                                        <BoxedListItem
+                                            selected={true}
+                                            actions={(
+                                                <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                            )}
+                                        >
+                                            <BoxedListContentRow>
+                                                Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                            </BoxedListContentRow>
+                                        </BoxedListItem>
+                                    </BoxedList>
+                                </Layout.PanelContentBlock>
+                            </Layout.PanelContent>
+                        </Layout.Panel>
+                    )}
+                    sideBarClosed={this.state.sideBarOpen}
+                    sideBar={(
+                        <Nav.SideBarTabs
+                            items={[
+                                { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
+                                { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
+                                { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
+                                { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
+                                { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
+                                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
+                                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                            ]}
+                            activeTab={this.state.activeTab}
+                            onActiveTabChange={(val) => {
+                                this.setState({
+                                    activeTab: val,
+                                })
+                            }}
+                        />
+                    )}
+                />
+            </div>
+        )
     }
 }
diff --git a/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx b/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx
index 7169fceb..593ea66a 100644
--- a/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx
@@ -56,37 +56,37 @@ export class PageLayoutTest extends React.Component<IProps, IState> {
         return (
             <Layout.PageLayout
             header={(
-<SubNav zIndex={2}>
-                <ButtonGroup align="start" padded={true}>
-                    <Button
-                        text="Open left panel"
-                        style="hollow"
-                        onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
-                    />
-                </ButtonGroup>
-                <ButtonGroup align='end'>
-                    <Button
-                            text="Open right panel"
+                <SubNav>
+                    <ButtonGroup align="start" padded={true}>
+                        <Button
+                            text="Open left panel"
                             style="hollow"
-                            onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
+                            onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
                         />
-                    <Divider size="mini" />
-                    <ButtonGroup subgroup={true} spaces="no-space">
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'Chose a theme', items: [
-                                        'divider',
-                                        { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
-                                        { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
-                                    ]
-                                },
-                            ]}>
-                            <NavButton type='default' icon='adjust' onClick={()=> false} />
-                        </Dropdown>
                     </ButtonGroup>
-                </ButtonGroup>
-            </SubNav>
+                    <ButtonGroup align='end'>
+                        <Button
+                                text="Open right panel"
+                                style="hollow"
+                                onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
+                            />
+                        <Divider size="mini" />
+                        <ButtonGroup subgroup={true} spaces="no-space">
+                            <Dropdown
+                                items={[
+                                    {
+                                        type: 'group', label: 'Chose a theme', items: [
+                                            'divider',
+                                            { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                            { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                        ]
+                                    },
+                                ]}>
+                                <NavButton type='default' icon='adjust' onClick={()=> false} />
+                            </Dropdown>
+                        </ButtonGroup>
+                    </ButtonGroup>
+                </SubNav>
             )}
             leftPanelOpen={this.state.leftPanelOpen}
             leftPanel={(
diff --git a/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx b/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx
index 17f5f97a..8e9bf59d 100644
--- a/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx
@@ -130,7 +130,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
             <Components.Layout header='My Profile' theme={this.state.theme}>
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='User list' flow='right'>
                                     <NavButton icon='arrow-left' onClick={() => false} />
@@ -142,7 +142,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
                             </AvatarWrapper>
                             <h2 className='subnav__page-title'>Jeffrey Lebowski</h2>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <SubNavDivider width='small' />
                             <Tabs onClick={this.handleClick}>
                                 <TabLabel label='Overview' indexValue={0}/>
@@ -180,7 +180,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
                                         <Container id="profile" direction='column' className='sd-radius--medium sd-panel-bg--gradient-1 sd-shadow--z2 sd-padding--3 sd-state--focus'>
                                             <Container className='sd-flex-justify-space-between sd-margin-b--2'>
                                                 <Label text='Active' type='success' style='translucent' />
-                                                <Switch toolTipFlow='left' label={{text:'Toggle active', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                                <Switch toolTipFlow='left' label={{content:'Toggle active', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
                                             </Container>
                                             <Container direction='column' className='sd-flex-align-items-center sd-margin-x--auto'>
                                                 <AvatarWrapper size="xx-large">
@@ -478,7 +478,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
                                     <SimpleListItem stacked={true}>
                                         <Heading type='h3'>Feature preview</Heading>
                                         <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
-                                            <Switch label={{text:'Enable Feature Preview'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                            <Switch label={{content:'Enable Feature Preview'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
                                         </Container>
                                     </SimpleListItem>
                                     <SimpleListItem stacked={true}>
@@ -518,8 +518,8 @@ export class PersonalProfile extends React.Component<IProps, IState> {
                                     <Heading type='h3'>Notifications</Heading>
                                         <Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
                                             <SwitchGroup>
-                                                <Switch label={{text:'Send notifications via email'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
-                                                <Switch label={{text:'Allow Desktop Notifications'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
+                                                <Switch label={{content:'Send notifications via email'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
+                                                <Switch label={{content:'Allow Desktop Notifications'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
                                             </SwitchGroup>
                                         </Container>
                                     </SimpleListItem>
diff --git a/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx b/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx
index f2759214..9cf79f3a 100644
--- a/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx
@@ -144,7 +144,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />
                             <Divider size="mini" />
                             <ButtonGroup subgroup={true} spaces="no-space">
-
                                 <Tooltip text='Minimize' flow='left'>
                                     <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
                                 </Tooltip>
@@ -190,7 +189,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}}>
+                                            onChange={(value) => {}}
+                                        >
                                                 <Option>Type 1</Option>
                                                 <Option>Type 2</Option>
                                         </Select>
@@ -204,7 +204,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}}>
+                                            onChange={(value) => {}}
+                                        >
                                                 <Option>Marker</Option>
                                                 <Option>Tabu</Option>
                                         </Select>
@@ -218,7 +219,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}}>
+                                            onChange={(value) => {}}
+                                        >
                                                 <Option>Section 1</Option>
                                                 <Option>Section 2</Option>
                                         </Select>
@@ -235,7 +237,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={false}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
@@ -247,7 +250,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={false}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                 </Form.FormGroup>
                                 <Form.FormGroup>
@@ -260,7 +264,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                 </Form.FormGroup>
                                 <Form.FormGroup marginBottom='2'>
@@ -273,7 +278,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
@@ -284,7 +290,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
@@ -295,7 +302,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                             required={true}
                                             disabled={false}
                                             invalid={false}
-                                            onChange={(value) => {}} />
+                                            onChange={(value) => {}}
+                                        />
                                     </Form.FormItem>
                                 </Form.FormGroup>
                             </React.Fragment>
@@ -312,7 +320,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     labelHidden={true}
                                     type='text'
                                     tabindex={0}
-                                    onChange={(value) => this.setState({inputValue: value})} />
+                                    onChange={(value) => this.setState({inputValue: value})}
+                                />
                             </Container>
                             <ButtonGroup>
                                 <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
@@ -373,7 +382,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                 </div>
                                             </React.Fragment>
                                         )}
-
                                         authoringHeader={(
                                             <React.Fragment>
                                                 <Form.FormGroup inlineLabel={false}>
@@ -386,7 +394,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                             required={true}
                                                             disabled={false}
                                                             invalid={false}
-                                                            onChange={(value) => {}}>
+                                                            onChange={(value) => {}}
+                                                        >
                                                                 <Option>Type 1</Option>
                                                                 <Option>Type 2</Option>
                                                         </Select>
@@ -400,7 +409,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                             required={true}
                                                             disabled={false}
                                                             invalid={false}
-                                                            onChange={(value) => {}}>
+                                                            onChange={(value) => {}}
+                                                        >
                                                                 <Option>Section 1</Option>
                                                                 <Option>Section 2</Option>
                                                         </Select>
@@ -416,7 +426,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                             required={true}
                                                             disabled={false}
                                                             invalid={false}
-                                                            onChange={(value) => {}}>
+                                                            onChange={(value) => {}}
+                                                        >
                                                                 <Option>Option 1</Option>
                                                                 <Option>Option 2</Option>
                                                         </Select>
@@ -431,7 +442,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                             required={false}
                                                             disabled={false}
                                                             invalid={false}
-                                                            onChange={(value) => {}} />
+                                                            onChange={(value) => {}}
+                                                        />
                                                     </Form.FormItem>
                                                 </Form.FormGroup>
                                                 <Form.FormGroup inlineLabel={false}>
@@ -445,7 +457,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                             required={false}
                                                             disabled={false}
                                                             invalid={false}
-                                                            onChange={(value) => {}} />
+                                                            onChange={(value) => {}}
+                                                        />
                                                     </Form.FormItem>
                                                 </Form.FormGroup>
                                             </React.Fragment>
@@ -453,7 +466,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     >
                                     </Layout.AuthoringMain>
                                 }
-
                                 sideBar={(
                                     <Nav.SideBarTabs
                                         items={[
diff --git a/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx b/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx
index feef7911..1fc87ed8 100644
--- a/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx
@@ -155,432 +155,473 @@ export class Rundowns extends React.Component<IProps, IState> {
         );
         return (
             <>
-            <Layout.Layout header='Rundowns' theme={this.state.theme}>
-                <Nav.SideBarMenu
-                    items={[
-                        { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big', editor: this.state.openEditor },
-                        { icon: 'marked-star', size: 'big' },
-                        { icon: 'spike', size: 'big' },
-                        { icon: 'personal', size: 'big' },
-                        { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big' },
-                        { icon: 'rundown', size: 'big', }]} />
-
-                <Layout.LayoutContainer>
-                    <Layout.HeaderPanel>
-                        <SubNav zIndex={2}>
-                            <SearchBar placeholder='Search media'></SearchBar>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <Dropdown
-                                    items={[
-                                        {
-                                            type: 'group', label: 'Settings', items: [
-                                                'divider',
-                                                { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
-                                                { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
-                                            ]
-                                        }]}>
-                                    <NavButton icon='settings' onClick={() => false} />
-                                </Dropdown>
-                                <Dropdown
-                                    header={[
-                                        {
-                                            type: 'group', label: 'Create', items: []
-                                        },
-                                        {
-                                            type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
-                                                { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
-                                            ]
-                                        },
-                                    ]}
-                                    items={[
-                                        {
-                                            type: 'group', label: 'Recent Templates', items: [
-                                                { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                            ]
-                                        }]}
-                                        footer={[
-                                            {
-                                                type: 'group', items: [
-                                                    { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
-                                                    { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
-                                                ]
-                                            },
-                                        ]}>
-
-                                    <CreateButton ariaValue='Create' onClick={() => false} />
-                                </Dropdown>
-                            </ButtonGroup>
-                        </SubNav>
-                        <SubNav zIndex={1}>
-                            <ButtonGroup align='start'>
-                                <NavButton icon='filter-large' onClick={this.handleFilter} />
-                            </ButtonGroup>
-                            <ButtonGroup align='end'>
-                                <ButtonGroup align='sub' padded={true} >
-                                    <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
-                                    <Button text='Today' style='hollow' onClick={() => false} />
-                                    <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
-                                </ButtonGroup>
-                                <RadioButtonGroup options={[
-                                    {value:'test10', label:'D'},
-                                    {value:'test11', label:'W'},
-                                    {value:'test12', label:'M'},
-                                ]} group={{padded:false}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
-                                <ButtonGroup align='sub' spaces='no-space'>
+                <Layout.Layout header='Rundowns' theme={this.state.theme}>
+                    <Nav.SideBarMenu
+                        items={[
+                            { icon: 'dashboard', size: 'big' },
+                            { icon: 'view', size: 'big' },
+                            { icon: 'marked-star', size: 'big' },
+                            { icon: 'spike', size: 'big' },
+                            { icon: 'personal', size: 'big' },
+                            { icon: 'global-search', size: 'big' },
+                            { icon: 'picture', size: 'big' },
+                            { icon: 'rundown', size: 'big', },
+                        ]}
+                    />
+
+                    <Layout.LayoutContainer>
+                        <Layout.HeaderPanel>
+                            <SubNav>
+                                <SearchBar placeholder='Search media' />
+
+                                <ButtonGroup align='end' spaces='no-space'>
                                     <Dropdown
                                         items={[
                                             {
-                                                type: 'group', label: 'Chose a theme', items: [
+                                                type: 'group', label: 'Settings', items: [
                                                     'divider',
-                                                    { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
-                                                    { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
-                                                    { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
+                                                    { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
+                                                    { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
                                                 ]
                                             },
-                                        ]}>
-                                        <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                        ]}
+                                    >
+                                        <NavButton icon='settings' onClick={() => false} />
                                     </Dropdown>
+
                                     <Dropdown
+                                        header={[
+                                            {
+                                                type: 'group', label: 'Create', items: []
+                                            },
+                                            {
+                                                type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
+                                                    { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
+                                                ]
+                                            },
+                                        ]}
                                         items={[
                                             {
-                                                type: 'group', label: 'Actions', items: [
-                                                    'divider',
-                                                    { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                type: 'group', label: 'Recent Templates', items: [
+                                                    { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                    { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                    { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                    { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                ]
+                                            },
+                                        ]}
+                                        footer={[
+                                            {
+                                                type: 'group', items: [
+                                                    { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
+                                                    { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
                                                 ]
-                                            }]}>
-                                        <NavButton icon='dots-vertical' onClick={() => false} />
+                                            },
+                                        ]}
+                                    >
+                                        <CreateButton ariaValue='Create' onClick={() => false} />
                                     </Dropdown>
                                 </ButtonGroup>
-                            </ButtonGroup>
-                        </SubNav>
-                    </Layout.HeaderPanel>
-                    {/* TOOLBAR HEADER */}
-
-                    <Layout.LeftPanel open={this.state.openFilter}>
-                        <Layout.Panel side='left' background='grey'>
-                            <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock>
-                                    <Form.FormGroup>
-                                        <Form.FormItem>
-                                            <Select
-                                                label='Shows'
-                                                labelHidden={true}
-                                                value='This is some value'
-                                                error='This is error message'
-                                                info='This is some hint message'
-                                                required={true}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => {}}>
-                                                    <Option>Marker</Option>
-                                                    <Option>Tabu</Option>
-                                            </Select>
-                                        </Form.FormItem>
-                                    </Form.FormGroup>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input label='Title'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Title'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                            </SubNav>
+
+                            <SubNav>
+                                <ButtonGroup align='start'>
+                                    <NavButton icon='filter-large' onClick={this.handleFilter} />
+                                </ButtonGroup>
+
+                                <ButtonGroup align='end'>
+                                    <ButtonGroup align='sub' padded={true} >
+                                        <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
+                                        <Button text='Today' style='hollow' onClick={() => false} />
+                                        <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
+                                    </ButtonGroup>
+
+                                    <RadioButtonGroup
+                                        options={[
+                                            {value:'test10', label:'D'},
+                                            {value:'test11', label:'W'},
+                                            {value:'test12', label:'M'},
+                                        ]}
+                                        group={{padded:false}}
+                                        value={this.state.itemType}
+                                        onChange={(value) => this.setState({ itemType: value })}
+                                    />
+
+                                    <ButtonGroup align='sub' spaces='no-space'>
+                                        <Dropdown
+                                            items={[
+                                                {
+                                                    type: 'group', label: 'Chose a theme', items: [
+                                                        'divider',
+                                                        { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
+                                                        { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
+                                                        { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
+                                                    ]
+                                                },
+                                            ]}
+                                        >
+                                            <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                        </Dropdown>
+
+                                        <Dropdown
+                                            items={[
+                                                {
+                                                    type: 'group', label: 'Actions', items: [
+                                                        'divider',
+                                                        { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                        { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
+                                                    ]
+                                                },
+                                            ]}
+                                        >
+                                            <NavButton icon='dots-vertical' onClick={() => false} />
+                                        </Dropdown>
+                                    </ButtonGroup>
+                                </ButtonGroup>
+                            </SubNav>
+                        </Layout.HeaderPanel>
+                        {/* TOOLBAR HEADER */}
+
+                        <Layout.LeftPanel open={this.state.openFilter}>
+                            <Layout.Panel side='left' background='grey'>
+                                <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
+                                <Layout.PanelContent>
+                                    <Layout.PanelContentBlock>
+                                        <Form.FormGroup>
+                                            <Form.FormItem>
+                                                <Select
+                                                    label='Shows'
+                                                    labelHidden={true}
+                                                    value='This is some value'
+                                                    error='This is error message'
+                                                    info='This is some hint message'
+                                                    required={true}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                >
+                                                        <Option>Marker</Option>
+                                                        <Option>Tabu</Option>
+                                                </Select>
+                                            </Form.FormItem>
+                                        </Form.FormGroup>
+                                        <div className="form__group">
+                                            <div className="form__item">
+                                                <Input label='Title'
+                                                    error='This is error message'
+                                                    type='text'
+                                                    value='Title'
+                                                    inlineLabel={false}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                />
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select label='Source'
-                                                value='Select ingest source...'
-                                                error='This is error message'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
-                                                <Option value="option-1">Select ingest source...</Option>
-                                                <Option value="option-2">Associated Press</Option>
-                                                <Option value="option-3">Reuters</Option>
-                                            </Select>
+
+                                        <div className="form__group">
+                                            <div className="form__item">
+                                                <Select label='Source'
+                                                    value='Select ingest source...'
+                                                    error='This is error message'
+                                                    inlineLabel={false}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                >
+                                                    <Option value="option-1">Select ingest source...</Option>
+                                                    <Option value="option-2">Associated Press</Option>
+                                                    <Option value="option-3">Reuters</Option>
+                                                </Select>
+                                            </div>
                                         </div>
-                                    </div>
-
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input label='Keyword'
-                                                error='This is error message'
-                                                type='text'
-                                                value='Keyword'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+
+                                        <div className="form__group">
+                                            <div className="form__item">
+                                                <Input label='Keyword'
+                                                    error='This is error message'
+                                                    type='text'
+                                                    value='Keyword'
+                                                    inlineLabel={false}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                />
+                                            </div>
                                         </div>
-                                    </div>
-
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select label='Usage right'
-                                                value='--- Not selected ---'
-                                                error='This is error message'
-                                                info='Dolor in hendrerit.'
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
-                                                <Option value="">--- Not selected ---</Option>
-                                                <Option value="single">Single usage</Option>
-                                                <Option value="time">Time restricted</Option>
-                                                <Option value="bananas">Indefinite usage</Option>
-                                                <Option value="indefinite">Pears</Option>
-                                            </Select>
+
+                                        <div className="form__group">
+                                            <div className="form__item">
+                                                <Select label='Usage right'
+                                                    value='--- Not selected ---'
+                                                    error='This is error message'
+                                                    info='Dolor in hendrerit.'
+                                                    inlineLabel={false}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                >
+                                                    <Option value="">--- Not selected ---</Option>
+                                                    <Option value="single">Single usage</Option>
+                                                    <Option value="time">Time restricted</Option>
+                                                    <Option value="bananas">Indefinite usage</Option>
+                                                    <Option value="indefinite">Pears</Option>
+                                                </Select>
+                                            </div>
                                         </div>
-                                    </div>
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                            <Layout.PanelFooter>
-                                <Button text='Clear' style='hollow' onClick={() => false} />
-                                <Button text='Submit' type='primary' onClick={() => false} />
-                            </Layout.PanelFooter>
-                        </Layout.Panel>
-                    </Layout.LeftPanel>
-                    {/* FILTER PANEL*/}
-                    <Layout.MainPanel>
-
-                        {/* <GridList size="small" gap="medium" margin="3">
-                            {dummy_items.map((item, index) =>
-                                <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
-                                    <GridElements.GridItemCheckWrapper>
-                                        <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
-                                            item.selected = value;
-                                            this.changeStatus(item, 'selected');
-                                        }} />
-                                    </GridElements.GridItemCheckWrapper>
-                                    <GridElements.GridItemTopActions>
-                                        <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
-                                    </GridElements.GridItemTopActions>
-                                    <GridElements.GridItemMedia>
-                                        { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
-                                    </GridElements.GridItemMedia>
-                                    <GridElements.GridItemContent>
-                                        <GridElements.GridItemTime time={item.date} />
-                                        <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
-                                        <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
-                                    </GridElements.GridItemContent>
-                                    <GridElements.GridItemFooter>
-                                        <GridElements.GridItemFooterBlock align='left'>
-                                            <Icon name={item.type} className='sd-grid-item__type-icn' />
-                                            <Badge text={item.urgency} color={item.urgencyColor} />
-                                            <Badge text={item.priority} shape='square' color={item.priorityColor} />
-                                        </GridElements.GridItemFooterBlock>
-                                        <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
-                                        </GridElements.GridItemFooterActions>
-                                    </GridElements.GridItemFooter>
-                                </GridElements.GridItem>
-                            )}
-                        </GridList> */}
-
-                        <ContentList
-                        items={[
-                            {
-                                itemColum: [
-                                    {
-                                        itemRow: [{content:<>
-                                                    <i className="icon-rundown"></i>
-                                                </>}],
-                                        border: true
-                                    },
+                                    </Layout.PanelContentBlock>
+                                </Layout.PanelContent>
+                                <Layout.PanelFooter>
+                                    <Button text='Clear' style='hollow' onClick={() => false} />
+                                    <Button text='Submit' type='primary' onClick={() => false} />
+                                </Layout.PanelFooter>
+                            </Layout.Panel>
+                        </Layout.LeftPanel>
+                        {/* FILTER PANEL*/}
+                        <Layout.MainPanel>
+                            {/* <GridList size="small" gap="medium" margin="3">
+                                {dummy_items.map((item, index) =>
+                                    <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
+                                        <GridElements.GridItemCheckWrapper>
+                                            <Checkbox checked={item.selected} label={{content:''}} onChange={(value) => {
+                                                item.selected = value;
+                                                this.changeStatus(item, 'selected');
+                                            }} />
+                                        </GridElements.GridItemCheckWrapper>
+                                        <GridElements.GridItemTopActions>
+                                            <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
+                                        </GridElements.GridItemTopActions>
+                                        <GridElements.GridItemMedia>
+                                            { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
+                                        </GridElements.GridItemMedia>
+                                        <GridElements.GridItemContent>
+                                            <GridElements.GridItemTime time={item.date} />
+                                            <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
+                                            <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
+                                        </GridElements.GridItemContent>
+                                        <GridElements.GridItemFooter>
+                                            <GridElements.GridItemFooterBlock align='left'>
+                                                <Icon name={item.type} className='sd-grid-item__type-icn' />
+                                                <Badge text={item.urgency} color={item.urgencyColor} />
+                                                <Badge text={item.priority} shape='square' color={item.priorityColor} />
+                                            </GridElements.GridItemFooterBlock>
+                                            <GridElements.GridItemFooterActions>
+                                                <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            </GridElements.GridItemFooterActions>
+                                        </GridElements.GridItemFooter>
+                                    </GridElements.GridItem>
+                                )}
+                            </GridList> */}
+
+                            <ContentList
+                                items={[
                                     {
-                                        itemRow: [
+                                        itemColum: [
                                             {
-                                                content:
-                                                <>
-                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                </>
+                                                itemRow: [{
+                                                    content:
+                                                        <>
+                                                            <i className="icon-rundown"></i>
+                                                        </>
+                                                }],
+                                                border: true
                                             },
                                             {
-                                                content:
-                                                <>
-                                                    <Label text='Marker' color='blue--800'/>
-                                                        <span className='sd-list-item__compound-text'>
-                                                            <span className='sd-list-item__text-label'>Template:</span>
-                                                            <span>Marker Daily</span>
-                                                        </span>
-                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                    <Label style='translucent' text='In Progress' type='warning' />
-                                                </>
-                                            },
+                                                itemRow: [
+                                                    {
+                                                        content:
+                                                            <>
+                                                                <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                                <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                                <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                            </>
+                                                    },
+                                                    {
+                                                        content:
+                                                            <>
+                                                                <Label text='Marker' color='blue--800'/>
+                                                                    <span className='sd-list-item__compound-text'>
+                                                                        <span className='sd-list-item__text-label'>Template:</span>
+                                                                        <span>Marker Daily</span>
+                                                                    </span>
+                                                                    <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                                <Label style='translucent' text='In Progress' type='warning' />
+                                                            </>
+                                                    },
+                                                ],
+                                                fullwidth: true,
+                                            }
                                         ],
-                                        fullwidth: true,
-                                    }
-                                ],
-                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                locked: true,
-                                onClick: () => this.setState({openEditor: !this.state.openEditor}),
-                            },
-                            {
-                                itemColum: [
-                                    {
-                                        itemRow: [{content:<>
-                                                    <i className="icon-rundown"></i>
-                                                </>}], 
-                                        border: true
+                                        action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                        locked: true,
+                                        onClick: () => this.setState({openEditor: !this.state.openEditor}),
                                     },
                                     {
-                                        itemRow: [
+                                        itemColum: [
                                             {
-                                                content: 
-                                                <>
-                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                </>
+                                                itemRow: [{
+                                                    content:
+                                                        <>
+                                                            <i className="icon-rundown"></i>
+                                                        </>
+                                                }], 
+                                                border: true
                                             },
                                             {
-                                                content: 
-                                                <>
-                                                    <Label text='Tabu' color='blue--800'/>
-                                                        <span className='sd-list-item__compound-text'>
-                                                            <span className='sd-list-item__text-label'>Template:</span>
-                                                            <span>Tabu Daily</span>
-                                                        </span>
-                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                    <Label style='translucent' text='Draft' />
-                                                </>
-                                            },
+                                                itemRow: [
+                                                    {
+                                                        content: 
+                                                            <>
+                                                                <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                                <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                                <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                            </>
+                                                    },
+                                                    {
+                                                        content: 
+                                                            <>
+                                                                <Label text='Tabu' color='blue--800'/>
+                                                                    <span className='sd-list-item__compound-text'>
+                                                                        <span className='sd-list-item__text-label'>Template:</span>
+                                                                        <span>Tabu Daily</span>
+                                                                    </span>
+                                                                    <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                                <Label style='translucent' text='Draft' />
+                                                            </>
+                                                    },
+                                                ],
+                                                fullwidth: true,
+                                            }
                                         ],
-                                        fullwidth: true,
-                                    }
-                                ],
-                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                onClick: () => this.setState({openPreview: !this.state.openPreview}),
-                            },
-                        ]} />
-
-                    </Layout.MainPanel>
-                    {/* MAIN CONTENT (Monitoring) */}
-                    <Layout.RightPanel open={this.state.openPreview}>
-                        <Layout.Panel side='right'>
-                            <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})}  />
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock flex={true}>
-                                    <Container direction='column' gap='x-small'>
-                                        <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
-                                        <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
-                                    </Container>
-                                    <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        {/* <Dropdown
-                                            align = 'right'
-                                            append = {true}
-                                            items={[
-                                                {
-                                                    type: 'group', label: 'Actions', items: [
-                                                        'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                        { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                        { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                    ]
-                                                }]}>
-                                            <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown> */}
-                                    </Container>
-                                </Layout.PanelContentBlock>
-
-                                <Layout.PanelContentBlock>
-                                    <Container direction='row'  gap='large' className='sd-margin-b--3'>
-                                        <Label size='large' text='Tabu' color='blue--800'/>
-                                        <Container direction='row' gap='small'>
-                                            <Text color='light' size='small' style='italic' >Template:</Text>
-                                            <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
+                                        action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                        onClick: () => this.setState({openPreview: !this.state.openPreview}),
+                                    },
+                                ]}
+                            />
+
+                        </Layout.MainPanel>
+                        {/* MAIN CONTENT (Monitoring) */}
+                        <Layout.RightPanel open={this.state.openPreview}>
+                            <Layout.Panel side='right'>
+                                <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
+                                <Layout.PanelContent>
+                                    <Layout.PanelContentBlock flex={true}>
+                                        <Container direction='column' gap='x-small'>
+                                            <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
+                                            <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
                                         </Container>
+                                        
+                                        <Container className='sd-margin-s--auto sd-flex--items-center'>
+                                            {/* <Dropdown
+                                                align = 'right'
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    }]}>
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown> */}
+                                        </Container>
+                                    </Layout.PanelContentBlock>
+
+                                    <Layout.PanelContentBlock>
+                                        <Container direction='row'  gap='large' className='sd-margin-b--3'>
+                                            <Label size='large' text='Tabu' color='blue--800'/>
+                                            <Container direction='row' gap='small'>
+                                                <Text color='light' size='small' style='italic' >Template:</Text>
+                                                <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
+                                            </Container>
+                                        </Container>
+                                    
+                                        <Container direction='column' className='sd-margin-y--2'>
+                                            {/* <FormLabel text='Title' /> */}
+                                            <Heading type='h2'>Tabu // 01.06.2022</Heading>
+                                        </Container>
+
+                                        <ButtonGroup>
+                                            <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
+                                            <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
+                                            <Text color='light' size='small' className='sd-margin--0'>OF</Text>
+                                            <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
+                                        </ButtonGroup>
+
+                                        <TableList
+                                            className='sd-margin-y--4'
+                                            array={this.state.array}
+                                            itemsDropdown={() => [
+                                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                            ]}
+                                        />   
+                                    </Layout.PanelContentBlock>
+                                </Layout.PanelContent>
+                            </Layout.Panel>
+                        </Layout.RightPanel>
+                        {/* PREVIEW PANEL*/}
+
+                        <Layout.OverlayPanel />
+                        {/* OVERLAY PANEL (Send To) */}
+                    </Layout.LayoutContainer>
+
+                    <Layout.ContentSplitter visible={this.state.openEditor} />
+
+                    {/* RUNDOWN EDITOR */}
+                    <Layout.AuthoringContainer open={this.state.openEditor}>
+                        <RundownEditor
+                            openPanel={() => false}
+                            closePanel={() => false}
+                        />
+                    </Layout.AuthoringContainer>
+                    {/* END RUNDOWN EDITOR */}
+                    
+                </Layout.Layout >
+
+                {/* Manage Templates Modal */}
+                <Modal
+                    headerTemplate="Manage Templates"
+                    visible={this.state.modalManageTemplate}
+                    contentBg='medium'
+                    contentPadding='none'
+                    size='x-large'
+                    onHide={() => {this.setState({modalManageTemplate: false})}}
+                >
+                    <Layout.LayoutContainer>
+                        <Layout.LeftPanel open={true}>
+                            <Layout.Panel side='left' background='grey'>
+                                <Layout.PanelHeader>
+                                    <Container className='sd-padding-x--2'>
+                                        <Select
+                                            label='Shows'
+                                            fullWidth={true}
+                                            labelHidden={true}
+                                            inlineLabel={true}
+                                            value='This is some value'
+                                            required={true}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}}
+                                        >
+                                                <Option>Select show</Option>
+                                                <Option>Marker</Option>
+                                                <Option>Tabu</Option>
+                                        </Select>
                                     </Container>
-                                
-                                    <Container direction='column' className='sd-margin-y--2'>
-                                        {/* <FormLabel text='Title' /> */}
-                                        <Heading type='h2'>Tabu // 01.06.2022</Heading>
-                                    </Container>
-                                    <ButtonGroup>
-                                        <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
-                                        <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
-                                        <Text color='light' size='small' className='sd-margin--0'>OF</Text>
-                                        <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
-                                    </ButtonGroup>
-                                    <TableList
-                                        className='sd-margin-y--4'
-                                        array={this.state.array}
-                                        itemsDropdown={() => [
-                                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                        ]}
-                                    />   
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                        </Layout.Panel>
-                    </Layout.RightPanel>
-                    {/* PREVIEW PANEL*/}
-
-                    <Layout.OverlayPanel />
-                    {/* OVERLAY PANEL (Send To) */}
-                </Layout.LayoutContainer>
-
-                <Layout.ContentSplitter visible={this.state.openEditor} />
-
-                {/* RUNDOWN EDITOR */}
-                <Layout.AuthoringContainer open={this.state.openEditor}>
-                    <RundownEditor />
-                </Layout.AuthoringContainer>
-                {/* END RUNDOWN EDITOR */}
-                
-            </Layout.Layout >
-
-            {/* Manage Templates Modal */}
-            <Modal headerTemplate="Manage Templates"
-                visible={this.state.modalManageTemplate}
-                zIndex={1000}
-                contentBg='medium'
-                contentPadding='none'
-                size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
-                <Layout.LayoutContainer>
-                    <Layout.LeftPanel open={true}>
-                        <Layout.Panel side='left' background='grey'>
-                            <Layout.PanelHeader>
-                                <Container className='sd-padding-x--2'>
-                                    <Select
-                                        label='Shows'
-                                        fullWidth={true}
-                                        labelHidden={true}
-                                        inlineLabel={true}
-                                        value='This is some value'
-                                        required={true}
-                                        disabled={false}
-                                        invalid={false}
-                                        onChange={(value) => {}}>
-                                            <Option>Select show</Option>
-                                            <Option>Marker</Option>
-                                            <Option>Tabu</Option>
-                                    </Select>
-                                </Container>
-                            </Layout.PanelHeader>
-                            <Layout.PanelContent>
-                                <EmptyState
-                                    title={'No show is selected'} 
-                                    description={'Please select a Show from the dropdown at the top.'} 
-                                    size="small" 
-                                    illustration="1" />
+                                </Layout.PanelHeader>
+                                <Layout.PanelContent>
+                                    <EmptyState
+                                        title={'No show is selected'} 
+                                        description={'Please select a Show from the dropdown at the top.'} 
+                                        size="small" 
+                                        illustration="1"
+                                    />
                                     {/* <Container className='sd-margin-b--1'>
                                         <ButtonGroup align='end'>
                                             <Tooltip text='Manage templates'>
@@ -630,371 +671,397 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-                            </Layout.PanelContent>
-                        </Layout.Panel>
-                    </Layout.LeftPanel>
-                    {/* FILTER PANEL*/}
-                    <Layout.MainPanel >
-                        <EmptyState
-                            title={'No Template selected'} 
-                            description={'Please select a Show and Template frome the side panel.'} 
-                            size="large" 
-                            illustration="1" />
-                    </Layout.MainPanel>
-                    {/* MAIN CONTENT */}
-                </Layout.LayoutContainer>
-            </Modal>
-
-            {/* New Show Modal */}
-            <Modal headerTemplate="Create new Show"
-                visible={this.state.modalNewShow}
-                zIndex={1000}
-                footerTemplate={newShowFooter}
-                contentBg='medium'
-                size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
-                <Form.FormGroup>
-                    <Form.FormItem>
-                        <Input
-                            label='Show name'
-                            type='text'
-                            value=''
-                            error='This is error message'
-                            required={true}
-                            onChange={() => {}}
-                        />
-                    </Form.FormItem>
+                                </Layout.PanelContent>
+                            </Layout.Panel>
+                        </Layout.LeftPanel>
+                        {/* FILTER PANEL*/}
+                        <Layout.MainPanel >
+                            <EmptyState
+                                title={'No Template selected'} 
+                                description={'Please select a Show and Template frome the side panel.'} 
+                                size="large" 
+                                illustration="1"
+                            />
+                        </Layout.MainPanel>
+                        {/* MAIN CONTENT */}
+                    </Layout.LayoutContainer>
+                </Modal>
+
+                {/* New Show Modal */}
+                <Modal
+                    headerTemplate="Create new Show"
+                    visible={this.state.modalNewShow}
+                    footerTemplate={newShowFooter}
+                    contentBg='medium'
+                    size='medium' onHide={() => {this.setState({modalNewShow: false})}}
+                >
+                    <Form.FormGroup>
+                        <Form.FormItem>
+                            <Input
+                                label='Show name'
+                                type='text'
+                                value=''
+                                error='This is error message'
+                                required={true}
+                                onChange={() => {}}
+                            />
+                        </Form.FormItem>
                     </Form.FormGroup>
+
                     <Form.FormGroup>
-                    <Form.FormItem>
-                        <Input
-                            label='Description'
-                            type='text'
-                            value=''
-                            error='This is error message'
-                            required={false}
-                            onChange={() => {}}
-                        />
-                    </Form.FormItem>
+                        <Form.FormItem>
+                            <Input
+                                label='Description'
+                                type='text'
+                                value=''
+                                error='This is error message'
+                                required={false}
+                                onChange={() => {}}
+                            />
+                        </Form.FormItem>
                     </Form.FormGroup>
-            </Modal>
-            {/* New Show Modal Success */}
-            <Modal headerTemplate="Create new Show"
-                visible={this.state.modalNewShowSuccess}
-                zIndex={1000}
-                footerTemplate={newShowFooter2}
-                contentBg='medium'
-                size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
-                <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
-                    <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
-                    <Text align='center' size='medium'>
-                        The show <strong>Marker</strong> has been successfully created.<br />
-                        Do you want to cretate a template for this show right away?
-                    </Text>
-                </Container>
-            </Modal>
-
-            {/* New Template Modal */}
-            <Modal headerTemplate="Create new Template"
-                visible={this.state.modalNewTemplate}
-                zIndex={1000}
-                contentBg='medium'
-                contentPadding='none'
-                size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
-                <Layout.LayoutContainer>
-                    <Layout.LeftPanel open={true}>
-                        <Layout.Panel side='left' background='grey'>
-                            <Layout.PanelHeader>
-                                <Container className='sd-padding-x--2'>
-                                    <Select
-                                        label='Shows'
-                                        fullWidth={true}
-                                        labelHidden={true}
-                                        inlineLabel={true}
-                                        value='This is some value'
-                                        required={true}
-                                        disabled={false}
-                                        invalid={false}
-                                        onChange={(value) => {}}>
-                                            <Option>Marker</Option>
-                                            <Option>Tabu</Option>
-                                    </Select>
-                                </Container>
-                            </Layout.PanelHeader>
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock>
-                                    <Container className='sd-margin-b--1-5'>
-                                        <ButtonGroup align='end'>
-                                            <Tooltip text='New template' flow='left'>
-                                                <Button type="primary" size='small' icon="plus-large" text="Cretae new Template" shape="round" iconOnly={true} onClick={()=> false} />
-                                            </Tooltip>
-                                        </ButtonGroup>
+                </Modal>
+                {/* New Show Modal Success */}
+                <Modal
+                    headerTemplate="Create new Show"
+                    visible={this.state.modalNewShowSuccess}
+                    footerTemplate={newShowFooter2}
+                    contentBg='medium'
+                    size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}
+                >
+                    <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
+                        <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
+                        <Text align='center' size='medium'>
+                            The show <strong>Marker</strong> has been successfully created.<br />
+                            Do you want to cretate a template for this show right away?
+                        </Text>
+                    </Container>
+                </Modal>
+
+                {/* New Template Modal */}
+                <Modal
+                    headerTemplate="Create new Template"
+                    visible={this.state.modalNewTemplate}
+                    contentBg='medium'
+                    contentPadding='none'
+                    size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}
+                >
+                    <Layout.LayoutContainer>
+                        <Layout.LeftPanel open={true}>
+                            <Layout.Panel side='left' background='grey'>
+                                <Layout.PanelHeader>
+                                    <Container className='sd-padding-x--2'>
+                                        <Select
+                                            label='Shows'
+                                            fullWidth={true}
+                                            labelHidden={true}
+                                            inlineLabel={true}
+                                            value='This is some value'
+                                            required={true}
+                                            disabled={false}
+                                            invalid={false}
+                                            onChange={(value) => {}}
+                                        >
+                                                <Option>Marker</Option>
+                                                <Option>Tabu</Option>
+                                        </Select>
                                     </Container>
-                                    <BoxedList>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            clickable={true}
-                                            density='compact'
-                                            selected={true}
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                </Layout.PanelHeader>
+
+                                <Layout.PanelContent>
+                                    <Layout.PanelContentBlock>
+                                        <Container className='sd-margin-b--1-5'>
+                                            <ButtonGroup align='end'>
+                                                <Tooltip text='New template' flow='left'>
+                                                    <Button type="primary" size='small' icon="plus-large" text="Cretae new Template" shape="round" iconOnly={true} onClick={()=> false} />
+                                                </Tooltip>
+                                            </ButtonGroup>
+                                        </Container>
+
+                                        <BoxedList>
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                clickable={true}
+                                                density='compact'
+                                                selected={true}
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Untitled</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            clickable={true}
-                                            density='compact'
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                                <Container gap='small'>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Untitled</span>
+                                                </Container>
+                                            </BoxedListItem>
+
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                clickable={true}
+                                                density='compact'
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Daily</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            clickable={true}
-                                            density='compact'
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                                <Container gap='small'>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Daily</span>
+                                                </Container>
+                                            </BoxedListItem>
+
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                clickable={true}
+                                                density='compact'
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Weekend</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            density='compact'
-                                            clickable={true}
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                                <Container gap='small'>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Weekend</span>
+                                                </Container>
+                                            </BoxedListItem>
+
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                density='compact'
+                                                clickable={true}
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Special</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                    </BoxedList>
-
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                        </Layout.Panel>
-                    </Layout.LeftPanel>
-                    {/* FILTER PANEL*/}
-                    <Layout.MainPanel padding='none'>
-                        
-                            <RundownEditor />
-                        
-                    </Layout.MainPanel>
-                    {/* MAIN CONTENT */}
-                </Layout.LayoutContainer>
-            </Modal>
-
-            {/* Manage Shows Modal */}
-            <Modal headerTemplate="Manage Shows"
-            maximizable
-                visible={this.state.modalManageShow}
-                zIndex={1000}
-                contentBg='medium'
-                contentPadding='none'
-                size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>
-                <Layout.LayoutContainer>
-                <Layout.HeaderPanel>
-                        <SubNav zIndex={2}>
-                            <SearchBar placeholder='Search shows'></SearchBar>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <CreateButton ariaValue='New show' onClick={() => false} />
-                            </ButtonGroup>
-                        </SubNav>
-                    </Layout.HeaderPanel>
-                    {/* MAIN CONTENT */}
-                    <Layout.MainPanel>
-                        <BoxedList>
-                            <BoxedListItem
-                                alignVertical='center'
-                                clickable={true}
-                                density='compact'
-                                selected={this.state.openShowEditor}
-                                onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})}
-                                actions={(
-                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                )}
-                                >
-                                <Container className='sd-flex-justify-space-between'>
-                                    <Heading type='h4'>Marker</Heading>
-                                    <Text color='lighter'>3 template</Text>
-                                </Container>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                alignVertical='center'
-                                clickable={true}
-                                density='compact'
-                                actions={(
-                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                )}
+                                                <Container gap='small'>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Special</span>
+                                                </Container>
+                                            </BoxedListItem>
+                                        </BoxedList>
+
+                                    </Layout.PanelContentBlock>
+                                </Layout.PanelContent>
+                            </Layout.Panel>
+                        </Layout.LeftPanel>
+                        {/* FILTER PANEL*/}
+                        <Layout.MainPanel padding='none'>
+                            
+                            <RundownEditor
+                                openPanel={() => false}
+                                closePanel={() => false}
+                            />
+                            
+                        </Layout.MainPanel>
+                        {/* MAIN CONTENT */}
+                    </Layout.LayoutContainer>
+                </Modal>
+
+                {/* Manage Shows Modal */}
+                <Modal
+                    headerTemplate="Manage Shows"
+                    maximizable
+                    visible={this.state.modalManageShow}
+                    contentBg='medium'
+                    contentPadding='none'
+                    size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
+                >
+                    <Layout.LayoutContainer>
+                    <Layout.HeaderPanel>
+                            <SubNav>
+                                <SearchBar placeholder='Search shows'></SearchBar>
+                                <ButtonGroup align='end' spaces='no-space'>
+                                    <CreateButton ariaValue='New show' onClick={() => false} />
+                                </ButtonGroup>
+                            </SubNav>
+                        </Layout.HeaderPanel>
+                        {/* MAIN CONTENT */}
+                        <Layout.MainPanel>
+                            <BoxedList>
+                                <BoxedListItem
+                                    alignVertical='center'
+                                    clickable={true}
+                                    density='compact'
+                                    selected={this.state.openShowEditor}
+                                    onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})}
+                                    actions={(
+                                        <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                    )}
                                 >
-                                <Container className='sd-flex-justify-space-between'>
-                                    <Heading type='h4'>Tabu</Heading>
-                                    <Text color='lighter'>3 template</Text>
-                                </Container>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                alignVertical='center'
-                                clickable={true}
-                                density='compact'
-                                actions={(
-                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                )}
+                                    <Container className='sd-flex-justify-space-between'>
+                                        <Heading type='h4'>Marker</Heading>
+                                        <Text color='lighter'>3 template</Text>
+                                    </Container>
+                                </BoxedListItem>
+                                <BoxedListItem
+                                    alignVertical='center'
+                                    clickable={true}
+                                    density='compact'
+                                    actions={(
+                                        <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                    )}
                                 >
-                                <Container className='sd-flex-justify-space-between'>
-                                    <Heading type='h4'>Život u ringu</Heading>
-                                    <Text color='lighter'>1 template</Text>
-                                </Container>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                alignVertical='center'
-                                density='compact'
-                                clickable={true}
-                                actions={(
-                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                )}
+                                    <Container className='sd-flex-justify-space-between'>
+                                        <Heading type='h4'>Tabu</Heading>
+                                        <Text color='lighter'>3 template</Text>
+                                    </Container>
+                                </BoxedListItem>
+                                <BoxedListItem
+                                    alignVertical='center'
+                                    clickable={true}
+                                    density='compact'
+                                    actions={(
+                                        <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                    )}
                                 >
-                                <Container className='sd-flex-justify-space-between'>
-                                    <Heading type='h4'>Intervju</Heading>
-                                    <Text color='lighter'>3 templates</Text>
-                                </Container>
-                            </BoxedListItem>
-                        </BoxedList>
-                        
-                    </Layout.MainPanel>
-                    <Layout.RightPanel open={this.state.openShowEditor}>
-                        <Layout.Panel side='right' background='grey'>
-                            <Layout.PanelHeader title='Show details' onClose={() => this.setState({'openShowEditor': false})} >
-                                
-                            {this.state.value1 ||
-                                <Layout.PanelHeaderSlidingToolbar>
-                                    <ButtonGroup align='start'>
-                                        <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} />
-                                    </ButtonGroup>
-                                    <ButtonGroup align='end'>
-                                        <Button text="Save Changes" style='hollow' onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} type="primary" />
-                                    </ButtonGroup>
-                                </Layout.PanelHeaderSlidingToolbar>}
-                            </Layout.PanelHeader>
-                            <Layout.PanelContent>
-                                <Layout.PanelContentBlock flex={true}>
-                                    <Container direction='column' gap='x-small'>
-                                        <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
-                                        <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
+                                    <Container className='sd-flex-justify-space-between'>
+                                        <Heading type='h4'>Život u ringu</Heading>
+                                        <Text color='lighter'>1 template</Text>
                                     </Container>
-                                    <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        <Dropdown
-                                            align = 'right'
-                                            append = {true}
-                                            items={[
-                                                {
-                                                    type: 'group', label: 'Actions', items: [
-                                                        'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                        { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                        { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                    ]
-                                                }]}>
-                                            <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown>
+                                </BoxedListItem>
+                                <BoxedListItem
+                                    alignVertical='center'
+                                    density='compact'
+                                    clickable={true}
+                                    actions={(
+                                        <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                    )}
+                                >
+                                    <Container className='sd-flex-justify-space-between'>
+                                        <Heading type='h4'>Intervju</Heading>
+                                        <Text color='lighter'>3 templates</Text>
                                     </Container>
-                                </Layout.PanelContentBlock>
-                                <Layout.PanelContentBlock>
-                                    <SwitchGroup className='sd-margin-b--3'>
-                                        <Switch label={{text:'Active'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
-                                    </SwitchGroup>
-                                    <Form.FormGroup>
-                                        <Form.FormItem>
-                                            <Input
-                                                type='text'
-                                                label='Show name'
-                                                value='Marker'
-                                                error='This is error message'
-                                                info=' '
-                                                required={true}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => {}} /> 
-                                        </Form.FormItem>
-                                    </Form.FormGroup>
-                                    <Form.FormGroup>
-                                        <Form.FormItem>
-                                            <Input
-                                                type='text'
-                                                label='Description'
-                                                value=''
-                                                error='This is error message'
-                                                info=''
-                                                required={false}
-                                                disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => {}} /> 
-                                        </Form.FormItem>
-                                    </Form.FormGroup>
-                                </Layout.PanelContentBlock>
-
-                                <Layout.PanelContentBlock>
-                                    <Heading type='h3' className='sd-margin-b--2'>Show templates</Heading>
-                                    <BoxedList>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            density='compact'
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                </BoxedListItem>
+                            </BoxedList>
+                            
+                        </Layout.MainPanel>
+                        <Layout.RightPanel open={this.state.openShowEditor}>
+                            <Layout.Panel side='right' background='grey'>
+                                <Layout.PanelHeader title='Show details' onClose={() => this.setState({'openShowEditor': false})}>
+                                    
+                                {this.state.value1
+                                    || <Layout.PanelHeaderSlidingToolbar>
+                                        <ButtonGroup align='start'>
+                                            <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} />
+                                        </ButtonGroup>
+                                        <ButtonGroup align='end'>
+                                            <Button text="Save Changes" style='hollow' onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} type="primary" />
+                                        </ButtonGroup>
+                                    </Layout.PanelHeaderSlidingToolbar>
+                                }
+
+                                </Layout.PanelHeader>
+
+                                <Layout.PanelContent>
+                                    <Layout.PanelContentBlock flex={true}>
+                                        <Container direction='column' gap='x-small'>
+                                            <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
+                                            <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
+                                        </Container>
+
+                                        <Container className='sd-margin-s--auto sd-flex--items-center'>
+                                            <Dropdown
+                                                align = 'right'
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    },
+                                                ]}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Daily</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            density='compact'
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
+                                        </Container>
+                                    </Layout.PanelContentBlock>
+
+                                    <Layout.PanelContentBlock>
+                                        <SwitchGroup className='sd-margin-b--3'>
+                                            <Switch label={{content:'Active'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                        </SwitchGroup>
+
+                                        <Form.FormGroup>
+                                            <Form.FormItem>
+                                                <Input
+                                                    type='text'
+                                                    label='Show name'
+                                                    value='Marker'
+                                                    error='This is error message'
+                                                    info=' '
+                                                    required={true}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                /> 
+                                            </Form.FormItem>
+                                        </Form.FormGroup>
+
+                                        <Form.FormGroup>
+                                            <Form.FormItem>
+                                                <Input
+                                                    type='text'
+                                                    label='Description'
+                                                    value=''
+                                                    error='This is error message'
+                                                    info=''
+                                                    required={false}
+                                                    disabled={false}
+                                                    invalid={false}
+                                                    onChange={(value) => {}}
+                                                /> 
+                                            </Form.FormItem>
+                                        </Form.FormGroup>
+                                    </Layout.PanelContentBlock>
+
+                                    <Layout.PanelContentBlock>
+                                        <Heading type='h3' className='sd-margin-b--2'>Show templates</Heading>
+                                        <BoxedList>
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                density='compact'
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Weekend</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical='center'
-                                            density='compact'
-                                            actions={(
-                                                <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
-                                            )}
+                                                <Container gap='small' >
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Daily</span>
+                                                </Container>
+                                            </BoxedListItem>
+
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                density='compact'
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
                                             >
-                                            <Container gap='small' >
-                                                <Label text='Marker' color='blue--800'/>
-                                                <span>Marker Special</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                    </BoxedList>
-
-                                </Layout.PanelContentBlock>
-                            </Layout.PanelContent>
-                        </Layout.Panel>
-                    </Layout.RightPanel>
-                </Layout.LayoutContainer>
-            </Modal>
-            {/* End All Modals */}
+                                                <Container gap='small' >
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Weekend</span>
+                                                </Container>
+                                            </BoxedListItem>
+
+                                            <BoxedListItem
+                                                alignVertical='center'
+                                                density='compact'
+                                                actions={(
+                                                    <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
+                                                )}
+                                            >
+                                                <Container gap='small' >
+                                                    <Label text='Marker' color='blue--800'/>
+                                                    <span>Marker Special</span>
+                                                </Container>
+                                            </BoxedListItem>
+                                        </BoxedList>
+                                    </Layout.PanelContentBlock>
+                                </Layout.PanelContent>
+                            </Layout.Panel>
+                        </Layout.RightPanel>
+                    </Layout.LayoutContainer>
+                </Modal>
+                {/* End All Modals */}
             </>
         );
     }
diff --git a/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx b/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx
index 7d0e96b4..c259557a 100644
--- a/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx
@@ -82,7 +82,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -104,7 +104,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -263,7 +263,6 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
                                             align = 'right'
-                                            append = {true}
                                             items={[
                                                 {
                                                     type: 'group', label: 'Actions', items: [
diff --git a/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx b/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx
index b6e75c6d..e75b58be 100644
--- a/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx
+++ b/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx
@@ -81,7 +81,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -103,7 +103,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -256,7 +256,6 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
                                             align = 'right'
-                                            append = {true}
                                             items={[
                                                 {
                                                     type: 'group', label: 'Actions', items: [
diff --git a/examples/pages/react/CreateButton.tsx b/examples/pages/react/CreateButton.tsx
index f936ea01..cde68c18 100644
--- a/examples/pages/react/CreateButton.tsx
+++ b/examples/pages/react/CreateButton.tsx
@@ -17,7 +17,7 @@ export default class CreateButtonDoc extends React.Component {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
@@ -34,7 +34,7 @@ export default class CreateButtonDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
diff --git a/examples/pages/react/Dropdowns.tsx b/examples/pages/react/Dropdowns.tsx
index 18ac9320..c1d2b25e 100644
--- a/examples/pages/react/Dropdowns.tsx
+++ b/examples/pages/react/Dropdowns.tsx
@@ -13,33 +13,34 @@ export default class DropdownDoc extends React.Component {
                             { label: 'Action 1', onSelect: () => 1 },
                             { label: 'Action 2', onSelect: () => 1 },
                             { label: 'Action 3', onSelect: () => 1 },
-                        ]}>
-                       Toogle button
+                        ]}
+                    >
+                       Toggle button
                     </Dropdown>
-
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <p className='docs-page__paragraph'>By default dropdown menu is positioned left comparing to dropdown toggle button element. For right positioned menu (second example) add prop value <code>align = 'right'</code></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <Dropdown
-                            append
                             items={[
                                 { label: 'Action 1', onSelect: () => 1 },
                                 { label: 'Action 2', onSelect: () => 1 },
                                 { label: 'Action 3', onSelect: () => 1 },
-                            ]}>
+                            ]}
+                        >
                             Left aligned (default)
-                            </Dropdown>
+                        </Dropdown>
                         <Dropdown
                             align='right'
                             items={[
                                 { label: 'Action 1', onSelect: () => 1 },
                                 { label: 'Action 2', onSelect: () => 1 },
                                 { label: 'Action 3', onSelect: () => 1 },
-                            ]}>
+                            ]}
+                        >
                             Right aligned
-                            </Dropdown>
+                        </Dropdown>
 
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -48,7 +49,8 @@ export default class DropdownDoc extends React.Component {
                                 { label: 'Action 1', onSelect: () => 1 },
                                 { label: 'Action 2', onSelect: () => 1 },
                                 { label: 'Action 3', onSelect: () => 1 },
-                            ]}>
+                            ]}
+                        >
                             Left aligned (default)
                         </Dropdown>
                         <Dropdown
@@ -57,19 +59,168 @@ export default class DropdownDoc extends React.Component {
                                 { label: 'Action 1', onSelect: () => 1 },
                                 { label: 'Action 2', onSelect: () => 1 },
                                 { label: 'Action 3', onSelect: () => 1 },
-                            ]}>
+                            ]}
+                        >
                             Right aligned
                         </Dropdown>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Dropdown Append To Body</h3>
-                <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
+                <h3 className="docs-page__h3">Multilevel dropdown</h3>
+                <p className='docs-page__paragraph'>To create a second level in the dropdown menu add item with props <code>type = 'submenu'</code> and <code>item</code>.
+                The submenu opens by default on the right side of the parent menu.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group',
+                                    label: 'Create new',
+                                    items: [
+                                        {
+                                            type: 'submenu',
+                                            label: 'Rundown',
+                                            icon: 'plus-sign',
+                                            items: [
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 1',
+                                                    icon: 'plus-sign',
+                                                    items: [
+                                                        {
+                                                            type: 'submenu',
+                                                            label: 'Show 3',
+                                                            icon: 'plus-sign',
+                                                            items: []
+                                                        }
+                                                    ],
+                                                },
+                                                {
+                                                    type: 'submenu',
+                                                    label: 'Show 2',
+                                                    icon: 'plus-sign',
+
+                                                    items: [
+                                                        {
+                                                            type: 'submenu',
+                                                            label: 'Show 4',
+                                                            icon: 'plus-sign',
+                                                            items: [
+                                                                {
+                                                                    type: 'submenu',
+                                                                    label: 'Show 5',
+                                                                    icon: 'plus-sign',
+                                                                    items: []
+                                                                }
+                                                            ],
+                                                        },
+                                                    ],
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'group', label: 'actions', items: [
+                                        'divider',
+                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                                        'divider',
+                                    ]
+                                },
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: () => 1 },
+                                        { label: 'Action 2', onSelect: () => 1 },
+                                        { label: 'Action 3', onSelect: () => 1 },
+                                        { label: 'Action 4', onSelect: () => 1 },
+                                    ]
+                                }
+                            ]}
+                        >
+                            Multilevel dropdown
+                        </Dropdown>
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group', label: 'actions', items: [
+                                        'divider',
+                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                                        'divider',
+                                    ]
+                                },
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: () => 1 },
+                                        { label: 'Action 2', onSelect: () => 1 },
+                                        { label: 'Action 3', onSelect: () => 1 },
+                                        { label: 'Action 4', onSelect: () => 1 },
+                                    ]
+                                }
+                            ]}
+                        >
+                            Submenu on the left
+                        </Dropdown>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group', label: 'actions', items: [
+                                        'divider',
+                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                                        'divider',
+                                    ]
+                                },
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: () => 1 },
+                                        { label: 'Action 2', onSelect: () => 1 },
+                                        { label: 'Action 3', onSelect: () => 1 },
+                                        { label: 'Action 4', onSelect: () => 1 },
+                                    ]
+                                }
+                            ]}
+                        >
+                            Multilevel dropdown
+                        </Dropdown>
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group', label: 'actions', items: [
+                                        'divider',
+                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                                        'divider',
+                                    ]
+                                },
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: () => 1 },
+                                        { label: 'Action 2', onSelect: () => 1 },
+                                        { label: 'Action 3', onSelect: () => 1 },
+                                        { label: 'Action 4', onSelect: () => 1 },
+                                    ]
+                                }
+                            ]}
+                        >
+                            Submenu on the left
+                        </Dropdown>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Dropdown with scrolling content</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                     <Dropdown
-                        append={true}
                         header={[
                             {
                                 type: 'group',
@@ -473,9 +624,6 @@ export default class DropdownDoc extends React.Component {
                                             },
                                         ],
                                     },
-
-
-
                                 ],
                             },
                         ]}
@@ -521,6 +669,7 @@ export default class DropdownDoc extends React.Component {
                             },
                         ]}
                     >
+                        Dropdown with scrolling content
                     </Dropdown>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -539,157 +688,13 @@ export default class DropdownDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Multilevel dropdown</h3>
-                <p className='docs-page__paragraph'>To create a second level in the dropdown menu add item with props <code>type = 'submenu'</code> and <code>item</code>.
-                The submenu opens by default on the right side of the parent menu.</p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group',
-                                    label: 'Create new',
-                                    items: [
-                                        {
-                                            type: 'submenu',
-                                            label: 'Rundown',
-                                            icon: 'plus-sign',
-                                            items: [
-                                                {
-                                                    type: 'submenu',
-                                                    label: 'Show 1',
-                                                    icon: 'plus-sign',
-                                                    items: [
-                                                        {
-                                                            type: 'submenu',
-                                                            label: 'Show 3',
-                                                            icon: 'plus-sign',
-                                                            items: []
-                                                        }
-                                                    ],
-                                                },
-                                                {
-                                                    type: 'submenu',
-                                                    label: 'Show 2',
-                                                    icon: 'plus-sign',
-
-                                                    items: [
-                                                        {
-                                                            type: 'submenu',
-                                                            label: 'Show 4',
-                                                            icon: 'plus-sign',
-                                                            items: [
-                                                                {
-                                                                    type: 'submenu',
-                                                                    label: 'Show 5',
-                                                                    icon: 'plus-sign',
-                                                                    items: []
-                                                                }
-                                                            ],
-                                                        },
-                                                    ],
-                                                },
-                                            ],
-                                        },
-                                    ],
-                                },
-                                {
-                                    type: 'group', label: 'actions', items: [
-                                        'divider',
-                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                                        'divider',
-                                    ]
-                                },
-                                {
-                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                                        { label: 'Action 1', onSelect: () => 1 },
-                                        { label: 'Action 2', onSelect: () => 1 },
-                                        { label: 'Action 3', onSelect: () => 1 },
-                                        { label: 'Action 4', onSelect: () => 1 },
-                                    ]
-                                }]}>
-                            Multilevel dropdown
-                            </Dropdown>
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'actions', items: [
-                                        'divider',
-                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                                        'divider',
-                                    ]
-                                },
-                                {
-                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                                        { label: 'Action 1', onSelect: () => 1 },
-                                        { label: 'Action 2', onSelect: () => 1 },
-                                        { label: 'Action 3', onSelect: () => 1 },
-                                        { label: 'Action 4', onSelect: () => 1 },
-                                    ]
-                                }]}>
-                            Submenu on the left
-                            </Dropdown>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'actions', items: [
-                                        'divider',
-                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                                        'divider',
-                                    ]
-                                },
-                                {
-                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                                        { label: 'Action 1', onSelect: () => 1 },
-                                        { label: 'Action 2', onSelect: () => 1 },
-                                        { label: 'Action 3', onSelect: () => 1 },
-                                        { label: 'Action 4', onSelect: () => 1 },
-                                    ]
-                                }]}>
-                            Multilevel dropdown
-                        </Dropdown>
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'actions', items: [
-                                        'divider',
-                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                                        'divider',
-                                    ]
-                                },
-                                {
-                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                                        { label: 'Action 1', onSelect: () => 1 },
-                                        { label: 'Action 2', onSelect: () => 1 },
-                                        { label: 'Action 3', onSelect: () => 1 },
-                                        { label: 'Action 4', onSelect: () => 1 },
-                                    ]
-                                }]}>
-                            Submenu on the left
-                        </Dropdown>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
                 <h3 className="docs-page__h3">Navigation dropdown</h3>
                 <p className='docs-page__paragraph'>Example of a dropdown inside a subnavigation element.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={1} color='darker'>
+                        <SubNav color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
-                                //align='right'
-                                append
                                 header={[
                                     {
                                         type: 'group', label: 'actions', items: [
@@ -728,18 +733,18 @@ export default class DropdownDoc extends React.Component {
                                         ]
                                     }
                                 ]}
-                                    footer={[
+                                footer={[
 
-                                        {
-                                            type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                                                { label: 'Action 1', onSelect: () => 1 },
-                                                { label: 'Action 2', onSelect: () => 1 },
-                                                { label: 'Action 3', onSelect: () => 1 },
-                                                { label: 'Action 4', onSelect: () => 1 },
-                                            ]
-                                        }
-                                    ]}
-                                    >
+                                    {
+                                        type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                            { label: 'Action 1', onSelect: () => 1 },
+                                            { label: 'Action 2', onSelect: () => 1 },
+                                            { label: 'Action 3', onSelect: () => 1 },
+                                            { label: 'Action 4', onSelect: () => 1 },
+                                        ]
+                                    }
+                                ]}
+                            >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>
@@ -747,7 +752,7 @@ export default class DropdownDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={1} color='darker'>
+                        <SubNav color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
                                 items={[
@@ -767,7 +772,9 @@ export default class DropdownDoc extends React.Component {
                                             { label: 'Action 3', onSelect: () => 1 },
                                             { label: 'Action 4', onSelect: () => 1 },
                                         ]
-                                    }]}>
+                                    }
+                                ]}
+                            >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>
@@ -781,10 +788,9 @@ export default class DropdownDoc extends React.Component {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={1} color='darker'>
+                        <SubNav color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
-                            append={true}
                                 header={[
                                     {
                                         type: 'group',
@@ -886,7 +892,7 @@ export default class DropdownDoc extends React.Component {
                                         ],
                                     },
                                 ]}
-                                >
+                            >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>
@@ -894,7 +900,7 @@ export default class DropdownDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={1} color='darker'>
+                        <SubNav color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
                                 header={[
@@ -931,7 +937,8 @@ export default class DropdownDoc extends React.Component {
                                             { label: 'Create package', icon: 'composite', onSelect: () => 1 },
                                         ]
                                     },
-                                ]}>
+                                ]}
+                            >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>
@@ -945,7 +952,6 @@ export default class DropdownDoc extends React.Component {
                 <PropsList>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
                     <Prop name='align' isRequired={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
-                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
                     <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
                     <Prop name='children' isRequired={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
                 </PropsList>
diff --git a/examples/pages/react/Modal.tsx b/examples/pages/react/Modal.tsx
index 2f3970fe..f478f9db 100644
--- a/examples/pages/react/Modal.tsx
+++ b/examples/pages/react/Modal.tsx
@@ -79,7 +79,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         </ButtonGroup>
 
                         <Modal headerTemplate="Basic modal"
-                            zIndex={10000}
                             maximizable
                             visible={this.state.modalBasic}
                             onHide={() => {this.setState({modalBasic: false})}}>
@@ -240,7 +239,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Markup.ReactMarkupPreview>
                     <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
                         <Modal headerTemplate="Maximizable modal"
-                            zIndex={1000}
                             maximizable
                             visible={this.state.maximizableModal}
                             size="small"
@@ -261,7 +259,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
                         <Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
                         <Modal
                             headerTemplate="Maximizable modal"
-                            zIndex={1000}
                             maximizable
                             visible={this.state.maximizableModal}
                             size="small"
@@ -284,7 +281,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position top"
                             position="top"
-                            zIndex={10000}
                             visible={this.state.top}
                             onHide={() => {this.setState({top: false})}}>
                             <p>This modal has position top.</p>
@@ -292,7 +288,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position bottom"
                             position="bottom"
-                            zIndex={10000}
                             visible={this.state.bottom}
                             onHide={() => {this.setState({bottom: false})}}>
                             <p>This modal has position bottom.</p>
@@ -300,7 +295,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position left"
                             position="left"
-                            zIndex={10000}
                             visible={this.state.left}
                             onHide={() => {this.setState({left: false})}}>
                             <p>This modal has position left.</p>
@@ -308,7 +302,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position right"
                             position="right"
-                            zIndex={10000}
                             visible={this.state.right}
                             onHide={() => {this.setState({right: false})}}>
                             <p>This modal has position right.</p>
@@ -317,7 +310,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Markup.ReactMarkupCode>{`
                         <Modal headerTemplate="Modal with position top"
                             position="top"
-                            zIndex={10000}
                             visible={this.state.top}
                             onHide={() => {this.setState({top: false})}}>
                             <p>This modal has position top.</p>
@@ -325,7 +317,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position bottom"
                             position="bottom"
-                            zIndex={10000}
                             visible={this.state.bottom}
                             onHide={() => {this.setState({bottom: false})}}>
                             <p>This modal has position bottom.</p>
@@ -333,7 +324,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position left"
                             position="left"
-                            zIndex={10000}
                             visible={this.state.left}
                             onHide={() => {this.setState({left: false})}}>
                             <p>This modal has position left.</p>
@@ -341,7 +331,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                         <Modal headerTemplate="Modal with position right"
                             position="right"
-                            zIndex={10000}
                             visible={this.state.right}
                             onHide={() => {this.setState({right: false})}}>
                             <p>This modal has position right.</p>
@@ -358,7 +347,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
                     <Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
                     <Prop name='position' isRequired={false} type="center | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right" default='center' description='Position of the dialog.' />
                     <Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
-                    <Prop name='zIndex' isRequired={true} type='number' default='false' description='zIndex of modal' />
                     <Prop name='contentPadding' isRequired={true} type="'none' | 'small' | 'medium' | 'large'" default='false' description='Padding of content' />
                     <Prop name='contentBg' isRequired={true} type="'default' | 'medium' | 'dark'" default='false' description='Background of content' />
                     <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
diff --git a/examples/pages/react/MultiSelect.tsx b/examples/pages/react/MultiSelect.tsx
index c909f174..18889476 100644
--- a/examples/pages/react/MultiSelect.tsx
+++ b/examples/pages/react/MultiSelect.tsx
@@ -67,7 +67,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     onChange={(e: any) => this.setState({value: e})}
                                     filter
                                     showSelectAll
-                                    zIndex={2000}
                                     placeholder='Select a color'
                                     optionLabel={(option) => `${option.name} :: ${option.colorCode}`}
                                     required
diff --git a/examples/pages/react/NavButtons.tsx b/examples/pages/react/NavButtons.tsx
index 49c1addd..bb03c6db 100644
--- a/examples/pages/react/NavButtons.tsx
+++ b/examples/pages/react/NavButtons.tsx
@@ -17,7 +17,7 @@ export default class NavButtonsDoc extends React.Component {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
@@ -36,7 +36,7 @@ export default class NavButtonsDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
@@ -59,7 +59,7 @@ export default class NavButtonsDoc extends React.Component {
                 <h3 className="docs-page__h3">Styles / Types</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
                                 <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
@@ -72,7 +72,7 @@ export default class NavButtonsDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
                                 <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
diff --git a/examples/pages/react/Panel.tsx b/examples/pages/react/Panel.tsx
index f83ac704..932d4549 100644
--- a/examples/pages/react/Panel.tsx
+++ b/examples/pages/react/Panel.tsx
@@ -359,7 +359,6 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <p className="docs-page__paragraph">PanelHeader</p>
                 <PropsList>
                     <Prop name='title' isRequired={false} type='string' default='/' description='Specifies the title of the panel.'/>
-                    <Prop name='zIndex' isRequired={false} type='number' default='1' description='Increase the z-index of the header if needed.'/>
                     <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme.'/>
                     <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white.'/>
                     <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour if needed. Use only if necessary.'/>
diff --git a/examples/pages/react/Popover.tsx b/examples/pages/react/Popover.tsx
index 62ddb17d..f9d947cd 100644
--- a/examples/pages/react/Popover.tsx
+++ b/examples/pages/react/Popover.tsx
@@ -35,7 +35,6 @@ export class PopoverDoc extends React.Component {
                                     triggerSelector="#button-view-content"
                                     title="Popover test"
                                     placement="top-end"
-                                    zIndex={999}
                                 >
                                     Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                                 </Popover>
@@ -49,7 +48,6 @@ export class PopoverDoc extends React.Component {
                             triggerSelector="#button-view-content"
                             title="Popover test"
                             placement="top-end"
-                            zIndex={999}
                         >
                             Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                         </Popover>
@@ -62,10 +60,12 @@ export class PopoverDoc extends React.Component {
                     <Prop name='title' isRequired={true} type='string' default='null' description='Title of the popover component.' />
                     <Prop name='triggerSelector' isRequired={true} type='string' default='null' description='ID selector for an element that will be used to toggle the popover.' />
                     <Prop name='displayCloseButton' isRequired={false} type='boolean' default='true' description='Show or hide the close button.' />
-                    <Prop name='placement' isRequired={false}
-                          type='auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start' 
-                          default='auto' description='Define the placement of the Popover.' />
-                    <Prop name='zIndex' isRequired={false} type='number' default='null' description='Defines the z-index of the Popover.' />
+                    <Prop
+                        name='placement'
+                        isRequired={false}
+                        type='auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start' 
+                        default='auto' description='Define the placement of the Popover.'
+                    />
                 </PropsList>
             </section>
         )
diff --git a/examples/pages/react/SubNav.tsx b/examples/pages/react/SubNav.tsx
index bbb4db91..1f55a18d 100644
--- a/examples/pages/react/SubNav.tsx
+++ b/examples/pages/react/SubNav.tsx
@@ -9,7 +9,7 @@ export default class SubNavDoc extends React.Component {
                 <h2 className='docs-page__h2'>Sub Navigation bar</h2>
                 <p></p>
                 <Markup.ReactMarkupCodePreview>{`
-                    <SubNav zIndex={2}>
+                    <SubNav>
                         <ButtonGroup align='start'>
                             <NavButton icon='search' onClick={()=> false} />
                         </ButtonGroup>
@@ -22,7 +22,7 @@ export default class SubNavDoc extends React.Component {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={4}>
+                        <SubNav>
                             <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
@@ -30,7 +30,7 @@ export default class SubNavDoc extends React.Component {
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav color='darker' zIndex={3}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start'>
                                 <NavButton icon='filter-large' type='darker' onClick={()=> false} />
                             </ButtonGroup>
@@ -48,7 +48,7 @@ export default class SubNavDoc extends React.Component {
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='darker' zIndex={2}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start' padded={true}>
                             <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
@@ -58,7 +58,7 @@ export default class SubNavDoc extends React.Component {
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='blueGreyDarker' zIndex={1}>
+                        <SubNav color='blueGreyDarker'>
                             <ButtonGroup align='center'>
                             <Button text='One' onClick={()=> false} />
                                 <Button text='Two' onClick={()=> false} />
@@ -72,7 +72,7 @@ export default class SubNavDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={4}>
+                        <SubNav>
                             <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
@@ -80,7 +80,7 @@ export default class SubNavDoc extends React.Component {
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav color='darker' zIndex={3}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start'>
                                 <NavButton icon='filter-large' type='darker' onClick={()=> false} />
                             </ButtonGroup>
@@ -100,7 +100,7 @@ export default class SubNavDoc extends React.Component {
 
                         <br />
 
-                        <SubNav color='darker' zIndex={2}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start' padded={true}>
                             <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
@@ -112,7 +112,7 @@ export default class SubNavDoc extends React.Component {
                         
                         <br />
 
-                        <SubNav color='blueGreyDarker' zIndex={1}>
+                        <SubNav color='blueGreyDarker'>
                             <ButtonGroup align='center'>
                             <Button text='One' onClick={()=> false} />
                                 <Button text='Two' onClick={()=> false} />
@@ -132,7 +132,6 @@ export default class SubNavDoc extends React.Component {
                 <PropsList>
                     <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
                     <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
-                    <Prop name='zIndex' isRequired={true} type='number' default='1000' description='Increase the default z-index value (1000) by the specified amount.'/>
                     <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
                 </PropsList>
             </section>

From 06edb02a8e1d3013795cb6deed74df1112d2ef2d Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Tue, 27 Jun 2023 07:55:43 +0200
Subject: [PATCH 2/4] fix lint

---
 app-typescript/components/SubNav.tsx      | 2 +-
 app-typescript/components/_Positioner.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app-typescript/components/SubNav.tsx b/app-typescript/components/SubNav.tsx
index 92dcafaf..dfe6ceba 100644
--- a/app-typescript/components/SubNav.tsx
+++ b/app-typescript/components/SubNav.tsx
@@ -32,7 +32,7 @@ export class SubNav extends React.PureComponent<IProps> {
             'subnav--light': this.props.color === undefined,
             [`subnav--${this.props.color}`]: this.props.color || this.props.color !== undefined,
         }, this.props.className);
-     
+
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
 
         return (
diff --git a/app-typescript/components/_Positioner.tsx b/app-typescript/components/_Positioner.tsx
index 8f716aac..55938429 100644
--- a/app-typescript/components/_Positioner.tsx
+++ b/app-typescript/components/_Positioner.tsx
@@ -24,7 +24,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
     popperInstance: any;
     previouslyFocusedElement: HTMLElement | undefined;
     public zIndex: number = getNextZIndex();
-    
+
     constructor(props: IPropsPopperWrapper) {
         super(props);
 

From 33d08f65642e06a1a837b3c957217b3e3be4a158 Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Tue, 27 Jun 2023 11:09:18 +0200
Subject: [PATCH 3/4] primeract@5.0.2-12

---
 app-typescript/components/Menu.tsx |  2 +-
 package-lock.json                  | 70 +++++++++++++++---------------
 package.json                       |  2 +-
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/app-typescript/components/Menu.tsx b/app-typescript/components/Menu.tsx
index 4aa7d504..79144444 100644
--- a/app-typescript/components/Menu.tsx
+++ b/app-typescript/components/Menu.tsx
@@ -163,7 +163,7 @@ export class Menu extends React.Component<IProps, {}> {
                             }
                         }}
                         data-test-id="menu"
-                        baseZIndex={this.zIndex}
+                        zIndex={this.zIndex}
                     />
                 </div>
             </React.Fragment>
diff --git a/package-lock.json b/package-lock.json
index 04a3b976..bb94aeb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -144,9 +144,9 @@
       "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
     },
     "@superdesk/primereact": {
-      "version": "5.0.2-10",
-      "resolved": "https://registry.npmjs.org/@superdesk/primereact/-/primereact-5.0.2-10.tgz",
-      "integrity": "sha512-9hM0CSSDhzqOzZrwyFjWpO2VCYkWwDxKoeiMihAffjaUjv/pBZy9HD7Ar35whcB8NpFg9450pLBxoiNHRzW7cg==",
+      "version": "5.0.2-12",
+      "resolved": "https://registry.npmjs.org/@superdesk/primereact/-/primereact-5.0.2-12.tgz",
+      "integrity": "sha512-cyaek+NgIDg5AXxn29BwHprnHZB+pe3Ll2w2KlP2rmICm3cgbdVtjYJTT5d9Yxfioor6vVulo3O9BOxEmxpgnw==",
       "requires": {
         "react-transition-group": "^4.4.1"
       }
@@ -779,7 +779,7 @@
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
       "dev": true
     },
     "angular": {
@@ -1501,7 +1501,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "dev": true
     },
     "assign-symbols": {
@@ -1534,13 +1534,13 @@
     "async-foreach": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
       "dev": true
     },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
     "atob": {
@@ -1557,7 +1557,7 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
       "dev": true
     },
     "aws4": {
@@ -2308,7 +2308,7 @@
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
       "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
@@ -2679,7 +2679,7 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
     "center-align": {
@@ -3186,7 +3186,7 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "dev": true
     },
     "constants-browserify": {
@@ -3488,7 +3488,7 @@
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
@@ -3697,13 +3697,13 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
       "dev": true
     },
     "depd": {
@@ -3916,7 +3916,7 @@
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
       "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
@@ -4884,7 +4884,7 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
       "dev": true
     },
     "fast-deep-equal": {
@@ -5167,7 +5167,7 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "dev": true
     },
     "form-data": {
@@ -5276,7 +5276,7 @@
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
       "dev": true,
       "requires": {
         "aproba": "^1.0.3",
@@ -5292,7 +5292,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
           "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -5301,7 +5301,7 @@
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
           "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
@@ -5366,7 +5366,7 @@
     "getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
@@ -5580,7 +5580,7 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
       "dev": true
     },
     "har-validator": {
@@ -5656,7 +5656,7 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
       "dev": true
     },
     "has-value": {
@@ -6090,7 +6090,7 @@
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
       "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
@@ -6685,7 +6685,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
       "dev": true
     },
     "is-utf8": {
@@ -6735,7 +6735,7 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "dev": true
     },
     "jquery": {
@@ -6777,7 +6777,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
       "dev": true
     },
     "jsdom": {
@@ -6890,7 +6890,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
     "json3": {
@@ -9296,7 +9296,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "picocolors": {
       "version": "0.2.1",
@@ -10817,7 +10817,7 @@
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "integrity": "sha512-dYE8LhncfBUar6POCxMTm0Ln+erjeczqEvCJib5/7XNkdw1FkUGgwMPY360FY0FgPWQxHWCx29Jl3oejyGLM9Q==",
       "dev": true,
       "requires": {
         "js-base64": "^2.1.8",
@@ -10827,7 +10827,7 @@
         "source-map": {
           "version": "0.4.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "integrity": "sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==",
           "dev": true,
           "requires": {
             "amdefine": ">=0.0.4"
@@ -12145,7 +12145,7 @@
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
@@ -12154,7 +12154,7 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "dev": true
     },
     "type": {
@@ -12570,7 +12570,7 @@
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
       "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
@@ -12581,7 +12581,7 @@
         "core-util-is": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+          "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
           "dev": true
         }
       }
diff --git a/package.json b/package.json
index 8e73e9d4..04e1427a 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
-    "@superdesk/primereact": "^5.0.2-10",
+    "@superdesk/primereact": "^5.0.2-12",
     "@superdesk/react-resizable-panels": "0.0.39",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/node": "^14.10.2",

From 7759b32b7b29bfee94b2e0c8a224a07e0c5020ae Mon Sep 17 00:00:00 2001
From: dzonidoo <nikola71092@gmail.com>
Date: Wed, 28 Jun 2023 15:39:22 +0200
Subject: [PATCH 4/4] export showPopup and make label optional

---
 app-typescript/components/Form/InputWrapper.tsx | 2 +-
 app-typescript/components/Modal.tsx             | 1 -
 app-typescript/components/ShowPopup.tsx         | 2 +-
 app-typescript/index.ts                         | 1 +
 4 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app-typescript/components/Form/InputWrapper.tsx b/app-typescript/components/Form/InputWrapper.tsx
index fa93d662..f57005e2 100644
--- a/app-typescript/components/Form/InputWrapper.tsx
+++ b/app-typescript/components/Form/InputWrapper.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 export interface IInputCommon {
-    label: string;
+    label?: string;
     info?: string;
     error?: string;
     required?: boolean;
diff --git a/app-typescript/components/Modal.tsx b/app-typescript/components/Modal.tsx
index 307e2b47..75d7fed1 100644
--- a/app-typescript/components/Modal.tsx
+++ b/app-typescript/components/Modal.tsx
@@ -9,7 +9,6 @@ interface IProps {
     className?: string;
     theme?: string;
     visible?: boolean;
-    zIndex?: number;
     closeOnEscape?: boolean;
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
diff --git a/app-typescript/components/ShowPopup.tsx b/app-typescript/components/ShowPopup.tsx
index a68cc07e..afc72b72 100644
--- a/app-typescript/components/ShowPopup.tsx
+++ b/app-typescript/components/ShowPopup.tsx
@@ -13,7 +13,7 @@ interface IPropsPopupPositioner {
     closeOnHoverEnd?: boolean;
 }
 
-class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
+export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
     private wrapperEl: HTMLDivElement | null;
     private popper: PopperInstance | null;
     private zIndex: number = getNextZIndex();
diff --git a/app-typescript/index.ts b/app-typescript/index.ts
index 4919de54..885cdacf 100644
--- a/app-typescript/index.ts
+++ b/app-typescript/index.ts
@@ -97,6 +97,7 @@ export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
+export { PopupPositioner, showPopup } from './components/ShowPopup';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;