datocms-react-ui 0.3.15 → 0.3.20

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"}

package/dist/cjs/useMediaQuery/index.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementLayout = exports.MediaQuery = exports.useMediaQuery = void 0;
+var react_1 = __importDefault(require("react"));
+var list = {};
+function useMediaQuery(media) {
+    var mediaQueryList = react_1.default.useMemo(function () {
+        // We have an existing mediaQueryList for media.
+        if (list[media]) {
+            return list[media].mql;
+        }
+        if (typeof window !== 'undefined') {
+            return matchMedia(media);
+        }
+        // Server: use a fallback.
+        return { matches: true, media: media };
+    }, [list, media]);
+    // Since the mediaQueryList is shared we use state to trigger re-renders.
+    // This is done with update({}) (a new object instance will force a re-rendering).
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _a = react_1.default.useState({}), _ = _a[0], update = _a[1];
+    react_1.default.useLayoutEffect(function () {
+        if (list[media]) {
+            list[media].notifiers.push(update);
+        }
+        else {
+            list[media] = {
+                mql: mediaQueryList,
+                notifiers: [update],
+                listener: function (mql) {
+                    var match = list[mql.media];
+                    if (match) {
+                        match.notifiers.forEach(function (updateFn) { return updateFn({}); });
+                    }
+                },
+            };
+            list[media].mql.addEventListener('change', list[media].listener);
+        }
+        return function () {
+            var notifierIndex = list[media].notifiers.indexOf(update);
+            if (notifierIndex > -1) {
+                // Remove `update`.
+                list[media].notifiers.splice(notifierIndex, 1);
+            }
+            if (list[media].notifiers.length === 0) {
+                list[media].mql.removeEventListener('change', list[media].listener);
+                delete list[media];
+            }
+        };
+    }, [list, media, mediaQueryList]);
+    return mediaQueryList;
+}
+exports.useMediaQuery = useMediaQuery;
+function MediaQuery(_a) {
+    var media = _a.media, children = _a.children;
+    var mql = useMediaQuery(media);
+    return typeof children === 'function' ? children(mql) : null;
+}
+exports.MediaQuery = MediaQuery;
+var DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler';
+var supportsBorderBox = (function () {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    var e = document.body.appendChild(document.createElement('div'));
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    var observer = new ResizeObserver(function () { });
+    try {
+        observer.observe(e, { box: 'border-box' });
+        observer.unobserve(e);
+        return false;
+    }
+    catch (error) {
+        return true;
+    }
+    finally {
+        document.body.removeChild(e);
+    }
+})();
+var resizeObserver = null;
+function getResizeObserver() {
+    if (resizeObserver) {
+        return resizeObserver;
+    }
+    if (typeof ResizeObserver === 'undefined') {
+        return;
+    }
+    resizeObserver = new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+            var node = entry.target;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+            if (typeof onLayout !== 'function') {
+                return;
+            }
+            if (supportsBorderBox && entry.borderBoxSize) {
+                var boxSize_1 = entry.borderBoxSize[0] || entry.borderBoxSize;
+                onLayout(function (prevRect) {
+                    if (prevRect.width === boxSize_1.inlineSize &&
+                        prevRect.height === boxSize_1.blockSize) {
+                        return prevRect;
+                    }
+                    return new DOMRect(0, 0, boxSize_1.inlineSize, boxSize_1.blockSize);
+                });
+                return;
+            }
+            var elRect = entry.target.getBoundingClientRect();
+            onLayout(function (prevRect) {
+                if (prevRect.width === elRect.width &&
+                    prevRect.height === elRect.height) {
+                    return prevRect;
+                }
+                return new DOMRect(0, 0, elRect.width, elRect.height);
+            });
+        });
+    });
+    return resizeObserver;
+}
+function useElementLayout(ref) {
+    var observer = getResizeObserver();
+    var _a = react_1.default.useState(new DOMRect()), rect = _a[0], setRect = _a[1];
+    react_1.default.useLayoutEffect(function () {
+        var node = ref.current;
+        if (node) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            node[DOM_LAYOUT_HANDLER_NAME] = setRect;
+        }
+        if (node && observer) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (typeof node[DOM_LAYOUT_HANDLER_NAME] === 'function') {
+                observer.observe(node, supportsBorderBox ? { box: 'border-box' } : undefined);
+            }
+            else {
+                observer.unobserve(node);
+            }
+        }
+        return function () {
+            if (node != null && observer != null) {
+                observer.unobserve(node);
+            }
+        };
+    }, [ref, observer]);
+    return rect;
+}
+exports.useElementLayout = useElementLayout;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1 +1 @@
-{ "button": "_button_ya5s7_1", "disabled": "_disabled_ya5s7_30", "buttonType-muted": "_buttonType-muted_ya5s7_36", "buttonType-primary": "_buttonType-primary_ya5s7_41", "buttonType-negative": "_buttonType-negative_ya5s7_62", "buttonSize-xxs": "_buttonSize-xxs_ya5s7_79", "buttonSize-xs": "_buttonSize-xs_ya5s7_84", "buttonSize-s": "_buttonSize-s_ya5s7_89", "buttonSize-m": "_buttonSize-m_ya5s7_94", "buttonSize-l": "_buttonSize-l_ya5s7_99", "buttonSize-xl": "_buttonSize-xl_ya5s7_104", "fullWidth": "_fullWidth_ya5s7_109", "button__leftIcon": "_button__leftIcon_ya5s7_115", "button__rightIcon": "_button__rightIcon_ya5s7_116" }
+{ "button": "_button_474wk_1", "disabled": "_disabled_474wk_30", "buttonType-muted": "_buttonType-muted_474wk_34", "buttonType-primary": "_buttonType-primary_474wk_50", "buttonType-negative": "_buttonType-negative_474wk_71", "buttonSize-xxs": "_buttonSize-xxs_474wk_88", "buttonSize-xs": "_buttonSize-xs_474wk_93", "buttonSize-s": "_buttonSize-s_474wk_98", "buttonSize-m": "_buttonSize-m_474wk_103", "buttonSize-l": "_buttonSize-l_474wk_108", "buttonSize-xl": "_buttonSize-xl_474wk_113", "fullWidth": "_fullWidth_474wk_118", "button__leftIcon": "_button__leftIcon_474wk_124", "button__rightIcon": "_button__rightIcon_474wk_125" }

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ButtonGroup/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAWzC,MAAM,UAAU,MAAM,CAAC,EAOT;;QANZ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,UAAU,CACnB,CAAC,CAAC,QAAQ,CAAC;YAET,GAAC,CAAC,CAAC,kBAAkB,CAAC,IAAG,QAAQ;YACjC,GAAC,CAAC,CAAC,kBAAkB,CAAC,IAAG,QAAQ;iBAEnC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IAEX,QAAQ,CACF,CACV,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1 @@
+{ "Button": "_Button_1h1w1_1", "Button--s": "_Button--s_1h1w1_32", "Button--disabled": "_Button--disabled_1h1w1_36", "Button--selected": "_Button--selected_1h1w1_45" }

