@helpdice/ui 2.5.4 → 2.5.8

package/dist/fieldset/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var theme = require('@helpdice/theme');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -64,14 +65,13 @@ function _createForOfIteratorHelper(r, e) {
     }
   };
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
 }
 function _iterableToArray(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
@@ -109,6 +109,27 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
 function _objectWithoutProperties(e, t) {
   if (null == e) return {};
   var o,
@@ -135,6 +156,20 @@ function _slicedToArray(r, e) {
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -693,11 +728,15 @@ var FieldsetTitle = function FieldsetTitle(_ref) {
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded$6);
   var classes = theme.useClasses('title', className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4105044205"
-  }, ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+      className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || ""),
+      children: children
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4105044205",
+      children: ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"
+    })]
+  });
 };
 FieldsetTitle.displayName = 'FieldsetTitle';
 
@@ -707,11 +746,15 @@ var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2265168013"
-  }, "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+      className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || ""),
+      children: children
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2265168013",
+      children: "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"
+    })]
+  });
 };
 FieldsetSubtitle.displayName = 'FieldsetSubtitle';
 
@@ -907,11 +950,13 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
+    return /*#__PURE__*/jsxRuntime.jsx(ScaleContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/jsxRuntime.jsx(Render, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    });
   });
   ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
   return ScaleFC;
@@ -926,12 +971,14 @@ var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
-    className: _JSXStyle.dynamic([["903731644", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.accents_6, theme$1.layout.gapHalf, theme$1.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "903731644",
-    dynamic: [theme$1.palette.accents_1, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.accents_6, theme$1.layout.gapHalf, theme$1.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "footer.__jsx-style-dynamic-selector{background-color:".concat(theme$1.palette.accents_1, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:").concat(theme$1.palette.accents_6, ";padding:").concat(theme$1.layout.gapHalf, " ").concat(theme$1.layout.gap, ";box-sizing:border-box;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(2.875), ";padding:").concat(SCALES.pt(0.625), " ").concat(SCALES.pr(1.31), " ").concat(SCALES.pb(0.625), " ").concat(SCALES.pl(1.31), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("footer", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["903731644", [theme$1.palette.accents_1, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.accents_6, theme$1.layout.gapHalf, theme$1.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "903731644",
+      dynamic: [theme$1.palette.accents_1, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.accents_6, theme$1.layout.gapHalf, theme$1.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)],
+      children: "footer.__jsx-style-dynamic-selector{background-color:".concat(theme$1.palette.accents_1, ";border-top:1px solid ").concat(theme$1.palette.border, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:").concat(theme$1.palette.accents_6, ";padding:").concat(theme$1.layout.gapHalf, " ").concat(theme$1.layout.gap, ";box-sizing:border-box;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(2.875), ";padding:").concat(SCALES.pt(0.625), " ").concat(SCALES.pr(1.31), " ").concat(SCALES.pb(0.625), " ").concat(SCALES.pl(1.31), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")
+    })]
+  }));
 };
 FieldsetFooterComponent.displayName = 'FieldsetFooter';
 var FieldsetFooter = withScale(FieldsetFooterComponent);
@@ -945,12 +992,14 @@ var FieldsetContentComponent = function FieldsetContentComponent(_ref) {
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var classes = theme.useClasses('content', className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2403982542", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2403982542",
-    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3), " ").concat(SCALES.pr(1.3), " ").concat(SCALES.pb(1.3), " ").concat(SCALES.pl(1.3), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2403982542", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2403982542",
+      dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)],
+      children: ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3), " ").concat(SCALES.pr(1.3), " ").concat(SCALES.pb(1.3), " ").concat(SCALES.pl(1.3), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}")
+    })]
+  }));
 };
 FieldsetContentComponent.displayName = 'FieldsetContent';
 var FieldsetContent = withScale(FieldsetContentComponent);
@@ -1034,14 +1083,24 @@ var FieldsetComponent = function FieldsetComponent(_ref) {
     }, [currentValue]);
   }
   var content = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, withoutFooterChildren, !hasTitle && title && /*#__PURE__*/React.createElement(FieldsetTitle, null, title), !hasSubtitle && subtitle && /*#__PURE__*/React.createElement(FieldsetSubtitle, null, subtitle));
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [withoutFooterChildren, !hasTitle && title && /*#__PURE__*/jsxRuntime.jsx(FieldsetTitle, {
+        children: title
+      }), !hasSubtitle && subtitle && /*#__PURE__*/jsxRuntime.jsx(FieldsetSubtitle, {
+        children: subtitle
+      })]
+    });
   }, [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3253250630", [theme$1.palette.background, theme$1.palette.border, theme$1.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), hasContent ? content : /*#__PURE__*/React.createElement(FieldsetContent, null, content), FooterChildren && FooterChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3253250630",
-    dynamic: [theme$1.palette.background, theme$1.palette.border, theme$1.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme$1.palette.background, ";border:1px solid ").concat(theme$1.palette.border, ";border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["3253250630", [theme$1.palette.background, theme$1.palette.border, theme$1.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [hasContent ? content : /*#__PURE__*/jsxRuntime.jsx(FieldsetContent, {
+      children: content
+    }), FooterChildren && FooterChildren, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3253250630",
+      dynamic: [theme$1.palette.background, theme$1.palette.border, theme$1.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)],
+      children: ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme$1.palette.background, ";border:1px solid ").concat(theme$1.palette.border, ";border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")
+    })]
+  }));
 };
 FieldsetComponent.displayName = 'Fieldset';
 var Fieldset = withScale(FieldsetComponent);
