@longline/aqua-ui 1.0.211 → 1.0.213
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/controls/TabBar/Tab.d.ts +6 -1
- package/controls/TabBar/Tab.js +4 -4
- package/controls/TabBar/TabBar.d.ts +6 -1
- package/controls/TabBar/TabBar.js +6 -5
- package/controls/TabBar/Underliner.d.ts +2 -0
- package/controls/TabBar/Underliner.js +1 -1
- package/inputs/Editor/Editor.js +4 -4
- package/inputs/Editor/menu/MenuBar.d.ts +1 -1
- package/inputs/Editor/menu/MenuBar.js +1 -1
- package/package.json +1 -1
package/controls/TabBar/Tab.d.ts
CHANGED
|
@@ -17,10 +17,15 @@ interface ITabProps {
|
|
|
17
17
|
*/
|
|
18
18
|
onClick?: () => void;
|
|
19
19
|
/**
|
|
20
|
-
* If true,
|
|
20
|
+
* If true, applies ghost state to `Tab`.
|
|
21
21
|
* @default false
|
|
22
22
|
*/
|
|
23
23
|
ghost?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* A `disabled` `Tab` cannot be clicked.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
disabled?: boolean;
|
|
24
29
|
}
|
|
25
30
|
declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
31
|
export { Tab, ITabProps };
|
package/controls/TabBar/Tab.js
CHANGED
|
@@ -32,11 +32,11 @@ var TabBase = React.forwardRef(function (props, ref) {
|
|
|
32
32
|
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '6px', right: '5px', bottom: '6px', zIndex: 100 } }),
|
|
33
33
|
React.createElement("div", null, props.children));
|
|
34
34
|
});
|
|
35
|
-
var TabStyled = styled(TabBase)(
|
|
35
|
+
var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: table-cell;\n vertical-align: middle;\n text-align: center;\n white-space: nowrap;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: 40px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"], ["\n position: relative;\n display: table-cell;\n vertical-align: middle;\n text-align: center;\n white-space: nowrap;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: 40px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & > *:not(:first-child) {\n border: solid 1px red;\n visibility: hidden;\n } \n "], ["\n & > *:not(:first-child) {\n border: solid 1px red;\n visibility: hidden;\n } \n "]))); });
|
|
36
36
|
var Tab = React.forwardRef(function (_a, ref) {
|
|
37
|
-
var _b = _a.ghost, ghost = _b === void 0 ? false : _b, props = __rest(_a, ["ghost"]);
|
|
38
|
-
return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost }, props));
|
|
37
|
+
var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["ghost", "disabled"]);
|
|
38
|
+
return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost, disabled: disabled }, props));
|
|
39
39
|
});
|
|
40
40
|
Tab.displayName = "TabBar.Tab";
|
|
41
41
|
export { Tab };
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -34,6 +34,11 @@ interface ITabBarProps {
|
|
|
34
34
|
* @default false
|
|
35
35
|
*/
|
|
36
36
|
ghost?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* A `disabled` `TabBar`'s tabs cannot be clicked.
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
disabled?: boolean;
|
|
37
42
|
}
|
|
38
43
|
/**
|
|
39
44
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
@@ -43,7 +48,7 @@ interface ITabBarProps {
|
|
|
43
48
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
44
49
|
*/
|
|
45
50
|
declare const TabBar: {
|
|
46
|
-
({ active, ghost, ...props }: ITabBarProps): React.JSX.Element;
|
|
51
|
+
({ active, ghost, disabled, ...props }: ITabBarProps): React.JSX.Element;
|
|
47
52
|
Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
|
|
48
53
|
displayName: string;
|
|
49
54
|
};
|
|
@@ -199,13 +199,14 @@ var TabBarBase = function (props) {
|
|
|
199
199
|
active: active === idx,
|
|
200
200
|
tabWidth: props.tabWidth,
|
|
201
201
|
ghost: props.ghost,
|
|
202
|
+
disabled: props.disabled,
|
|
202
203
|
onClick: function () { return handleTabClick(idx); }
|
|
203
204
|
});
|
|
204
205
|
}),
|
|
205
|
-
React.createElement(Underliner, { ref: underlinerRef }))));
|
|
206
|
+
React.createElement(Underliner, { disabled: props.disabled || props.ghost, ref: underlinerRef }))));
|
|
206
207
|
};
|
|
207
208
|
var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n height: 40px;\n box-sizing: border-box;\n display: block;\n border-bottom: solid 1px ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n height: 40px;\n box-sizing: border-box;\n display: block;\n border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[80]; });
|
|
208
|
-
var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n"], ["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n"
|
|
209
|
+
var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n }\n"], ["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n }\n"
|
|
209
210
|
/**
|
|
210
211
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
211
212
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -213,7 +214,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
|
|
|
213
214
|
*
|
|
214
215
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
215
216
|
*/
|
|
216
|
-
])));
|
|
217
|
+
])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; });
|
|
217
218
|
/**
|
|
218
219
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
219
220
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -222,8 +223,8 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
|
|
|
222
223
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
223
224
|
*/
|
|
224
225
|
var TabBar = function (_a) {
|
|
225
|
-
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, props = __rest(_a, ["active", "ghost"]);
|
|
226
|
-
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost }, props));
|
|
226
|
+
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, props = __rest(_a, ["active", "ghost", "disabled"]);
|
|
227
|
+
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled }, props));
|
|
227
228
|
};
|
|
228
229
|
TabBar.Tab = Tab;
|
|
229
230
|
TabBar.displayName = "TabBar";
|
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
interface IUnderlinerProps {
|
|
3
3
|
/** @ignore */
|
|
4
4
|
className?: string;
|
|
5
|
+
/** Is TabBar disabled? */
|
|
6
|
+
disabled?: boolean;
|
|
5
7
|
}
|
|
6
8
|
declare const Underliner: React.ForwardRefExoticComponent<IUnderlinerProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
export { Underliner };
|
|
@@ -21,7 +21,7 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
|
|
|
21
21
|
/**
|
|
22
22
|
* Underliner passes a reference to itself back to its parent.
|
|
23
23
|
*/
|
|
24
|
-
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"], ["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.theme.colors.primary[1]; });
|
|
24
|
+
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"], ["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; });
|
|
25
25
|
var Underliner = React.forwardRef(function (props, ref) {
|
|
26
26
|
return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
|
|
27
27
|
});
|
package/inputs/Editor/Editor.js
CHANGED
|
@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css, keyframes } from 'styled-components';
|
|
29
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
29
30
|
import { useEditor, EditorContent } from '@tiptap/react';
|
|
30
31
|
import StarterKit from '@tiptap/starter-kit';
|
|
31
32
|
import { MarkElement } from './extensions/MarkElement';
|
|
@@ -83,18 +84,17 @@ var EditorBase = function (props) {
|
|
|
83
84
|
}; }, []);
|
|
84
85
|
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
|
|
85
86
|
React.createElement("div", { className: props.className, ref: wrapperRef },
|
|
86
|
-
React.createElement(
|
|
87
|
+
React.createElement(OverlayScrollbarsComponent, { className: "scroller ".concat(fullscreen ? 'fullscreen' : ''), defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } } },
|
|
87
88
|
!props.disabled && !props.ghost &&
|
|
88
89
|
React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, openAIurl: props.openAIurl, assemblyAIurl: props.assemblyAIurl }),
|
|
89
90
|
React.createElement(EditorContent, { editor: editor, ref: setRef })))));
|
|
90
91
|
};
|
|
91
92
|
var pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n opacity: .15;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: .15;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
92
|
-
var
|
|
93
|
-
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"], ["\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"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100%; \n "], ["\n height: 100%; \n "]))); });
|
|
93
|
+
var EditorStyled = styled(EditorBase)(templateObject_3 || (templateObject_3 = __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\n .scroller {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n\n &.fullscreen {\n left: 32px;\n top: 32px;\n right: 32px;\n bottom: 32px;\n } \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 // The 'mark' is used to show a small animated circle inside the last\n // element being rendered from AI input.\n mark {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n color: transparent;\n background-color: ", ";\n animation: ", " 1s infinite alternate ease-in-out;\n vertical-align: middle;\n margin-left: 4px;\n margin-right: 4px;\n }\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\n .scroller {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n\n &.fullscreen {\n left: 32px;\n top: 32px;\n right: 32px;\n bottom: 32px;\n } \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 // The 'mark' is used to show a small animated circle inside the last\n // element being rendered from AI input.\n mark {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n color: transparent;\n background-color: ", ";\n animation: ", " 1s infinite alternate ease-in-out;\n vertical-align: middle;\n margin-left: 4px;\n margin-right: 4px;\n }\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.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]; }, function (p) { return p.theme.colors.primary[1]; }, pulse);
|
|
94
94
|
var Editor = function (_a) {
|
|
95
95
|
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, _h = _a.codeButtons, codeButtons = _h === void 0 ? false : _h, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost", "allowFullscreen", "codeButtons"]);
|
|
96
96
|
return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost, allowFullscreen: allowFullscreen, codeButtons: codeButtons }, props));
|
|
97
97
|
};
|
|
98
98
|
Editor.displayName = 'Editor';
|
|
99
99
|
export { Editor };
|
|
100
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
100
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -9,7 +9,7 @@ interface IProps {
|
|
|
9
9
|
editor: Editor;
|
|
10
10
|
/** Allow fullscreen mode? This will add a toolbar button. */
|
|
11
11
|
allowFullscreen?: boolean;
|
|
12
|
-
/** Is editor currently fullscreen?
|
|
12
|
+
/** Is editor currently fullscreen? */
|
|
13
13
|
fullscreen?: boolean;
|
|
14
14
|
/**
|
|
15
15
|
* If set, adds code and code block buttons to MenuBar.
|
|
@@ -39,7 +39,7 @@ var MenuBarBase = function (props) {
|
|
|
39
39
|
props.allowFullscreen &&
|
|
40
40
|
React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen }))));
|
|
41
41
|
};
|
|
42
|
-
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: sticky;\n left:
|
|
42
|
+
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: sticky;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n border-bottom: solid 1px ", ";\n"], ["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: sticky;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
43
43
|
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 flex-wrap: wrap;\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 flex-wrap: wrap;\n gap: 4px;\n"])));
|
|
44
44
|
export { MenuBar };
|
|
45
45
|
var templateObject_1, templateObject_2;
|