@helpdice/ui 2.5.8-beta.0 → 2.5.9

package/dist/button-dropdown/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);
@@ -69,15 +70,6 @@ function _defineProperty(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 _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -783,7 +775,7 @@ var getColor = function getColor(palette, type) {
 var ButtonDropdownIcon = function ButtonDropdownIcon(_ref) {
   var color = _ref.color,
     height = _ref.height;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
     stroke: color,
     style: {
       color: color
@@ -796,13 +788,15 @@ var ButtonDropdownIcon = function ButtonDropdownIcon(_ref) {
     strokeLinejoin: "round",
     fill: "none",
     shapeRendering: "geometricPrecision",
-    className: "jsx-3359574434"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6 9l6 6 6-6",
-    className: "jsx-3359574434"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3359574434"
-  }, "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"));
+    className: "jsx-3359574434",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M6 9l6 6 6-6",
+      className: "jsx-3359574434"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3359574434",
+      children: "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"
+    })]
+  });
 };
 ButtonDropdownIcon.displayName = 'ButtonDropdownIcon';
 
@@ -1027,11 +1021,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;
@@ -1065,22 +1061,26 @@ var LoadingComponent = function LoadingComponent(_ref) {
   var bgColor = React.useMemo(function () {
     return getIconBgColor(type, theme$1.palette, color);
   }, [type, theme$1.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201634259",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]
-  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
+      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2201634259",
+      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
+      children: ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
+    })]
+  }));
 };
 LoadingComponent.displayName = 'Loading';
 var Loading = withScale(LoadingComponent);
@@ -1114,22 +1114,27 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
     if (loading) return 'default';
     return disabled ? 'not-allowed' : 'pointer';
   }, [loading, disabled]);
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
     type: "button",
     onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: colors.color,
-      // height: SCALES.height(2.5),
-      width: SCALES.height(2.5)
-    },
-    className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]])
-  }, icon), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "352843599",
-    dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
-  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;gap:2;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--helpdice-ui-dropdown-height);min-width:var(--helpdice-ui-dropdown-min-width);padding:var(--helpdice-ui-dropdown-padding);font-size:var(--helpdice-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
+  }, props), {}, {
+    className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || ""),
+    children: [loading ? /*#__PURE__*/jsxRuntime.jsx(Loading, {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          color: colors.color,
+          // height: SCALES.height(2.5),
+          width: SCALES.height(2.5)
+        },
+        className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]),
+        children: icon
+      }), children]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "352843599",
+      dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor],
+      children: "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;gap:2;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--helpdice-ui-dropdown-height);min-width:var(--helpdice-ui-dropdown-min-width);padding:var(--helpdice-ui-dropdown-padding);font-size:var(--helpdice-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")
+    })]
+  }));
 };
 ButtonDropdownItem.displayName = 'ButtonDropdownItem';
 
