@plurid/plurid-ui-components-react 0.0.0-20 → 0.0.0-22

package/distribution/index.es.js

@@ -4,7 +4,7 @@ import themes, { plurid } from "@plurid/plurid-themes";
 
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 
-import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
+import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconSpace, PluridIconArrowRight, PluridIconDocuments, PluridIconExternalLink, PluridIconExit, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
 
 import { mergeReferences, useMounted, useFalseAfterTimedTrue, useThrottledCallback, createMarkup } from "@plurid/plurid-functions-react";
 
@@ -2567,6 +2567,306 @@ const universal = {
     varia: varia
 };
 
+const StyledDashboardsRenderer = styled.div`
+    display: grid;
+    grid-template-columns: ${({fullRenderArea: fullRenderArea, compactSelectors: compactSelectors}) => {
+    if (fullRenderArea) {
+        return "1fr";
+    }
+    return compactSelectors ? "60px auto" : "1fr 4fr";
+}};
+    min-height: 700px;
+`;
+
+const StyledNoDashboardRender = styled.div`
+    display: grid;
+    place-content: center;
+`;
+
+const StyledSidebar = styled.div`
+`;
+
+const StyledSelectors = styled.div`
+    height: 100%;
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr;
+    grid-template-rows: ${({helpItemsCount: helpItemsCount}) => `120px auto ${45 * helpItemsCount}px`};
+
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
+    box-shadow: inset -3px 0px 3px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    li {
+        cursor: pointer;
+        padding: 0.7rem 1.4rem;
+        user-select: none;
+    }
+`;
+
+const StyledBranding = styled.div`
+    display: grid;
+    place-content: center;
+    grid-gap: 0.5rem;
+    height: 100%;
+    font-size: 0.9rem;
+    text-align: center;
+    user-select: none;
+
+    img {
+        cursor: pointer;
+    }
+`;
+
+const StyledHelp = styled.div`
+    li {
+        font-size: 0.9rem;
+    }
+`;
+
+const StyledHelpItem = styled.li`
+    display: grid;
+    align-items: center;
+    grid-gap: 0.5rem;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto 16px"};
+    min-height: 45px;
+`;
+
+const StyledSelector = styled.li`
+    background-color: ${({theme: theme, selected: selected}) => selected ? theme.backgroundColorPrimary : "initial"};
+
+    :hover {
+        background-color: ${({theme: theme}) => theme.backgroundColorPrimary};
+    }
+
+    display: grid;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto"};
+    grid-gap: 0.7rem;
+    min-height: 45px;
+    align-items: center;
+    position: relative;
+`;
+
+const StyledSelectorRelativeLabel = styled.div`
+    position: absolute;
+    left: 50px;
+    z-index: 9999;
+    min-height: 45px;
+    display: grid;
+    align-items: center;
+    padding-right: 0.5rem;
+    background-color: ${({theme: theme}) => theme.backgroundColorPrimaryAlpha};
+`;
+
+const Selector = properties => {
+    const {data: data, selectedDashboard: selectedDashboard, compactSelectors: compactSelectors, theme: theme, setSelectedDashboard: setSelectedDashboard, rendererID: rendererID} = properties;
+    const {id: id, icon: icon, label: label} = data;
+    const Icon = icon;
+    const selected = id === selectedDashboard;
+    const [mouseOver, setMouseOver] = useState(false);
+    useEffect((() => {
+        let mounted = true;
+        if (mouseOver) {
+            setTimeout((() => {
+                if (!mounted) {
+                    return;
+                }
+                setMouseOver(false);
+            }), 2e3);
+        }
+        return () => {
+            mounted = false;
+        };
+    }), [ mouseOver ]);
+    const selectorIcon = !icon ? React.createElement(PluridIconSpace, {
+        theme: theme
+    }) : typeof icon === "function" ? React.createElement(Icon, {
+        theme: theme
+    }) : React.createElement(React.Fragment, null, icon);
+    return React.createElement(StyledSelector, {
+        key: (rendererID || "") + id,
+        onClick: () => setSelectedDashboard(id),
+        onMouseEnter: () => setMouseOver(true),
+        onMouseLeave: () => setMouseOver(false),
+        theme: theme,
+        selected: selected,
+        compactSelectors: compactSelectors
+    }, selectorIcon, !compactSelectors && React.createElement("div", null, label), compactSelectors && mouseOver && React.createElement(StyledSelectorRelativeLabel, {
+        theme: theme
+    }, label));
+};
+
+const Sidebar = properties => {
+    const {dashboards: dashboards, theme: theme, compactSelectors: compactSelectors, setCompactSelectors: setCompactSelectors, selectedDashboard: selectedDashboard, setSelectedDashboard: setSelectedDashboard, identonym: identonym, usageType: usageType, openManual: openManual, logout: logout, rendererID: rendererID, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo} = properties;
+    const openManualCount = openManual ? 1 : 0;
+    const usageTypeCount = usageType === "PRIVATE_USAGE" ? 1 : 0;
+    const helpItemsCount = openManualCount + usageTypeCount;
+    const [mouseOverSelectors, setMouseOverSelectors] = useState(false);
+    const branding = React.createElement(StyledBranding, {
+        compactSelectors: compactSelectors
+    }, !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, brandingLogo && React.createElement("img", {
+        src: brandingLogo,
+        alt: "icon",
+        height: 40,
+        onClick: () => {
+            setCompactSelectors(true);
+            setMouseOverSelectors(false);
+        }
+    })), brandingName && React.createElement("div", {
+        style: brandingNameStyle
+    }, brandingName)), compactSelectors && mouseOverSelectors && React.createElement(React.Fragment, null, React.createElement(PluridIconArrowRight, {
+        atClick: () => setCompactSelectors(false)
+    }), React.createElement("div", null, "ㅤ")));
+    const selectors = React.createElement("ul", null, dashboards.map((dashboard => React.createElement(Selector, {
+        key: dashboard.id,
+        data: dashboard,
+        compactSelectors: compactSelectors,
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        rendererID: rendererID
+    }))));
+    const help = React.createElement(StyledHelp, null, mouseOverSelectors && React.createElement("ul", null, openManual && React.createElement(StyledHelpItem, {
+        onClick: () => openManual(),
+        compactSelectors: compactSelectors
+    }, React.createElement(PluridIconDocuments, null), !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, "manual"), React.createElement(PluridIconExternalLink, null))), usageType === "PRIVATE_USAGE" && logout && React.createElement(StyledHelpItem, {
+        onClick: () => logout(),
+        compactSelectors: compactSelectors
+    }, React.createElement(PluridIconExit, null), !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, "logout (", identonym, ")"), React.createElement("div", null)))));
+    return React.createElement(StyledSidebar, {
+        theme: theme
+    }, React.createElement(StyledSelectors, {
+        onMouseEnter: () => setMouseOverSelectors(true),
+        onMouseLeave: () => setMouseOverSelectors(false),
+        theme: theme,
+        compactSelectors: compactSelectors,
+        helpItemsCount: helpItemsCount
+    }, branding, selectors, help));
+};
+
+const StyledRenderArea = styled.div`
+`;
+
+const RenderArea = properties => {
+    const {dashboards: dashboards, selectedDashboard: selectedDashboard, renderView: renderView, fullRenderArea: fullRenderArea, theme: theme, setSelectedDashboard: setSelectedDashboard, setRenderView: setRenderView, setFullRenderArea: setFullRenderArea} = properties;
+    const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+    if (!dashboard) {
+        return React.createElement(React.Fragment, null);
+    }
+    const resolveView = () => {
+        const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+        if (!dashboard) {
+            return;
+        }
+        const renderViewInDashboard = dashboard.renderers[renderView];
+        if (renderViewInDashboard) {
+            return renderView;
+        }
+        if (dashboard.defaultRender) {
+            return dashboard.defaultRender;
+        }
+        return Object.keys(dashboard.renderers)[0];
+    };
+    const renderID = resolveView();
+    useEffect((() => {
+        if (renderID && renderID !== renderView) {
+            setRenderView(renderID);
+        }
+    }), [ renderID ]);
+    if (!renderID) {
+        return React.createElement(React.Fragment, null);
+    }
+    const DashboardRender = dashboard.renderers[renderID];
+    if (!DashboardRender) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(StyledRenderArea, {
+        theme: theme
+    }, React.createElement(DashboardRender, {
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea
+    }));
+};
+
+const DashboardsRenderer$1 = properties => {
+    const {dashboards: dashboards, theme: theme, rendererID: rendererID, identonym: identonym, usageType: usageType, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo, activeDashboard: activeDashboard, activeRender: activeRender, compactSelectors: compactSelectorsProperty, fullRenderArea: fullRenderAreaProperty, noDashboardRender: noDashboardRender, atDashboardChange: atDashboardChange, atUIChange: atUIChange, openManual: openManual, logout: logout} = properties;
+    const [compactSelectors, setCompactSelectors] = useState(compactSelectorsProperty !== null && compactSelectorsProperty !== void 0 ? compactSelectorsProperty : false);
+    const [fullRenderArea, setFullRenderArea] = useState(fullRenderAreaProperty !== null && fullRenderAreaProperty !== void 0 ? fullRenderAreaProperty : false);
+    const [selectedDashboard, setSelectedDashboard] = useState(activeDashboard || "");
+    const [renderView, setRenderView] = useState(activeRender || "");
+    useEffect((() => {
+        if (!activeDashboard) {
+            return;
+        }
+        if (selectedDashboard === activeDashboard) {
+            return;
+        }
+        setSelectedDashboard(activeDashboard);
+    }), [ activeDashboard ]);
+    useEffect((() => {
+        if (atDashboardChange) {
+            atDashboardChange(renderView);
+        }
+    }), [ renderView ]);
+    useEffect((() => {
+        if (typeof compactSelectorsProperty === "boolean") {
+            setCompactSelectors(compactSelectorsProperty);
+        }
+        if (typeof fullRenderAreaProperty === "boolean") {
+            setFullRenderArea(fullRenderAreaProperty);
+        }
+    }), [ compactSelectorsProperty, fullRenderAreaProperty ]);
+    useEffect((() => {
+        if (atUIChange) {
+            atUIChange("compactSelectors", compactSelectors);
+        }
+    }), [ compactSelectors ]);
+    useEffect((() => {
+        if (atUIChange) {
+            atUIChange("fullRenderArea", fullRenderArea);
+        }
+    }), [ fullRenderArea ]);
+    return React.createElement(StyledDashboardsRenderer, {
+        theme: theme,
+        compactSelectors: compactSelectors,
+        fullRenderArea: fullRenderArea
+    }, !fullRenderArea && React.createElement(Sidebar, {
+        dashboards: dashboards,
+        theme: theme,
+        compactSelectors: compactSelectors,
+        setCompactSelectors: setCompactSelectors,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        identonym: identonym,
+        usageType: usageType,
+        openManual: openManual,
+        logout: logout,
+        rendererID: rendererID,
+        brandingName: brandingName,
+        brandingNameStyle: brandingNameStyle,
+        brandingLogo: brandingLogo
+    }), selectedDashboard && React.createElement(RenderArea, {
+        dashboards: dashboards,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea,
+        theme: theme
+    }), !selectedDashboard && noDashboardRender && React.createElement(StyledNoDashboardRender, null, noDashboardRender));
+};
+
 const StyledEntityView = styled.div`
     position: relative;
     height: 100%;
@@ -2677,7 +2977,7 @@ const createSearchTerms = (rows, fields) => rows.map((entity => {
 
 const {buttons: {PureButton: PluridPureButton}, inputs: {Textline: PluridTextline}, markers: {Spinner: PluridSpinner}} = universal;
 
-const EntityView = forwardRef(((properties, reference) => {
+const EntityView$1 = forwardRef(((properties, reference) => {
     const {entities: entities, searchFields: searchFields, generalTheme: generalTheme, interactionTheme: interactionTheme, rowsHeader: rowsHeader, rowTemplate: rowTemplate, noRows: noRows, abstractRowRenderer: abstractRowRenderer, actionButtonText: actionButtonText, placeholderText: placeholderText, scrollThrottleTime: scrollThrottleTimeProperty, loading: loading, rowRenderFields: rowRenderFields, rowRenderMethods: rowRenderMethods, actionButtonClick: actionButtonClick, filterUpdate: filterUpdate, refresh: refresh, actionScrollBottom: actionScrollBottom} = properties;
     const placeholder = placeholderText || "search";
     const scrollThrottleTime = scrollThrottleTimeProperty !== null && scrollThrottleTimeProperty !== void 0 ? scrollThrottleTimeProperty : 1e3;
@@ -2814,10 +3114,11 @@ const EntityView = forwardRef(((properties, reference) => {
 }));
 
 const containers = {
-    EntityView: EntityView
+    DashboardsRenderer: DashboardsRenderer$1,
+    EntityView: EntityView$1
 };
 
-const Head = properties => {
+const Head$1 = properties => {
     var _a, _b, _c, _d;
     const {Helmet: Helmet, defaults: defaults, children: children, stateHead: stateHead} = properties;
     const robots = (defaults === null || defaults === void 0 ? void 0 : defaults.robots) || "index,follow";
@@ -2951,7 +3252,7 @@ const mapStateToProperties$7 = (state, ownProperties) => ({
 
 const mapDispatchToProperties$7 = dispatch => ({});
 
-const ConnectedHead = connect(mapStateToProperties$7, mapDispatchToProperties$7)(Head);
+const ConnectedHead = connect(mapStateToProperties$7, mapDispatchToProperties$7)(Head$1);
 
 const head = {
     Head: ConnectedHead
@@ -3005,7 +3306,7 @@ const StyledNotificationClose = styled.div`
     place-content: center;
 `;
 
-const Notification = properties => {
+const Notification$1 = properties => {
     const {data: data, theme: theme, remove: remove, elements: elements, style: style, className: className} = properties;
     const {id: id, text: text, html: html, react: react, timeout: timeout, wordBreak: wordBreak} = data;
     const resolvedWordBreak = wordBreak === true ? "break-all" : "normal";
@@ -3064,9 +3365,9 @@ const StyledNotifications = styled.div`
     pointer-events: none;
 `;
 
-const Notifications = properties => {
+const Notifications$1 = properties => {
     const {elements: elements, stateGeneralTheme: stateGeneralTheme, stateNotifications: stateNotifications, dispatchRemoveNotification: dispatchRemoveNotification} = properties;
-    return React.createElement(StyledNotifications, null, stateNotifications.map((notification => React.createElement(Notification, {
+    return React.createElement(StyledNotifications, null, stateNotifications.map((notification => React.createElement(Notification$1, {
         key: notification.id,
         data: notification,
         theme: stateGeneralTheme,
@@ -3084,10 +3385,10 @@ const mapDispatchToProperties$6 = dispatch => ({
     dispatchRemoveNotification: payload => dispatch(notifications$1.actions.remove(payload))
 });
 
-const ConnectedNotifications = connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications);
+const ConnectedNotifications = connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications$1);
 
 const notifications = {
-    Notification: Notification,
+    Notification: Notification$1,
     Notifications: ConnectedNotifications
 };
 
@@ -3476,7 +3777,7 @@ const mapDispatchToProperties$2 = dispatch => ({});
 
 const ConnectedSittings = connect(mapStateToProperties$2, mapDispatchToProperties$2)(Sittings);
 
-const SittingTray = properties => {
+const SittingTray$1 = properties => {
     const {selectors: selectors, context: context, stateInteractionTheme: stateInteractionTheme} = properties;
     return React.createElement(StyledSittingTray, {
         theme: stateInteractionTheme
@@ -3501,7 +3802,7 @@ const mapStatedToProperties = (state, ownProperties) => ({
 
 const mapDispatchdToProperties = dispatch => ({});
 
-const ConnectedSittingTray = connect(mapStatedToProperties, mapDispatchdToProperties)(SittingTray);
+const ConnectedSittingTray = connect(mapStatedToProperties, mapDispatchdToProperties)(SittingTray$1);
 
 const sitting = {
     SittingTray: ConnectedSittingTray
@@ -3566,7 +3867,7 @@ const StyledHorizontalToolbarButtonIcon = styled.div`
 }};
 `;
 
-const HorizontalToolbarButton = properties => {
+const HorizontalToolbarButton$1 = properties => {
     const {text: text, atClick: atClick, active: active, scaleIcon: scaleIcon, icon: Icon, theme: themeProperty, style: style, className: className} = properties;
     const theme = themeProperty || themes.plurid;
     return React.createElement(StyledHorizontalToolbarButton, {
@@ -3639,7 +3940,7 @@ const StyledToolbarControlsButtons = styled.div`
     height: 100%;
 `;
 
-const ToolbarControls = properties => {
+const ToolbarControls$1 = properties => {
     const {position: positionProperty, theme: themeProperty, style: style, className: className, children: children} = properties;
     const position = positionProperty || VerticalPositions.top;
     const theme = themeProperty || plurid;
@@ -3757,7 +4058,7 @@ const StyledVerticalToolbarButtonText = styled.div`
     align-items: center;
 `;
 
-const VerticalToolbarButton = properties => {
+const VerticalToolbarButton$1 = properties => {
     const {atClick: atClick, icon: Icon, active: active, text: text, textLeft: textLeft, showText: showText, scaleIcon: scaleIcon, first: first, last: last, theme: theme} = properties;
     const [mouseOver, setMouseOver] = useState(false);
     return React.createElement(StyledVerticalToolbarButton, {
@@ -3818,7 +4119,7 @@ const StyledToolbarButtons = styled.div`
     user-select: none;
 `;
 
-const ToolbarSpecific = properties => {
+const ToolbarSpecific$1 = properties => {
     const {buttons: buttons, handleClick: handleClick, activeType: activeType, position: position, children: children, stateToolbars: stateToolbars, stateIdentonym: stateIdentonym, stateInteractionTheme: stateInteractionTheme} = properties;
     const {alwaysShow: alwaysShow, location: location, scaleIcons: scaleIcons, showNames: showNames} = stateToolbars;
     const toolbarPosition = position ? position : HorizontalPositions.right;
@@ -3863,7 +4164,7 @@ const ToolbarSpecific = properties => {
         return true;
     })).map(((button, index) => {
         const {type: type, text: text, icon: Icon, first: first, last: last} = button;
-        return React.createElement(VerticalToolbarButton, {
+        return React.createElement(VerticalToolbarButton$1, {
             key: type,
             atClick: () => handleClick(type, index),
             icon: Icon,
@@ -3887,9 +4188,9 @@ const mapStateToProperties$1 = (state, ownProperties) => ({
 
 const mapDispatchToProperties$1 = dispatch => ({});
 
-const ConnectedToolbarSpecific = connect(mapStateToProperties$1, mapDispatchToProperties$1)(ToolbarSpecific);
+const ConnectedToolbarSpecific = connect(mapStateToProperties$1, mapDispatchToProperties$1)(ToolbarSpecific$1);
 
-const ToolbarGeneral = properties => {
+const ToolbarGeneral$1 = properties => {
     const {buttons: buttons, selectors: selectors, context: context, handleClick: handleClick, speakButton: speakButton, sittingButton: sittingButtonProperty, stateView: stateView, stateSittingTray: stateSittingTray, stateToolbars: stateToolbars, stateInteractionTheme: stateInteractionTheme, dispatchToggleSittingTray: dispatchToggleSittingTray} = properties;
     const {scaleIcons: scaleIcons, showNames: showNames} = stateToolbars;
     const iconTextLeft = false;
@@ -3901,7 +4202,7 @@ const ToolbarGeneral = properties => {
         position: HorizontalPositions.left,
         selectors: selectors,
         context: context
-    }, speakButton && React.createElement(VerticalToolbarButton, {
+    }, speakButton && React.createElement(VerticalToolbarButton$1, {
         atClick: () => {},
         icon: PluridIconSpeak,
         active: false,
@@ -3910,7 +4211,7 @@ const ToolbarGeneral = properties => {
         showText: showNames,
         scaleIcon: scaleIcons,
         theme: stateInteractionTheme
-    }), sittingButton && React.createElement(React.Fragment, null, React.createElement(VerticalToolbarButton, {
+    }), sittingButton && React.createElement(React.Fragment, null, React.createElement(VerticalToolbarButton$1, {
         atClick: () => dispatchToggleSittingTray(),
         icon: PluridIconStateShareImage,
         active: stateSittingTray,
@@ -3940,14 +4241,14 @@ const mapDispatchToProperties = dispatch => ({
     dispatchToggleSittingTray: () => dispatch(sitting$1.actions.toggleSittingTray())
 });
 
-const ConnectedToolbarGeneral = connect(mapStateToProperties, mapDispatchToProperties)(ToolbarGeneral);
+const ConnectedToolbarGeneral = connect(mapStateToProperties, mapDispatchToProperties)(ToolbarGeneral$1);
 
 const toolbars = {
-    HorizontalToolbarButton: HorizontalToolbarButton,
-    ToolbarControls: ToolbarControls,
+    HorizontalToolbarButton: HorizontalToolbarButton$1,
+    ToolbarControls: ToolbarControls$1,
     ToolbarGeneral: ConnectedToolbarGeneral,
     ToolbarSpecific: ConnectedToolbarSpecific,
-    VerticalToolbarButton: VerticalToolbarButton
+    VerticalToolbarButton: VerticalToolbarButton$1
 };
 
 const pluridal = {
@@ -3962,5 +4263,7 @@ var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assig
 
 const {buttons: {LinkButton: LinkButton, PureButton: PureButton, RefreshButton: RefreshButton}, form: {FormLeftRight: FormLeftRight, FormObliterate: FormObliterate, Formbutton: Formbutton, Formitem: Formitem, Formline: Formline}, general: {GlobalStyles: GlobalStyles}, inputs: {Dropdown: Dropdown, EntityPill: EntityPill, EntityPillGroup: EntityPillGroup, InputBox: InputBox, InputDescriptor: InputDescriptor, InputLine: InputLine, InputSwitch: InputSwitch, Itemsline: Itemsline, Select: Select, Slider: Slider, Switch: Switch, Textline: Textline}, markers: {HR: HR, ProgressCircle: ProgressCircle, Spinner: Spinner, Tooltip: Tooltip}, typography: {Heading: Heading, Paragraph: Paragraph}, varia: {CopyableLine: CopyableLine, NewPageLink: NewPageLink, ScrollableLine: ScrollableLine, TextItem: TextItem}} = universal;
 
-export { CopyableLine, Dropdown, EntityPill, EntityPillGroup, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, HR, Heading, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, LinkButton, NewPageLink, Paragraph, ProgressCircle, PureButton, RefreshButton, ScrollableLine, Select, Slider, Spinner, Switch, TextItem, Textline, Tooltip, index as default, pluridal, universal };
+const {containers: {DashboardsRenderer: DashboardsRenderer, EntityView: EntityView}, head: {Head: Head}, notifications: {Notification: Notification, Notifications: Notifications}, sitting: {SittingTray: SittingTray}, toolbars: {HorizontalToolbarButton: HorizontalToolbarButton, ToolbarControls: ToolbarControls, ToolbarGeneral: ToolbarGeneral, ToolbarSpecific: ToolbarSpecific, VerticalToolbarButton: VerticalToolbarButton}} = pluridal;
+
+export { CopyableLine, DashboardsRenderer, Dropdown, EntityPill, EntityPillGroup, EntityView, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, HR, Head, Heading, HorizontalPositions, HorizontalToolbarButton, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, LinkButton, NewPageLink, Notification, Notifications, Paragraph, ProgressCircle, PureButton, RefreshButton, ScrollableLine, Select, SittingTray, SizeTypes, Slider, Spinner, Switch, TextItem, Textline, ToolbarControls, ToolbarGeneral, ToolbarSpecific, Tooltip, VerticalPositions, VerticalToolbarButton, index as default, pluridal, universal };
 //# sourceMappingURL=index.es.js.map