@longline/aqua-ui 1.0.178 → 1.0.180

package/inputs/Editor/Editor.d.ts

@@ -40,14 +40,18 @@ interface IProps {
      * @default false
      */
     ghost?: boolean;
+    /**
+     * If set, allow fullscreen mode (adding a toolbar button).
+     */
+    allowFullscreen?: boolean;
     /**
      * If set, speech recognition will be available (if the browser supports it).
      */
-    speechRecognition?: boolean;
+    allowSpeechRecognition?: boolean;
     /**
      * Listeners are notified whenever the user interacts with the Editor.
      */
     onChange?: (value: any) => void;
 }
-declare const Editor: ({ fluid, error, disabled, transparent, ghost, ...props }: IProps) => React.JSX.Element;
+declare const Editor: ({ fluid, error, disabled, transparent, ghost, allowFullscreen, ...props }: IProps) => React.JSX.Element;
 export { Editor };

package/inputs/Editor/Editor.js

@@ -34,7 +34,10 @@ import { SpeechRecognizer } from './SpeechRecognizer';
 // define your extension array
 var extensions = [StarterKit];
 var EditorBase = function (props) {
-    var _a = React.useState(false), recording = _a[0], setRecording = _a[1];
+    // Ref to wrapper; used for fullscreen mode.
+    var wrapperRef = React.useRef(null);
+    var _a = React.useState(false), fullscreen = _a[0], setFullscreen = _a[1];
+    var _b = React.useState(false), recording = _b[0], setRecording = _b[1];
     // Clicking anywhere will cancel recording.
     var handleMousedown = function (e) {
         e.stopPropagation();
@@ -51,6 +54,21 @@ var EditorBase = function (props) {
     var handleTranscript = function (transcript) {
         editor.commands.insertContent(transcript);
     };
+    var handleFullscreenChange = function () {
+        setFullscreen(document.fullscreenElement != null);
+    };
+    React.useEffect(function () {
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return function () { return document.removeEventListener('fullscreenchange', handleFullscreenChange); };
+    }, []);
+    var handleToggleFullscreen = function () {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            wrapperRef.current.requestFullscreen();
+        }
+    };
     var editor = useEditor({
         extensions: extensions,
         content: props.value,
@@ -61,17 +79,18 @@ var EditorBase = function (props) {
         editor.commands.setContent(props.value, true, { preserveWhitespace: "full" });
     }, [props.value]);
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        !props.disabled && !props.ghost && React.createElement(MenuBar, { editor: editor, speechRecognition: props.speechRecognition, recording: recording, onRecord: function () { return setRecording(!recording); } }),
-        React.createElement("div", { className: props.className },
-            React.createElement(Wrapper, null,
+        React.createElement("div", { className: props.className, ref: wrapperRef },
+            !props.disabled && !props.ghost &&
+                React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, allowSpeechRecognition: props.allowSpeechRecognition, recording: recording, onRecord: function () { return setRecording(!recording); } }),
+            React.createElement(Wrapper, { className: fullscreen ? 'fullscreen' : '' },
                 React.createElement(EditorContent, { editor: editor }),
                 recording && React.createElement(SpeechRecognizer, { onTranscript: handleTranscript })))));
 };
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; });
-var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  \n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"], ["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  \n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"])), function (p) { return p.flex && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 100%; \n  "], ["\n    height: 100%; \n  "]))); }, function (p) { return !p.disabled && !p.ghost && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", " {\n      top: 36px;\n    }\n  "], ["\n    ", " {\n      top: 36px;\n    }\n  "])), Wrapper); });
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; });
+var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"], ["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 100%; \n  "], ["\n    height: 100%; \n  "]))); }, function (p) { return !p.disabled && !p.ghost && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", " {\n      margin-top: 30px;\n    }\n  "], ["\n    ", " {\n      margin-top: 30px;\n    }\n  "])), Wrapper); });
 var Editor = function (_a) {
-    var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost"]);
-    return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost }, props));
+    var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, _g = _a.allowFullscreen, allowFullscreen = _g === void 0 ? false : _g, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost", "allowFullscreen"]);
+    return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost, allowFullscreen: allowFullscreen }, props));
 };
 export { Editor };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/inputs/Editor/buttons/FullscreenButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Editor } from '@tiptap/react';
