datocms-react-ui 0.3.15 → 0.3.20

package/dist/esm/Dropdown/Option.js

@@ -0,0 +1,74 @@
+import classNames from 'classnames';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCtx } from '..';
+import { DropdownContext } from './DropdownContext';
+import { MenuContext } from './MenuContext';
+import { OptionAction } from './OptionAction';
+import s from './styles.module.css.json';
+export var Option = function (_a) {
+    var _b;
+    var onClick = _a.onClick, to = _a.to, active = _a.active, red = _a.red, valid = _a.valid, invalid = _a.invalid, children = _a.children, disabled = _a.disabled, closeMenuOnClick = _a.closeMenuOnClick;
+    var ctx = useCtx();
+    var id = useMemo(function () { return new Date().getTime().toString(36); }, []);
+    var _c = useContext(MenuContext), searchTerm = _c.searchTerm, addOption = _c.addOption, setClickHandlerForOption = _c.setClickHandlerForOption;
+    var childrenArray = React.Children.toArray(children);
+    var buttons = childrenArray.filter(function (child) {
+        return typeof child === 'object' &&
+            'type' in child &&
+            child.type === OptionAction;
+    });
+    var notButtons = childrenArray.filter(function (child) {
+        return typeof child !== 'object' ||
+            !('type' in child) ||
+            child.type !== OptionAction;
+    });
+    var contentRef = useRef(null);
+    var _d = useState(''), innerText = _d[0], setInnerText = _d[1];
+    useEffect(function () {
+        if (contentRef.current) {
+            setInnerText(contentRef.current.innerText);
+        }
+    });
+    var closeMenu = useContext(DropdownContext).closeMenu;
+    var handleClick = useCallback(function (e) {
+        if (!onClick && !to) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        if (closeMenuOnClick !== null && closeMenuOnClick !== void 0 ? closeMenuOnClick : true) {
+            closeMenu();
+        }
+        if (to) {
+            ctx === null || ctx === void 0 ? void 0 : ctx.navigateTo(to);
+        }
+        if (onClick) {
+            onClick(e);
+        }
+    }, [closeMenuOnClick, closeMenu, onClick, to]);
+    useEffect(function () {
+        return addOption(id);
+    }, [id]);
+    useEffect(function () {
+        return setClickHandlerForOption(id, handleClick);
+    }, [id, handleClick, setClickHandlerForOption]);
+    if (innerText &&
+        searchTerm &&
+        !innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
+        return null;
+    }
+    var content = (React.createElement(React.Fragment, null,
+        React.createElement("button", { type: "button", className: s['Dropdown__menu__option__content'], ref: contentRef, onClick: handleClick }, notButtons),
+        buttons.length > 0 && (React.createElement("div", { className: s['Dropdown__menu__option__icons'] }, buttons))));
+    return (React.createElement("div", { className: classNames(s['Dropdown__menu__option'], (_b = {},
+            _b[s['Dropdown__menu__option--is-active']] = active,
+            _b[s['Dropdown__menu__option--is-disabled']] = disabled,
+            _b[s['Dropdown__menu__option--is-valid']] = valid,
+            _b[s['Dropdown__menu__option--is-invalid']] = invalid,
+            _b[s['Dropdown__menu__option--is-dangerous']] = red,
+            _b)), "data-option-id": id }, content));
+};
+//# sourceMappingURL=Option.js.map

package/dist/esm/Dropdown/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/Dropdown/Option.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Dropdown/OptionAction.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export declare type OptionActionProps = {
+    icon: ReactNode;
+    red?: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    closeMenuOnClick?: boolean;
+};
+export declare const OptionAction: {
+    ({ icon, red, onClick, closeMenuOnClick, }: OptionActionProps): JSX.Element;
+    displayName: string;
+};

package/dist/esm/Dropdown/OptionAction.js

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import { DropdownContext } from './DropdownContext';
+import s from './styles.module.css.json';
+export var OptionAction = function (_a) {
+    var icon = _a.icon, red = _a.red, onClick = _a.onClick, closeMenuOnClick = _a.closeMenuOnClick;
+    return (React.createElement(DropdownContext.Consumer, null, function (context) {
+        var _a;
+        return (React.createElement("button", { type: "button", className: classNames(s['Dropdown__menu__option__icon'], (_a = {},
+                _a[s['Dropdown__menu__option__icon--delete']] = red,
+                _a)), onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (closeMenuOnClick !== null && closeMenuOnClick !== void 0 ? closeMenuOnClick : true) {
+                    context.closeMenu();
+                }
+                onClick(e);
+            } }, icon));
+    }));
+};
+OptionAction.displayName = 'DropdownOptionAction';
+//# sourceMappingURL=OptionAction.js.map