@@ -1187,37 +1192,45 @@ var ButtonDropdownComponent = function ButtonDropdownComponent(_ref) {
   useClickAway(ref, function () {
     return setVisible(false);
   });
-  return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    onClick: stopPropagation
-  }, props, {
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn-dropdown', className) || "")
-  }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
-    open: visible,
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]])
-  }, /*#__PURE__*/React.createElement("summary", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "dropdown-box"
-  }, icon ? /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: colors.color,
-      height: SCALES.height(2.5),
-      width: SCALES.height(2.5)
-    },
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "dropdown-icon"
-  }, icon) : /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
-    color: colors.color,
-    height: SCALES.height(2.5)
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "content"
-  }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4074061604",
-    dynamic: [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]
-  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme$1.palette.border, ";border-radius:").concat(theme$1.layout.radius, ";--helpdice-ui-dropdown-height:").concat(SCALES.height(2.5), ";--helpdice-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--helpdice-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--helpdice-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";border-left:1px solid ").concat(colors.borderLeftColor, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;display:grid;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme$1.layout.radius, ";box-shadow:").concat(theme$1.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme$1.layout.gapHalf, ");-ms-transform:translateY(").concat(theme$1.layout.gapHalf, ");transform:translateY(").concat(theme$1.layout.gapHalf, ");background-color:").concat(theme$1.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme$1.layout.radius, ";border-top-right-radius:").concat(theme$1.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonDropdownContext.Provider, {
+    value: initialValue,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      onClick: stopPropagation
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn-dropdown', className) || ""),
+      children: [mainItemChildren, /*#__PURE__*/jsxRuntime.jsxs("details", {
+        open: visible,
+        className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]),
+        children: [/*#__PURE__*/jsxRuntime.jsx("summary", {
+          onClick: clickHandler,
+          className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]),
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "dropdown-box",
+            children: icon ? /*#__PURE__*/jsxRuntime.jsx("span", {
+              style: {
+                color: colors.color,
+                height: SCALES.height(2.5),
+                width: SCALES.height(2.5)
+              },
+              className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "dropdown-icon",
+              children: icon
+            }) : /*#__PURE__*/jsxRuntime.jsx(ButtonDropdownIcon, {
+              color: colors.color,
+              height: SCALES.height(2.5)
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: _JSXStyle.dynamic([["4074061604", [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius]]]) + " " + "content",
+          children: itemChildrenWithoutMain
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "4074061604",
+        dynamic: [theme$1.palette.border, theme$1.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme$1.layout.radius, theme$1.expressiveness.shadowLarge, theme$1.layout.gapHalf, theme$1.palette.background, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius, theme$1.layout.radius],
+        children: ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme$1.palette.border, ";border-radius:").concat(theme$1.layout.radius, ";--helpdice-ui-dropdown-height:").concat(SCALES.height(2.5), ";--helpdice-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--helpdice-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--helpdice-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme$1.layout.radius, ";border-bottom-left-radius:").concat(theme$1.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";border-left:1px solid ").concat(colors.borderLeftColor, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;display:grid;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme$1.layout.radius, ";box-shadow:").concat(theme$1.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme$1.layout.gapHalf, ");-ms-transform:translateY(").concat(theme$1.layout.gapHalf, ");transform:translateY(").concat(theme$1.layout.gapHalf, ");background-color:").concat(theme$1.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme$1.layout.radius, ";border-top-right-radius:").concat(theme$1.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme$1.layout.radius, ";border-bottom-right-radius:").concat(theme$1.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}")
+      })]
+    }))
+  });
 };
 ButtonDropdownComponent.displayName = 'ButtonDropdown';
 var ButtonDropdown = withScale(ButtonDropdownComponent);

package/dist/button-group/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);
@@ -818,11 +853,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;
@@ -871,14 +908,17 @@ var ButtonGroupComponent = function ButtonGroupComponent(groupProps) {
     vertical: vertical,
     horizontal: !vertical
   }, className);
-  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3616385743", [theme$1.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3616385743",
-    dynamic: [theme$1.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]
-  }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme$1.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupContext.Provider, {
+    value: initialValue,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+      className: _JSXStyle.dynamic([["3616385743", [theme$1.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || ""),
+      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3616385743",
+        dynamic: [theme$1.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border],
+        children: ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme$1.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}")
+      })]
+    }))
+  });
 };
 ButtonGroupComponent.displayName = 'ButtonGroup';
 var ButtonGroup = withScale(ButtonGroupComponent);

package/dist/capacity/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);
@@ -839,11 +874,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;
@@ -873,16 +910,18 @@ var CapacityComponent = function CapacityComponent(_ref) {
     if (userColor && userColor !== '') return userColor;
     return getColor(percentValue, theme$1.palette);
   }, [userColor, percentValue, theme$1.palette]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({
     title: "".concat(percentValue, "%")
-  }, props, {
-    className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2706946339",
-    dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]
-  }, ".capacity.__jsx-style-dynamic-selector{width:".concat(SCALES.width(3.125), ";height:").concat(SCALES.height(0.625), ";border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;background-color:").concat(theme$1.palette.accents_2, ";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), ";}span.__jsx-style-dynamic-selector{width:").concat(percentValue, "%;background-color:").concat(color, ";height:100%;margin:0;padding:0;display:block;}")));
+  }, props), {}, {
+    className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["2706946339", [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2706946339",
+      dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme$1.layout.radius, theme$1.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color],
+      children: ".capacity.__jsx-style-dynamic-selector{width:".concat(SCALES.width(3.125), ";height:").concat(SCALES.height(0.625), ";border-radius:").concat(theme$1.layout.radius, ";overflow:hidden;background-color:").concat(theme$1.palette.accents_2, ";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), ";}span.__jsx-style-dynamic-selector{width:").concat(percentValue, "%;background-color:").concat(color, ";height:100%;margin:0;padding:0;display:block;}")
+    })]
+  }));
 };
 CapacityComponent.displayName = 'Capacity';
 var Capacity = withScale(CapacityComponent);