datocms-react-ui 0.3.17 → 0.3.21

package/dist/cjs/SidebarPanel/index.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarPanel = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importStar(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+function ChevronDownIcon() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
+        react_1.default.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_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
+        react_1.default.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>;
+ * ```
+ */
+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 = (0, react_1.useState)(startOpen), open = _d[0], setOpen = _d[1];
+    var handleToggle = function () {
+        setOpen(!open);
+    };
+    return (react_1.default.createElement("div", { className: styles_module_css_json_1.default['SidebarPanel'] },
+        title && (react_1.default.createElement("button", { type: "button", className: styles_module_css_json_1.default['SidebarPanel__header'], onClick: handleToggle },
+            react_1.default.createElement("div", { className: styles_module_css_json_1.default['SidebarPanel__header__title'] }, title),
+            react_1.default.createElement("div", { className: styles_module_css_json_1.default['SidebarPanel__header__chevron'] }, open ? react_1.default.createElement(ChevronDownIcon, null) : react_1.default.createElement(ChevronUpIcon, null)))),
+        open && (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['SidebarPanel__content'], (_b = {},
+                _b[styles_module_css_json_1.default['SidebarPanel__content--no-padding']] = noPadding,
+                _b)) }, children))));
+}
+exports.SidebarPanel = SidebarPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AACpC,6CAAmD;AACnD,oFAAyC;AAEzC,SAAS,eAAe;IACtB,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,wCAAM,CAAC,EAAC,yRAAyR,GAAQ,CACrS,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,wCAAM,CAAC,EAAC,8RAA8R,GAAQ,CAC1S,CACP,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAgB,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,IAAA,gBAAQ,EAAC,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,uCAAK,SAAS,EAAE,gCAAC,CAAC,cAAc,CAAC;QAC9B,KAAK,IAAI,CACR,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gCAAC,CAAC,sBAAsB,CAAC,EACpC,OAAO,EAAE,YAAY;YAErB,uCAAK,SAAS,EAAE,gCAAC,CAAC,6BAA6B,CAAC,IAAG,KAAK,CAAO;YAC/D,uCAAK,SAAS,EAAE,gCAAC,CAAC,+BAA+B,CAAC,IAC/C,IAAI,CAAC,CAAC,CAAC,8BAAC,eAAe,OAAG,CAAC,CAAC,CAAC,8BAAC,aAAa,OAAG,CAC3C,CACC,CACV;QACA,IAAI,IAAI,CACP,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,uBAAuB,CAAC;gBAC9C,GAAC,gCAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC;AArCD,oCAqCC"}

package/dist/cjs/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/cjs/Spinner/index.js

@@ -0,0 +1,64 @@
+"use strict";
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./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>;
+ * ```
+ */
+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_1.default.createElement("div", { style: barStyle, className: styles_module_css_json_1.default['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_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {},
+            _b[styles_module_css_json_1.default['Spinner--inline']] = placement === 'inline',
+            _b[styles_module_css_json_1.default['Spinner--centered']] = placement === 'centered',
+            _b)), style: __assign(__assign({}, extraStyle), style) }, bars));
+}
+exports.Spinner = Spinner;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Spinner/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,0DAAoC;AACpC,gDAA0B;AAC1B,oFAAyC;AAQzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAgB,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,uCAAK,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,gCAAC,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,uCACE,SAAS,EAAE,IAAA,oBAAU;YACnB,GAAC,gCAAC,CAAC,iBAAiB,CAAC,IAAG,SAAS,KAAK,QAAQ;YAC9C,GAAC,gCAAC,CAAC,mBAAmB,CAAC,IAAG,SAAS,KAAK,UAAU;gBAClD,EACF,KAAK,wBACA,UAAU,GACV,KAAK,KAGT,IAAI,CACD,CACP,CAAC;AACJ,CAAC;AAtCD,0BAsCC"}

package/dist/cjs/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/cjs/Toolbar/Button/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+function Button(_a) {
+    var children = _a.children, style = _a.style, className = _a.className, onClick = _a.onClick;
+    return (react_1.default.createElement("button", { type: "button", onClick: onClick, className: (0, classnames_1.default)(styles_module_css_json_1.default['Button'], className), style: style }, children));
+}
+exports.Button = Button;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAA2E;AAC3E,oFAAyC;AASzC,SAAgB,MAAM,CAAC,EAKT;QAJZ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,OAAO,aAAA;IAEP,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,oBAAU,EACnB,gCAAC,CAAC,QAAQ,CAAC,EAEX,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AApBD,wBAoBC"}

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+function Stack(_a) {
+    var _b;
+    var children = _a.children, style = _a.style, className = _a.className, stackSize = _a.stackSize;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Stack'], (_b = {},
+            _b[styles_module_css_json_1.default['Stack--s']] = stackSize === 's',
+            _b[styles_module_css_json_1.default['Stack--l']] = stackSize === 'l',
+            _b), className), style: style }, children));
+}
+exports.Stack = Stack;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Stack/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAAwD;AACxD,oFAAyC;AASzC,SAAgB,KAAK,CAAC,EAKT;;QAJX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA;IAET,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,gCAAC,CAAC,OAAO,CAAC;YAER,GAAC,gCAAC,CAAC,UAAU,CAAC,IAAG,SAAS,KAAK,GAAG;YAClC,GAAC,gCAAC,CAAC,UAAU,CAAC,IAAG,SAAS,KAAK,GAAG;iBAEpC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AArBD,sBAqBC"}