package/dist/esm/Dropdown/OptionAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionAction.js","sourceRoot":"","sources":["../../../src/Dropdown/OptionAction.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AASzC,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAKT;QAJlB,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,OAAO,aAAA,EACP,gBAAgB,sBAAA;IACoB,OAAA,CACpC,oBAAC,eAAe,CAAC,QAAQ,QACtB,UAAC,OAAO;;QAAK,OAAA,CACZ,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,8BAA8B,CAAC;gBACrD,GAAC,CAAC,CAAC,sCAAsC,CAAC,IAAG,GAAG;oBAChD,EACF,OAAO,EAAE,UAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBAEpB,IAAI,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,IAAI,EAAE;oBAC5B,OAAO,CAAC,SAAS,EAAE,CAAC;iBACrB;gBACD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,CAAC,IAEA,IAAI,CACE,CACV;IAlBa,CAkBb,CACwB,CAC5B;AAtBqC,CAsBrC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,sBAAsB,CAAC"}

package/dist/esm/Dropdown/Portal.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare function Portal({ children, }: {
+    children: ReactNode;
+}): React.ReactPortal | null;

package/dist/esm/Dropdown/Portal.js

@@ -0,0 +1,27 @@
+import ReactDOM from 'react-dom';
+import React, { useEffect, useRef } from 'react';
+import { useCtx } from '..';
+import s from '../Canvas/styles.module.css.json';
+import { generateStyleFromCtx } from '../generateStyleFromCtx';
+import classNames from 'classnames';
+export function Portal(_a) {
+    var children = _a.children;
+    var ctx = useCtx();
+    var elRef = useRef(typeof document === 'undefined' ? null : document.createElement('div'));
+    useEffect(function () {
+        if (!elRef.current || !document.body) {
+            return;
+        }
+        document.body.appendChild(elRef.current);
+        return function () {
+            if (elRef.current) {
+                document.body.removeChild(elRef.current);
+            }
+        };
+    }, []);
+    if (!elRef.current) {
+        return null;
+    }
+    return ReactDOM.createPortal(React.createElement("div", { className: classNames(s['themeVariables'], s['canvas']), style: generateStyleFromCtx(ctx) }, children), elRef.current);
+}
+//# sourceMappingURL=Portal.js.map

package/dist/esm/Dropdown/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/Dropdown/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,CAAC,MAAM,kCAAkC,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,UAAU,MAAM,CAAC,EAItB;QAHC,QAAQ,cAAA;IAIR,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,IAAM,KAAK,GAAG,MAAM,CAClB,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CACvE,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YACpC,OAAO;SACR;QAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEzC,OAAO;YACL,IAAI,KAAK,CAAC,OAAO,EAAE;gBACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,QAAQ,CAAC,YAAY,CAC1B,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACvD,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,EACN,KAAK,CAAC,OAAO,CACd,CAAC;AACJ,CAAC"}

package/dist/esm/Dropdown/Separator.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Separator: () => JSX.Element | null;

package/dist/esm/Dropdown/Separator.js

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { MenuContext } from './MenuContext';
+import s from './styles.module.css.json';
+export var Separator = function () {
+    var searchTerm = useContext(MenuContext).searchTerm;
+    if (searchTerm) {
+        return null;
+    }
+    return React.createElement("div", { className: s['Dropdown__menu__separator'] });
+};
+//# sourceMappingURL=Separator.js.map

package/dist/esm/Dropdown/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/Dropdown/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAEzC,MAAM,CAAC,IAAM,SAAS,GAAG;IACf,IAAA,UAAU,GAAK,UAAU,CAAC,WAAW,CAAC,WAA5B,CAA6B;IAE/C,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IAED,OAAO,6BAAK,SAAS,EAAE,CAAC,CAAC,2BAA2B,CAAC,GAAI,CAAC;AAC5D,CAAC,CAAC"}

package/dist/esm/Dropdown/Text.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare type TextProps = {
+    children: React.ReactNode;
+};
+export declare function Text({ children }: TextProps): JSX.Element;