@@ -1087,27 +1146,32 @@ var FieldsetGroupComponent = function FieldsetGroupComponent(_ref) {
     setSelfVal(nextValue);
     onChange && onChange(nextValue);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(FieldsetContext.Provider, {
-    value: providerValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "group-tabs"
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: function onClick() {
-        return clickHandle(item.value);
-      },
-      key: item.value,
-      className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || "")
-    }, item.label);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "group-content"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3411776855",
-    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]
-  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme$1.palette.accents_3, ";background-color:").concat(theme$1.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme$1.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme$1.palette.background, ";color:").concat(theme$1.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme$1.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme$1.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
+  return /*#__PURE__*/jsxRuntime.jsx(FieldsetContext.Provider, {
+    value: providerValue,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+      className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || ""),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "group-tabs",
+        children: items.map(function (item) {
+          return /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              return clickHandle(item.value);
+            },
+            className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || ""),
+            children: item.label
+          }, item.value);
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "group-content",
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3411776855",
+        dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme$1.palette.accents_3, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.background, theme$1.palette.foreground, theme$1.layout.radius, theme$1.layout.radius],
+        children: ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme$1.palette.accents_3, ";background-color:").concat(theme$1.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme$1.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme$1.palette.background, ";color:").concat(theme$1.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme$1.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme$1.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}")
+      })]
+    }))
+  });
 };
 FieldsetGroupComponent.displayName = 'FieldsetGroup';
 var FieldsetGroup = withScale(FieldsetGroupComponent);