package/dist/esm/ButtonGroup/Group/index.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type GroupProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <ButtonGroup>
+ *     <ButtonGroupButton>First</ButtonGroupButton>
+ *     <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *     <ButtonGroupButton>Third</ButtonGroupButton>
+ *     <ButtonGroupButton disabled>Fourth</ButtonGroupButton>
+ *   </ButtonGroup>
+ * </Canvas>;
+ * ```
+ */
+export declare function Group({ children, style, className }: GroupProps): JSX.Element;

package/dist/esm/ButtonGroup/Group/index.js

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <ButtonGroup>
+ *     <ButtonGroupButton>First</ButtonGroupButton>
+ *     <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *     <ButtonGroupButton>Third</ButtonGroupButton>
+ *     <ButtonGroupButton disabled>Fourth</ButtonGroupButton>
+ *   </ButtonGroup>
+ * </Canvas>;
+ * ```
+ */
+export function Group(_a) {
+    var children = _a.children, style = _a.style, className = _a.className;
+    return (React.createElement("div", { className: classNames(s['Group'], className), style: style }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/ButtonGroup/Group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ButtonGroup/Group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAQzC;;;;;;;;;;;;;GAaG;AACH,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/ButtonGroup/Group/styles.module.css.json

@@ -0,0 +1 @@
+{ "Group": "_Group_10mj4_1" }

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

@@ -0,0 +1,4 @@
+export { Group as ButtonGroup } from './Group';
+export type { GroupProps as ButtonGroupProps } from './Group';
+export { Button as ButtonGroupButton } from './Button';
+export type { ButtonProps as ButtonGroupButtonProps } from './Button';

package/dist/esm/ButtonGroup/index.js

@@ -0,0 +1,3 @@
+export { Group as ButtonGroup } from './Group';
+export { Button as ButtonGroupButton } from './Button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,7 +1,10 @@
-import { ReactNode } from 'react';
-import { RenderProperties } from 'datocms-plugin-sdk';
+import React, { ReactNode } from 'react';
+import { RenderMethods, RenderProperties } from 'datocms-plugin-sdk';
+declare type BaseRenderPropertiesAndMethods = RenderProperties & RenderMethods;
+export declare const CtxContext: React.Context<BaseRenderPropertiesAndMethods | null>;
+export declare function useCtx<T extends BaseRenderPropertiesAndMethods>(): T;
 export declare type CanvasProps = {
-    ctx: RenderProperties;
+    ctx: BaseRenderPropertiesAndMethods;
     noAutoResizer?: boolean;
     children: ReactNode;
 };
@@ -497,3 +500,4 @@ export declare type CanvasProps = {
  * ```
  */
 export declare function Canvas({ ctx, children, noAutoResizer, }: CanvasProps): JSX.Element;
+export {};

package/dist/esm/Canvas/index.js

@@ -1,21 +1,15 @@
-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 React, { useEffect } from 'react';
-import styles from './styles.module.css.json';
-function camelToDash(str) {
-    if (str != str.toLowerCase()) {
-        str = str.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); });
+import React, { createContext, useContext, useEffect } from 'react';
+import s from './styles.module.css.json';
+import { generateStyleFromCtx } from '../generateStyleFromCtx';
+import classNames from 'classnames';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export var CtxContext = createContext(null);
+export function useCtx() {
+    var ctx = useContext(CtxContext);
+    if (!ctx) {
+        throw new Error('useCtx requires <Canvas />!');
     }
-    return str;
+    return ctx;
 }
 /**
  * @example Color palette CSS variables
@@ -515,19 +509,13 @@ export function Canvas(_a) {
         if (mode !== 'renderPage' && !noAutoResizer) {
             var ctxWithAutoResizer_1 = ctx;
             ctxWithAutoResizer_1.startAutoResizer();
-            (function () {
+            return function () {
                 ctxWithAutoResizer_1.stopAutoResizer();
-            });
+            };
         }
+        return undefined;
     }, [mode, noAutoResizer]);
-    var style = 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(' '),
-    });
-    return (React.createElement("div", { className: styles.canvas, style: style }, children));
+    return (React.createElement(CtxContext.Provider, { value: ctx },
+        React.createElement("div", { className: classNames(s['themeVariables'], s['canvas']), style: generateStyleFromCtx(ctx) }, children)));
 }
 //# sourceMappingURL=index.js.map