package/dist/esm/Dropdown/Text.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import s from './styles.module.css.json';
+export function Text(_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: s['Dropdown__menu__text'] }, children);
+}
+//# sourceMappingURL=Text.js.map

package/dist/esm/Dropdown/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/Dropdown/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAIzC,MAAM,UAAU,IAAI,CAAC,EAAuB;QAArB,QAAQ,cAAA;IAC7B,OAAO,6BAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,IAAG,QAAQ,CAAO,CAAC;AACrE,CAAC"}

package/dist/esm/Dropdown/index.d.ts

@@ -0,0 +1,9 @@
+import { Dropdown, DropdownProps } from './Dropdown';
+import { Group, GroupProps } from './Group';
+import { Menu, MenuProps } from './Menu';
+import { Option, OptionProps } from './Option';
+import { OptionAction, OptionActionProps } from './OptionAction';
+import { Separator } from './Separator';
+import { Text, TextProps } from './Text';
+export { Dropdown, Group as DropdownGroup, Menu as DropdownMenu, Option as DropdownOption, OptionAction as DropdownOptionAction, Separator as DropdownSeparator, Text as DropdownText, };
+export type { DropdownProps, GroupProps as DropdownGroupProps, MenuProps as DropdownMenuProps, OptionProps as DropdownOptionProps, OptionActionProps as DropdownOptionActionProps, TextProps as DropdownTextProps, };

package/dist/esm/Dropdown/index.js

@@ -0,0 +1,9 @@
+import { Dropdown } from './Dropdown';
+import { Group } from './Group';
+import { Menu } from './Menu';
+import { Option } from './Option';
+import { OptionAction } from './OptionAction';
+import { Separator } from './Separator';
+import { Text } from './Text';
+export { Dropdown, Group as DropdownGroup, Menu as DropdownMenu, Option as DropdownOption, OptionAction as DropdownOptionAction, Separator as DropdownSeparator, Text as DropdownText, };
+//# sourceMappingURL=index.js.map

package/dist/esm/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Dropdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AAEzC,OAAO,EACL,QAAQ,EACR,KAAK,IAAI,aAAa,EACtB,IAAI,IAAI,YAAY,EACpB,MAAM,IAAI,cAAc,EACxB,YAAY,IAAI,oBAAoB,EACpC,SAAS,IAAI,iBAAiB,EAC9B,IAAI,IAAI,YAAY,GACrB,CAAC"}

package/dist/esm/Dropdown/styles.module.css.json

@@ -0,0 +1 @@
+{ "Dropdown": "_Dropdown_e5jms_1", "Dropdown__spacer": "_Dropdown__spacer_e5jms_5", "Dropdown__menu__search": "_Dropdown__menu__search_e5jms_11", "Dropdown__menu__search__input": "_Dropdown__menu__search__input_e5jms_16", "Dropdown__menu-container": "_Dropdown__menu-container_e5jms_45", "Dropdown__menu": "_Dropdown__menu_e5jms_11", "Dropdown__menu__inner": "_Dropdown__menu__inner_e5jms_61", "Dropdown__menu--fullscreen": "_Dropdown__menu--fullscreen_e5jms_65", "FullscreenDropdown__appear": "_FullscreenDropdown__appear_e5jms_1", "Dropdown__menu__close": "_Dropdown__menu__close_e5jms_87", "Dropdown__menu__group__title": "_Dropdown__menu__group__title_e5jms_99", "Dropdown__menu__group__content": "_Dropdown__menu__group__content_e5jms_107", "Dropdown__menu__text": "_Dropdown__menu__text_e5jms_111", "Dropdown__menu__option": "_Dropdown__menu__option_e5jms_120", "Dropdown__menu__option--is-selected": "_Dropdown__menu__option--is-selected_e5jms_143", "Dropdown__menu__option--is-disabled": "_Dropdown__menu__option--is-disabled_e5jms_147", "Dropdown__menu__option__content": "_Dropdown__menu__option__content_e5jms_150", "Dropdown__menu__option--is-dangerous": "_Dropdown__menu__option--is-dangerous_e5jms_155", "Dropdown__menu__option--is-active": "_Dropdown__menu__option--is-active_e5jms_173", "Dropdown__menu__option--is-valid": "_Dropdown__menu__option--is-valid_e5jms_182", "Dropdown__menu__option--is-invalid": "_Dropdown__menu__option--is-invalid_e5jms_186", "Dropdown__menu__option__icons": "_Dropdown__menu__option__icons_e5jms_228", "Dropdown__menu__option__icon": "_Dropdown__menu__option__icon_e5jms_228", "Dropdown__menu__option__icon--delete": "_Dropdown__menu__option__icon--delete_e5jms_275", "Dropdown__menu__separator": "_Dropdown__menu__separator_e5jms_282", "Dropdown__menu__mobile-container": "_Dropdown__menu__mobile-container_e5jms_292", "Modal__backdrop": "_Modal__backdrop_e5jms_306", "Modal__appear": "_Modal__appear_e5jms_1" }