+interface IProps {
+    editor: Editor;
+    onClick: () => void;
+    fullscreen?: boolean;
+}
+declare const FullscreenButton: (props: IProps) => React.JSX.Element;
+export { FullscreenButton };

package/inputs/Editor/buttons/FullscreenButton.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { MenuButton } from '../menu/MenuButton';
+import { SVG } from '../../../svg';
+var FullscreenButton = function (props) {
+    return (React.createElement(MenuButton, { editor: props.editor, hint: "Fullscreen mode", active: props.fullscreen, onClick: props.onClick, icon: SVG.Icons.Fullscreen }));
+};
+export { FullscreenButton };

package/inputs/Editor/menu/MenuBar.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import { Editor } from '@tiptap/react';
 interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Editor instance */
     editor: Editor;
-    speechRecognition: boolean;
+    /** Allow fullscreen mode? This will add a toolbar button. */
+    allowFullscreen?: boolean;
+    /** Is editor currently fullscreen? This will affect toolbar positioning. */
+    fullscreen?: boolean;
+    /** Fired when fullscreen mode must be toggled. */
+    onToggleFullscreen: () => void;
+    allowSpeechRecognition: boolean;
     recording: boolean;
     onRecord: () => void;
 }
-declare const MenuBar: (props: IProps) => React.JSX.Element;
+declare const MenuBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { MenuBar };

package/inputs/Editor/menu/MenuBar.js

@@ -12,14 +12,15 @@ import { CodeButton } from '../buttons/CodeButton';
 import { OrderedListButton } from '../buttons/OrderedListButton';
 import { BulletListButton } from '../buttons/BulletListButton';
 import { CodeBlockButton } from '../buttons/CodeBlockButton';
+import { FullscreenButton } from '../buttons/FullscreenButton';
 import { RecordButton } from '../buttons/RecordButton';
 import { SpeechRecognizer } from '../SpeechRecognizer';
 import { AudioVisualizer } from '../AudioVisualizer';
-var MenuBar = function (props) {
+var MenuBarBase = function (props) {
     if (!props.editor) {
         return null;
     }
-    return (React.createElement(Bar, null,
+    return (React.createElement("div", { className: props.className },
         React.createElement(Buttons, null,
             React.createElement(BoldButton, { editor: props.editor }),
             React.createElement(ItalicButton, { editor: props.editor }),
@@ -30,13 +31,16 @@ var MenuBar = function (props) {
             React.createElement(MenuSeparator, null),
             React.createElement(CodeButton, { editor: props.editor }),
             React.createElement(CodeBlockButton, { editor: props.editor }),
-            props.speechRecognition && SpeechRecognizer.isAvailable() && React.createElement(React.Fragment, null,
+            props.allowFullscreen && React.createElement(React.Fragment, null,
+                React.createElement(MenuSeparator, null),
+                React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen })),
+            props.allowSpeechRecognition && SpeechRecognizer.isAvailable() && React.createElement(React.Fragment, null,
                 React.createElement(MenuSeparator, null),
                 React.createElement(RecordButton, { editor: props.editor, recording: props.recording, onRecord: props.onRecord })),
             props.recording && React.createElement("div", null,
                 React.createElement(AudioVisualizer, null)))));
 };
-var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  background-color: #fff;\n"], ["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  background-color: #fff;\n"])));
-var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: #f0f0f0;\n  border-radius: 4px;\n  padding: 8px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"], ["\n  background-color: #f0f0f0;\n  border-radius: 4px;\n  padding: 8px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"])));
+var MenuBar = styled(MenuBarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n"], ["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n"])), function (p) { return p.fullscreen ? 32 : 0; }, function (p) { return p.fullscreen ? 32 : 0; });
+var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"], ["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"])));
 export { MenuBar };
 var templateObject_1, templateObject_2;

package/inputs/Editor/menu/MenuButton.js

@@ -16,34 +16,42 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
 import { Icon } from '../../../controls/Icon';
+import { MenuButtonHint } from './MenuButtonHint';
 var MenuButtonBase = function (props) {
     var theme = useTheme();
     var buttonRef = React.useRef(null);
     var hintRef = React.useRef(null);
     var handleMouseEnter = function () {
-        if (hintRef.current && props.editor.isFocused && props.hint && !props.disabled)
-            hintRef.current.style.visibility = "visible";
+        if (hintRef.current && props.hint && !props.disabled)
+            hintRef.current.classList.add('visible');
     };
     var handleMouseLeave = function () {
         if (hintRef.current)
-            hintRef.current.style.visibility = "hidden";
+            hintRef.current.classList.remove('visible');
     };
     var _a = usePopper(buttonRef.current, hintRef.current, {
-        placement: 'top',
+        placement: document.fullscreenElement ? 'bottom' : 'top',
         modifiers: [
             {
                 name: 'offset',
                 options: {
                     offset: [0, 4]
                 },
+            }, {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['bottom']
+                }
             }
         ]
     }), styles = _a.styles, attributes = _a.attributes, update = _a.update;
     return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement(Icon, { color: props.disabled ? theme.colors.neutral[80] : theme.colors.neutral[50], url: props.icon })));
+        React.createElement(Icon, { url: props.icon }),
+        buttonRef.current && createPortal(React.createElement(MenuButtonHint, { keys: props.keys, ref: hintRef, styles: styles, attributes: attributes }, props.hint), buttonRef.current)));
 };