package/dist/cjs/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/cjs/Toolbar/Title/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+function Title(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Title'], className), style: style }, children));
+}
+exports.Title = Title;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Title/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAAwD;AACxD,oFAAyC;AAQzC,SAAgB,KAAK,CAAC,EAA0C;QAAxC,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA;IAChD,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAND,sBAMC"}

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

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

package/dist/cjs/Toolbar/Toolbar/index.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * - @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>;
+ * ```
+ */
+function Toolbar(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Toolbar'], className), style: style }, children));
+}
+exports.Toolbar = Toolbar;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Toolbar/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Toolbar/Toolbar/index.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAoC;AACpC,gDAAwD;AACxD,oFAAyC;AAQzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,SAAgB,OAAO,CAAC,EAIT;QAHb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,gCAAC,CAAC,SAAS,CAAC,EAEZ,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAjBD,0BAiBC"}

package/dist/cjs/Toolbar/Toolbar/styles.module.css.json

@@ -0,0 +1 @@
+{ "Toolbar": "_Toolbar_1cwb8_1" }

package/dist/cjs/Toolbar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarStack = exports.ToolbarTitle = exports.ToolbarButton = exports.Toolbar = void 0;
+var Toolbar_1 = require("./Toolbar");
+Object.defineProperty(exports, "Toolbar", { enumerable: true, get: function () { return Toolbar_1.Toolbar; } });
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "ToolbarButton", { enumerable: true, get: function () { return Button_1.Button; } });
+var Title_1 = require("./Title");
+Object.defineProperty(exports, "ToolbarTitle", { enumerable: true, get: function () { return Title_1.Title; } });
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "ToolbarStack", { enumerable: true, get: function () { return Stack_1.Stack; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Toolbar/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAEhB,mCAAmD;AAA1C,uGAAA,MAAM,OAAiB;AAEhC,iCAAgD;AAAvC,qGAAA,KAAK,OAAgB;AAE9B,iCAAgD;AAAvC,qGAAA,KAAK,OAAgB"}

package/dist/cjs/generateStyleFromCtx/index.js

@@ -0,0 +1,32 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyleFromCtx = void 0;
+function camelToDash(str) {
+    if (str != str.toLowerCase()) {
+        str = str.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); });
+    }
+    return str;
+}
+function generateStyleFromCtx(ctx) {
+    return Object.entries(ctx.theme).reduce(function (acc, _a) {
+        var _b;
+        var _c;
+        var k = _a[0], v = _a[1];
+        return __assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b["--" + camelToDash(k + "RgbComponents")] = ((_c = v.match(/rgb\((\d+, \d+, \d+)\)/)) === null || _c === void 0 ? void 0 : _c[1]) || undefined, _b));
+    }, {
+        padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
+    });
+}
+exports.generateStyleFromCtx = generateStyleFromCtx;
+//# sourceMappingURL=index.js.map

package/dist/cjs/generateStyleFromCtx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/generateStyleFromCtx/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,oBAAoB,CAAC,GAAqB;IACxD,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CACrC,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;AACJ,CAAC;AAdD,oDAcC"}

package/dist/cjs/icons.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretUpIcon = exports.CaretDownIcon = exports.SidebarRightArrowIcon = exports.SidebarLeftArrowIcon = exports.BackIcon = void 0;
+var react_1 = __importDefault(require("react"));
+function BackIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 512", width: width, height: height, style: style, className: className },
+        react_1.default.createElement("path", { d: "M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z" })));
+}
+exports.BackIcon = BackIcon;
+function SidebarLeftArrowIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: width, height: height, style: style, className: className },
+        react_1.default.createElement("path", { d: "M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z" })));
+}
+exports.SidebarLeftArrowIcon = SidebarLeftArrowIcon;
+function SidebarRightArrowIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: width, height: height, style: style, className: className },
+        react_1.default.createElement("path", { d: "M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z" })));
+}
+exports.SidebarRightArrowIcon = SidebarRightArrowIcon;
+function CaretDownIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: width, height: height, style: style, className: className },
+        react_1.default.createElement("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })));
+}
+exports.CaretDownIcon = CaretDownIcon;
+function CaretUpIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '1em' : _b, _c = _a.height, height = _c === void 0 ? '1em' : _c, style = _a.style, className = _a.className;
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: width, height: height, style: style, className: className },
+        react_1.default.createElement("path", { d: "M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" })));
+}
+exports.CaretUpIcon = CaretUpIcon;
+//# sourceMappingURL=icons.js.map

package/dist/cjs/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA6C;AAS7C,SAAgB,QAAQ,CAAC,EAKb;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,+QAA+Q,GAAQ,CAC3R,CACP,CAAC;AACJ,CAAC;AAlBD,4BAkBC;AAED,SAAgB,oBAAoB,CAAC,EAKzB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,yUAAyU,GAAQ,CACrV,CACP,CAAC;AACJ,CAAC;AAlBD,oDAkBC;AAED,SAAgB,qBAAqB,CAAC,EAK1B;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,4UAA4U,GAAQ,CACxV,CACP,CAAC;AACJ,CAAC;AAlBD,sDAkBC;AAED,SAAgB,aAAa,CAAC,EAKlB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,yHAAyH,GAAG,CAChI,CACP,CAAC;AACJ,CAAC;AAlBD,sCAkBC;AAED,SAAgB,WAAW,CAAC,EAKhB;QAJV,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAET,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS;QAEpB,wCAAM,CAAC,EAAC,kKAAkK,GAAG,CACzK,CACP,CAAC;AACJ,CAAC;AAlBD,kCAkBC"}

package/dist/cjs/index.js

@@ -25,4 +25,10 @@ __exportStar(require("./ContextInspector"), exports);
 __exportStar(require("./Section"), exports);
 __exportStar(require("./SelectInput"), exports);
 __exportStar(require("./SelectField"), exports);
+__exportStar(require("./ButtonGroup"), exports);
+__exportStar(require("./Toolbar"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./SidebarPanel"), exports);
+__exportStar(require("./Dropdown"), exports);
+__exportStar(require("./icons"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC;AACnC,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC;AACnC,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,gDAA8B;AAC9B,4CAA0B;AAC1B,4CAA0B;AAC1B,iDAA+B;AAC/B,6CAA2B;AAC3B,0CAAwB"}

package/dist/cjs/mergeRefs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = void 0;
+var mergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (element) {
+        return refs.forEach(function (ref) {
+            if (typeof ref === 'function')
+                ref(element);
+            else if (ref && typeof ref === 'object')
+                ref.current = element;
+        });
+    };
+};
+exports.mergeRefs = mergeRefs;
+//# sourceMappingURL=index.js.map

package/dist/cjs/mergeRefs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/mergeRefs/index.ts"],"names":[],"mappings":";;;AAAO,IAAM,SAAS,GAAG;IACvB,cAAuB;SAAvB,UAAuB,EAAvB,qBAAuB,EAAvB,IAAuB;QAAvB,yBAAuB;;IACE,OAAA,UAAC,OAAU;QACpC,OAAA,IAAI,CAAC,OAAO,CAAC,UAAC,GAAG;YACf,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC;iBACvC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;gBACpC,GAAiC,CAAC,OAAO,GAAG,OAAO,CAAC;QACzD,CAAC,CAAC;IAJF,CAIE;AALuB,CAKvB,CAAC;AAPQ,QAAA,SAAS,aAOjB"}

package/dist/cjs/useClickOutside/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useClickOutside(handler) {
+    var ref = (0, react_1.useRef)(null);
+    var handleClick = (0, react_1.useCallback)(function (event) {
+        event.target;
+        if (!ref.current || ref.current.contains(event.target)) {
+            return;
+        }
+        handler(event);
+    }, [handler]);
+    (0, react_1.useEffect)(function () {
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('touchstart', handleClick);
+        return function () {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('touchstart', handleClick);
+        };
+    }, [handleClick]);
+    return ref;
+}
+exports.default = useClickOutside;
+//# sourceMappingURL=index.js.map

package/dist/cjs/useClickOutside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useClickOutside/index.ts"],"names":[],"mappings":";;AAAA,+BAAuD;AAEvD,SAAwB,eAAe,CACrC,OAAiD;IAEjD,IAAM,GAAG,GAAG,IAAA,cAAM,EAAI,IAAI,CAAC,CAAC;IAE5B,IAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,UAAC,KAA8B;QAC7B,KAAK,CAAC,MAAM,CAAC;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAErD,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,GAAG,CAAC;AACb,CAAC;AA3BD,kCA2BC"}