package/dist/esm/SidebarPanel/index.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+export declare type SidebarPanelProps = {
+    title?: ReactNode;
+    startOpen?: boolean;
+    children: ReactNode;
+    noPadding?: boolean;
+};
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex' }}>
+ *     <div
+ *       style={{
+ *         width: '300px',
+ *         borderRight: '1px solid var(--border-color)',
+ *       }}
+ *     >
+ *       <SidebarPanel title="Default">Content</SidebarPanel>
+ *       <SidebarPanel title="Start open" startOpen>
+ *         Content
+ *       </SidebarPanel>
+ *       <SidebarPanel title="Content with no padding" noPadding>
+ *         Content
+ *       </SidebarPanel>
+ *     </div>
+ *     <div
+ *       style={{
+ *         flex: '1',
+ *         display: 'flex',
+ *         justifyContent: 'center',
+ *         alignItems: 'center',
+ *         background: 'var(--light-bg-color)',
+ *       }}
+ *     >
+ *       Main content
+ *     </div>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function SidebarPanel({ startOpen, title, children, noPadding, }: SidebarPanelProps): JSX.Element;

package/dist/esm/SidebarPanel/index.js

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import s from './styles.module.css.json';
+function ChevronDownIcon() {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
+        React.createElement("path", { d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
+}
+function ChevronUpIcon() {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
+        React.createElement("path", { d: "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" })));
+}
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex' }}>
+ *     <div
+ *       style={{
+ *         width: '300px',
+ *         borderRight: '1px solid var(--border-color)',
+ *       }}
+ *     >
+ *       <SidebarPanel title="Default">Content</SidebarPanel>
+ *       <SidebarPanel title="Start open" startOpen>
+ *         Content
+ *       </SidebarPanel>
+ *       <SidebarPanel title="Content with no padding" noPadding>
+ *         Content
+ *       </SidebarPanel>
+ *     </div>
+ *     <div
+ *       style={{
+ *         flex: '1',
+ *         display: 'flex',
+ *         justifyContent: 'center',
+ *         alignItems: 'center',
+ *         background: 'var(--light-bg-color)',
+ *       }}
+ *     >
+ *       Main content
+ *     </div>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function SidebarPanel(_a) {
+    var _b;
+    var _c = _a.startOpen, startOpen = _c === void 0 ? false : _c, title = _a.title, children = _a.children, noPadding = _a.noPadding;
+    var _d = useState(startOpen), open = _d[0], setOpen = _d[1];
+    var handleToggle = function () {
+        setOpen(!open);
+    };
+    return (React.createElement("div", { className: s['SidebarPanel'] },
+        title && (React.createElement("button", { type: "button", className: s['SidebarPanel__header'], onClick: handleToggle },
+            React.createElement("div", { className: s['SidebarPanel__header__title'] }, title),
+            React.createElement("div", { className: s['SidebarPanel__header__chevron'] }, open ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronUpIcon, null)))),
+        open && (React.createElement("div", { className: classNames(s['SidebarPanel__content'], (_b = {},
+                _b[s['SidebarPanel__content--no-padding']] = noPadding,
+                _b)) }, children))));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/SidebarPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAEzC,SAAS,eAAe;IACtB,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,8BAAM,CAAC,EAAC,yRAAyR,GAAQ,CACrS,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,8BAAM,CAAC,EAAC,8RAA8R,GAAQ,CAC1S,CACP,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,QAAQ,CAAC,SAAS,CAAC,EAApC,IAAI,QAAA,EAAE,OAAO,QAAuB,CAAC;IAE5C,IAAM,YAAY,GAAG;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;QAC9B,KAAK,IAAI,CACR,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,EACpC,OAAO,EAAE,YAAY;YAErB,6BAAK,SAAS,EAAE,CAAC,CAAC,6BAA6B,CAAC,IAAG,KAAK,CAAO;YAC/D,6BAAK,SAAS,EAAE,CAAC,CAAC,+BAA+B,CAAC,IAC/C,IAAI,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC,CAAC,CAAC,oBAAC,aAAa,OAAG,CAC3C,CACC,CACV;QACA,IAAI,IAAI,CACP,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC;gBAC9C,GAAC,CAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/SidebarPanel/styles.module.css.json