-var MenuButtonStyled = styled(MenuButtonBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[80]; }); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; });
+var MenuButtonStyled = styled(MenuButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[80]; }); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.disabled ? p.theme.colors.neutral[80] : p.theme.colors.neutral[50]; }, function (p) { return !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    svg:hover {\n      fill: ", ";\n    }\n  "], ["\n    svg:hover {\n      fill: ", ";\n    }\n  "])), p.theme.colors.neutral[30]); });
 var MenuButton = function (props) { return React.createElement(MenuButtonStyled, __assign({}, props)); };
 export { MenuButton };
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/inputs/Editor/menu/MenuButtonHint.js

@@ -23,6 +23,6 @@ var MenuButtonHint = React.forwardRef(function (props, ref) {
 });
 var HintBody = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n"], ["\n"])));
 var HintKeys = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  display: flex;\n  gap: 4px;\n"], ["\n  white-space: nowrap;\n  display: flex;\n  gap: 4px;\n"])));
-var Hint = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 100;\n  background-color: ", ";\n  color: ", ";\n  padding: 8px 8px 8px 8px;\n  border-radius: 4px;\n  visibility: hidden;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n"], ["\n  position: absolute;\n  z-index: 100;\n  background-color: ", ";\n  color: ", ";\n  padding: 8px 8px 8px 8px;\n  border-radius: 4px;\n  visibility: hidden;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n"])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; });
+var Hint = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 100;\n  background-color: ", ";\n  color: ", ";\n  padding: 8px 8px 8px 8px;\n  border-radius: 4px;\n  visibility: hidden;\n  opacity: 0;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  transition: opacity 1ms linear;\n\n  &.visible {\n    visibility: visible;\n    opacity: 1;\n    transition: opacity 100ms ease-in-out 1000ms; \n    \n  }\n"], ["\n  position: absolute;\n  z-index: 100;\n  background-color: ", ";\n  color: ", ";\n  padding: 8px 8px 8px 8px;\n  border-radius: 4px;\n  visibility: hidden;\n  opacity: 0;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  transition: opacity 1ms linear;\n\n  &.visible {\n    visibility: visible;\n    opacity: 1;\n    transition: opacity 100ms ease-in-out 1000ms; \n    \n  }\n"])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; });
 export { MenuButtonHint };
 var templateObject_1, templateObject_2, templateObject_3;

package/inputs/Editor/menu/MenuSeparator.js

@@ -16,9 +16,9 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var MenuSeparatorBase = function (props) {
-    return (React.createElement("div", { className: props.className }));
+    return React.createElement("div", { className: props.className });
 };
-var MenuSeparatorStyled = styled(MenuSeparatorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 1px;\n  border-left: solid 1px ", ";\n  margin-left: 2px;\n  margin-right: 2px;  \n"], ["\n  width: 1px;\n  border-left: solid 1px ", ";\n  margin-left: 2px;\n  margin-right: 2px;  \n"])), function (p) { return p.theme.colors.neutral[80]; });
+var MenuSeparatorStyled = styled(MenuSeparatorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 0;\n    bottom: 2px;\n    border-left: solid 1px ", ";\n  }\n"], ["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 0;\n    bottom: 2px;\n    border-left: solid 1px ", ";\n  }\n"])), function (p) { return p.theme.colors.neutral[80]; });
 var MenuSeparator = function (props) { return React.createElement(MenuSeparatorStyled, __assign({}, props)); };
 export { MenuSeparator };
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.178",
+  "version": "1.0.180",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",