package/dist/form/index.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var require$$0 = require('react-is');
+var jsxRuntime = require('react/jsx-runtime');
 var isEqual = require('react-fast-compare');
 
 function _interopNamespaceDefault(e) {
@@ -133,15 +134,6 @@ function _defineProperty$1(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function _getPrototypeOf(t) {
   return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
     return t.__proto__ || Object.getPrototypeOf(t);
@@ -541,17 +533,15 @@ function useFormikContext() {
   return formik;
 }
 
-/**
- * Connect any component to Formik context, and inject as a prop called `formik`;
- * @param Comp React Component
- */
 function connect(Comp) {
   var C = function C(props) {
-    return /*#__PURE__*/React__namespace.createElement(FormikConsumer, null, function (formik) {
-      warning(!!formik, "Formik context is undefined, please verify you are rendering <Form>, <Field>, <FastField>, <FieldArray>, or your custom context-using component as a child of a <Formik> component. Component name: ".concat(Comp.name));
-      return /*#__PURE__*/React__namespace.createElement(Comp, _extends({}, props, {
-        formik: formik
-      }));
+    return /*#__PURE__*/jsxRuntime.jsx(FormikConsumer, {
+      children: function children(formik) {
+        warning(!!formik, "Formik context is undefined, please verify you are rendering <Form>, <Field>, <FastField>, <FieldArray>, or your custom context-using component as a child of a <Formik> component. Component name: ".concat(Comp.name));
+        return /*#__PURE__*/jsxRuntime.jsx(Comp, _objectSpread2(_objectSpread2({}, props), {}, {
+          formik: formik
+        }));
+      }
     });
   };
   var componentDisplayName = Comp.displayName || Comp.name || Comp.constructor && Comp.constructor.name || 'Component';
@@ -5827,10 +5817,11 @@ function FormWrapper(props) {
       warning(!props.render, "<Formik render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Formik render={(props) => ...} /> with <Formik>{(props) => ...}</Formik>");
     }, []);
   }
-  return /*#__PURE__*/React__namespace.createElement(FormikProvider, {
-    value: formikbag
-  }, component ? /*#__PURE__*/React__namespace.createElement(component, formikbag) : render ? render(formikbag) : children // children come last, always called
-  ? isFunction(children) ? children(formikbag) : !isEmptyChildren(children) ? React__namespace.Children.only(children) : null : null);
+  return /*#__PURE__*/jsxRuntime.jsx(FormikProvider, {
+    value: formikbag,
+    children: component ? /*#__PURE__*/React__namespace.createElement(component, formikbag) : render ? render(formikbag) : children // children come last, always called
+    ? isFunction(children) ? children(formikbag) : !isEmptyChildren(children) ? React__namespace.Children.only(children) : null : null
+  });
 }
 function warnAboutMissingIdentifier(_ref5) {
   var htmlContent = _ref5.htmlContent,
@@ -5993,22 +5984,6 @@ function useEventCallback(fn) {
 
 var _excluded$1 = ["mapPropsToValues"],
   _excluded2 = ["children"];
-
-/**
- * State, handlers, and helpers injected as props into the wrapped form component.
- * Used with withFormik()
- *
- * @deprecated  Use `OuterProps & FormikProps<Values>` instead.
- */
-
-/**
- * Formik helpers + { props }
- */
-
-/**
- * withFormik() configuration options. Backwards compatible.
- */
-
 /**
  * A public higher-order component to access the imperative API
  */
@@ -6054,7 +6029,7 @@ function withFormik(_ref) {
          * Just avoiding a render callback for perf here
          */
         _defineProperty$1(_this, "renderFormComponent", function (formikProps) {
-          return /*#__PURE__*/React__namespace.createElement(Component, _extends({}, _this.props, formikProps));
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread2(_objectSpread2({}, _this.props), formikProps));
         });
         return _this;
       }
@@ -6065,7 +6040,7 @@ function withFormik(_ref) {
           var _ref2 = this.props;
             _ref2.children;
             var props = _objectWithoutProperties(_ref2, _excluded2);
-          return /*#__PURE__*/React__namespace.createElement(FormWrapper, _extends({}, props, config, {
+          return /*#__PURE__*/jsxRuntime.jsx(FormWrapper, _objectSpread2(_objectSpread2(_objectSpread2({}, props), config), {}, {
             validate: config.validate && this.validate,
             validationSchema: config.validationSchema && this.validationSchema,
             initialValues: mapPropsToValues(this.props),

package/dist/grid/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var theme = require('@helpdice/theme');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -58,14 +59,34 @@ function _createForOfIteratorHelper(r, e) {
     }
   };
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
 }
 function _objectWithoutProperties(e, t) {
   if (null == e) return {};
@@ -87,6 +108,20 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -810,11 +845,13 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
+    return /*#__PURE__*/jsxRuntime.jsx(ScaleContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/jsxRuntime.jsx(Render, _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: ref,
+        children: children
+      }))
+    });
   });
   ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
   return ScaleFC;
@@ -889,12 +926,14 @@ var GridBasicItem = function GridBasicItem(_ref) {
       xl: getItemLayout(xl)
     };
   }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "568430467",
-    dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]
-  }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "568430467",
+      dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display],
+      children: ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")
+    })]
+  }));
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
@@ -907,18 +946,21 @@ var GridComponent = function GridComponent(_ref) {
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
-      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
         id: "1271839607",
-        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')]
-      }, "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pr(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pb(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pl(0, 'var(--grid-gap-unit)'), ";}")),
+        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')],
+        children: "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pr(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pb(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pl(0, 'var(--grid-gap-unit)'), ";}")
+      }),
       className: _JSXStyle.dynamic([["1271839607", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')]]])
     },
     resolveClassName = _styles$className.className,
     styles = _styles$className.styles;
   var classes = theme.useClasses(resolveClassName, className);
-  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
-  }, props), children, styles);
+  }, props), {}, {
+    children: [children, styles]
+  }));
 };
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
@@ -940,18 +982,21 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
   }, [gap, unit]);
   var _styles$className = {
-      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
         id: "3631618093",
-        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')]
-      }, "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:calc(-1 * var(--grid-gap-unit));--grid-container-width:calc(100% + var(--grid-gap-unit) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;width:").concat(SCALES.width(1, 'var(--grid-container-width)'), ";margin:").concat(SCALES.mt(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mr(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mb(0, 'var(--grid-container-margin)'), " ").concat(SCALES.ml(0, 'var(--grid-container-margin)'), ";}")),
+        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')],
+        children: "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:calc(-1 * var(--grid-gap-unit));--grid-container-width:calc(100% + var(--grid-gap-unit) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;width:").concat(SCALES.width(1, 'var(--grid-container-width)'), ";margin:").concat(SCALES.mt(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mr(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mb(0, 'var(--grid-container-margin)'), " ").concat(SCALES.ml(0, 'var(--grid-container-margin)'), ";}")
+      }),
       className: _JSXStyle.dynamic([["3631618093", [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')]]])
     },
     resolveClassName = _styles$className.className,
     styles = _styles$className.styles;
   var classes = theme.useClasses(resolveClassName, className);
-  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
-  }, props), children, styles);
+  }, props), {}, {
+    children: [children, styles]
+  }));
 };
 GridContainerComponent.displayName = 'GridContainer';
 var GridContainer = withScale(GridContainerComponent);

package/dist/html-renderer/index.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 /*! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE */
 
@@ -1382,7 +1383,7 @@ var purify = createDOMPurify();
 var HtmlRenderer = function HtmlRenderer(_ref) {
   var htmlString = _ref.htmlString;
   var sanitizedHTML = purify.sanitize(htmlString);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     dangerouslySetInnerHTML: {
       __html: sanitizedHTML
     }