@@ -0,0 +1 @@
+{ "SidebarPanel": "_SidebarPanel_4uwco_1", "SidebarPanel__header": "_SidebarPanel__header_4uwco_5", "SidebarPanel__header__title": "_SidebarPanel__header__title_4uwco_30", "SidebarPanel__header__chevron": "_SidebarPanel__header__chevron_4uwco_36", "SidebarPanel__content": "_SidebarPanel__content_4uwco_42", "SidebarPanel__content--no-padding": "_SidebarPanel__content--no-padding_4uwco_47" }

package/dist/esm/Spinner/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+declare type SpinnerProps = {
+    size?: number;
+    placement?: 'inline' | 'centered';
+    style?: React.CSSProperties;
+};
+/**
+ * @example Inline spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   Foo bar <Spinner size={24} />
+ * </Canvas>;
+ * ```
+ *
+ * @example Centered spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: '200px', position: 'relative' }}>
+ *     <Spinner size={48} placement="centered" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function Spinner({ size, placement, style: extraStyle, }: SpinnerProps): JSX.Element;
+export {};

package/dist/esm/Spinner/index.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+/**
+ * @example Inline spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   Foo bar <Spinner size={24} />
+ * </Canvas>;
+ * ```
+ *
+ * @example Centered spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: '200px', position: 'relative' }}>
+ *     <Spinner size={48} placement="centered" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function Spinner(_a) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 32 : _c, _d = _a.placement, placement = _d === void 0 ? 'inline' : _d, _e = _a.style, extraStyle = _e === void 0 ? {} : _e;
+    var bars = [];
+    for (var i = 0; i < 12; i += 1) {
+        var barStyle = {};
+        barStyle.animationDelay = (i - 12) / 10 + "s";
+        barStyle.transform = "rotate(" + i * 30 + "deg) translate(146%)";
+        bars.push(React.createElement("div", { style: barStyle, className: s['Spinner__bar'], key: i }));
+    }
+    var style = {
+        width: size * 0.5,
+        height: size * 0.5,
+    };
+    if (placement === 'inline') {
+        style.marginLeft = size * 0.5;
+        style.transform = 'translateY(33%)';
+    }
+    return (React.createElement("div", { className: classNames((_b = {},
+            _b[s['Spinner--inline']] = placement === 'inline',
+            _b[s['Spinner--centered']] = placement === 'centered',
+            _b)), style: __assign(__assign({}, extraStyle), style) }, bars));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Spinner/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAQzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,OAAO,CAAC,EAIT;;QAHb,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAoB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EACpB,aAAsB,EAAf,UAAU,mBAAG,EAAE,KAAA;IAEtB,IAAM,IAAI,GAAsB,EAAE,CAAC;IAEnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE;QAC9B,IAAM,QAAQ,GAAwB,EAAE,CAAC;QACzC,QAAQ,CAAC,cAAc,GAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAG,CAAC;QAC9C,QAAQ,CAAC,SAAS,GAAG,YAAU,CAAC,GAAG,EAAE,yBAAsB,CAAC;QAC5D,IAAI,CAAC,IAAI,CAAC,6BAAK,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,GAAI,CAAC,CAAC;KAC3E;IAED,IAAM,KAAK,GAAwB;QACjC,KAAK,EAAE,IAAI,GAAG,GAAG;QACjB,MAAM,EAAE,IAAI,GAAG,GAAG;KACnB,CAAC;IAEF,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,KAAK,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,CAAC;QAC9B,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;KACrC;IAED,OAAO,CACL,6BACE,SAAS,EAAE,UAAU;YACnB,GAAC,CAAC,CAAC,iBAAiB,CAAC,IAAG,SAAS,KAAK,QAAQ;YAC9C,GAAC,CAAC,CAAC,mBAAmB,CAAC,IAAG,SAAS,KAAK,UAAU;gBAClD,EACF,KAAK,wBACA,UAAU,GACV,KAAK,KAGT,IAAI,CACD,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/Spinner/styles.module.css.json

@@ -0,0 +1 @@
+{ "Spinner--inline": "_Spinner--inline_oumod_1", "Spinner--centered": "_Spinner--centered_oumod_7", "Spinner__bar": "_Spinner__bar_oumod_13", "Spinner__spin": "_Spinner__spin_oumod_1" }

package/dist/esm/Toolbar/Button/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+export declare type ButtonProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: MouseEventHandler;
+};
+export declare function Button({ children, style, className, onClick, }: ButtonProps): JSX.Element;

package/dist/esm/Toolbar/Button/index.js

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+export function Button(_a) {
+    var children = _a.children, style = _a.style, className = _a.className, onClick = _a.onClick;
+    return (React.createElement("button", { type: "button", onClick: onClick, className: classNames(s['Button'], className), style: style }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/Toolbar/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,CAAC,MAAM,0BAA0B,CAAC;AASzC,MAAM,UAAU,MAAM,CAAC,EAKT;QAJZ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,OAAO,aAAA;IAEP,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CACnB,CAAC,CAAC,QAAQ,CAAC,EAEX,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACF,CACV,CAAC;AACJ,CAAC"}

package/dist/esm/Toolbar/Button/styles.module.css.json

@@ -0,0 +1 @@
+{ "Button": "_Button_fy6g6_1" }

package/dist/esm/Toolbar/Stack/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type StackProps = {
+    children?: ReactNode;
+    className?: string;
+    stackSize?: 's' | 'm' | 'l';
+    style?: CSSProperties;
+};
+export declare function Stack({ children, style, className, stackSize, }: StackProps): JSX.Element;

package/dist/esm/Toolbar/Stack/index.js

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+export function Stack(_a) {
+    var _b;
+    var children = _a.children, style = _a.style, className = _a.className, stackSize = _a.stackSize;
+    return (React.createElement("div", { className: classNames(s['Stack'], (_b = {},
+            _b[s['Stack--s']] = stackSize === 's',
+            _b[s['Stack--l']] = stackSize === 'l',
+            _b), className), style: style }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/Toolbar/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AASzC,MAAM,UAAU,KAAK,CAAC,EAKT;;QAJX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA;IAET,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,CAAC,CAAC,OAAO,CAAC;YAER,GAAC,CAAC,CAAC,UAAU,CAAC,IAAG,SAAS,KAAK,GAAG;YAClC,GAAC,CAAC,CAAC,UAAU,CAAC,IAAG,SAAS,KAAK,GAAG;iBAEpC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/Toolbar/Stack/styles.module.css.json

@@ -0,0 +1 @@
+{ "Stack": "_Stack_1nnzo_1", "Stack--s": "_Stack--s_1nnzo_10", "Stack--l": "_Stack--l_1nnzo_15" }

package/dist/esm/Toolbar/Title/index.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type TitleProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Title({ children, style, className }: TitleProps): JSX.Element;

package/dist/esm/Toolbar/Title/index.js

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+export function Title(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (React.createElement("div", { className: classNames(s['Title'], className), style: style }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/Toolbar/Title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAQzC,MAAM,UAAU,KAAK,CAAC,EAA0C;QAAxC,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA;IAChD,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/Toolbar/Title/styles.module.css.json

@@ -0,0 +1 @@
+{ "Title": "_Title_1dx5n_1" }

package/dist/esm/Toolbar/Toolbar/index.d.ts

@@ -0,0 +1,91 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type ToolbarProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * - @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Buttons and actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarButton>
+ *       <BackIcon />
+ *     </ToolbarButton>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <Button buttonType="primary">Action</Button>
+ *     </ToolbarStack>
+ *     <ToolbarButton>
+ *       <SidebarLeftArrowIcon />
+ *     </ToolbarButton>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example With button group
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <ButtonGroup>
+ *         <ButtonGroupButton>First</ButtonGroupButton>
+ *         <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *         <ButtonGroupButton>Third</ButtonGroupButton>
+ *       </ButtonGroup>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function Toolbar({ children, style, className, }: ToolbarProps): JSX.Element;