@plurid/plurid-ui-components-react 0.0.0-3

package/distribution/index.js

@@ -0,0 +1,3460 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var React = require("react");
+
+var themes = require("@plurid/plurid-themes");
+
+var styled = require("styled-components");
+
+var pluridIconsReact = require("@plurid/plurid-icons-react");
+
+var pluridFunctionsReact = require("@plurid/plurid-functions-react");
+
+var pluridFunctions = require("@plurid/plurid-functions");
+
+var reactRedux = require("react-redux");
+
+var pluridUiStateReact = require("@plurid/plurid-ui-state-react");
+
+function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : {
+        default: e
+    };
+}
+
+var React__default = _interopDefaultLegacy(React);
+
+var themes__default = _interopDefaultLegacy(themes);
+
+var styled__default = _interopDefaultLegacy(styled);
+
+const StyledSpinner = styled__default["default"].div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+`;
+
+const StyledLoader = styled__default["default"].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 = properties => {
+    const {theme: theme, size: size, style: style, className: className} = properties;
+    const themeValue = theme || themes.plurid;
+    const sizeValue = size || "normal";
+    return React__default["default"].createElement(StyledSpinner, {
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement(StyledLoader, {
+        theme: themeValue,
+        size: sizeValue
+    }, React__default["default"].createElement("div", null), React__default["default"].createElement("div", null), React__default["default"].createElement("div", null), React__default["default"].createElement("div", null)));
+};
+
+const StyledPureButton = styled__default["default"].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;
+
+    :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__default["default"](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 = properties => {
+    const {text: text, atClick: atClick, theme: themeProperty, level: levelProperty, size: sizeProperty, disabled: disabled, loading: loading, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
+    const level = levelProperty !== null && levelProperty !== void 0 ? levelProperty : 0;
+    const size = sizeProperty || "normal";
+    if (loading) {
+        return React__default["default"].createElement(StyledPureButtonDiv, {
+            style: Object.assign({}, style),
+            className: className,
+            theme: theme,
+            level: level,
+            size: size,
+            isDisabled: disabled
+        }, React__default["default"].createElement(Spinner, {
+            theme: theme,
+            size: "small"
+        }));
+    }
+    return React__default["default"].createElement(StyledPureButton, {
+        onClick: event => disabled ? null : atClick(event),
+        style: Object.assign({}, style),
+        className: className,
+        theme: theme,
+        level: level,
+        size: size,
+        isDisabled: disabled
+    }, text);
+};
+
+const StyledLinkButton = styled__default["default"].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__default["default"].div`
+    position: relative;
+    min-height: 1rem;
+    height: 100%;
+    width: 100%;
+`;
+
+const DEFAULT_LEVEL$1 = 0;
+
+const LinkButton = 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 || themes.plurid;
+    const level = levelProperty !== null && levelProperty !== void 0 ? levelProperty : DEFAULT_LEVEL$1;
+    if (loading) {
+        return React__default["default"].createElement(StyledLinkButtonLoading, null, React__default["default"].createElement(Spinner, {
+            size: "small",
+            theme: theme
+        }));
+    }
+    return React__default["default"].createElement(StyledLinkButton, {
+        onClick: event => disabled ? null : atClick(event),
+        style: Object.assign({}, style),
+        className: className,
+        theme: theme,
+        level: level,
+        inline: inline,
+        isDisabled: disabled,
+        isActive: active
+    }, text);
+};
+
+const StyledRefreshButton = styled__default["default"].div`
+`;
+
+const RefreshButton = properties => {
+    const {atClick: atClick, theme: themeProperty, text: textProperty, disabled: disabled, hideAtClick: hideAtClickProperty, hideTime: hideTimeProperty} = properties;
+    const theme = themeProperty || themes.plurid;
+    const text = textProperty || "";
+    const hideAtClick = hideAtClickProperty !== null && hideAtClickProperty !== void 0 ? hideAtClickProperty : true;
+    const hideTime = hideTimeProperty || 1300;
+    const isMounted = React.useRef(true);
+    const [showIconReset, setShowIconReset] = React.useState(true);
+    const atClickHandler = event => {
+        if (disabled) {
+            return;
+        }
+        if (hideAtClick) {
+            setShowIconReset(false);
+        }
+        atClick(event);
+        if (hideAtClick) {
+            setTimeout((() => {
+                if (!isMounted.current) {
+                    return;
+                }
+                setShowIconReset(true);
+            }), hideTime);
+        }
+    };
+    React.useEffect((() => () => {
+        isMounted.current = false;
+    }), []);
+    return React__default["default"].createElement(StyledRefreshButton, {
+        theme: theme
+    }, showIconReset && React__default["default"].createElement(pluridIconsReact.PluridIconReset, {
+        theme: theme,
+        title: text,
+        inactive: disabled,
+        opacity: disabled ? .5 : 1,
+        atClick: atClickHandler
+    }));
+};
+
+const buttons = {
+    PureButton: PureButton,
+    LinkButton: LinkButton,
+    RefreshButton: RefreshButton
+};
+
+const StyledFormbutton = styled__default["default"].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__default["default"].div`
+    justify-self: ${props => props.position};
+    display: grid;
+    place-content: center;
+`;
+
+const StyledFormbuttonText = styled__default["default"].div`
+`;
+
+const Formbutton = 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 || themes.plurid;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    const _devisible = devisible !== null && devisible !== void 0 ? devisible : false;
+    const _iconPosition = iconPosition || "left";
+    const _inactive = inactive !== null && inactive !== void 0 ? inactive : false;
+    const hoverEffect = hoverEffectProperty !== null && hoverEffectProperty !== void 0 ? hoverEffectProperty : true;
+    const render = () => React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(StyledFormbuttonIcon, {
+        position: _iconPosition
+    }, React__default["default"].createElement(Icon, {
+        theme: _theme
+    })), React__default["default"].createElement(StyledFormbuttonText, null, text));
+    const renderProperties = {
+        style: Object.assign({}, style),
+        className: className,
+        theme: _theme,
+        level: _level,
+        inactive: _inactive,
+        devisible: _devisible,
+        hoverEffect: hoverEffect
+    };
+    if (link) {
+        return React__default["default"].createElement(StyledFormbutton, Object.assign({
+            onClick: event => !_inactive ? atClick(event) : null,
+            as: "a",
+            href: link,
+            target: target
+        }, renderProperties), render());
+    }
+    return React__default["default"].createElement(StyledFormbutton, Object.assign({
+        onClick: event => !_inactive ? atClick(event) : null
+    }, renderProperties), render());
+};
+
+const StyledFormitem = styled__default["default"].div`
+    display: grid;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.3rem 0.7rem;
+    user-select: none;
+`;
+
+const Formitem = properties => {
+    const {theme: theme, level: level, style: style, className: className, children: children} = properties;
+    const _theme = theme || themes.plurid;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    return React__default["default"].createElement(StyledFormitem, {
+        style: Object.assign({}, style),
+        className: className,
+        theme: _theme,
+        level: _level
+    }, children);
+};
+
+const StyledFormLeftRight = styled__default["default"].div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const FormLeftRight = properties => {
+    const {theme: theme, style: style, className: className, children: children} = properties;
+    const _theme = theme || themes.plurid;
+    return React__default["default"].createElement(StyledFormLeftRight, {
+        style: Object.assign({}, style),
+        className: className,
+        theme: _theme
+    }, children);
+};
+
+const StyledFormline = styled__default["default"].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__default["default"].div`
+    user-select: none;
+`;
+
+const StyledFormlineElement = styled__default["default"].div`
+    justify-self: right;
+
+    @media (max-width: 800px) {
+        justify-self: ${props => {
+    if (props.responsive) {
+        return "center";
+    }
+    return "right";
+}};
+    }
+`;
+
+const Formline = properties => {
+    const {text: text, Element: Element, theme: theme, level: level, responsive: responsive, style: style, className: className, children: children} = properties;
+    const _theme = theme || themes.plurid;
+    const _level = level === undefined ? 0 : level;
+    const _responsive = responsive === undefined ? false : responsive;
+    return React__default["default"].createElement(StyledFormline, {
+        style: Object.assign({}, style),
+        className: className,
+        theme: _theme,
+        level: _level,
+        responsive: _responsive
+    }, React__default["default"].createElement(StyledFormlineText, null, text), React__default["default"].createElement(StyledFormlineElement, {
+        responsive: _responsive
+    }, Element ? React__default["default"].createElement(Element, null) : React__default["default"].createElement(React__default["default"].Fragment, null, children)));
+};
+
+const StyledFormObliterate = styled__default["default"].div`
+    color: ${properties => properties.theme.colorPrimary};
+    font-family: ${properties => properties.theme.fontFamilySansSerif};
+    font-size: 0.8rem;
+    user-select: none;
+`;
+
+const StyledObliterateContainer = styled__default["default"].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 = properties => {
+    const {atObliterate: atObliterate, item: item, theme: theme, devisible: devisible, level: level, style: style, className: className} = properties;
+    const _theme = theme || themes.plurid;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    const _devisible = devisible !== null && devisible !== void 0 ? devisible : false;
+    const [showObliterate, setShowObliterate] = React.useState(false);
+    const handleObliterate = event => {
+        setShowObliterate(false);
+        atObliterate(event);
+    };
+    return React__default["default"].createElement(StyledFormObliterate, {
+        theme: _theme,
+        level: _level,
+        devisible: _devisible,
+        style: Object.assign({}, style),
+        className: className
+    }, !showObliterate && React__default["default"].createElement(Formbutton, {
+        theme: _theme,
+        text: item ? `obliterate ${item}` : "obliterate",
+        Icon: pluridIconsReact.PluridIconObliterate,
+        atClick: () => setShowObliterate(true),
+        devisible: true
+    }), showObliterate && React__default["default"].createElement(StyledObliterateContainer, null, React__default["default"].createElement("div", null, "remove forever?"), React__default["default"].createElement(LinkButton, {
+        theme: _theme,
+        text: "cancel",
+        atClick: () => setShowObliterate(false)
+    }), React__default["default"].createElement(PureButton, {
+        theme: _theme,
+        text: "Obliterate",
+        atClick: event => handleObliterate(event)
+    })));
+};
+
+const form = {
+    Formbutton: Formbutton,
+    Formitem: Formitem,
+    FormLeftRight: FormLeftRight,
+    Formline: Formline,
+    FormObliterate: FormObliterate
+};
+
+const GlobalStyles = styled.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
+};
+
+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__default["default"].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__default["default"].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__default["default"].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 = React.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, enterAtClick: enterAtClick, escapeClear: escapeClear, ariaLabel: ariaLabel} = properties;
+    const _type = type || "text";
+    const _theme = theme || themes.plurid;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    const _round = round !== null && round !== void 0 ? round : true;
+    const inputElement = React.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);
+        }
+    };
+    return React__default["default"].createElement(StyledTextline, {
+        theme: _theme,
+        level: _level,
+        devisible: devisible,
+        center: center,
+        round: _round,
+        width: width,
+        className: className
+    }, React__default["default"].createElement("input", {
+        type: _type,
+        value: text,
+        onChange: atChange,
+        onKeyDown: handleKeyDown,
+        onFocus: atFocus,
+        onBlur: atBlur,
+        placeholder: placeholder,
+        autoCapitalize: autoCapitalize,
+        autoComplete: autoComplete,
+        autoCorrect: autoCorrect,
+        spellCheck: spellCheck,
+        "aria-label": ariaLabel,
+        style: Object.assign({}, style),
+        ref: pluridFunctionsReact.mergeReferences(inputElement, reference)
+    }), error && React__default["default"].createElement(StyledErrorLine, {
+        theme: _theme,
+        devisible: devisible,
+        round: _round
+    }), enterAtClick && text.length > 0 && React__default["default"].createElement(StyledEnterIcon, {
+        theme: _theme,
+        onClick: () => enterAtClick(),
+        left: enterIconLeft
+    }, "➔"));
+}));
+
+const StyledDropdown = styled__default["default"].div`
+    color: ${props => props.theme.colorPrimary};
+    text-align: ${props => {
+    if (props.left) {
+        return "left";
+    }
+    return "right";
+}};
+    font-size: 1rem;
+
+    position: relative;
+`;
+
+const StyledDropdownSelected = styled__default["default"].div`
+    cursor: pointer;
+    user-select: none;
+    color: ${props => {
+    if (props.selectedColor) {
+        return props.selectedColor;
+    }
+    return props.theme.colorPrimary;
+}};
+`;
+
+const StyledDropdownList = styled__default["default"].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};
+    left: ${props => {
+    if (props.left) {
+        return "0px";
+    }
+    return "auto";
+}};
+    right: ${props => {
+    if (props.left) {
+        return "auto";
+    }
+    return "0px";
+}};
+    height: ${props => {
+    if (props.heightItems) {
+        return props.heightItems * 2 + "rem";
+    }
+    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";
+}};
+
+    position: absolute;
+    top: 25px;
+    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__default["default"].div`
+    position: relative;
+
+    input {
+        text-align: ${props => {
+    if (props.left) {
+        return "left !important";
+    }
+    return "right !important";
+}};
+    }
+`;
+
+const StyledFilterUpdate = styled__default["default"].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 = properties => {
+    const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, dropdownToggled: dropdownToggled, 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 ? themes.plurid : themeProperty : generalThemeProperty;
+    const _interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? themes.plurid : themeProperty : interactionThemeProperty;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    const _hideAtSelect = hideAtSelect !== null && hideAtSelect !== void 0 ? hideAtSelect : true;
+    const _selectAtHover = selectAtHover !== null && selectAtHover !== void 0 ? selectAtHover : false;
+    const isMounted = React.useRef(true);
+    const filterInput = React.useRef(null);
+    const [generalTheme, setGeneralTheme] = React.useState(_generalTheme);
+    const [interactionTheme, setInteractionTheme] = React.useState(_interactionTheme);
+    const [showList, setShowList] = React.useState(false);
+    const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState(interactionTheme.backgroundColorTertiary);
+    const [filterValue, setFilterValue] = React.useState("");
+    const [filteredSelectables, setFilteredSelectables] = React.useState([ ...selectables ]);
+    const [showFilterUpdate, setShowFilterUpdate] = React.useState(!!filterUpdate);
+    const [arrowIndex, setArrowIndex] = React.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__default["default"].createRef();
+            return accumulator;
+        }), {});
+    };
+    const focusFilterInput = () => {
+        setTimeout((() => {
+            if (filterInput.current) {
+                filterInput.current.focus();
+            }
+        }), 100);
+    };
+    const itemsReferences = React.useRef(filteredSelectables.reduce(((accumulator, _, index) => {
+        accumulator[index] = React__default["default"].createRef();
+        return accumulator;
+    }), {}));
+    React.useEffect((() => {
+        if (!dropdownToggled) {
+            setShowList(false);
+        }
+    }), [ dropdownToggled ]);
+    React.useEffect((() => {
+        if (_level === 2) {
+            setSelectedBackgroundColor(interactionTheme.backgroundColorSecondary);
+        } else {
+            setSelectedBackgroundColor(interactionTheme.backgroundColorTertiary);
+        }
+    }), [ _level, interactionTheme ]);
+    React.useEffect((() => {
+        const generalTheme = generalThemeProperty === undefined ? themeProperty === undefined ? themes.plurid : themeProperty : generalThemeProperty;
+        const interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? themes.plurid : themeProperty : interactionThemeProperty;
+        setGeneralTheme(generalTheme);
+        setInteractionTheme(interactionTheme);
+    }), [ themeProperty, generalThemeProperty, interactionThemeProperty ]);
+    React.useEffect((() => {
+        const scrollTo = index => {
+            console.log(itemsReferences.current[index].current);
+            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 ]);
+    React.useEffect((() => () => {
+        isMounted.current = false;
+    }), []);
+    React.useEffect((() => {
+        setFilteredSelectables([ ...selectables ]);
+    }), [ selectables.length ]);
+    return React__default["default"].createElement(StyledDropdown, {
+        theme: interactionTheme,
+        left: left,
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement(StyledDropdownSelected, {
+        onClick: () => {
+            setShowList(!showList);
+            if (setDropdownToggled) {
+                setDropdownToggled(kind);
+            }
+            if (!showList && filterable) {
+                focusFilterInput();
+            }
+        },
+        theme: generalTheme,
+        selectedColor: selectedColor
+    }, typeof selected === "string" ? selected : selected.value), showList && React__default["default"].createElement(StyledDropdownList, {
+        theme: interactionTheme,
+        left: left,
+        level: _level,
+        heightItems: heightItems && filterable && filteredSelectables.length < heightItems ? filteredSelectables.length + 1 : heightItems,
+        width: width
+    }, React__default["default"].createElement("ul", null, filterable && React__default["default"].createElement("li", {
+        style: {
+            backgroundColor: interactionTheme.backgroundColorTertiary,
+            boxShadow: interactionTheme.boxShadowPenumbraInset
+        }
+    }, React__default["default"].createElement(StyledFilterable, {
+        left: left
+    }, filterUpdate && showFilterUpdate && React__default["default"].createElement(StyledFilterUpdate, {
+        left: left
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconReset, {
+        theme: interactionTheme,
+        atClick: () => {
+            setShowFilterUpdate(false);
+            filterUpdate();
+            setTimeout((() => {
+                if (!isMounted.current) {
+                    return;
+                }
+                setShowFilterUpdate(true);
+            }), 5300);
+        }
+    })), React__default["default"].createElement(Textline, {
+        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__default["default"].createElement("li", {
+            ref: itemsReferences.current[index],
+            key: selectableID,
+            onClick: () => handleSelect(selectable),
+            onMouseEnter: () => handleHover(selectable),
+            style: {
+                backgroundColor: isSelected ? selectedBackgroundColor : ""
+            }
+        }, selectableValue);
+    })))));
+};
+
+const StyledInputDescriptor = styled__default["default"].div`
+    text-align: left;
+    font-size: 0.9rem;
+    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 = properties => {
+    const {name: name, show: show, theme: theme} = properties;
+    return React__default["default"].createElement(StyledInputDescriptor, {
+        theme: theme
+    }, show && React__default["default"].createElement(React__default["default"].Fragment, null, name));
+};
+
+const StyledInputBox = styled__default["default"].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};
+    }
+`;
+
+const StyledTextBox = styled__default["default"].div`
+`;
+
+const InputBox = properties => {
+    const {text: text, name: name, atChange: atChange, theme: themeProperty, style: style, className: className, atKeyDown: atKeyDown} = properties;
+    const theme = themeProperty || themes.plurid;
+    return React__default["default"].createElement(StyledInputBox, {
+        theme: theme,
+        className: className,
+        style: Object.assign({}, style)
+    }, React__default["default"].createElement(InputDescriptor, {
+        name: name,
+        show: text !== "",
+        theme: theme
+    }), React__default["default"].createElement(StyledTextBox, {
+        theme: theme
+    }, React__default["default"].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__default["default"].div`
+    width: 350px;
+`;
+
+const InputLine = 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 || themes.plurid;
+    return React__default["default"].createElement(StyledInputLine, {
+        theme: theme,
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement(InputDescriptor, {
+        name: name,
+        show: text !== "",
+        theme: theme
+    }), React__default["default"].createElement(Textline, Object.assign({
+        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__default["default"].label`
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+`;
+
+const StyledSwitchSlider = styled__default["default"].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 => {
+    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;
+        }
+    }
+    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;
+    }
+}};
+    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 Switch = properties => {
+    const {checked: checked, theme: theme, level: level, round: round, exclusive: exclusive, accent: accent, atChange: atChange} = properties;
+    const _theme = theme || themes.plurid;
+    const _level = level === undefined ? 0 : level;
+    const _round = round === undefined ? true : round;
+    return React__default["default"].createElement(StyledSwitch, {
+        theme: _theme
+    }, React__default["default"].createElement("input", {
+        type: "checkbox",
+        checked: checked,
+        onChange: () => atChange()
+    }), React__default["default"].createElement(StyledSwitchSlider, {
+        theme: _theme,
+        level: _level,
+        round: _round,
+        exclusive: exclusive,
+        checked: checked,
+        accent: accent
+    }));
+};
+
+const StyledInputSwitch = styled__default["default"].div`
+    font-size: 0.9rem;
+
+    margin-top: ${({compact: compact}) => {
+    if (compact) {
+        return "1rem";
+    }
+    return "2.2rem";
+}};
+`;
+
+const InputSwitch = properties => {
+    const {name: name, checked: checked, atChange: atChange, theme: theme, compact: compact} = properties;
+    return React__default["default"].createElement(StyledInputSwitch, {
+        compact: compact
+    }, React__default["default"].createElement(FormLeftRight, null, React__default["default"].createElement("div", {
+        style: {
+            marginLeft: "0.9rem"
+        }
+    }, name), React__default["default"].createElement(Switch, {
+        checked: checked,
+        level: 2,
+        exclusive: true,
+        theme: theme,
+        atChange: () => atChange()
+    })));
+};
+
+const StyledItemsline = styled__default["default"].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 = properties => {
+    const {items: items, removeItem: removeItem, theme: theme, level: level, left: left, style: style, className: className} = properties;
+    const _theme = theme === undefined ? themes__default["default"].plurid : theme;
+    const _level = level === undefined ? 0 : level;
+    const _left = left === undefined ? false : left;
+    return React__default["default"].createElement(StyledItemsline, {
+        style: Object.assign({}, style),
+        className: className,
+        theme: _theme,
+        level: _level,
+        left: _left
+    }, items.length > 0 && React__default["default"].createElement("ul", null, items.map((item => React__default["default"].createElement("li", {
+        key: item + Math.random(),
+        onClick: () => removeItem(item)
+    }, item)))));
+};
+
+const StyledSelect = styled__default["default"].div`
+`;
+
+const PluridSelect = properties => {
+    const {selectables: selectables, atChange: atChange, theme: theme, level: level, devisible: devisible, round: round, width: width} = properties;
+    const _theme = theme || themes.plurid;
+    const _level = level !== null && level !== void 0 ? level : 0;
+    const _round = round !== null && round !== void 0 ? round : true;
+    return React__default["default"].createElement(StyledSelect, {
+        theme: _theme,
+        level: _level,
+        devisible: devisible,
+        round: _round,
+        width: width
+    }, React__default["default"].createElement("select", null, selectables.map((selectable => React__default["default"].createElement("option", {
+        key: selectable,
+        value: selectable
+    }, selectable)))));
+};
+
+const StyledSlider = styled__default["default"].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__default["default"].div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    line-height: 16px;
+    user-select: none;
+`;
+
+const StyledSliderValue = styled__default["default"].div`
+    user-select: none;
+    font-size: 0.8rem;
+    min-width: 1.6rem;
+    text-align: right;
+`;
+
+const StyledSliderInputContainer = styled__default["default"].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 = 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] = React.useState(false);
+    const _theme = theme || themes.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__default["default"].createElement(StyledSlider, {
+        theme: _theme,
+        width: width
+    }, namedValueAbove && React__default["default"].createElement(StyledNamedValue, null, React__default["default"].createElement("div", null, name), React__default["default"].createElement(StyledSliderValue, {
+        theme: _theme
+    }, value, valueSign)), React__default["default"].createElement(StyledSliderInputContainer, {
+        theme: _theme,
+        hovered: mouseOver,
+        thumbSize: _thumbSize,
+        level: _level,
+        width: width
+    }, React__default["default"].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,
+    InputBox: InputBox,
+    InputDescriptor: InputDescriptor,
+    InputLine: InputLine,
+    InputSwitch: InputSwitch,
+    Itemsline: Itemsline,
+    Select: PluridSelect,
+    Slider: Slider,
+    Switch: Switch,
+    Textline: Textline
+};
+
+const StyledHR = styled__default["default"].hr`
+    outline: 0;
+    border: 0;
+    margin: 0.8rem auto;
+    height: 1px;
+
+    background-color: ${({theme: theme}) => theme.colorPrimary};
+`;
+
+const HR = properties => {
+    const {theme: theme, style: style, className: className} = properties;
+    const themeValue = theme || themes.plurid;
+    return React__default["default"].createElement(StyledHR, {
+        theme: themeValue,
+        style: Object.assign({}, style),
+        className: className
+    });
+};
+
+const StyledProgressCircle = styled__default["default"].div`
+    height: 0;
+    width: 0;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    margin: 10px;
+
+    svg {
+        transform: translateX(-50%) translateY(-50%);
+    }
+`;
+
+const ProgressCircle = properties => {
+    const {progress: progress, size: size, radius: radius, stroke: stroke, theme: theme, style: style, className: className} = properties;
+    const progressValue = pluridFunctions.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 || themes.plurid;
+    const sizeValue = size || "normal";
+    return React__default["default"].createElement(StyledProgressCircle, {
+        size: sizeValue,
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement("svg", {
+        height: diameter,
+        width: diameter
+    }, React__default["default"].createElement("circle", {
+        stroke: themeValue.backgroundColorPrimaryAlpha,
+        fill: "transparent",
+        strokeWidth: strokeValue,
+        r: normalizedRadius,
+        cx: radiusValue,
+        cy: radiusValue
+    }), React__default["default"].createElement("circle", {
+        stroke: themeValue.colorPrimary,
+        fill: "transparent",
+        strokeWidth: strokeValue,
+        strokeDasharray: circumference + " " + circumference,
+        style: {
+            strokeDashoffset: strokeDashoffset
+        },
+        r: normalizedRadius,
+        cx: radiusValue,
+        cy: radiusValue
+    })));
+};
+
+const StyledTooltip = styled__default["default"].span`
+    position: relative;
+`;
+
+const StyledTooltipString = styled__default["default"].span`
+`;
+
+const StyledTooltipIcon = styled__default["default"].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__default["default"].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 = properties => {
+    const {tool: Tool, tip: Tip, indicator: indicatorProperty, icon: iconProperty, theme: themeProperty, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
+    const indicator = indicatorProperty !== null && indicatorProperty !== void 0 ? indicatorProperty : true;
+    const icon = iconProperty !== null && iconProperty !== void 0 ? iconProperty : true;
+    const mounted = pluridFunctionsReact.useMounted();
+    const hoverOutTimeout = React.useRef(null);
+    const [mouseOver, setMouseOver] = React.useState(false);
+    const [showTooltipText, setShowTooltipText] = React.useState(false);
+    React.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__default["default"].createElement(React__default["default"].Fragment, null, typeof Tool === "string" ? React__default["default"].createElement(React__default["default"].Fragment, null, Tool) : React__default["default"].createElement(Tool, null));
+    return React__default["default"].createElement(StyledTooltip, {
+        onMouseEnter: () => setMouseOver(true),
+        onMouseLeave: () => setMouseOver(false),
+        onMouseMove: () => !showTooltipText ? setMouseOver(true) : null,
+        theme: theme,
+        style: Object.assign({}, style),
+        className: className
+    }, icon && React__default["default"].createElement(StyledTooltipIcon, {
+        theme: theme
+    }, renderTool), !icon && React__default["default"].createElement(StyledTooltipString, null, renderTool), showTooltipText && React__default["default"].createElement(StyledTooltipText, {
+        theme: theme,
+        indicator: indicator
+    }, typeof Tip === "string" ? React__default["default"].createElement(React__default["default"].Fragment, null, Tip) : React__default["default"].createElement(Tip, null)));
+};
+
+const markers = {
+    HR: HR,
+    ProgressCircle: ProgressCircle,
+    Spinner: Spinner,
+    Tooltip: Tooltip
+};
+
+const StyledHeading1 = styled__default["default"].h1`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 2.2rem;
+    margin: 1.4rem 0;
+`;
+
+const StyledHeading2 = styled__default["default"].h2`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 2rem;
+    margin: 1.2rem 0;
+`;
+
+const StyledHeading3 = styled__default["default"].h3`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 1.8rem;
+    margin: 1rem 0;
+`;
+
+const StyledHeading4 = styled__default["default"].h4`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 1.6rem;
+    margin: 1rem 0;
+`;
+
+const StyledHeading5 = styled__default["default"].h5`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 1.4rem;
+    margin: 1rem 0;
+`;
+
+const StyledHeading6 = styled__default["default"].h5`
+    color: ${props => props.theme.colorPrimary};
+    font-family: ${props => props.theme.fontFamilySansSerif};
+    font-size: 1.2rem;
+    margin: 1rem 0;
+`;
+
+const Heading = properties => {
+    const {children: children, theme: themeProperty, type: typeProperty, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
+    const type = typeProperty || "h1";
+    const renderProperties = {
+        theme: theme,
+        style: style,
+        className: className
+    };
+    switch (type) {
+      case "h1":
+        return React__default["default"].createElement(StyledHeading1, Object.assign({}, renderProperties), children);
+
+      case "h2":
+        return React__default["default"].createElement(StyledHeading2, Object.assign({}, renderProperties), children);
+
+      case "h3":
+        return React__default["default"].createElement(StyledHeading3, Object.assign({}, renderProperties), children);
+
+      case "h4":
+        return React__default["default"].createElement(StyledHeading4, Object.assign({}, renderProperties), children);
+
+      case "h5":
+        return React__default["default"].createElement(StyledHeading5, Object.assign({}, renderProperties), children);
+
+      case "h6":
+        return React__default["default"].createElement(StyledHeading6, Object.assign({}, renderProperties), children);
+
+      default:
+        return React__default["default"].createElement(StyledHeading1, Object.assign({}, renderProperties), children);
+    }
+};
+
+const StyledParagraph = styled__default["default"].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 = properties => {
+    const {children: children, theme: themeProperty, size: sizeProperty, fontFamily: fontFamilyProperty, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
+    const size = sizeProperty || "normal";
+    const fontFamily = fontFamilyProperty || "sans-serif";
+    return React__default["default"].createElement(StyledParagraph, {
+        theme: theme,
+        size: size,
+        fontFamily: fontFamily,
+        style: Object.assign({}, style),
+        className: className
+    }, children);
+};
+
+const typography = {
+    Heading: Heading,
+    Paragraph: Paragraph
+};
+
+const StyledCopyableLine = styled__default["default"].div`
+    display: grid;
+    align-items: center;
+    grid-template-columns: 16px 1fr;
+    grid-gap: 0.7rem;
+`;
+
+const StyledData = styled__default["default"].div`
+    user-select: all;
+`;
+
+const CopyableLine = properties => {
+    const {data: data, viewData: viewData, copyMessage: copyMessage, copyMessageTime: copyMessageTime, style: style, className: className} = properties;
+    const viewDataText = viewData || data;
+    const copyMessageText = copyMessage !== null && copyMessage !== void 0 ? copyMessage : "copied";
+    const copyMessageTimeValue = copyMessageTime || 2e3;
+    const [showCopyMessage, setShowCopyMessage] = pluridFunctionsReact.useFalseAfterTimedTrue(copyMessageTimeValue);
+    return React__default["default"].createElement(StyledCopyableLine, {
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconCopy, {
+        atClick: () => {
+            pluridFunctions.clipboard.copy(data);
+            setShowCopyMessage(true);
+        }
+    }), React__default["default"].createElement(StyledData, null, showCopyMessage ? React__default["default"].createElement(React__default["default"].Fragment, null, copyMessageText) : React__default["default"].createElement(React__default["default"].Fragment, null, viewDataText)));
+};
+
+const StyledNewPageLink = styled__default["default"].a`
+`;
+
+const NewPageLink = properties => {
+    const {link: link, text: text, style: style, className: className} = properties;
+    return React__default["default"].createElement(StyledNewPageLink, {
+        href: link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: Object.assign({}, style),
+        className: className
+    }, text);
+};
+
+const StyledScrollableLine = styled__default["default"].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 = properties => {
+    const {text: text, style: style, className: className} = properties;
+    return React__default["default"].createElement(StyledScrollableLine, {
+        style: Object.assign({}, style),
+        className: className
+    }, text);
+};
+
+const StyledTextItem = styled__default["default"].div`
+    display: flex;
+    align-items: center;
+    margin-right: 2rem;
+`;
+
+const TextItem = properties => {
+    const {name: name, render: render, icon: IconProperty} = properties;
+    const Icon = IconProperty || pluridIconsReact.PluridIconInfo;
+    return React__default["default"].createElement(StyledTextItem, null, React__default["default"].createElement(Icon, {
+        title: name,
+        inactive: true,
+        style: {
+            marginRight: "0.5rem"
+        }
+    }), render);
+};
+
+const varia = {
+    CopyableLine: CopyableLine,
+    NewPageLink: NewPageLink,
+    ScrollableLine: ScrollableLine,
+    TextItem: TextItem
+};
+
+const universal = {
+    buttons: buttons,
+    form: form,
+    general: general,
+    inputs: inputs,
+    markers: markers,
+    typography: typography,
+    varia: varia
+};
+
+const translateUp = styled.keyframes`
+    from {
+        transform: translateY(2000px);
+    }
+    to {
+        transform: translateY(0);
+    }
+`;
+
+const StyledNotification = styled__default["default"].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;
+
+    a {
+        text-decoration: none;
+        color: ${props => props.theme.colorSecondary};
+    }
+`;
+
+const StyledNotificationContent = styled__default["default"].div`
+    font-size: 0.9rem;
+    padding: 32px 16px;
+    word-break: break-all;
+`;
+
+const StyledNotificationClose = styled__default["default"].div`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    user-select: none;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: grid;
+    place-content: center;
+`;
+
+const Notification = 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} = data;
+    const notificationTimeout = React.useRef(null);
+    React.useEffect((() => {
+        if (timeout) {
+            notificationTimeout.current = setTimeout((() => {
+                remove({
+                    id: id
+                });
+            }), timeout);
+        }
+        return () => {
+            if (notificationTimeout.current) {
+                clearTimeout(notificationTimeout.current);
+            }
+        };
+    }), [ id, timeout, remove ]);
+    const content = html ? React__default["default"].createElement(StyledNotificationContent, {
+        dangerouslySetInnerHTML: pluridFunctionsReact.createMarkup(text)
+    }) : react && elements && elements[text] ? React__default["default"].createElement(StyledNotificationContent, null, elements[text]) : React__default["default"].createElement(StyledNotificationContent, null, text);
+    return React__default["default"].createElement(StyledNotification, {
+        theme: theme,
+        style: Object.assign({}, style),
+        className: className
+    }, content, React__default["default"].createElement(StyledNotificationClose, null, React__default["default"].createElement(pluridIconsReact.PluridIconDelete, {
+        atClick: () => remove({
+            id: id
+        })
+    })));
+};
+
+const StyledNotifications = styled__default["default"].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 = properties => {
+    const {elements: elements, stateGeneralTheme: stateGeneralTheme, stateNotifications: stateNotifications, dispatchRemoveNotification: dispatchRemoveNotification} = properties;
+    return React__default["default"].createElement(StyledNotifications, null, stateNotifications.map((notification => React__default["default"].createElement(Notification, {
+        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(pluridUiStateReact.notifications.actions.removeNotification(payload))
+});
+
+const ConnectedNotifications = reactRedux.connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications);
+
+const notifications = {
+    Notification: Notification,
+    Notifications: ConnectedNotifications
+};
+
+const StyledSittingTray = styled__default["default"].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__default["default"].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__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    align-items: center;
+`;
+
+const StyledSittingTrayItemHeader = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+`;
+
+const StyledSittingTrayItemBody = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+`;
+
+const StyledSittingTrayButton = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 25px 1fr;
+    cursor: pointer;
+`;
+
+const StyledSittingTrayButtonIcon = styled__default["default"].div`
+`;
+
+const StyledSittingTrayButtonText = styled__default["default"].div`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledStateLink = styled__default["default"].div`
+    padding: 7px;
+    padding-bottom: 0px;
+    margin-bottom: 4px;
+`;
+
+const StyledStateLinkContainer = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr;
+    height: 25px;
+    align-items: center;
+`;
+
+const StyledStateLinkText = styled__default["default"].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__default["default"].div`
+    width: 100%;
+    cursor: pointer;
+    justify-self: center;
+`;
+
+const StateLink = properties => {
+    const {currentLink: currentLink} = properties;
+    const copyStateLink = () => {
+        pluridFunctions.clipboard.copy(currentLink);
+        setCurrentStateLink("copied link");
+        setTimeout((() => {
+            setCurrentStateLink(currentLink);
+        }), 650);
+    };
+    const [currentStateLink, setCurrentStateLink] = React.useState(currentLink);
+    React.useEffect((() => {
+        setCurrentStateLink(currentLink);
+    }), [ currentLink ]);
+    return React__default["default"].createElement(StyledStateLink, null, React__default["default"].createElement(StyledSittingTrayItem, null, React__default["default"].createElement(StyledSittingTrayItemHeader, null, React__default["default"].createElement("div", null, React__default["default"].createElement("h4", null, "state link")), React__default["default"].createElement("div", {
+        style: {
+            justifySelf: "right"
+        }
+    }, React__default["default"].createElement(StyledStateLinkCopy, {
+        onClick: copyStateLink
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconCopy, null)))), React__default["default"].createElement(StyledSittingTrayItemBody, null, React__default["default"].createElement(StyledStateLinkContainer, null, React__default["default"].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 = reactRedux.connect(mapStateToProperties$5, mapDispatchToProperties$5)(StateLink);
+
+const StyledStateLine = styled__default["default"].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__default["default"].div`
+    user-select: none;
+    cursor: pointer;
+    display: grid;
+    place-content: center;
+`;
+
+const StyledSliderStateSliderContainer = styled__default["default"].div`
+`;
+
+styled__default["default"].div`
+    justify-self: center;
+`;
+
+const StyledStateLineButtons = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: repeat(3, 20px);
+    grid-gap: 3px;
+    align-items: center;
+    justify-content: right;
+`;
+
+const StyledStateLineButton = styled__default["default"].div`
+    display: grid;
+    place-content: center;
+`;
+
+const StyledStateLineContainer = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const StateLine = properties => {
+    const [stateIndex, setStateIndex] = React.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__default["default"].createElement(StyledStateLine, null, React__default["default"].createElement(StyledSittingTrayItem, null, React__default["default"].createElement(StyledSittingTrayItemHeader, null, React__default["default"].createElement("div", null, React__default["default"].createElement("h4", null, "state line")), React__default["default"].createElement("div", null, React__default["default"].createElement(StyledStateLineButtons, null, React__default["default"].createElement(StyledStateLineButton, null, React__default["default"].createElement(pluridIconsReact.PluridIconPlay, null)), React__default["default"].createElement(StyledStateLineButton, null, React__default["default"].createElement(pluridIconsReact.PluridIconBranch, null)), React__default["default"].createElement(StyledStateLineButton, null, React__default["default"].createElement(pluridIconsReact.PluridIconNewStateline, null))))), React__default["default"].createElement(StyledSittingTrayItemBody, null, React__default["default"].createElement(StyledStateLineContainer, null, React__default["default"].createElement("div", {
+        style: {
+            display: "grid",
+            justifyContent: "left"
+        }
+    }, stateIndex !== 0 && React__default["default"].createElement(StyledSliderStateButton, {
+        onClick: () => handleStateIndex("DECREASE")
+    }, "◀")), React__default["default"].createElement(StyledSliderStateSliderContainer, null), React__default["default"].createElement("div", {
+        style: {
+            display: "grid",
+            justifyContent: "right"
+        }
+    }, stateIndex !== maxStateSlider && React__default["default"].createElement(StyledSliderStateButton, {
+        onClick: () => handleStateIndex("INCREASE")
+    }, "▶"))))));
+};
+
+const mapStateToProperties$4 = (state, ownProperties) => ({
+    theme: ownProperties.selectors.themes.getInteractionTheme(state)
+});
+
+const mapDispatchToProperties$4 = dispatch => ({});
+
+const ConnectedStateLine = reactRedux.connect(mapStateToProperties$4, mapDispatchToProperties$4)(StateLine);
+
+const StyledStateImage = styled__default["default"].div`
+    padding: 0 7px;
+    margin-bottom: 4px;
+
+    svg {
+        height: 18px;
+        width: 18px;
+        color: white;
+        fill: white;
+        user-select: none;
+        cursor: pointer;
+    }
+`;
+
+const StyledStateShareImage = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 25px;
+    align-items: center;
+`;
+
+const StyledStateShareImageButtons = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 110px auto;
+    align-items: center;
+    justify-items: center;
+    height: 25px;
+`;
+
+const StyledStateShareImageButtonsCopy = styled__default["default"].div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+    justify-self: left;
+
+    svg {
+        height: 18px;
+        width: 18px;
+        fill: white;
+    }
+`;
+
+const StyledStateShareImagePasteContainer = styled__default["default"].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] = React.useState("");
+    const [showPaste, setShowPaste] = React.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__default["default"].createElement(StyledStateImage, null, React__default["default"].createElement(StyledSittingTrayItem, null, React__default["default"].createElement(StyledSittingTrayItemHeader, null, React__default["default"].createElement("div", null, React__default["default"].createElement("h4", null, "state image")), React__default["default"].createElement("div", null, React__default["default"].createElement("div", {
+        style: {
+            display: "grid",
+            alignItems: "center",
+            justifyContent: "right"
+        }
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconStateShareImage, null)))), React__default["default"].createElement(StyledSittingTrayItemBody, null, React__default["default"].createElement(StyledStateShareImage, null, !message && !showPaste && React__default["default"].createElement(StyledStateShareImageButtons, null, React__default["default"].createElement(StyledStateShareImageButtonsCopy, null, React__default["default"].createElement("div", {
+        onClick: copyCurrentState
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconCopyCurrentState, null)), React__default["default"].createElement("div", {
+        onClick: copyStateHistory
+    }, React__default["default"].createElement(pluridIconsReact.PluridIconCopyStateHistory, null))), React__default["default"].createElement("div", {
+        onClick: () => setShowPaste(true)
+    }, "paste")), message && !showPaste && React__default["default"].createElement("div", null, message), showPaste && React__default["default"].createElement(StyledStateShareImagePasteContainer, null, React__default["default"].createElement("input", {
+        type: "text"
+    }), React__default["default"].createElement("div", {
+        onClick: paste
+    }, "paste"))))));
+};
+
+const mapStateToProperties$3 = (state, ownProperties) => ({
+    theme: ownProperties.selectors.themes.getInteractionTheme(state)
+});
+
+const mapDispatchToProperties$3 = dispatch => ({});
+
+const ConnectedStateImage = reactRedux.connect(mapStateToProperties$3, mapDispatchToProperties$3)(StateImage);
+
+const StyledSittings = styled__default["default"].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__default["default"].createElement(StyledSittings, {
+        theme: stateInteractionTheme
+    }, React__default["default"].createElement(StyledSittingTrayButton, null, React__default["default"].createElement(StyledSittingTrayButtonIcon, null, React__default["default"].createElement(pluridIconsReact.PluridIconSittings, {
+        theme: stateInteractionTheme
+    })), React__default["default"].createElement(StyledSittingTrayButtonText, null, "sittings")));
+};
+
+const mapStateToProperties$2 = (state, ownProperties) => ({
+    stateInteractionTheme: ownProperties.selectors.themes.getInteractionTheme(state)
+});
+
+const mapDispatchToProperties$2 = dispatch => ({});
+
+const ConnectedSittings = reactRedux.connect(mapStateToProperties$2, mapDispatchToProperties$2)(Sittings);
+
+const SittingTray = properties => {
+    const {selectors: selectors, context: context, stateInteractionTheme: stateInteractionTheme} = properties;
+    return React__default["default"].createElement(StyledSittingTray, {
+        theme: stateInteractionTheme
+    }, React__default["default"].createElement(StyledSittingTrayContainer, null, React__default["default"].createElement("ul", null, React__default["default"].createElement("li", null, React__default["default"].createElement(ConnectedStateLink, {
+        selectors: selectors,
+        context: context
+    })), React__default["default"].createElement("li", null, React__default["default"].createElement(ConnectedStateLine, {
+        selectors: selectors,
+        context: context
+    })), React__default["default"].createElement("li", null, React__default["default"].createElement(ConnectedStateImage, {
+        selectors: selectors,
+        context: context
+    })), React__default["default"].createElement("li", null, React__default["default"].createElement(ConnectedSittings, {
+        selectors: selectors,
+        context: context
+    })))));
+};
+
+const mapStatedToProperties = (state, ownProperties) => ({
+    stateInteractionTheme: ownProperties.selectors.themes.getInteractionTheme(state)
+});
+
+const mapDispatchdToProperties = dispatch => ({});
+
+const ConnectedSittingTray = reactRedux.connect(mapStatedToProperties, mapDispatchdToProperties)(SittingTray);
+
+const sitting = {
+    SittingTray: ConnectedSittingTray
+};
+
+const StyledHorizontalToolbarButton = styled__default["default"].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};
+
+    :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__default["default"].div`
+    display: flex;
+    align-items: center;
+    margin-right: ${({text: text}) => {
+    if (text === "") {
+        return "0";
+    }
+    return "0.5rem";
+}};
+`;
+
+const HorizontalToolbarButton = properties => {
+    const {text: text, atClick: atClick, active: active, scaleIcon: scaleIcon, icon: Icon, theme: themeProperty, style: style, className: className} = properties;
+    const theme = themeProperty || themes__default["default"].plurid;
+    return React__default["default"].createElement(StyledHorizontalToolbarButton, {
+        active: active,
+        scaleIcon: scaleIcon,
+        onClick: atClick,
+        theme: theme,
+        style: Object.assign({}, style),
+        className: className
+    }, Icon && React__default["default"].createElement(StyledHorizontalToolbarButtonIcon, {
+        text: text
+    }, React__default["default"].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__default["default"].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__default["default"].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 = properties => {
+    const {position: positionProperty, theme: themeProperty, style: style, className: className, children: children} = properties;
+    const position = positionProperty || VerticalPositions.top;
+    const theme = themeProperty || themes.plurid;
+    return React__default["default"].createElement(StyledToolbarControls, {
+        position: position,
+        theme: theme,
+        style: Object.assign({}, style),
+        className: className
+    }, React__default["default"].createElement(StyledToolbarControlsButtons, {
+        theme: theme
+    }, children));
+};
+
+const StyledVerticalToolbarButton = styled__default["default"].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";
+}};
+
+    :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__default["default"].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 = 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] = React.useState(false);
+    return React__default["default"].createElement(StyledVerticalToolbarButton, {
+        onMouseEnter: () => setMouseOver(true),
+        onMouseLeave: () => setMouseOver(false),
+        onClick: atClick,
+        active: active,
+        scaleIcon: scaleIcon,
+        first: first,
+        last: last,
+        theme: theme
+    }, React__default["default"].createElement(Icon, null), mouseOver && showText && React__default["default"].createElement(StyledVerticalToolbarButtonText, {
+        textLeft: textLeft
+    }, text));
+};
+
+const StyledToolbar = styled__default["default"].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__default["default"].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 = 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] = React.useState(alwaysShow);
+    const [mouseIn, setMouseIn] = React.useState(false);
+    const handleMouseMove = event => {
+        if (!showToolbar) {
+            setShowToolbar(true);
+        }
+    };
+    React.useEffect((() => {
+        if (alwaysShow) {
+            setShowToolbar(true);
+        }
+        if (mouseIn) {
+            setShowToolbar(true);
+        } else {
+            if (!alwaysShow) {
+                setShowToolbar(false);
+            }
+        }
+    }), [ mouseIn, alwaysShow ]);
+    return React__default["default"].createElement(StyledToolbar, {
+        onMouseMove: () => handleMouseMove,
+        onMouseEnter: () => setMouseIn(true),
+        onMouseLeave: () => setMouseIn(false),
+        position: toolbarPosition
+    }, React__default["default"].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__default["default"].createElement(VerticalToolbarButton, {
+            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 = reactRedux.connect(mapStateToProperties$1, mapDispatchToProperties$1)(ToolbarSpecific);
+
+const ToolbarGeneral = 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 !== null && sittingButtonProperty !== void 0 ? sittingButtonProperty : true;
+    return React__default["default"].createElement(ConnectedToolbarSpecific, {
+        buttons: buttons,
+        handleClick: handleClick,
+        activeType: stateView,
+        position: HorizontalPositions.left,
+        selectors: selectors,
+        context: context
+    }, speakButton && React__default["default"].createElement(VerticalToolbarButton, {
+        atClick: () => {},
+        icon: pluridIconsReact.PluridIconSpeak,
+        active: false,
+        text: "speak",
+        textLeft: iconTextLeft,
+        showText: showNames,
+        scaleIcon: scaleIcons,
+        theme: stateInteractionTheme
+    }), sittingButton && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(VerticalToolbarButton, {
+        atClick: () => dispatchToggleSittingTray(),
+        icon: pluridIconsReact.PluridIconStateShareImage,
+        active: stateSittingTray,
+        text: "sitting",
+        textLeft: iconTextLeft,
+        showText: showNames,
+        scaleIcon: scaleIcons,
+        theme: stateInteractionTheme,
+        last: true
+    }), stateSittingTray && React__default["default"].createElement(ConnectedSittingTray, {
+        selectors: selectors,
+        context: context
+    })));
+};
+
+const mapStateToProperties = (state, ownProperties) => {
+    var _a, _b, _c, _d, _e;
+    return {
+        stateView: (_a = ownProperties.selectors.views) === null || _a === void 0 ? void 0 : _a.getGeneralView(state),
+        stateToolbars: (_c = (_b = ownProperties.selectors.product) === null || _b === void 0 ? void 0 : _b.getProductUI(state)) === null || _c === void 0 ? void 0 : _c.toolbars,
+        stateSittingTray: (_d = ownProperties.selectors.sitting) === null || _d === void 0 ? void 0 : _d.getTray(state),
+        stateInteractionTheme: (_e = ownProperties.selectors.themes) === null || _e === void 0 ? void 0 : _e.getInteractionTheme(state)
+    };
+};
+
+const mapDispatchToProperties = dispatch => ({
+    dispatchToggleSittingTray: () => dispatch(pluridUiStateReact.sitting.actions.toggleSittingTray())
+});
+
+const ConnectedToolbarGeneral = reactRedux.connect(mapStateToProperties, mapDispatchToProperties)(ToolbarGeneral);
+
+const toolbars = {
+    HorizontalToolbarButton: HorizontalToolbarButton,
+    ToolbarControls: ToolbarControls,
+    ToolbarGeneral: ConnectedToolbarGeneral,
+    ToolbarSpecific: ConnectedToolbarSpecific,
+    VerticalToolbarButton: VerticalToolbarButton
+};
+
+const pluridal = {
+    notifications: notifications,
+    sitting: sitting,
+    toolbars: toolbars
+};
+
+exports.pluridal = pluridal;
+
+exports.universal = universal;
+//# sourceMappingURL=index.js.map