@plurid/plurid-ui-components-react 0.0.0-27 → 0.0.0-29

package/distribution/index.es.js

@@ -1,4361 +0,0 @@
-import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from "react";
-
-import themes, { plurid } from "@plurid/plurid-themes";
-
-import styled, { createGlobalStyle, css, keyframes } from "styled-components";
-
-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";
-
-import { mathematics, clipboard } from "@plurid/plurid-functions";
-
-import { connect } from "react-redux";
-
-import { notifications as notifications$1, sitting as sitting$1 } from "@plurid/plurid-ui-state-react";
-
-const StyledSpinner = styled.div`
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-`;
-
-const StyledLoader = styled.div`
-    display: inline-block;
-    position: relative;
-
-    width: ${props => {
-    switch (props.size) {
-      case "small":
-        return "1rem";
-
-      case "normal":
-        return "1.8rem";
-
-      case "large":
-        return "2.4rem";
-
-      default:
-        return "1.8rem";
-    }
-}};
-    height: ${props => {
-    switch (props.size) {
-      case "small":
-        return "1rem";
-
-      case "normal":
-        return "1.8rem";
-
-      case "large":
-        return "2.4rem";
-
-      default:
-        return "1.8rem";
-    }
-}};
-
-    div {
-        width: ${props => {
-    switch (props.size) {
-      case "small":
-        return "1rem";
-
-      case "normal":
-        return "1.8rem";
-
-      case "large":
-        return "2.4rem";
-
-      default:
-        return "1.8rem";
-    }
-}};
-        height: ${props => {
-    switch (props.size) {
-      case "small":
-        return "1rem";
-
-      case "normal":
-        return "1.8rem";
-
-      case "large":
-        return "2.4rem";
-
-      default:
-        return "1.8rem";
-    }
-}};
-        margin: ${props => {
-    switch (props.size) {
-      case "small":
-        return "0.1rem";
-
-      case "normal":
-        return "0.2rem";
-
-      case "large":
-        return "0.3rem";
-
-      default:
-        return "0.2rem";
-    }
-}};
-        border: ${props => {
-    switch (props.size) {
-      case "small":
-        return "0.1rem solid " + props.theme.colorPrimary;
-
-      case "normal":
-        return "0.2rem solid " + props.theme.colorPrimary;
-
-      case "large":
-        return "0.3rem solid " + props.theme.colorPrimary;
-
-      default:
-        return "0.2rem solid " + props.theme.colorPrimary;
-    }
-}};
-        border-color: ${props => props.theme.colorPrimary} transparent transparent transparent;
-
-        box-sizing: border-box;
-        display: block;
-        position: absolute;
-        border-radius: 50%;
-        animation: spinner-rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    }
-
-    div:nth-child(1) {
-        animation-delay: -0.45s;
-    }
-
-    div:nth-child(2) {
-        animation-delay: -0.3s;
-    }
-
-    div:nth-child(3) {
-        animation-delay: -0.15s;
-    }
-
-    @keyframes spinner-rotate {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-`;
-
-const Spinner$1 = properties => {
-    const {theme: theme, size: size, style: style, className: className} = properties;
-    const themeValue = theme || plurid;
-    const sizeValue = size || "normal";
-    return React.createElement(StyledSpinner, {
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(StyledLoader, {
-        theme: themeValue,
-        size: sizeValue
-    }, React.createElement("div", null), React.createElement("div", null), React.createElement("div", null), React.createElement("div", null)));
-};
-
-const StyledPureButton = styled.button`
-    color: ${({theme: theme}) => theme.colorPrimary};
-    background-color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return theme.backgroundColorPrimaryAlpha;
-    }
-    switch (level) {
-      case 0:
-        return theme.backgroundColorPrimary;
-
-      case 1:
-        return theme.backgroundColorSecondary;
-
-      case 2:
-        return theme.backgroundColorTertiary;
-
-      case 3:
-        return theme.backgroundColorQuaternary;
-
-      default:
-        return theme.backgroundColorPrimary;
-    }
-}};
-    box-shadow: 0px 8px 8px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
-
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    min-width: ${({size: size}) => {
-    switch (size) {
-      case "small":
-        return "8rem";
-
-      case "normal":
-        return "10rem";
-
-      case "large":
-        return "12rem";
-
-      default:
-        return "10rem";
-    }
-}};
-    border-radius: ${({size: size}) => {
-    switch (size) {
-      case "small":
-        return "1rem";
-
-      case "normal":
-        return "1.2rem";
-
-      case "large":
-        return "1.4rem";
-
-      default:
-        return "1.2rem";
-    }
-}};
-    padding: ${({size: size}) => {
-    switch (size) {
-      case "small":
-        return "0 1.2rem";
-
-      case "normal":
-        return "0 1.4rem";
-
-      case "large":
-        return "0 1.6rem";
-
-      default:
-        return "0 1.4rem";
-    }
-}};
-
-    font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-    font-size: ${({size: size}) => {
-    switch (size) {
-      case "small":
-        return "0.8rem";
-
-      case "normal":
-        return "0.9rem";
-
-      case "large":
-        return "1rem";
-
-      default:
-        return "0.9rem";
-    }
-}};
-    height: ${({size: size}) => {
-    switch (size) {
-      case "small":
-        return "2rem";
-
-      case "normal":
-        return "2.4rem";
-
-      case "large":
-        return "2.8rem";
-
-      default:
-        return "2.4rem";
-    }
-}};
-    cursor: ${({isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return "default";
-    }
-    return "pointer";
-}};
-
-
-    border: none;
-    outline: none;
-    user-select: none;
-    display: grid;
-    place-content: center;
-    line-height: 1.2;
-    font-weight: bold;
-    transition: box-shadow 200ms linear, background-color 200ms linear;
-    position: relative;
-    min-height: 40px;
-    min-width: 160px;
-
-    @media (hover: hover) {
-        :hover {
-            background-color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return theme.backgroundColorPrimaryAlpha;
-    }
-    switch (level) {
-      case 0:
-        return theme.backgroundColorSecondary;
-
-      case 1:
-        return theme.backgroundColorTertiary;
-
-      case 2:
-        return theme.backgroundColorQuaternary;
-
-      case 3:
-        return theme.backgroundColorPrimary;
-
-      default:
-        return theme.backgroundColorSecondary;
-    }
-}};
-        }
-    }
-
-    :active {
-        box-shadow: ${({theme: theme, isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return "0px 8px 8px 0px " + theme.boxShadowUmbraColor;
-    }
-    return "0px 3px 3px 0px " + theme.boxShadowUmbraColor;
-}};
-    }
-`;
-
-const StyledPureButtonDiv = styled(StyledPureButton).attrs({
-    as: "div"
-})`
-    background-color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return "";
-    }
-    switch (level) {
-      case 0:
-        return theme.backgroundColorSecondary;
-
-      case 1:
-        return theme.backgroundColorTertiary;
-
-      case 2:
-        return theme.backgroundColorQuaternary;
-
-      case 3:
-        return theme.backgroundColorPrimary;
-
-      default:
-        return theme.backgroundColorSecondary;
-    }
-}};
-    box-shadow: 0px 3px 3px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
-`;
-
-const PureButton$1 = properties => {
-    const {text: text, atClick: atClick, theme: themeProperty, level: levelProperty, size: sizeProperty, disabled: disabled, loading: loading, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    const level = levelProperty ?? 0;
-    const size = sizeProperty || "normal";
-    if (loading) {
-        return React.createElement(StyledPureButtonDiv, {
-            style: {
-                ...style
-            },
-            className: className,
-            theme: theme,
-            level: level,
-            size: size,
-            isDisabled: disabled
-        }, React.createElement(Spinner$1, {
-            theme: theme,
-            size: "small"
-        }));
-    }
-    return React.createElement(StyledPureButton, {
-        onClick: event => disabled ? null : atClick(event),
-        style: {
-            ...style
-        },
-        className: className,
-        theme: theme,
-        level: level,
-        size: size,
-        isDisabled: disabled
-    }, text);
-};
-
-const StyledLinkButton = styled.button`
-    font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-
-    color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return theme.backgroundColorPrimaryAlpha;
-    }
-    switch (level) {
-      case 0:
-        return theme.colorPrimary;
-
-      case 1:
-        return theme.colorSecondary;
-
-      case 2:
-        return theme.colorTertiary;
-
-      default:
-        return theme.colorPrimary;
-    }
-}};
-    margin: ${({inline: inline}) => {
-    if (inline) {
-        return "0";
-    }
-    return "0 1rem";
-}};
-    padding: ${({inline: inline}) => {
-    if (inline) {
-        return "0";
-    }
-    return "initial";
-}};
-    font-size: ${({inline: inline}) => {
-    if (inline) {
-        return "inherit";
-    }
-    return "0.9rem";
-}};
-    display: ${({inline: inline}) => {
-    if (inline) {
-        return "inline";
-    }
-    return "grid";
-}};
-    cursor: ${({isDisabled: isDisabled}) => {
-    if (isDisabled) {
-        return "inherit";
-    }
-    return "pointer";
-}};
-    border: none;
-    border-bottom: 1px solid ${({isActive: isActive, theme: theme}) => {
-    if (isActive) {
-        return theme.colorPrimary;
-    }
-    return "transparent";
-}};
-
-    font-weight: bold;
-    background: transparent;
-    place-content: center;
-    user-select: none;
-    outline: none;
-`;
-
-const StyledLinkButtonLoading = styled.div`
-    position: relative;
-    min-height: 1rem;
-    height: 100%;
-    width: 100%;
-`;
-
-const DEFAULT_LEVEL$1 = 0;
-
-const LinkButton$1 = properties => {
-    const {text: text, atClick: atClick, theme: themeProperty, level: levelProperty, inline: inline, disabled: disabled, loading: loading, active: active, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    const level = levelProperty ?? DEFAULT_LEVEL$1;
-    if (loading) {
-        return React.createElement(StyledLinkButtonLoading, null, React.createElement(Spinner$1, {
-            size: "small",
-            theme: theme
-        }));
-    }
-    return React.createElement(StyledLinkButton, {
-        onClick: event => disabled ? null : atClick(event),
-        style: {
-            ...style
-        },
-        className: className,
-        theme: theme,
-        level: level,
-        inline: inline,
-        isDisabled: disabled,
-        isActive: active
-    }, text);
-};
-
-const StyledRefreshButton = styled.div`
-`;
-
-const RefreshButton$1 = properties => {
-    const {atClick: atClick, theme: themeProperty, text: textProperty, disabled: disabled, hideAtClick: hideAtClickProperty, hideTime: hideTimeProperty} = properties;
-    const theme = themeProperty || plurid;
-    const text = textProperty || "";
-    const hideAtClick = hideAtClickProperty ?? true;
-    const hideTime = hideTimeProperty || 1300;
-    const isMounted = useRef(true);
-    const [showIconReset, setShowIconReset] = useState(true);
-    const atClickHandler = event => {
-        if (disabled) {
-            return;
-        }
-        if (hideAtClick) {
-            setShowIconReset(false);
-        }
-        atClick(event);
-        if (hideAtClick) {
-            setTimeout((() => {
-                if (!isMounted.current) {
-                    return;
-                }
-                setShowIconReset(true);
-            }), hideTime);
-        }
-    };
-    useEffect((() => () => {
-        isMounted.current = false;
-    }), []);
-    return React.createElement(StyledRefreshButton, {
-        theme: theme
-    }, showIconReset && React.createElement(PluridIconReset, {
-        theme: theme,
-        title: text,
-        inactive: disabled,
-        opacity: disabled ? .5 : 1,
-        atClick: atClickHandler
-    }));
-};
-
-const buttons = {
-    PureButton: PureButton$1,
-    LinkButton: LinkButton$1,
-    RefreshButton: RefreshButton$1
-};
-
-const StyledFormbutton = styled.div`
-    display: grid;
-    grid-template-columns: 20px 1fr;
-    grid-gap: 0.5rem;
-    align-items: center;
-    min-height: 2rem;
-    user-select: none;
-    text-decoration: none;
-    padding: 0.3rem 0.7rem;
-
-    margin: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    return "initial";
-}};
-    cursor: ${props => {
-    if (props.inactive) {
-        return "default";
-    }
-    return "pointer";
-}};
-    color: ${props => props.theme.colorPrimary};
-
-    :hover {
-        background-color: ${props => {
-    if (!props.hoverEffect) {
-        return "initial";
-    }
-    if (props.inactive || props.devisible) {
-        return "initial";
-    }
-    return props.theme.backgroundColorSecondary;
-}};
-    }
-`;
-
-const StyledFormbuttonIcon = styled.div`
-    justify-self: ${props => props.position};
-    display: grid;
-    place-content: center;
-`;
-
-const StyledFormbuttonText = styled.div`
-`;
-
-const Formbutton$1 = properties => {
-    const {text: text, Icon: Icon, atClick: atClick, link: link, target: target, theme: theme, devisible: devisible, level: level, iconPosition: iconPosition, inactive: inactive, hoverEffect: hoverEffectProperty, style: style, className: className} = properties;
-    const _theme = theme || plurid;
-    const _level = level ?? 0;
-    const _devisible = devisible ?? false;
-    const _iconPosition = iconPosition || "left";
-    const _inactive = inactive ?? false;
-    const hoverEffect = hoverEffectProperty ?? true;
-    const render = () => React.createElement(React.Fragment, null, React.createElement(StyledFormbuttonIcon, {
-        position: _iconPosition
-    }, React.createElement(Icon, {
-        theme: _theme
-    })), React.createElement(StyledFormbuttonText, null, text));
-    const renderProperties = {
-        style: {
-            ...style
-        },
-        className: className,
-        theme: _theme,
-        level: _level,
-        inactive: _inactive,
-        devisible: _devisible,
-        hoverEffect: hoverEffect
-    };
-    if (link) {
-        return React.createElement(StyledFormbutton, {
-            onClick: event => !_inactive ? atClick(event) : null,
-            as: "a",
-            href: link,
-            target: target,
-            ...renderProperties
-        }, render());
-    }
-    return React.createElement(StyledFormbutton, {
-        onClick: event => !_inactive ? atClick(event) : null,
-        ...renderProperties
-    }, render());
-};
-
-const StyledFormitem = styled.div`
-    display: grid;
-    align-items: center;
-    min-height: 2rem;
-    padding: 0.3rem 0.7rem;
-    user-select: none;
-`;
-
-const Formitem$1 = properties => {
-    const {theme: theme, level: level, style: style, className: className, children: children} = properties;
-    const _theme = theme || plurid;
-    const _level = level ?? 0;
-    return React.createElement(StyledFormitem, {
-        style: {
-            ...style
-        },
-        className: className,
-        theme: _theme,
-        level: _level
-    }, children);
-};
-
-const StyledFormLeftRight = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-`;
-
-const FormLeftRight$1 = properties => {
-    const {theme: theme, style: style, className: className, children: children} = properties;
-    const _theme = theme || plurid;
-    return React.createElement(StyledFormLeftRight, {
-        style: {
-            ...style
-        },
-        className: className,
-        theme: _theme
-    }, children);
-};
-
-const StyledFormline = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    min-height: 2rem;
-    padding: 0.3rem 0.7rem;
-
-    color: ${props => props.theme.colorPrimary};
-
-    @media (max-width: 800px) {
-        grid-template-columns: ${props => {
-    if (props.responsive) {
-        return "1fr";
-    }
-    return "1fr 1fr";
-}};
-        min-height: ${props => {
-    if (props.responsive) {
-        return "2.4rem";
-    }
-    return "2rem";
-}};
-        justify-items: ${props => {
-    if (props.responsive) {
-        return "center";
-    }
-    return "auto";
-}};
-        justify-content: ${props => {
-    if (props.responsive) {
-        return "center";
-    }
-    return "auto";
-}};
-    }
-`;
-
-const StyledFormlineText = styled.div`
-    user-select: none;
-`;
-
-const StyledFormlineElement = styled.div`
-    justify-self: right;
-
-    @media (max-width: 800px) {
-        justify-self: ${props => {
-    if (props.responsive) {
-        return "center";
-    }
-    return "right";
-}};
-    }
-`;
-
-const Formline$1 = properties => {
-    const {text: text, Element: Element, theme: theme, level: level, responsive: responsive, style: style, className: className, children: children} = properties;
-    const _theme = theme || plurid;
-    const _level = level === undefined ? 0 : level;
-    const _responsive = responsive === undefined ? false : responsive;
-    return React.createElement(StyledFormline, {
-        style: {
-            ...style
-        },
-        className: className,
-        theme: _theme,
-        level: _level,
-        responsive: _responsive
-    }, React.createElement(StyledFormlineText, null, text), React.createElement(StyledFormlineElement, {
-        responsive: _responsive
-    }, Element ? React.createElement(Element, null) : React.createElement(React.Fragment, null, children)));
-};
-
-const StyledFormObliterate = styled.div`
-    color: ${properties => properties.theme.colorPrimary};
-    font-family: ${properties => properties.theme.fontFamilySansSerif};
-    font-size: 0.8rem;
-    user-select: none;
-`;
-
-const StyledObliterateContainer = styled.div`
-    text-align: center;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 30px 45px 60px;
-    align-items: center;
-    max-width: 200px;
-    margin: 1rem auto;
-`;
-
-const FormObliterate$1 = properties => {
-    const {atObliterate: atObliterate, item: item, theme: theme, devisible: devisible, level: level, style: style, className: className} = properties;
-    const _theme = theme || plurid;
-    const _level = level ?? 0;
-    const _devisible = devisible ?? false;
-    const [showObliterate, setShowObliterate] = useState(false);
-    const handleObliterate = event => {
-        setShowObliterate(false);
-        atObliterate(event);
-    };
-    return React.createElement(StyledFormObliterate, {
-        theme: _theme,
-        level: _level,
-        devisible: _devisible,
-        style: {
-            ...style
-        },
-        className: className
-    }, !showObliterate && React.createElement(Formbutton$1, {
-        theme: _theme,
-        text: item ? `obliterate ${item}` : "obliterate",
-        Icon: PluridIconObliterate,
-        atClick: () => setShowObliterate(true),
-        devisible: true
-    }), showObliterate && React.createElement(StyledObliterateContainer, null, React.createElement("div", null, "remove forever?"), React.createElement(LinkButton$1, {
-        theme: _theme,
-        text: "cancel",
-        atClick: () => setShowObliterate(false)
-    }), React.createElement(PureButton$1, {
-        theme: _theme,
-        text: "Obliterate",
-        atClick: event => handleObliterate(event)
-    })));
-};
-
-const form = {
-    Formbutton: Formbutton$1,
-    Formitem: Formitem$1,
-    FormLeftRight: FormLeftRight$1,
-    Formline: Formline$1,
-    FormObliterate: FormObliterate$1
-};
-
-const GlobalStyles$1 = createGlobalStyle`
-    *, *::after, *::before {
-        box-sizing: border-box;
-    }
-
-    html {
-        height: 100%;
-        min-height: 100vh;
-    }
-
-    body {
-        font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-
-        color: ${({theme: theme}) => {
-    if (theme.type === "dark") {
-        return theme.backgroundColorBright;
-    }
-    return theme.colorPrimary;
-}};
-        background: ${({theme: theme}) => {
-    if (theme.type === "dark") {
-        return theme.backgroundColorDark;
-    }
-    return theme.backgroundColorPrimary;
-}};
-    }
-`;
-
-const general = {
-    GlobalStyles: GlobalStyles$1
-};
-
-const setNativeValue = (element, value) => {
-    const valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
-    const prototype = Object.getPrototypeOf(element);
-    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value").set;
-    if (valueSetter && valueSetter !== prototypeValueSetter) {
-        prototypeValueSetter.call(element, value);
-    } else {
-        valueSetter.call(element, value);
-    }
-};
-
-const StyledTextline = styled.div`
-    position: relative;
-    display: inline-block;
-    width: 100%;
-
-    input {
-        box-sizing: border-box;
-        border: none;
-        outline: none;
-        font-size: 0.8rem;
-
-        padding: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    return "0.6rem 1rem";
-}};
-        padding-top: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    return "0.7rem";
-}};
-        min-height: ${props => {
-    if (props.devisible) {
-        return "initial";
-    }
-    return "36px";
-}};
-        background-color: ${props => {
-    if (props.devisible) {
-        return "transparent";
-    }
-    switch (props.level) {
-      case 0:
-        return props.theme.backgroundColorPrimary;
-
-      case 1:
-        return props.theme.backgroundColorSecondary;
-
-      case 2:
-        return props.theme.backgroundColorTertiary;
-
-      case 3:
-        return props.theme.backgroundColorQuaternary;
-
-      default:
-        return props.theme.backgroundColorPrimary;
-    }
-}};
-        color: ${props => props.theme.colorPrimary};
-        box-shadow: inset 0px 4px 4px ${props => {
-    if (props.devisible) {
-        return "transparent";
-    }
-    return props.theme.boxShadowUmbraColor;
-}};
-        border-radius: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    if (props.round) {
-        return "1000px";
-    }
-    return "0px";
-}};
-        width: ${props => {
-    if (!props.width) {
-        return "100%";
-    }
-    if (typeof props.width === "number") {
-        return props.width + "px";
-    }
-    return props.width;
-}};
-        text-align: ${props => {
-    if (props.center) {
-        return "center";
-    }
-    return "left";
-}};
-
-        ::placeholder {
-            color: ${props => props.theme.colorSecondary};
-        }
-    }
-`;
-
-const StyledEnterIcon = styled.div`
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 20px;
-    width: 20px;
-    border-radius: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.9rem;
-    user-select: none;
-    cursor: pointer;
-    border: 1px solid transparent;
-
-    right: ${props => {
-    if (props.left) {
-        return "auto";
-    }
-    return "0.6rem";
-}};
-    left: ${props => {
-    if (props.left) {
-        return "0.6rem";
-    }
-    return "auto";
-}};
-    color: ${props => props.theme.colorPrimary};
-
-    :hover {
-        border: 1px solid ${props => props.theme.colorPrimary};
-    }
-`;
-
-const StyledErrorLine = styled.div`
-    position: absolute;
-    background-color: #FF0000;
-    bottom: -2px;
-
-    height: ${props => {
-    if (props.devisible) {
-        return "2px";
-    }
-    return "4px";
-}};
-    left: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    if (!props.round) {
-        return "0";
-    }
-    return "14px";
-}};
-    right: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    if (!props.round) {
-        return "0";
-    }
-    return "14px";
-}};
-    border-radius: ${props => {
-    if (props.devisible) {
-        return "0";
-    }
-    if (props.round) {
-        return "10px";
-    }
-    return "0px";
-}};
-    box-shadow: 0px 1px 3px 0px ${props => {
-    if (props.devisible) {
-        return "initial";
-    }
-    return props.theme.boxShadowUmbraColor;
-}};
-`;
-
-const Textline$1 = forwardRef(((properties, reference) => {
-    const {text: text, atChange: atChange, atKeyDown: atKeyDown, atFocus: atFocus, atBlur: atBlur, type: type, placeholder: placeholder, autoCapitalize: autoCapitalize, autoComplete: autoComplete, autoCorrect: autoCorrect, spellCheck: spellCheck, style: style, className: className, theme: theme, level: level, devisible: devisible, center: center, round: round, width: width, error: error, enterIconLeft: enterIconLeft, enterEmpty: enterEmpty, enterAtClick: enterAtClick, escapeClear: escapeClear, ariaLabel: ariaLabel} = properties;
-    const _type = type || "text";
-    const _theme = theme || plurid;
-    const _level = level ?? 0;
-    const _round = round ?? true;
-    const inputElement = useRef();
-    const handleKeyDown = event => {
-        if (!inputElement.current) {
-            return;
-        }
-        if (atKeyDown) {
-            atKeyDown(event);
-        }
-        if (enterAtClick && event.key === "Enter") {
-            enterAtClick();
-        }
-        if (escapeClear && event.key === "Escape" && inputElement.current) {
-            setNativeValue(inputElement.current, "");
-            const _event = new Event("input", {
-                bubbles: true
-            });
-            inputElement.current.dispatchEvent(_event);
-        }
-    };
-    const showEnterIcon = enterAtClick && (text.length > 0 || enterEmpty);
-    return React.createElement(StyledTextline, {
-        theme: _theme,
-        level: _level,
-        devisible: devisible,
-        center: center,
-        round: _round,
-        width: width,
-        className: className
-    }, React.createElement("input", {
-        type: _type,
-        value: text,
-        onChange: event => {
-            atChange(event, event.target.value);
-        },
-        onKeyDown: handleKeyDown,
-        onFocus: atFocus,
-        onBlur: atBlur,
-        placeholder: placeholder,
-        autoCapitalize: autoCapitalize,
-        autoComplete: autoComplete,
-        autoCorrect: autoCorrect,
-        spellCheck: spellCheck,
-        "aria-label": ariaLabel,
-        style: {
-            ...style,
-            paddingRight: showEnterIcon ? "35px" : undefined
-        },
-        ref: mergeReferences(inputElement, reference)
-    }), error && React.createElement(StyledErrorLine, {
-        theme: _theme,
-        devisible: devisible,
-        round: _round
-    }), showEnterIcon && React.createElement(StyledEnterIcon, {
-        theme: _theme,
-        onClick: () => enterAtClick(),
-        left: enterIconLeft
-    }, "➔"));
-}));
-
-const StyledDropdown = styled.div`
-    color: ${props => props.theme.colorPrimary};
-    text-align: ${props => {
-    if (props.left) {
-        return "left";
-    }
-    return "right";
-}};
-    font-size: 1rem;
-
-    position: relative;
-`;
-
-const StyledDropdownSelected = styled.div`
-    cursor: pointer;
-    user-select: none;
-    color: ${props => {
-    if (props.selectedColor) {
-        return props.selectedColor;
-    }
-    return props.theme.colorPrimary;
-}};
-`;
-
-const StyledDropdownList = styled.div`
-    font-size: 0.85rem;
-
-    background: ${props => {
-    switch (props.level) {
-      case 0:
-        return props.theme.backgroundColorPrimary;
-
-      case 1:
-        return props.theme.backgroundColorSecondary;
-
-      case 2:
-        return props.theme.backgroundColorTertiary;
-
-      case 3:
-        return props.theme.backgroundColorQuaternary;
-
-      default:
-        return props.theme.backgroundColorPrimary;
-    }
-}};
-    color: ${props => props.theme.colorPrimary};
-    position: absolute;
-    left: ${props => {
-    if (props.left) {
-        return "0px";
-    }
-    return "auto";
-}};
-    right: ${props => {
-    if (props.left) {
-        return "auto";
-    }
-    return "0px";
-}};
-    top: ${props => {
-    if (props.listTop) {
-        return props.listTop;
-    }
-    return "25px";
-}};
-    height: ${props => {
-    if (props.heightItems) {
-        const value = props.heightItems * 2 + "rem";
-        if (props.heightBeyond) {
-            return `calc(${value} + 1rem)`;
-        }
-        return value;
-    }
-    return "initial";
-}};
-    overflow: ${props => {
-    if (props.heightItems) {
-        return "scroll";
-    }
-    return "initial";
-}};
-
-    /* Hide Scrollbar */
-    scrollbar-width: none; /* Firefox 64 */
-    -ms-overflow-style: none; /* Internet Explorer 11 */
-    ::-webkit-scrollbar { /** WebKit */
-        display: none;
-    }
-    width: ${props => {
-    if (props.width) {
-        if (typeof props.width === "number") {
-            return props.width + "px";
-        }
-        if (typeof props.width === "string") {
-            return props.width;
-        }
-    }
-    return "initial";
-}};
-
-    border-radius: 10px;
-    min-width: 60px;
-
-    z-index: 9998;
-    box-shadow: 0px 3px 5px 1px hsla(327, 94%, 10%, 0.7);
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    ul li {
-        box-sizing: border-box;
-        padding: 0.3rem 0.6rem;
-        user-select: none;
-        cursor: pointer;
-        min-height: 2rem;
-        display: grid;
-        align-items: center;
-        word-break: break-all;
-        justify-content: ${props => {
-    if (props.left) {
-        return "left";
-    }
-    return "right";
-}};
-    }
-
-    ul li:hover {
-        background: ${props => {
-    if (props.level === 2) {
-        return props.theme.backgroundColorSecondary;
-    }
-    return props.theme.backgroundColorTertiary;
-}};
-    }
-
-    ul li:first-child {
-        border-top-right-radius: 10px;
-        border-top-left-radius: 10px;
-    }
-
-    ul li:last-child {
-        border-bottom-right-radius: 10px;
-        border-bottom-left-radius: 10px;
-    }
-`;
-
-const StyledFilterable = styled.div`
-    position: relative;
-
-    input {
-        text-align: ${props => {
-    if (props.left) {
-        return "left !important";
-    }
-    return "right !important";
-}};
-    }
-`;
-
-const StyledFilterUpdate = styled.div`
-    position: absolute;
-    z-index: 9999;
-    top: 0;
-    left: ${props => {
-    if (props.left) {
-        return "auto";
-    }
-    return "0";
-}};
-    right: ${props => {
-    if (props.left) {
-        return "0";
-    }
-    return "auto";
-}};
-`;
-
-const Dropdown$1 = properties => {
-    const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, listTop: listTop, dropdownToggled: dropdownToggled, dropdownSign: dropdownSign, hideAtSelect: hideAtSelect, selectAtHover: selectAtHover, selectedColor: selectedColor, filterable: filterable, style: style, className: className, theme: themeProperty, generalTheme: generalThemeProperty, interactionTheme: interactionThemeProperty, level: level, heightItems: heightItems, width: width, setDropdownToggled: setDropdownToggled, filterUpdate: filterUpdate} = properties;
-    const _generalTheme = generalThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : generalThemeProperty;
-    const _interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : interactionThemeProperty;
-    const _level = level ?? 0;
-    const _hideAtSelect = hideAtSelect ?? true;
-    const _selectAtHover = selectAtHover ?? false;
-    const _dropdownSign = typeof dropdownSign === "string" ? dropdownSign : !dropdownSign ? "" : "▼";
-    const isMounted = useRef(true);
-    const filterInput = useRef(null);
-    const [generalTheme, setGeneralTheme] = useState(_generalTheme);
-    const [interactionTheme, setInteractionTheme] = useState(_interactionTheme);
-    const [showList, setShowList] = useState(false);
-    const [selectedBackgroundColor, setSelectedBackgroundColor] = useState(interactionTheme.backgroundColorTertiary);
-    const [filterValue, setFilterValue] = useState("");
-    const [filteredSelectables, setFilteredSelectables] = useState([ ...selectables ]);
-    const [showFilterUpdate, setShowFilterUpdate] = useState(!!filterUpdate);
-    const [arrowIndex, setArrowIndex] = useState(-1);
-    const select = selected => {
-        kind ? atSelect(selected, kind) : atSelect(selected);
-    };
-    const handleSelect = selected => {
-        select(selected);
-        if (_hideAtSelect) {
-            setShowList(false);
-        }
-    };
-    const handleHover = selected => {
-        if (_selectAtHover) {
-            select(selected);
-        }
-    };
-    const handleFiltering = event => {
-        const {value: value} = event.target;
-        const filterValue = value.toLowerCase();
-        const filteredSelectables = selectables.filter((selectable => {
-            if (typeof selectable === "string") {
-                const filterSelectable = selectable.toLowerCase();
-                if (selectable.toLowerCase().startsWith(filterValue)) {
-                    return true;
-                }
-                const split = filterSelectable.split(" ");
-                for (const element of split) {
-                    if (element.startsWith(filterValue)) {
-                        return true;
-                    }
-                }
-                return false;
-            }
-            const filterSelectable = selectable.value.toLowerCase();
-            if (filterSelectable.startsWith(filterValue)) {
-                return true;
-            }
-            const split = filterSelectable.split(" ");
-            for (const element of split) {
-                if (element.startsWith(filterValue)) {
-                    return true;
-                }
-            }
-            return false;
-        }));
-        setFilterValue(value);
-        setFilteredSelectables(filteredSelectables);
-        itemsReferences.current = filteredSelectables.reduce(((accumulator, _, index) => {
-            accumulator[index] = React.createRef();
-            return accumulator;
-        }), {});
-    };
-    const focusFilterInput = () => {
-        setTimeout((() => {
-            if (filterInput.current) {
-                filterInput.current.focus();
-            }
-        }), 100);
-    };
-    const itemsReferences = useRef(filteredSelectables.reduce(((accumulator, _, index) => {
-        accumulator[index] = React.createRef();
-        return accumulator;
-    }), {}));
-    useEffect((() => {
-        if (!dropdownToggled) {
-            setShowList(false);
-        }
-    }), [ dropdownToggled ]);
-    useEffect((() => {
-        if (_level === 2) {
-            setSelectedBackgroundColor(interactionTheme.backgroundColorSecondary);
-        } else {
-            setSelectedBackgroundColor(interactionTheme.backgroundColorTertiary);
-        }
-    }), [ _level, interactionTheme ]);
-    useEffect((() => {
-        const generalTheme = generalThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : generalThemeProperty;
-        const interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : interactionThemeProperty;
-        setGeneralTheme(generalTheme);
-        setInteractionTheme(interactionTheme);
-    }), [ themeProperty, generalThemeProperty, interactionThemeProperty ]);
-    useEffect((() => {
-        const scrollTo = index => {
-            if (itemsReferences.current[index].current) {
-                itemsReferences.current[index].current.scrollIntoView({
-                    behavior: "smooth",
-                    block: "start"
-                });
-            }
-        };
-        const handleArrows = event => {
-            if (event.key === "ArrowUp") {
-                const newIndex = arrowIndex - 1;
-                if (newIndex >= 0) {
-                    setArrowIndex(newIndex);
-                    scrollTo(newIndex);
-                }
-            }
-            if (event.key === "ArrowDown") {
-                const newIndex = arrowIndex + 1;
-                if (newIndex < filteredSelectables.length) {
-                    setArrowIndex(newIndex);
-                    scrollTo(newIndex);
-                }
-            }
-            if (event.key === "Enter") {
-                const selected = filteredSelectables[arrowIndex];
-                if (selected) {
-                    atSelect(selected);
-                    setArrowIndex(-1);
-                    if (_hideAtSelect) {
-                        setShowList(false);
-                    }
-                }
-            }
-        };
-        const handleScroll = () => {
-            setArrowIndex(-1);
-        };
-        if (showList) {
-            window.addEventListener("keydown", handleArrows);
-            window.addEventListener("wheel", handleScroll);
-        } else {
-            setArrowIndex(-1);
-        }
-        return () => {
-            if (showList) {
-                window.removeEventListener("keydown", handleArrows);
-                window.removeEventListener("wheel", handleScroll);
-            }
-        };
-    }), [ arrowIndex, showList ]);
-    useEffect((() => () => {
-        isMounted.current = false;
-    }), []);
-    useEffect((() => {
-        setFilteredSelectables([ ...selectables ]);
-    }), [ selectables.length ]);
-    return React.createElement(StyledDropdown, {
-        theme: interactionTheme,
-        left: left,
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(StyledDropdownSelected, {
-        onClick: () => {
-            setShowList(!showList);
-            if (setDropdownToggled) {
-                setDropdownToggled(kind);
-            }
-            if (!showList && filterable) {
-                focusFilterInput();
-            }
-        },
-        theme: generalTheme,
-        selectedColor: selectedColor
-    }, typeof selected === "string" ? selected : selected.value, _dropdownSign && React.createElement(React.Fragment, null, " ", _dropdownSign)), showList && React.createElement(StyledDropdownList, {
-        theme: interactionTheme,
-        left: left,
-        listTop: listTop,
-        level: _level,
-        heightItems: heightItems && filterable && filteredSelectables.length < heightItems ? filteredSelectables.length + 1 : heightItems,
-        heightBeyond: filteredSelectables.length > (heightItems || 0),
-        width: width
-    }, React.createElement("ul", null, filterable && React.createElement("li", {
-        style: {
-            backgroundColor: interactionTheme.backgroundColorTertiary,
-            boxShadow: interactionTheme.boxShadowPenumbraInset
-        }
-    }, React.createElement(StyledFilterable, {
-        left: left
-    }, filterUpdate && showFilterUpdate && React.createElement(StyledFilterUpdate, {
-        left: left
-    }, React.createElement(PluridIconReset, {
-        theme: interactionTheme,
-        atClick: () => {
-            setShowFilterUpdate(false);
-            filterUpdate();
-            setTimeout((() => {
-                if (!isMounted.current) {
-                    return;
-                }
-                setShowFilterUpdate(true);
-            }), 5300);
-        }
-    })), React.createElement(Textline$1, {
-        ref: filterInput,
-        theme: interactionTheme,
-        text: filterValue,
-        atChange: handleFiltering,
-        devisible: true,
-        spellCheck: false,
-        autoCapitalize: "false",
-        autoComplete: "false",
-        autoCorrect: "false",
-        style: {
-            padding: !!filterUpdate ? left ? "0 1.3rem 0 0" : "0 0 0 1.3rem" : "0"
-        }
-    }))), filteredSelectables.map(((selectable, index) => {
-        let selectableID = typeof selectable === "string" ? selectable : selectable.id;
-        let selectableValue = typeof selectable === "string" ? selectable : selectable.value;
-        let isSelected = false;
-        if (typeof selected === "string") {
-            if (selected === selectableID) {
-                isSelected = true;
-            }
-        } else {
-            if (selected.id === selectableID) {
-                isSelected = true;
-            }
-        }
-        if (arrowIndex === index) {
-            isSelected = true;
-        }
-        return React.createElement("li", {
-            ref: itemsReferences.current[index],
-            key: selectableID,
-            onClick: () => handleSelect(selectable),
-            onMouseEnter: () => handleHover(selectable),
-            style: {
-                backgroundColor: isSelected ? selectedBackgroundColor : ""
-            }
-        }, selectableValue);
-    })))));
-};
-
-const StyledEntityPill = styled.div`
-    background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
-    box-shadow: ${({theme: theme}) => theme.boxShadowUmbra};
-
-    padding: 0.5rem 1rem;
-    margin: 0.5rem;
-    border-radius: 20px;
-
-    display: flex;
-    align-items: center;
-`;
-
-const EntityPill$1 = properties => {
-    const {id: id, remove: remove, text: text, theme: theme, style: style} = properties;
-    const textValue = text || id;
-    return React.createElement(StyledEntityPill, {
-        theme: theme || plurid,
-        style: {
-            ...style
-        }
-    }, React.createElement("div", {
-        style: {
-            marginRight: "0.5rem"
-        }
-    }, textValue), React.createElement(PluridIconDelete, {
-        theme: theme,
-        atClick: () => remove(id)
-    }));
-};
-
-const StyledEntityPillGroup = styled.div`
-    display: flex;
-    flex-flow: wrap;
-    margin: 0 auto;
-    justify-content: center;
-`;
-
-const EntityPillGroup$1 = properties => {
-    const {entities: entities, remove: remove, keyFix: keyFix, theme: theme, style: style, pillStyle: pillStyle} = properties;
-    return React.createElement(StyledEntityPillGroup, {
-        theme: theme,
-        style: {
-            ...style
-        }
-    }, entities.map((entity => {
-        const stringEntity = typeof entity === "string";
-        const id = stringEntity ? entity : entity.id;
-        const text = stringEntity ? undefined : entity.text;
-        return React.createElement(EntityPill$1, {
-            key: `entity-pill-${id}${keyFix || ""}`,
-            id: id,
-            text: text,
-            remove: remove,
-            theme: theme || plurid,
-            style: pillStyle
-        });
-    })));
-};
-
-const StyledInputDescriptor = styled.div`
-    text-align: left;
-    font-size: 0.9rem;
-    line-height: 1;
-    min-height: 1.1rem;
-    margin-top: 1.3rem;
-    margin-bottom: 0.4rem;
-    margin-left: 0.9rem;
-
-    font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-    color: ${({theme: theme}) => theme.colorPrimary};
-`;
-
-const InputDescriptor$1 = properties => {
-    const {name: name, show: show, theme: themeProperty, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    return React.createElement(StyledInputDescriptor, {
-        theme: theme,
-        className: className,
-        style: {
-            ...style
-        }
-    }, show && React.createElement(React.Fragment, null, name));
-};
-
-const StyledInputBox = styled.div`
-    textarea {
-        box-sizing: border-box;
-        width: 100%;
-        min-height: 5rem;
-        resize: vertical;
-        outline: none;
-        border: none;
-        padding: 0.9rem;
-        font-size: 0.8rem;
-        border-radius: 0.9rem;
-        line-height: 1.5;
-
-        font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-        color: ${({theme: theme}) => theme.colorPrimary};
-        background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
-        box-shadow: inset 0px 4px 4px ${({theme: theme}) => theme.boxShadowUmbraColor};
-
-
-        ::placeholder {
-            color: ${({theme: theme}) => theme.colorSecondary};
-        }
-    }
-`;
-
-const StyledTextBox = styled.div`
-`;
-
-const InputBox$1 = properties => {
-    const {text: text, name: name, atChange: atChange, theme: themeProperty, style: style, className: className, atKeyDown: atKeyDown} = properties;
-    const theme = themeProperty || plurid;
-    return React.createElement(StyledInputBox, {
-        theme: theme,
-        className: className,
-        style: {
-            ...style
-        }
-    }, React.createElement(InputDescriptor$1, {
-        name: name,
-        show: text !== "",
-        theme: theme
-    }), React.createElement(StyledTextBox, {
-        theme: theme
-    }, React.createElement("textarea", {
-        value: text,
-        placeholder: name,
-        onChange: event => atChange(event),
-        onKeyDown: event => atKeyDown ? atKeyDown(event) : null,
-        spellCheck: false,
-        autoCapitalize: "false",
-        autoComplete: "false",
-        autoCorrect: "false"
-    })));
-};
-
-const StyledInputLine = styled.div`
-    width: 350px;
-`;
-
-const InputLine$1 = properties => {
-    const {name: name, text: text, atChange: atChange, theme: themeProperty, type: type, error: error, textline: textline, style: style, className: className, atKeyDown: atKeyDown} = properties;
-    const theme = themeProperty || plurid;
-    return React.createElement(StyledInputLine, {
-        theme: theme,
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(InputDescriptor$1, {
-        name: name,
-        show: text !== "",
-        theme: theme
-    }), React.createElement(Textline$1, {
-        text: text,
-        type: type,
-        placeholder: name,
-        theme: theme,
-        level: 2,
-        error: error,
-        spellCheck: false,
-        autoCapitalize: "false",
-        autoComplete: "false",
-        autoCorrect: "false",
-        atChange: atChange,
-        atKeyDown: atKeyDown,
-        ...textline
-    }));
-};
-
-const StyledSwitch = styled.label`
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-
-    input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-`;
-
-const levelBackgroundColor = props => {
-    switch (props.level) {
-      case 0:
-        return props.theme.backgroundColorPrimary;
-
-      case 1:
-        return props.theme.backgroundColorSecondary;
-
-      case 2:
-        return props.theme.backgroundColorTertiary;
-
-      case 3:
-        return props.theme.backgroundColorQuaternary;
-
-      default:
-        return props.theme.backgroundColorPrimary;
-    }
-};
-
-const backgroundColor = props => {
-    if (props.accent) {
-        return props.accent;
-    }
-    if (props.exclusive && !props.checked) {
-        switch (props.level) {
-          case 0:
-            return props.theme.backgroundColorPrimaryAlpha;
-
-          case 1:
-            return props.theme.backgroundColorSecondaryAlpha;
-
-          case 2:
-            return props.theme.backgroundColorTertiaryAlpha;
-
-          case 3:
-            return props.theme.backgroundColorQuaternaryAlpha;
-
-          default:
-            return props.theme.backgroundColorPrimaryAlpha;
-        }
-    }
-    return levelBackgroundColor(props);
-};
-
-const StyledSwitchSlider = styled.span`
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: .4s ease-in-out;
-    box-shadow: inset 0 2px 3px black;
-
-    background-color: ${props => backgroundColor(props)};
-    border-radius: ${props => {
-    if (props.round) {
-        return "34px";
-    }
-    return "0";
-}};
-
-    :before {
-        position: absolute;
-        content: "";
-        height: 26px;
-        width: 26px;
-        left: 4px;
-        bottom: 4px;
-        transition: .4s;
-
-        background-color: ${props => props.theme.colorPrimary};
-        border-radius: ${props => {
-    if (props.round) {
-        return "50%";
-    }
-    return "0";
-}};
-        transform: ${props => {
-    if (props.checked) {
-        return "translateX(26px)";
-    }
-    return "translateX(0px)";
-}};
-    }
-`;
-
-const StyledSwitchIcon = styled.div`
-    height: 100%;
-    position: absolute;
-    top: 0;
-    display: flex;
-    align-items: center;
-    transition: .4s;
-
-    svg {
-        fill: ${props => levelBackgroundColor(props)};
-    }
-`;
-
-const Switch$1 = properties => {
-    const {checked: checked, theme: theme, level: level, round: round, exclusive: exclusive, accent: accent, Icon: Icon, atChange: atChange} = properties;
-    const _theme = theme || plurid;
-    const _level = level === undefined ? 0 : level;
-    const _round = round === undefined ? true : round;
-    const commonProperties = {
-        theme: _theme,
-        level: _level,
-        exclusive: exclusive,
-        checked: checked,
-        accent: accent
-    };
-    return React.createElement(StyledSwitch, {
-        theme: _theme
-    }, React.createElement("input", {
-        type: "checkbox",
-        checked: checked,
-        onChange: () => atChange()
-    }), React.createElement(StyledSwitchSlider, {
-        round: _round,
-        ...commonProperties
-    }), Icon && React.createElement(StyledSwitchIcon, {
-        ...commonProperties,
-        style: {
-            left: checked ? "35px" : "9px"
-        }
-    }, React.createElement(Icon, null)));
-};
-
-const StyledInputSwitch = styled.div`
-    font-size: 0.9rem;
-
-    margin-top: ${({compact: compact}) => {
-    if (compact) {
-        return "1rem";
-    }
-    return "2.2rem";
-}};
-`;
-
-const InputSwitch$1 = properties => {
-    const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, switch: switchProperties, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    return React.createElement(StyledInputSwitch, {
-        compact: compact,
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(FormLeftRight$1, null, React.createElement("div", {
-        style: {
-            marginLeft: "0.9rem"
-        }
-    }, name), React.createElement(Switch$1, {
-        checked: checked,
-        level: 2,
-        exclusive: true,
-        theme: theme,
-        atChange: () => atChange(),
-        ...switchProperties
-    })));
-};
-
-const StyledItemsline = styled.div`
-    padding: 0 0.7rem;
-    font-size: 0.9rem;
-
-    ul {
-        list-style: none;
-        padding: 0;
-        margin-top: 0.4rem;
-        margin-bottom: 0.8rem;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        flex-direction: ${props => {
-    if (props.left) {
-        return "row";
-    }
-    return "row-reverse";
-}};
-    }
-
-    li {
-        margin: 0 0.3rem;
-        cursor: pointer;
-        user-select: none;
-        line-height: 1.2rem;
-
-        :hover {
-            text-decoration: line-through;
-        }
-    }
-`;
-
-const Itemsline$1 = properties => {
-    const {items: items, removeItem: removeItem, theme: theme, level: level, left: left, style: style, className: className} = properties;
-    const _theme = theme === undefined ? themes.plurid : theme;
-    const _level = level === undefined ? 0 : level;
-    const _left = left === undefined ? false : left;
-    return React.createElement(StyledItemsline, {
-        style: {
-            ...style
-        },
-        className: className,
-        theme: _theme,
-        level: _level,
-        left: _left
-    }, items.length > 0 && React.createElement("ul", null, items.map((item => React.createElement("li", {
-        key: item + Math.random(),
-        onClick: () => removeItem(item)
-    }, item)))));
-};
-
-const StyledSelect = styled.div`
-`;
-
-const PluridSelect = properties => {
-    const {selectables: selectables, atChange: atChange, theme: theme, level: level, devisible: devisible, round: round, width: width} = properties;
-    const _theme = theme || plurid;
-    const _level = level ?? 0;
-    const _round = round ?? true;
-    return React.createElement(StyledSelect, {
-        theme: _theme,
-        level: _level,
-        devisible: devisible,
-        round: _round,
-        width: width
-    }, React.createElement("select", null, selectables.map((selectable => React.createElement("option", {
-        key: selectable,
-        value: selectable
-    }, selectable)))));
-};
-
-const StyledSlider = styled.div`
-    display: grid;
-    align-items: center;
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-
-    width: ${props => {
-    if (props.width) {
-        if (typeof props.width === "string") {
-            return props.width;
-        }
-        return props.width + "px";
-    }
-    return "100px";
-}};
-`;
-
-const StyledNamedValue = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.8rem;
-    line-height: 16px;
-    user-select: none;
-`;
-
-const StyledSliderValue = styled.div`
-    user-select: none;
-    font-size: 0.8rem;
-    min-width: 1.6rem;
-    text-align: right;
-`;
-
-const StyledSliderInputContainer = styled.div`
-    width: ${props => {
-    if (props.width) {
-        if (typeof props.width === "string") {
-            return props.width;
-        }
-        return props.width + "px";
-    }
-    return "100px";
-}};
-
-    /*
-        article: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
-        tool: http://danielstern.ca/range.css/
-    */
-   input[type=range] {
-        -webkit-appearance: none;
-        width: 100%;
-        margin: 2px 0;
-        padding: 10px 0;
-        background: transparent;
-        cursor: pointer;
-    }
-
-    input[type=range]:focus {
-        outline: none;
-    }
-
-    input[type=range]::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 2px;
-        cursor: pointer;
-        background: ${props => props.theme.colorPrimary};
-        border-radius: 0px;
-    }
-
-    input[type=range]::-webkit-slider-thumb {
-        border: 2px solid ${props => props.theme.colorPrimary};
-        height: ${props => {
-    switch (props.thumbSize) {
-      case "small":
-        return "14px";
-
-      case "normal":
-        return "20px";
-
-      case "large":
-        return "26px";
-
-      default:
-        return "26px";
-    }
-}};
-        width: ${props => {
-    switch (props.thumbSize) {
-      case "small":
-        return "14px";
-
-      case "normal":
-        return "20px";
-
-      case "large":
-        return "26px";
-
-      default:
-        return "26px";
-    }
-}};
-        background: ${props => {
-    if (props.hovered) {
-        return props.theme.colorPrimary;
-    }
-    switch (props.level) {
-      case 0:
-        return props.theme.backgroundColorPrimary;
-
-      case 1:
-        return props.theme.backgroundColorSecondary;
-
-      case 2:
-        return props.theme.backgroundColorTertiary;
-
-      case 3:
-        return props.theme.backgroundColorQuaternary;
-
-      default:
-        return props.theme.backgroundColorPrimary;
-    }
-}};
-        margin-top: ${props => {
-    switch (props.thumbSize) {
-      case "small":
-        return "-6px";
-
-      case "normal":
-        return "-9px";
-
-      case "large":
-        return "-12px";
-
-      default:
-        return "-12px";
-    }
-}};
-        border-radius: 50px;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-    input[type=range]:focus::-webkit-slider-runnable-track {
-        background: ${props => props.theme.colorPrimary};
-    }
-
-    input[type=range]::-moz-range-track {
-        width: 100%;
-        height: 2px;
-        cursor: pointer;
-        background: ${props => props.theme.colorPrimary};
-        border-radius: 0px;
-    }
-
-    input[type=range]::-moz-range-thumb {
-        border: 2px solid ${props => props.theme.colorPrimary};
-        height: 15px;
-        width: 15px;
-        border-radius: 50px;
-        background: ${props => {
-    if (props.hovered) {
-        return props.theme.colorPrimary;
-    }
-    return props.theme.backgroundColorTertiary;
-}};
-        cursor: pointer;
-    }
-
-    input[type=range]::-ms-track {
-        width: 100%;
-        height: 2px;
-        cursor: pointer;
-        background: transparent;
-        border-color: transparent;
-        color: transparent;
-    }
-
-    input[type=range]::-ms-fill-lower {
-        background: ${props => props.theme.colorPrimary};
-        border-radius: 0px;
-    }
-
-    input[type=range]::-ms-fill-upper {
-        background: ${props => props.theme.colorPrimary};
-        border-radius: 0px;
-    }
-
-    input[type=range]::-ms-thumb {
-        border: 2px solid ${props => props.theme.colorPrimary};
-        height: 15px;
-        width: 15px;
-        border-radius: 50px;
-        background: ${props => {
-    if (props.hovered) {
-        return props.theme.colorPrimary;
-    }
-    return props.theme.backgroundColorTertiary;
-}};
-        cursor: pointer;
-        height: 2px;
-    }
-
-    input[type=range]:focus::-ms-fill-lower {
-        background: ${props => props.theme.colorPrimary};
-    }
-
-    input[type=range]:focus::-ms-fill-upper {
-        background: ${props => props.theme.colorPrimary};
-    }
-`;
-
-const DEFAULT_VALUE = 0;
-
-const DEFAULT_MIN = 0;
-
-const DEFAULT_MAX = 100;
-
-const DEFAULT_STEP = 1;
-
-const DEFAULT_LEVEL = 0;
-
-const DEFAULT_THUMB_SIZE = "large";
-
-const Slider$1 = properties => {
-    const {value: value, atChange: atChange, defaultValue: defaultValue, min: min, max: max, step: step, name: name, theme: theme, level: level, thumbSize: thumbSize, width: width, valueSign: valueSign, namedValueAbove: namedValueAbove} = properties;
-    const [mouseOver, setMouseOver] = useState(false);
-    const _theme = theme || plurid;
-    const _level = level === undefined ? DEFAULT_LEVEL : level;
-    const _thumbSize = thumbSize === undefined ? DEFAULT_THUMB_SIZE : thumbSize;
-    const _step = step === undefined ? DEFAULT_STEP : step;
-    const handleDoubleClick = () => {
-        atChange(defaultValue || DEFAULT_VALUE);
-    };
-    const handleSliderInput = event => {
-        atChange(parseFloat(event.target.value));
-    };
-    return React.createElement(StyledSlider, {
-        theme: _theme,
-        width: width
-    }, namedValueAbove && React.createElement(StyledNamedValue, null, React.createElement("div", null, name), React.createElement(StyledSliderValue, {
-        theme: _theme
-    }, value, valueSign)), React.createElement(StyledSliderInputContainer, {
-        theme: _theme,
-        hovered: mouseOver,
-        thumbSize: _thumbSize,
-        level: _level,
-        width: width
-    }, React.createElement("input", {
-        type: "range",
-        min: min || DEFAULT_MIN,
-        max: max || DEFAULT_MAX,
-        name: name || "",
-        value: value,
-        step: _step,
-        onMouseEnter: () => setMouseOver(true),
-        onMouseLeave: () => setMouseOver(false),
-        onMouseMove: () => mouseOver ? setMouseOver(true) : null,
-        onChange: handleSliderInput,
-        onDoubleClick: handleDoubleClick
-    })));
-};
-
-const inputs = {
-    Dropdown: Dropdown$1,
-    EntityPill: EntityPill$1,
-    EntityPillGroup: EntityPillGroup$1,
-    InputBox: InputBox$1,
-    InputDescriptor: InputDescriptor$1,
-    InputLine: InputLine$1,
-    InputSwitch: InputSwitch$1,
-    Itemsline: Itemsline$1,
-    Select: PluridSelect,
-    Slider: Slider$1,
-    Switch: Switch$1,
-    Textline: Textline$1
-};
-
-const StyledHR = styled.hr`
-    outline: 0;
-    border: 0;
-    margin: 0.8rem auto;
-    height: 1px;
-
-    background-color: ${({theme: theme}) => theme.colorPrimary};
-`;
-
-const HR$1 = properties => {
-    const {theme: theme, style: style, className: className} = properties;
-    const themeValue = theme || plurid;
-    return React.createElement(StyledHR, {
-        theme: themeValue,
-        style: {
-            ...style
-        },
-        className: className
-    });
-};
-
-const StyledProgressCircle = styled.div`
-    height: 0;
-    width: 0;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-    margin: 10px;
-
-    svg {
-        transform: translateX(-50%) translateY(-50%);
-    }
-`;
-
-const ProgressCircle$1 = properties => {
-    const {progress: progress, size: size, radius: radius, stroke: stroke, theme: theme, style: style, className: className} = properties;
-    const progressValue = mathematics.numbers.normalizeBetween(progress, 0, 100);
-    const radiusValue = radius || 20;
-    const diameter = radiusValue * 2;
-    const strokeValue = stroke || 3;
-    const normalizedRadius = radiusValue - strokeValue * 2;
-    const circumference = normalizedRadius * 2 * Math.PI;
-    const strokeDashoffset = circumference - progressValue / 100 * circumference;
-    const themeValue = theme || plurid;
-    const sizeValue = size || "normal";
-    return React.createElement(StyledProgressCircle, {
-        size: sizeValue,
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement("svg", {
-        height: diameter,
-        width: diameter
-    }, React.createElement("circle", {
-        stroke: themeValue.backgroundColorPrimaryAlpha,
-        fill: "transparent",
-        strokeWidth: strokeValue,
-        r: normalizedRadius,
-        cx: radiusValue,
-        cy: radiusValue
-    }), React.createElement("circle", {
-        stroke: themeValue.colorPrimary,
-        fill: "transparent",
-        strokeWidth: strokeValue,
-        strokeDasharray: circumference + " " + circumference,
-        style: {
-            strokeDashoffset: strokeDashoffset
-        },
-        r: normalizedRadius,
-        cx: radiusValue,
-        cy: radiusValue
-    })));
-};
-
-const StyledTooltip = styled.span`
-    position: relative;
-`;
-
-const StyledTooltipString = styled.span`
-`;
-
-const StyledTooltipIcon = styled.span`
-    user-select: none;
-    cursor: pointer;
-
-    display: inline-grid;
-    margin: 0 5px;
-    place-content: center;
-    height: 20px;
-    width: 20px;
-    border-radius: 20px;
-    font-size: 12px;
-    line-height: 1.4;
-    text-align: left;
-
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    color: ${props => props.theme.colorPrimary};
-    background-color: ${props => props.theme.backgroundColorSecondary};
-`;
-
-const StyledTooltipText = styled.div`
-    position: absolute;
-    top: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-radius: 2px;
-    z-index: 999;
-    padding: 20px;
-    min-width: 150px;
-    font-size: 12px;
-    line-height: 1.3;
-    text-align: left;
-
-    color: ${props => props.theme.colorPrimary};
-    background-color: ${props => props.theme.backgroundColorSecondary};
-    box-shadow: ${props => props.theme.boxShadowUmbra};
-
-    :before {
-        content: '';
-        position: absolute;
-        top: -10px;
-        left: 50%;
-        transform: translateX(-50%);
-        border-left: ${props => {
-    if (props.indicator) {
-        return "10px";
-    }
-    return "0";
-}} solid transparent;
-        border-right: ${props => {
-    if (props.indicator) {
-        return "10px";
-    }
-    return "0";
-}} solid transparent;
-        border-bottom: ${props => {
-    if (props.indicator) {
-        return "10px";
-    }
-    return "0";
-}} solid ${props => props.theme.backgroundColorSecondary};
-    }
-`;
-
-const Tooltip$1 = properties => {
-    const {tool: Tool, tip: Tip, indicator: indicatorProperty, icon: iconProperty, theme: themeProperty, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    const indicator = indicatorProperty ?? true;
-    const icon = iconProperty ?? true;
-    const mounted = useMounted();
-    const hoverOutTimeout = useRef(null);
-    const [mouseOver, setMouseOver] = useState(false);
-    const [showTooltipText, setShowTooltipText] = useState(false);
-    useEffect((() => {
-        if (!mounted) {
-            return;
-        }
-        if (mouseOver) {
-            setShowTooltipText(true);
-        }
-        if (!mouseOver) {
-            hoverOutTimeout.current = setTimeout((() => {
-                if (!mounted) {
-                    return;
-                }
-                setShowTooltipText(false);
-            }), 500);
-        }
-        return () => {
-            if (hoverOutTimeout.current) {
-                clearTimeout(hoverOutTimeout.current);
-            }
-        };
-    }), [ mouseOver ]);
-    const renderTool = React.createElement(React.Fragment, null, typeof Tool === "string" ? React.createElement(React.Fragment, null, Tool) : React.createElement(Tool, null));
-    return React.createElement(StyledTooltip, {
-        onMouseEnter: () => setMouseOver(true),
-        onMouseLeave: () => setMouseOver(false),
-        onMouseMove: () => !showTooltipText ? setMouseOver(true) : null,
-        theme: theme,
-        style: {
-            ...style
-        },
-        className: className
-    }, icon && React.createElement(StyledTooltipIcon, {
-        theme: theme
-    }, renderTool), !icon && React.createElement(StyledTooltipString, null, renderTool), showTooltipText && React.createElement(StyledTooltipText, {
-        theme: theme,
-        indicator: indicator
-    }, typeof Tip === "string" ? React.createElement(React.Fragment, null, Tip) : React.createElement(Tip, null)));
-};
-
-const markers = {
-    HR: HR$1,
-    ProgressCircle: ProgressCircle$1,
-    Spinner: Spinner$1,
-    Tooltip: Tooltip$1
-};
-
-const StyledHeading1 = styled.h1`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 2.2rem;
-    margin: 1.4rem 0;
-`;
-
-const StyledHeading2 = styled.h2`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 2rem;
-    margin: 1.2rem 0;
-`;
-
-const StyledHeading3 = styled.h3`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 1.8rem;
-    margin: 1rem 0;
-`;
-
-const StyledHeading4 = styled.h4`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 1.6rem;
-    margin: 1rem 0;
-`;
-
-const StyledHeading5 = styled.h5`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 1.4rem;
-    margin: 1rem 0;
-`;
-
-const StyledHeading6 = styled.h5`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => props.theme.fontFamilySansSerif};
-    font-size: 1.2rem;
-    margin: 1rem 0;
-`;
-
-const Heading$1 = properties => {
-    const {children: children, theme: themeProperty, type: typeProperty, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    const type = typeProperty || "h1";
-    const renderProperties = {
-        theme: theme,
-        style: style,
-        className: className
-    };
-    switch (type) {
-      case "h1":
-        return React.createElement(StyledHeading1, {
-            ...renderProperties
-        }, children);
-
-      case "h2":
-        return React.createElement(StyledHeading2, {
-            ...renderProperties
-        }, children);
-
-      case "h3":
-        return React.createElement(StyledHeading3, {
-            ...renderProperties
-        }, children);
-
-      case "h4":
-        return React.createElement(StyledHeading4, {
-            ...renderProperties
-        }, children);
-
-      case "h5":
-        return React.createElement(StyledHeading5, {
-            ...renderProperties
-        }, children);
-
-      case "h6":
-        return React.createElement(StyledHeading6, {
-            ...renderProperties
-        }, children);
-
-      default:
-        return React.createElement(StyledHeading1, {
-            ...renderProperties
-        }, children);
-    }
-};
-
-const StyledParagraph = styled.p`
-    color: ${props => props.theme.colorPrimary};
-    font-family: ${props => {
-    switch (props.fontFamily) {
-      case "sans-serif":
-        return props.theme.fontFamilySansSerif;
-
-      case "serif":
-        return props.theme.fontFamilySerif;
-
-      default:
-        return props.fontFamily;
-    }
-}};
-    font-size: ${props => {
-    switch (props.size) {
-      case "small":
-        return "0.8rem";
-
-      case "normal":
-        return "1rem";
-
-      case "large":
-        return "1.2rem";
-
-      default:
-        return "1rem";
-    }
-}};
-
-    margin: 1.2rem 0;
-    line-height: 1.4;
-`;
-
-const Paragraph$1 = properties => {
-    const {children: children, theme: themeProperty, size: sizeProperty, fontFamily: fontFamilyProperty, style: style, className: className} = properties;
-    const theme = themeProperty || plurid;
-    const size = sizeProperty || "normal";
-    const fontFamily = fontFamilyProperty || "sans-serif";
-    return React.createElement(StyledParagraph, {
-        theme: theme,
-        size: size,
-        fontFamily: fontFamily,
-        style: {
-            ...style
-        },
-        className: className
-    }, children);
-};
-
-const typography = {
-    Heading: Heading$1,
-    Paragraph: Paragraph$1
-};
-
-const StyledCopyableLine = styled.div`
-    display: grid;
-    align-items: center;
-    grid-template-columns: 16px 1fr;
-    grid-gap: 0.7rem;
-`;
-
-const StyledData = styled.div`
-    user-select: all;
-`;
-
-const CopyableLine$1 = properties => {
-    const {data: data, theme: theme, viewData: viewData, copyMessage: copyMessage, copyMessageTime: copyMessageTime, style: style, className: className} = properties;
-    const viewDataText = viewData || data;
-    const copyMessageText = copyMessage ?? "copied";
-    const copyMessageTimeValue = copyMessageTime || 2e3;
-    const [showCopyMessage, setShowCopyMessage] = useFalseAfterTimedTrue(copyMessageTimeValue);
-    return React.createElement(StyledCopyableLine, {
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(PluridIconCopy, {
-        atClick: () => {
-            clipboard.copy(data);
-            setShowCopyMessage(true);
-        },
-        theme: theme
-    }), React.createElement(StyledData, null, showCopyMessage ? React.createElement(React.Fragment, null, copyMessageText) : React.createElement(React.Fragment, null, viewDataText)));
-};
-
-const StyledNewPageLink = styled.a`
-`;
-
-const NewPageLink$1 = properties => {
-    const {link: link, text: text, style: style, className: className} = properties;
-    return React.createElement(StyledNewPageLink, {
-        href: link,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: {
-            ...style
-        },
-        className: className
-    }, text);
-};
-
-const StyledScrollableLine = styled.div`
-    text-align: left;
-    overflow: scroll;
-    outline: none;
-    white-space: nowrap;
-
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-    scrollbar-width: none;  /* Firefox */
-    ::-webkit-scrollbar {
-        display: none;  /* Safari and Chrome */
-    }
-`;
-
-const ScrollableLine$1 = properties => {
-    const {text: text, style: style, className: className} = properties;
-    return React.createElement(StyledScrollableLine, {
-        style: {
-            ...style
-        },
-        className: className
-    }, text);
-};
-
-const StyledTextItem = styled.div`
-    display: flex;
-    align-items: center;
-    margin-right: 2rem;
-`;
-
-const TextItem$1 = properties => {
-    const {name: name, render: render, icon: IconProperty} = properties;
-    const Icon = IconProperty || PluridIconInfo;
-    return React.createElement(StyledTextItem, null, React.createElement(Icon, {
-        title: name,
-        inactive: true,
-        style: {
-            marginRight: "0.5rem"
-        }
-    }), render);
-};
-
-const varia = {
-    CopyableLine: CopyableLine$1,
-    NewPageLink: NewPageLink$1,
-    ScrollableLine: ScrollableLine$1,
-    TextItem: TextItem$1
-};
-
-const universal = {
-    buttons: buttons,
-    form: form,
-    general: general,
-    inputs: inputs,
-    markers: markers,
-    typography: typography,
-    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" && logout ? 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 ?? false);
-    const [fullRenderArea, setFullRenderArea] = useState(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%;
-
-    button {
-        font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
-    }
-`;
-
-const StyledEntityViewTop = styled.div`
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    align-items: center;
-    margin-bottom: 30px;
-`;
-
-const StyledEntityFilterLine = styled.div`
-    position: relative;
-`;
-
-const StyledEntityFilterCancel = styled.div`
-    position: absolute;
-    top: 10px;
-
-    left: ${({filterLength: filterLength}) => filterLength === "SMALL" ? "275px" : "575px"};
-`;
-
-const StyledTopButtons = styled.div`
-    text-align: right;
-`;
-
-const StyledEntityListContainer = styled.div`
-`;
-
-const StyledEntityList = styled.ul`
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    max-height: 500px;
-    overflow: auto;
-
-    background-color: ${({theme: theme}) => theme.backgroundColorSecondaryAlpha};
-    box-shadow: ${({theme: theme}) => theme.boxShadowUmbraInset};
-    opacity: ${({loading: loading}) => {
-    if (loading) {
-        return "0.5";
-    }
-    return "1";
-}};
-
-    li:first-child {
-        background-color: ${({theme: theme, header: header}) => {
-    if (header) {
-        return theme.backgroundColorTertiary;
-    }
-    return "initial";
-}};
-    }
-
-    ${({header: header}) => {
-    if (header) {
-        return;
-    }
-    return css`
-            li:hover {
-                background-color: ${({theme: theme}) => theme.backgroundColorPrimary};
-            }
-        `;
-}}
-`;
-
-const StyledEntityListItem = styled.li`
-    display: grid;
-    grid-template-columns: ${({rowTemplate: rowTemplate}) => rowTemplate};
-    grid-gap: 0.5rem;
-    padding: 0.7rem;
-    align-items: center;
-    min-height: 45px;
-    word-break: break-all;
-`;
-
-const StyledActionButton = styled.div`
-    width: 200px;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-`;
-
-const StyledNoRows = styled.div`
-    margin: 20px 0;
-    text-align: center;
-`;
-
-const createSearchTerms = (rows, fields) => rows.map((entity => {
-    const {id: id} = entity;
-    const data = [];
-    for (const field of fields) {
-        const term = entity[field];
-        if (term && typeof term === "string") {
-            data.push(term.toLowerCase().trim());
-        }
-    }
-    return {
-        id: id,
-        data: data
-    };
-}));
-
-const {buttons: {PureButton: PluridPureButton}, inputs: {Textline: PluridTextline}, markers: {Spinner: PluridSpinner}} = universal;
-
-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 ?? 1e3;
-    const bottomTimeout = useRef();
-    const entityList = useRef(null);
-    const [searchTerms, setSearchTerms] = useState(createSearchTerms(entities, searchFields));
-    const [filteredRows, setFilteredRows] = useState(entities.map((entity => abstractRowRenderer(rowRenderFields || [], entity, rowRenderMethods || {}))));
-    const [searchValue, setSearchValue] = useState("");
-    const [filterLength, setFilterLength] = useState("SMALL");
-    const [refreshClicked, setRefreshClicked] = useState(false);
-    const handleScroll = useThrottledCallback((() => {
-        const element = entityList.current;
-        if (!element) {
-            return;
-        }
-        const scrolledAmount = element.scrollTop + element.getBoundingClientRect().height;
-        const bottomReached = scrolledAmount >= element.scrollHeight;
-        if (bottomReached && actionScrollBottom && entities) {
-            actionScrollBottom(entities);
-        }
-    }), scrollThrottleTime);
-    const clearFilterValue = () => {
-        setSearchValue("");
-        if (filterUpdate) {
-            filterUpdate("");
-        }
-    };
-    useEffect((() => {
-        setFilteredRows(entities.map((entity => abstractRowRenderer(rowRenderFields || [], entity, rowRenderMethods || {}))));
-        setSearchTerms(createSearchTerms(entities, searchFields));
-    }), [ entities.length, JSON.stringify(entities) ]);
-    useEffect((() => {
-        if (refreshClicked) {
-            setTimeout((() => {
-                setRefreshClicked(false);
-            }), 1500);
-        }
-    }), [ refreshClicked ]);
-    useEffect((() => {
-        bottomTimeout.current = setTimeout((() => {
-            if (entityList.current && actionScrollBottom) {
-                entityList.current.addEventListener("scroll", handleScroll);
-            }
-        }), 100);
-        return () => {
-            if (bottomTimeout.current) {
-                clearTimeout(bottomTimeout.current);
-            }
-            if (entityList.current && actionScrollBottom) {
-                entityList.current.removeEventListener("scroll", handleScroll);
-            }
-        };
-    }), [ entities ]);
-    useEffect((() => {
-        if (searchValue.length <= 30) {
-            if (filterLength !== "SMALL") {
-                setFilterLength("SMALL");
-            }
-        } else {
-            if (filterLength !== "LARGE") {
-                setFilterLength("LARGE");
-            }
-        }
-    }), [ searchValue ]);
-    useImperativeHandle(reference, (() => ({
-        resetFilterValue() {
-            clearFilterValue();
-        },
-        getSearchTerms() {
-            return searchTerms;
-        }
-    })), [ JSON.stringify(searchTerms) ]);
-    return React.createElement(StyledEntityView, {
-        theme: generalTheme
-    }, !!loading && React.createElement(PluridSpinner, {
-        theme: generalTheme
-    }), React.createElement(StyledEntityViewTop, null, React.createElement(StyledEntityFilterLine, null, React.createElement(PluridTextline, {
-        text: searchValue,
-        placeholder: placeholder,
-        atChange: event => {
-            const {value: value} = event.target;
-            setSearchValue(value);
-            if (filterUpdate) {
-                filterUpdate(value);
-            }
-        },
-        atKeyDown: event => {
-            if (event.key === "Escape") {
-                clearFilterValue();
-            }
-        },
-        theme: interactionTheme,
-        spellCheck: false,
-        autoCapitalize: "false",
-        autoComplete: "false",
-        autoCorrect: "false",
-        level: 2,
-        style: {
-            width: filterLength === "SMALL" ? "300px" : "600px",
-            paddingRight: "2rem"
-        }
-    }), searchValue && React.createElement(StyledEntityFilterCancel, {
-        filterLength: filterLength
-    }, React.createElement(PluridIconDelete, {
-        atClick: () => {
-            clearFilterValue();
-        }
-    }))), React.createElement(StyledTopButtons, null, refresh && !refreshClicked && React.createElement(PluridIconReset, {
-        atClick: () => {
-            setRefreshClicked(true);
-            refresh();
-        },
-        theme: generalTheme
-    }))), filteredRows.length === 0 && React.createElement(StyledNoRows, null, noRows), filteredRows.length !== 0 && React.createElement(StyledEntityListContainer, {
-        theme: generalTheme
-    }, React.createElement(StyledEntityList, {
-        theme: generalTheme,
-        header: true
-    }, React.createElement(StyledEntityListItem, {
-        rowTemplate: rowTemplate
-    }, rowsHeader)), React.createElement(StyledEntityList, {
-        theme: generalTheme,
-        ref: entityList,
-        loading: loading
-    }, filteredRows.map((row => React.createElement(StyledEntityListItem, {
-        key: Math.random() + "",
-        rowTemplate: rowTemplate
-    }, row))))), actionButtonText && React.createElement(StyledActionButton, null, React.createElement(PluridPureButton, {
-        text: actionButtonText,
-        atClick: () => actionButtonClick ? actionButtonClick() : undefined,
-        theme: interactionTheme,
-        level: 2
-    })));
-}));
-
-const containers = {
-    DashboardsRenderer: DashboardsRenderer$1,
-    EntityView: EntityView$1
-};
-
-const Head$1 = properties => {
-    const {Helmet: Helmet, defaults: defaults, children: children, stateHead: stateHead} = properties;
-    const robots = defaults?.robots || "index,follow";
-    const viewport = defaults?.viewport || "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no";
-    const faviconIcon = defaults?.faviconIcon ?? "/favicon.ico";
-    const favicon16 = defaults?.favicon16 ?? "/favicon-16x16.png";
-    const favicon32 = defaults?.favicon32 ?? "/favicon-32x32.png";
-    const manifest = defaults?.manifest ?? "/site.webmanifest";
-    const themeColor = defaults?.themeColor || "";
-    const titleValue = stateHead.title || defaults?.title || "";
-    const descriptionValue = stateHead.description || defaults?.description || "";
-    const canonicalURL = stateHead.canonicalURL || defaults?.canonicalURL || "";
-    const ogTitleValue = stateHead.ogTitle || titleValue;
-    const ogDescriptionValue = stateHead.ogDescription || titleValue;
-    const ogImageValue = stateHead.ogImage || defaults?.ogImage || "";
-    const ogURLValue = stateHead.ogURL || defaults?.ogURL || "";
-    const apiDomain = defaults?.apiDomain || "";
-    const ogImageWidth = defaults?.ogImageWidth || "1200";
-    const ogImageHeight = defaults?.ogImageHeight || "630";
-    const ogSiteName = defaults?.ogSiteName || "";
-    const appleTouchIcon = defaults?.appleTouchIcon || "";
-    const {styles: styles, scripts: scripts} = stateHead;
-    return React.createElement(Helmet, null, React.createElement("meta", {
-        charSet: "utf-8"
-    }), React.createElement("meta", {
-        name: "robots",
-        content: robots
-    }), React.createElement("meta", {
-        name: "viewport",
-        content: viewport
-    }), React.createElement("title", null, titleValue), React.createElement("meta", {
-        name: "title",
-        content: titleValue
-    }), React.createElement("meta", {
-        name: "description",
-        content: descriptionValue
-    }), apiDomain && React.createElement(React.Fragment, null, React.createElement("link", {
-        rel: "preconnect",
-        href: apiDomain
-    }), React.createElement("link", {
-        rel: "dns-prefetch",
-        href: apiDomain
-    })), faviconIcon && React.createElement("link", {
-        rel: "icon",
-        sizes: "64x64",
-        href: faviconIcon
-    }), favicon32 && React.createElement("link", {
-        rel: "icon",
-        type: "image/png",
-        sizes: "32x32",
-        href: favicon32
-    }), favicon16 && React.createElement("link", {
-        rel: "icon",
-        type: "image/png",
-        sizes: "16x16",
-        href: favicon16
-    }), manifest && React.createElement("link", {
-        rel: "manifest",
-        href: manifest
-    }), themeColor && React.createElement("meta", {
-        name: "theme-color",
-        content: themeColor
-    }), canonicalURL && React.createElement("link", {
-        rel: "canonical",
-        href: canonicalURL
-    }), React.createElement("meta", {
-        property: "og:type",
-        content: "website"
-    }), React.createElement("meta", {
-        property: "og:title",
-        content: ogTitleValue
-    }), React.createElement("meta", {
-        property: "og:image",
-        content: ogImageValue
-    }), React.createElement("meta", {
-        property: "og:image:width",
-        content: ogImageWidth
-    }), React.createElement("meta", {
-        property: "og:image:height",
-        content: ogImageHeight
-    }), ogSiteName && React.createElement("meta", {
-        property: "og:site_name",
-        content: ogSiteName
-    }), React.createElement("meta", {
-        property: "og:url",
-        content: ogURLValue
-    }), React.createElement("meta", {
-        property: "og:description",
-        content: ogDescriptionValue
-    }), React.createElement("meta", {
-        property: "twitter:card",
-        content: "summary_large_image"
-    }), React.createElement("meta", {
-        property: "twitter:url",
-        content: ogURLValue
-    }), React.createElement("meta", {
-        property: "twitter:title",
-        content: ogTitleValue
-    }), React.createElement("meta", {
-        property: "twitter:description",
-        content: ogDescriptionValue
-    }), React.createElement("meta", {
-        property: "twitter:image",
-        content: ogImageValue
-    }), React.createElement("meta", {
-        name: "apple-mobile-web-app-capable",
-        content: "yes"
-    }), React.createElement("meta", {
-        name: "apple-mobile-web-app-status-bar-style",
-        content: "default"
-    }), React.createElement("meta", {
-        name: "apple-mobile-web-app-title",
-        content: titleValue
-    }), appleTouchIcon && React.createElement("link", {
-        rel: "apple-touch-icon",
-        sizes: "180x180",
-        href: appleTouchIcon
-    }), children, styles?.map((style => React.createElement("link", {
-        rel: "stylesheet",
-        key: "head-style" + style,
-        href: style
-    }))), scripts?.map((script => React.createElement("script", {
-        key: "head-script" + script,
-        src: script
-    }))));
-};
-
-const mapStateToProperties$7 = (state, ownProperties) => ({
-    stateHead: ownProperties.selectors.head.getHead(state)
-});
-
-const mapDispatchToProperties$7 = dispatch => ({});
-
-const ConnectedHead = connect(mapStateToProperties$7, mapDispatchToProperties$7)(Head$1);
-
-const head = {
-    Head: ConnectedHead
-};
-
-const translateUp = keyframes`
-    from {
-        transform: translateY(2000px);
-    }
-    to {
-        transform: translateY(0);
-    }
-`;
-
-const StyledNotification = styled.div`
-    display: grid;
-    align-items: center;
-    position: relative;
-    min-height: 60px;
-    width: 260px;
-    margin: 10px 20px;
-    border-radius: 10px;
-    pointer-events: all;
-    background-color: ${props => props.theme.backgroundColorSecondary};
-    color: ${props => props.theme.colorPrimary};
-    box-shadow: ${props => props.theme.boxShadowUmbra};
-    animation: ${translateUp} 750ms ease-in-out forwards;
-    transition: opacity 400ms;
-
-    a {
-        text-decoration: none;
-        color: ${props => props.theme.colorSecondary};
-    }
-`;
-
-const StyledNotificationContent = styled.div`
-    font-size: 0.9rem;
-    padding: 32px 16px;
-    word-break: ${({wordBreak: wordBreak}) => wordBreak};
-`;
-
-const StyledNotificationClose = styled.div`
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    user-select: none;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    display: grid;
-    place-content: center;
-`;
-
-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";
-    const [prepareForRemoval, setPrepareForRemoval] = useState(false);
-    const notificationTimeout = useRef(null);
-    useEffect((() => {
-        const timeoutValue = timeout === undefined ? react ? 4e3 : 2e3 + text.length * 40 : timeout === 0 ? undefined : timeout;
-        if (timeoutValue) {
-            notificationTimeout.current = setTimeout((() => {
-                setPrepareForRemoval(true);
-                setTimeout((() => {
-                    remove(id);
-                }), 400);
-            }), timeoutValue);
-        }
-        return () => {
-            if (notificationTimeout.current) {
-                clearTimeout(notificationTimeout.current);
-            }
-        };
-    }), [ id, timeout, remove ]);
-    const resolveRender = () => {
-        const contentProperties = {
-            wordBreak: resolvedWordBreak
-        };
-        if (html) {
-            return React.createElement(StyledNotificationContent, {
-                dangerouslySetInnerHTML: createMarkup(text),
-                ...contentProperties
-            });
-        }
-        if (react && elements && elements[text]) {
-            return React.createElement(StyledNotificationContent, {
-                ...contentProperties
-            }, elements[text]);
-        }
-        return React.createElement(StyledNotificationContent, {
-            ...contentProperties
-        }, text);
-    };
-    const content = resolveRender();
-    return React.createElement(StyledNotification, {
-        theme: theme,
-        style: {
-            ...style,
-            opacity: prepareForRemoval ? 0 : undefined
-        },
-        className: className
-    }, content, React.createElement(StyledNotificationClose, null, React.createElement(PluridIconDelete, {
-        atClick: () => remove(id)
-    })));
-};
-
-const StyledNotifications = styled.div`
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    right: 0;
-    width: 300px;
-    display: flex;
-    flex-direction: column-reverse;
-    z-index: 9999;
-    pointer-events: none;
-`;
-
-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$1, {
-        key: notification.id,
-        data: notification,
-        theme: stateGeneralTheme,
-        remove: dispatchRemoveNotification,
-        elements: elements
-    }))));
-};
-
-const mapStateToProperties$6 = (state, ownProperties) => ({
-    stateGeneralTheme: ownProperties.selectors.themes.getGeneralTheme(state),
-    stateNotifications: ownProperties.selectors.notifications.getAll(state)
-});
-
-const mapDispatchToProperties$6 = dispatch => ({
-    dispatchRemoveNotification: payload => dispatch(notifications$1.actions.remove(payload))
-});
-
-const ConnectedNotifications = connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications$1);
-
-const notifications = {
-    Notification: Notification$1,
-    Notifications: ConnectedNotifications
-};
-
-const StyledSittingTray = styled.div`
-    background-color: ${props => props.theme.backgroundColorSecondary};
-    box-shadow: ${props => props.theme.boxShadowUmbra};
-
-    border-radius: 10px;
-    position: absolute;
-    left: 35px;
-    width: 160px;
-    /*
-        -1 * (height - 40px <button>)
-     */
-    /* height: 95px; */
-    bottom: -163px;
-    /* bottom: 0; */
-    overflow: hidden;
-`;
-
-const StyledSittingTrayContainer = styled.div`
-    overflow: auto;
-    height: 100%;
-
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* IE 10+ */
-    ::-webkit-scrollbar {
-        width: 0px;
-        background: transparent;
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        text-align: left;
-    }
-
-    li {
-        min-height: 26px;
-        /* padding: 0 7px;
-        margin: 7px 0; */
-        display: grid;
-        grid-template-columns: 1fr;
-        align-items: center;
-    }
-
-    h4 {
-        margin: 0;
-    }
-`;
-
-const StyledSittingTrayItem = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    align-items: center;
-`;
-
-const StyledSittingTrayItemHeader = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-`;
-
-const StyledSittingTrayItemBody = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: center;
-`;
-
-const StyledSittingTrayButton = styled.div`
-    display: grid;
-    grid-template-columns: 25px 1fr;
-    cursor: pointer;
-`;
-
-const StyledSittingTrayButtonIcon = styled.div`
-`;
-
-const StyledSittingTrayButtonText = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const StyledStateLink = styled.div`
-    padding: 7px;
-    padding-bottom: 0px;
-    margin-bottom: 4px;
-`;
-
-const StyledStateLinkContainer = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    height: 25px;
-    align-items: center;
-`;
-
-const StyledStateLinkText = styled.div`
-    width: 100%;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    white-space: nowrap;
-    user-select: all;
-    text-align: left;
-
-    scrollbar-width: none;
-    ::-webkit-scrollbar {
-        display: none;
-    }
-`;
-
-const StyledStateLinkCopy = styled.div`
-    width: 100%;
-    cursor: pointer;
-    justify-self: center;
-`;
-
-const StateLink = properties => {
-    const {currentLink: currentLink} = properties;
-    const copyStateLink = () => {
-        clipboard.copy(currentLink);
-        setCurrentStateLink("copied link");
-        setTimeout((() => {
-            setCurrentStateLink(currentLink);
-        }), 650);
-    };
-    const [currentStateLink, setCurrentStateLink] = useState(currentLink);
-    useEffect((() => {
-        setCurrentStateLink(currentLink);
-    }), [ currentLink ]);
-    return React.createElement(StyledStateLink, null, React.createElement(StyledSittingTrayItem, null, React.createElement(StyledSittingTrayItemHeader, null, React.createElement("div", null, React.createElement("h4", null, "state link")), React.createElement("div", {
-        style: {
-            justifySelf: "right"
-        }
-    }, React.createElement(StyledStateLinkCopy, {
-        onClick: copyStateLink
-    }, React.createElement(PluridIconCopy, null)))), React.createElement(StyledSittingTrayItemBody, null, React.createElement(StyledStateLinkContainer, null, React.createElement(StyledStateLinkText, null, currentStateLink)))));
-};
-
-const mapStateToProperties$5 = (state, ownProperties) => ({
-    theme: ownProperties.selectors.themes.getInteractionTheme(state),
-    currentLink: ownProperties.selectors.sitting.getCurrentLink(state)
-});
-
-const mapDispatchToProperties$5 = dispatch => ({});
-
-const ConnectedStateLink = connect(mapStateToProperties$5, mapDispatchToProperties$5)(StateLink);
-
-const StyledStateLine = styled.div`
-    padding: 0 7px;
-    margin-bottom: 4px;
-
-    display: grid;
-    align-items: center;
-    justify-items: center;
-
-    svg {
-        height: 18px;
-        width: 18px;
-        color: white;
-        fill: white;
-        user-select: none;
-        cursor: pointer;
-    }
-`;
-
-const StyledSliderStateButton = styled.div`
-    user-select: none;
-    cursor: pointer;
-    display: grid;
-    place-content: center;
-`;
-
-const StyledSliderStateSliderContainer = styled.div`
-`;
-
-styled.div`
-    justify-self: center;
-`;
-
-const StyledStateLineButtons = styled.div`
-    display: grid;
-    grid-template-columns: repeat(3, 20px);
-    grid-gap: 3px;
-    align-items: center;
-    justify-content: right;
-`;
-
-const StyledStateLineButton = styled.div`
-    display: grid;
-    place-content: center;
-`;
-
-const StyledStateLineContainer = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    justify-content: space-between;
-`;
-
-const StateLine = properties => {
-    const [stateIndex, setStateIndex] = useState(0);
-    const maxStateSlider = 5;
-    const handleStateIndex = type => {
-        switch (type) {
-          case "DECREASE":
-            if (stateIndex - 1 >= 0) {
-                setStateIndex(stateIndex - 1);
-            } else {
-                setStateIndex(0);
-            }
-            break;
-
-          case "INCREASE":
-            if (stateIndex + 1 <= maxStateSlider) {
-                setStateIndex(stateIndex + 1);
-            } else {
-                setStateIndex(maxStateSlider);
-            }
-            break;
-        }
-    };
-    return React.createElement(StyledStateLine, null, React.createElement(StyledSittingTrayItem, null, React.createElement(StyledSittingTrayItemHeader, null, React.createElement("div", null, React.createElement("h4", null, "state line")), React.createElement("div", null, React.createElement(StyledStateLineButtons, null, React.createElement(StyledStateLineButton, null, React.createElement(PluridIconPlay, null)), React.createElement(StyledStateLineButton, null, React.createElement(PluridIconBranch, null)), React.createElement(StyledStateLineButton, null, React.createElement(PluridIconNewStateline, null))))), React.createElement(StyledSittingTrayItemBody, null, React.createElement(StyledStateLineContainer, null, React.createElement("div", {
-        style: {
-            display: "grid",
-            justifyContent: "left"
-        }
-    }, stateIndex !== 0 && React.createElement(StyledSliderStateButton, {
-        onClick: () => handleStateIndex("DECREASE")
-    }, "◀")), React.createElement(StyledSliderStateSliderContainer, null), React.createElement("div", {
-        style: {
-            display: "grid",
-            justifyContent: "right"
-        }
-    }, stateIndex !== maxStateSlider && React.createElement(StyledSliderStateButton, {
-        onClick: () => handleStateIndex("INCREASE")
-    }, "▶"))))));
-};
-
-const mapStateToProperties$4 = (state, ownProperties) => ({
-    theme: ownProperties.selectors.themes.getInteractionTheme(state)
-});
-
-const mapDispatchToProperties$4 = dispatch => ({});
-
-const ConnectedStateLine = connect(mapStateToProperties$4, mapDispatchToProperties$4)(StateLine);
-
-const StyledStateImage = styled.div`
-    padding: 0 7px;
-    margin-bottom: 4px;
-
-    svg {
-        height: 18px;
-        width: 18px;
-        color: white;
-        fill: white;
-        user-select: none;
-        cursor: pointer;
-    }
-`;
-
-const StyledStateShareImage = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 25px;
-    align-items: center;
-`;
-
-const StyledStateShareImageButtons = styled.div`
-    display: grid;
-    grid-template-columns: 110px auto;
-    align-items: center;
-    justify-items: center;
-    height: 25px;
-`;
-
-const StyledStateShareImageButtonsCopy = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
-    justify-self: left;
-
-    svg {
-        height: 18px;
-        width: 18px;
-        fill: white;
-    }
-`;
-
-const StyledStateShareImagePasteContainer = styled.div`
-    display: grid;
-    grid-template-columns: 100px 40px;
-    align-items: center;
-    justify-items: center;
-
-    input {
-        width: 100%;
-        outline: none;
-        border: none;
-        background: hsla(0, 0%, 10%, 0.5);
-        color: white;
-        padding: 6px;
-    }
-`;
-
-const StateImage = properties => {
-    const [message, setMessage] = useState("");
-    const [showPaste, setShowPaste] = useState(false);
-    const copyCurrentState = () => {
-        setMessage("copied state image");
-        setTimeout((() => {
-            setMessage("");
-        }), 2e3);
-    };
-    const copyStateHistory = () => {
-        setMessage("copied state history");
-        setTimeout((() => {
-            setMessage("");
-        }), 2e3);
-    };
-    const paste = () => {
-        setShowPaste(false);
-    };
-    return React.createElement(StyledStateImage, null, React.createElement(StyledSittingTrayItem, null, React.createElement(StyledSittingTrayItemHeader, null, React.createElement("div", null, React.createElement("h4", null, "state image")), React.createElement("div", null, React.createElement("div", {
-        style: {
-            display: "grid",
-            alignItems: "center",
-            justifyContent: "right"
-        }
-    }, React.createElement(PluridIconStateShareImage, null)))), React.createElement(StyledSittingTrayItemBody, null, React.createElement(StyledStateShareImage, null, !message && !showPaste && React.createElement(StyledStateShareImageButtons, null, React.createElement(StyledStateShareImageButtonsCopy, null, React.createElement("div", {
-        onClick: copyCurrentState
-    }, React.createElement(PluridIconCopyCurrentState, null)), React.createElement("div", {
-        onClick: copyStateHistory
-    }, React.createElement(PluridIconCopyStateHistory, null))), React.createElement("div", {
-        onClick: () => setShowPaste(true)
-    }, "paste")), message && !showPaste && React.createElement("div", null, message), showPaste && React.createElement(StyledStateShareImagePasteContainer, null, React.createElement("input", {
-        type: "text"
-    }), React.createElement("div", {
-        onClick: paste
-    }, "paste"))))));
-};
-
-const mapStateToProperties$3 = (state, ownProperties) => ({
-    theme: ownProperties.selectors.themes.getInteractionTheme(state)
-});
-
-const mapDispatchToProperties$3 = dispatch => ({});
-
-const ConnectedStateImage = connect(mapStateToProperties$3, mapDispatchToProperties$3)(StateImage);
-
-const StyledSittings = styled.div`
-    padding: 7px;
-
-    display: grid;
-    align-items: center;
-
-    svg {
-        height: 18px;
-        width: 18px;
-        color: white;
-        fill: white;
-        user-select: none;
-        cursor: pointer;
-    }
-
-    :hover {
-        background-color: ${props => props.theme.backgroundColorTertiary};
-    }
-`;
-
-const Sittings = properties => {
-    const {stateInteractionTheme: stateInteractionTheme} = properties;
-    return React.createElement(StyledSittings, {
-        theme: stateInteractionTheme
-    }, React.createElement(StyledSittingTrayButton, null, React.createElement(StyledSittingTrayButtonIcon, null, React.createElement(PluridIconSittings, {
-        theme: stateInteractionTheme
-    })), React.createElement(StyledSittingTrayButtonText, null, "sittings")));
-};
-
-const mapStateToProperties$2 = (state, ownProperties) => ({
-    stateInteractionTheme: ownProperties.selectors.themes.getInteractionTheme(state)
-});
-
-const mapDispatchToProperties$2 = dispatch => ({});
-
-const ConnectedSittings = connect(mapStateToProperties$2, mapDispatchToProperties$2)(Sittings);
-
-const SittingTray$1 = properties => {
-    const {selectors: selectors, context: context, stateInteractionTheme: stateInteractionTheme} = properties;
-    return React.createElement(StyledSittingTray, {
-        theme: stateInteractionTheme
-    }, React.createElement(StyledSittingTrayContainer, null, React.createElement("ul", null, React.createElement("li", null, React.createElement(ConnectedStateLink, {
-        selectors: selectors,
-        context: context
-    })), React.createElement("li", null, React.createElement(ConnectedStateLine, {
-        selectors: selectors,
-        context: context
-    })), React.createElement("li", null, React.createElement(ConnectedStateImage, {
-        selectors: selectors,
-        context: context
-    })), React.createElement("li", null, React.createElement(ConnectedSittings, {
-        selectors: selectors,
-        context: context
-    })))));
-};
-
-const mapStatedToProperties = (state, ownProperties) => ({
-    stateInteractionTheme: ownProperties.selectors.themes.getInteractionTheme(state)
-});
-
-const mapDispatchdToProperties = dispatch => ({});
-
-const ConnectedSittingTray = connect(mapStatedToProperties, mapDispatchdToProperties)(SittingTray$1);
-
-const sitting = {
-    SittingTray: ConnectedSittingTray
-};
-
-const StyledHorizontalToolbarButton = styled.div`
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    font-weight: normal;
-    transition: transform 50ms ease-in-out;
-    height: 45px;
-    min-width: 2rem;
-    padding: 0 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: ${props => {
-    if (props.active) {
-        return props.theme.backgroundColorTertiary;
-    }
-    return "transparent";
-}};
-    color: ${props => props.theme.colorPrimary};
-    font-family:  ${props => props.theme.fontFamilySansSerif};
-
-    @media (hover: hover) {
-        :hover {
-            background: ${props => props.theme.backgroundColorTertiary};
-        }
-
-        :hover svg {
-            transform: ${props => {
-    if (props.scaleIcon) {
-        return "scale(1.2)";
-    }
-    return "";
-}};
-        }
-    }
-
-    svg {
-        transition: transform 100ms linear;
-        transform: ${props => {
-    if (props.active && props.scaleIcon) {
-        return "scale(1.2)";
-    }
-    return "";
-}};
-    }
-`;
-
-const StyledHorizontalToolbarButtonIcon = styled.div`
-    display: flex;
-    align-items: center;
-    margin-right: ${({text: text}) => {
-    if (text === "") {
-        return "0";
-    }
-    return "0.5rem";
-}};
-`;
-
-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, {
-        active: active,
-        scaleIcon: scaleIcon,
-        onClick: atClick,
-        theme: theme,
-        style: {
-            ...style
-        },
-        className: className
-    }, Icon && React.createElement(StyledHorizontalToolbarButtonIcon, {
-        text: text
-    }, React.createElement(Icon, null)), text);
-};
-
-var SizeTypes;
-
-(function(SizeTypes) {
-    SizeTypes["small"] = "small";
-    SizeTypes["normal"] = "normal";
-    SizeTypes["large"] = "large";
-})(SizeTypes || (SizeTypes = {}));
-
-var HorizontalPositions;
-
-(function(HorizontalPositions) {
-    HorizontalPositions["left"] = "left";
-    HorizontalPositions["right"] = "right";
-})(HorizontalPositions || (HorizontalPositions = {}));
-
-var VerticalPositions;
-
-(function(VerticalPositions) {
-    VerticalPositions["top"] = "top";
-    VerticalPositions["bottom"] = "bottom";
-})(VerticalPositions || (VerticalPositions = {}));
-
-const StyledToolbarControls = styled.div`
-    top: ${({position: position}) => {
-    if (position === VerticalPositions.top) {
-        return "15px";
-    }
-    return "initial";
-}};
-    bottom: ${({position: position}) => {
-    if (position === VerticalPositions.bottom) {
-        return "15px";
-    }
-    return "initial";
-}};
-
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 99999;
-`;
-
-const StyledToolbarControlsButtons = styled.div`
-    background-color: ${({theme: theme}) => theme.backgroundColorSecondary};
-    box-shadow: ${({theme: theme}) => theme.boxShadowUmbra};
-
-    display: flex;
-    align-items: center;
-    border-radius: 22.5px;
-    min-height: 45px;
-    height: 45px;
-    padding: 0 22.5px;
-    margin: 0 auto;
-    font-size: 0.9rem;
-    opacity: 1;
-    height: 100%;
-`;
-
-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;
-    return React.createElement(StyledToolbarControls, {
-        position: position,
-        theme: theme,
-        style: {
-            ...style
-        },
-        className: className
-    }, React.createElement(StyledToolbarControlsButtons, {
-        theme: theme
-    }, children));
-};
-
-const StyledVerticalToolbarButton = styled.div`
-    position: relative;
-    cursor: pointer;
-    height: 40px;
-    display: grid;
-    place-content: center;
-    transition: transform 50ms ease-in-out;
-
-    border-top-left-radius: ${props => {
-    if (props.first) {
-        return "15px";
-    }
-    return "0";
-}};
-    border-top-right-radius: ${props => {
-    if (props.first) {
-        return "15px";
-    }
-    return "0";
-}};
-
-    border-bottom-left-radius: ${props => {
-    if (props.last) {
-        return "15px";
-    }
-    return "0";
-}};
-    border-bottom-right-radius: ${props => {
-    if (props.last) {
-        return "15px";
-    }
-    return "0";
-}};
-
-    background-color: ${props => {
-    if (props.active) {
-        return props.theme.backgroundColorTertiary;
-    }
-    return "transparent";
-}};
-
-    @media (hover: hover) {
-        :hover {
-            background: ${props => props.theme.backgroundColorTertiary};
-        }
-
-        :hover svg {
-            transform: ${props => {
-    if (props.scaleIcon) {
-        return "scale(1.2)";
-    }
-    return "";
-}};
-        }
-    }
-
-    svg {
-        transition: transform 100ms linear;
-        width: 15px;
-        height: 15px;
-        fill: ${props => props.theme.colorPrimary};
-        transform: ${props => {
-    if (props.active && props.scaleIcon) {
-        return "scale(1.2)";
-    }
-    return "";
-}};
-    }
-`;
-
-const StyledVerticalToolbarButtonText = styled.div`
-    left: ${props => {
-    if (props.textLeft) {
-        return "-108px";
-    }
-    return "30px";
-}};
-    justify-content: ${props => {
-    if (props.textLeft) {
-        return "flex-end";
-    }
-    return "left";
-}};
-    text-align: ${props => {
-    if (props.textLeft) {
-        return "right";
-    }
-    return "left";
-}};
-    padding-left: ${props => {
-    if (props.textLeft) {
-        return "0";
-    }
-    return "8px";
-}};
-
-    pointer-events: none;
-    position: absolute;
-    height: 40px;
-    width: 100px;
-    display: flex;
-    align-items: center;
-`;
-
-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, {
-        onMouseEnter: () => setMouseOver(true),
-        onMouseLeave: () => setMouseOver(false),
-        onClick: atClick,
-        active: active,
-        scaleIcon: scaleIcon,
-        first: first,
-        last: last,
-        theme: theme
-    }, React.createElement(Icon, null), mouseOver && showText && React.createElement(StyledVerticalToolbarButtonText, {
-        textLeft: textLeft
-    }, text));
-};
-
-const StyledToolbar = styled.div`
-    left: ${props => {
-    if (props.position === HorizontalPositions.left) {
-        return "0";
-    }
-    return "initial";
-}};
-    right: ${props => {
-    if (props.position === HorizontalPositions.right) {
-        return "0";
-    }
-    return "initial";
-}};
-
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 60px;
-`;
-
-const StyledToolbarButtons = styled.div`
-    background-color: ${props => props.theme.backgroundColorSecondary};
-    box-shadow: ${props => props.theme.boxShadowUmbra};
-
-    pointer-events: all;
-    display: grid;
-    place-content: center;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    border-radius: 15px;
-    margin: 0 15px;
-    font-size: 12px;
-    opacity: 1;
-    width: 30px;
-    height: auto;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: opacity 300ms ease-in-out;
-    z-index: 9999;
-    user-select: none;
-`;
-
-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;
-    const [showToolbar, setShowToolbar] = useState(alwaysShow);
-    const [mouseIn, setMouseIn] = useState(false);
-    const handleMouseMove = event => {
-        if (!showToolbar) {
-            setShowToolbar(true);
-        }
-    };
-    useEffect((() => {
-        if (alwaysShow) {
-            setShowToolbar(true);
-        }
-        if (mouseIn) {
-            setShowToolbar(true);
-        } else {
-            if (!alwaysShow) {
-                setShowToolbar(false);
-            }
-        }
-    }), [ mouseIn, alwaysShow ]);
-    return React.createElement(StyledToolbar, {
-        onMouseMove: () => handleMouseMove,
-        onMouseEnter: () => setMouseIn(true),
-        onMouseLeave: () => setMouseIn(false),
-        position: toolbarPosition
-    }, React.createElement(StyledToolbarButtons, {
-        theme: stateInteractionTheme,
-        style: {
-            top: location ? location + "%" : "",
-            opacity: showToolbar ? 1 : 0
-        }
-    }, buttons.filter((button => {
-        const {loggedIn: loggedIn} = button;
-        if (loggedIn === "ONLY" && !stateIdentonym) {
-            return false;
-        }
-        if (loggedIn === "NONE" && stateIdentonym) {
-            return false;
-        }
-        return true;
-    })).map(((button, index) => {
-        const {type: type, text: text, icon: Icon, first: first, last: last} = button;
-        return React.createElement(VerticalToolbarButton$1, {
-            key: type,
-            atClick: () => handleClick(type, index),
-            icon: Icon,
-            active: activeType === type,
-            text: text,
-            textLeft: toolbarPosition === "right",
-            showText: showNames,
-            scaleIcon: scaleIcons,
-            theme: stateInteractionTheme,
-            first: first,
-            last: last
-        });
-    })), children));
-};
-
-const mapStateToProperties$1 = (state, ownProperties) => ({
-    stateToolbars: ownProperties.selectors.product.getProductUI(state).toolbars,
-    stateIdentonym: ownProperties.selectors.owner.getIdentonym(state),
-    stateInteractionTheme: ownProperties.selectors.themes.getInteractionTheme(state)
-});
-
-const mapDispatchToProperties$1 = dispatch => ({});
-
-const ConnectedToolbarSpecific = connect(mapStateToProperties$1, mapDispatchToProperties$1)(ToolbarSpecific$1);
-
-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;
-    const sittingButton = sittingButtonProperty ?? true;
-    return React.createElement(ConnectedToolbarSpecific, {
-        buttons: buttons,
-        handleClick: handleClick,
-        activeType: stateView,
-        position: HorizontalPositions.left,
-        selectors: selectors,
-        context: context
-    }, speakButton && React.createElement(VerticalToolbarButton$1, {
-        atClick: () => {},
-        icon: PluridIconSpeak,
-        active: false,
-        text: "speak",
-        textLeft: iconTextLeft,
-        showText: showNames,
-        scaleIcon: scaleIcons,
-        theme: stateInteractionTheme
-    }), sittingButton && React.createElement(React.Fragment, null, React.createElement(VerticalToolbarButton$1, {
-        atClick: () => dispatchToggleSittingTray(),
-        icon: PluridIconStateShareImage,
-        active: stateSittingTray,
-        text: "sitting",
-        textLeft: iconTextLeft,
-        showText: showNames,
-        scaleIcon: scaleIcons,
-        theme: stateInteractionTheme,
-        last: true
-    }), stateSittingTray && React.createElement(ConnectedSittingTray, {
-        selectors: selectors,
-        context: context
-    })));
-};
-
-const mapStateToProperties = (state, ownProperties) => ({
-    stateView: ownProperties.selectors.views?.getGeneralView(state),
-    stateToolbars: ownProperties.selectors.product?.getProductUI(state)?.toolbars,
-    stateSittingTray: ownProperties.selectors.sitting?.getTray(state),
-    stateInteractionTheme: ownProperties.selectors.themes?.getInteractionTheme(state)
-});
-
-const mapDispatchToProperties = dispatch => ({
-    dispatchToggleSittingTray: () => dispatch(sitting$1.actions.toggleSittingTray())
-});
-
-const ConnectedToolbarGeneral = connect(mapStateToProperties, mapDispatchToProperties)(ToolbarGeneral$1);
-
-const toolbars = {
-    HorizontalToolbarButton: HorizontalToolbarButton$1,
-    ToolbarControls: ToolbarControls$1,
-    ToolbarGeneral: ConnectedToolbarGeneral,
-    ToolbarSpecific: ConnectedToolbarSpecific,
-    VerticalToolbarButton: VerticalToolbarButton$1
-};
-
-const pluridal = {
-    containers: containers,
-    head: head,
-    notifications: notifications,
-    sitting: sitting,
-    toolbars: toolbars
-};
-
-var index = {
-    ...universal.buttons,
-    ...universal.form,
-    ...universal.general,
-    ...universal.inputs,
-    ...universal.markers,
-    ...universal.typography,
-    ...universal.varia,
-    ...pluridal.containers,
-    ...pluridal.head,
-    ...pluridal.notifications,
-    ...pluridal.sitting,
-    ...pluridal.toolbars
-};
-
-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;
-
-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