@helpdice/ui 1.6.6 → 1.6.8

package/dist/button/button.compact.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 type CompactButtonProps = {
     children?: React.ReactNode;
     iconRight?: React.ReactNode;
@@ -11,5 +11,5 @@ type CompactButtonProps = {
     target?: string;
     onClick?: () => void;
 };
-declare const _default: import("react").NamedExoticComponent<CompactButtonProps>;
+declare const _default: React.NamedExoticComponent<CompactButtonProps>;
 export default _default;

package/dist/button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React$1 = require('react');
+var React = require('react');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -193,11 +193,11 @@ var hasRequiredIndex;
 function requireIndex () {
 	if (hasRequiredIndex) return index;
 	hasRequiredIndex = 1;
-	var React = React$1;
+	var React$1 = React;
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+	var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
 
 	/*
 	Based on Glamor's sheet
@@ -633,15 +633,15 @@ function requireIndex () {
 	        throw new Error("StyleSheetRegistry: " + message + ".");
 	    }
 	}
-	var StyleSheetContext = /*#__PURE__*/ React.createContext(null);
+	var StyleSheetContext = /*#__PURE__*/ React$1.createContext(null);
 	StyleSheetContext.displayName = "StyleSheetContext";
 	function createStyleRegistry() {
 	    return new StyleSheetRegistry();
 	}
 	function StyleRegistry(param) {
 	    var configuredRegistry = param.registry, children = param.children;
-	    var rootRegistry = React.useContext(StyleSheetContext);
-	    var ref = React.useState(function() {
+	    var rootRegistry = React$1.useContext(StyleSheetContext);
+	    var ref = React$1.useState(function() {
 	        return rootRegistry || configuredRegistry || createStyleRegistry();
 	    }), registry = ref[0];
 	    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
@@ -649,7 +649,7 @@ function requireIndex () {
 	    }, children);
 	}
 	function useStyleRegistry() {
-	    return React.useContext(StyleSheetContext);
+	    return React$1.useContext(StyleSheetContext);
 	}
 
 	// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
@@ -738,9 +738,9 @@ var defaultContext$1 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React$1.createContext(defaultContext$1);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$1);
 var useScale = function useScale() {
-  return React$1.useContext(ScaleContext);
+  return React.useContext(ScaleContext);
 };
 
 var defaultFont = {
@@ -987,9 +987,9 @@ var Themes = {
 /* "use client" */
 
 var defaultTheme = Themes.getPresetStaticTheme();
-var ThemeContext = /*#__PURE__*/React$1.createContext(defaultTheme);
+var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
 var useTheme = function useTheme() {
-  return React$1.useContext(ThemeContext);
+  return React.useContext(ThemeContext);
 };
 
 /* "use client" */
@@ -1051,7 +1051,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   return scale > 1 ? 1 + diff : 1 - diff;
 };
 var withScale = function withScale(Render) {
-  var ScaleFC = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
+  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
     var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$3);
@@ -1127,9 +1127,9 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React$1.createElement(ScaleContext.Provider, {
+    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
       value: value
-    }, /*#__PURE__*/React$1.createElement(Render, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
       ref: ref
     }), children));
   });
@@ -1144,12 +1144,12 @@ var ButtonDrip = function ButtonDrip(_ref) {
     y = _ref$y === void 0 ? 0 : _ref$y,
     color = _ref.color,
     onCompleted = _ref.onCompleted;
-  var dripRef = React$1.useRef(null);
+  var dripRef = React.useRef(null);
   /* istanbul ignore next */
   var top = Number.isNaN(+y) ? 0 : y - 10;
   /* istanbul ignore next */
   var left = Number.isNaN(+x) ? 0 : x - 10;
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     /* istanbul ignore next */
     if (!dripRef.current) return;
     dripRef.current.addEventListener('animationend', onCompleted);
@@ -1159,10 +1159,10 @@ var ButtonDrip = function ButtonDrip(_ref) {
       dripRef.current.removeEventListener('animationend', onCompleted);
     };
   });
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: dripRef,
     className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React$1.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -1171,21 +1171,21 @@ var ButtonDrip = function ButtonDrip(_ref) {
       left: left
     },
     className: "jsx-3424889537"
-  }, /*#__PURE__*/React$1.createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd",
     className: "jsx-3424889537"
-  }, /*#__PURE__*/React$1.createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     fill: color,
     className: "jsx-3424889537"
-  }, /*#__PURE__*/React$1.createElement("rect", {
+  }, /*#__PURE__*/React.createElement("rect", {
     width: "100%",
     height: "100%",
     rx: "10",
     className: "jsx-3424889537"
-  })))), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3424889537"
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
@@ -1249,22 +1249,22 @@ var LoadingComponent = function LoadingComponent(_ref) {
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var classes = useClasses('loading-container', className);
-  var bgColor = React$1.useMemo(function () {
+  var bgColor = React.useMemo(function () {
     return getIconBgColor(type, theme.palette, color);
   }, [type, theme.palette, color]);
-  return /*#__PURE__*/React$1.createElement("div", _extends({}, props, {
+  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.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React$1.createElement("span", {
+  }), /*#__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.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React$1.createElement("label", {
+  }, 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.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React$1.createElement("i", {
+  }, 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.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React$1.createElement("i", {
+  }), /*#__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.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React$1.createElement("i", {
+  }), /*#__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.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  })), /*#__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.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.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;}}")));
@@ -1274,11 +1274,11 @@ var Loading = withScale(LoadingComponent);
 
 var ButtonLoading = function ButtonLoading(_ref) {
   var color = _ref.color;
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React$1.createElement(Loading, {
+  }, /*#__PURE__*/React.createElement(Loading, {
     color: color
-  }), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "212623367"
   }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
 };
@@ -1297,9 +1297,9 @@ var ButtonIcon = function ButtonIcon(_ref) {
     right: isRight,
     single: isSingle
   }, className);
-  return /*#__PURE__*/React$1.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2467502931"
   }, ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-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;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
 };
@@ -1312,20 +1312,20 @@ var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, childre
   var isRight = Boolean(iconRight);
   var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
   var classes = useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React$1.createElement("div", {
+  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
     className: "text"
   }, children);
-  if (React$1.Children.count(children) === 0) {
-    return /*#__PURE__*/React$1.createElement(ButtonIcon, {
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(ButtonIcon, {
       isRight: isRight,
       isSingle: true
     }, hasIcon);
   }
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(ButtonIcon, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
     isRight: isRight
-  }, hasIcon), /*#__PURE__*/React$1.createElement("div", {
+  }, hasIcon), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3568181479",
     dynamic: [paddingForAutoMode, paddingForAutoMode]
   }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
@@ -1347,9 +1347,9 @@ var defaultContext = {
   isButtonGroup: false,
   disabled: false
 };
-var ButtonGroupContext = /*#__PURE__*/React$1.createContext(defaultContext);
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
 var useButtonGroupContext = function useButtonGroupContext() {
-  return React$1.useContext(ButtonGroupContext);
+  return React.useContext(ButtonGroupContext);
 };
 
 var hexToRgb = function hexToRgb(color) {
@@ -1575,23 +1575,23 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
 };
 
 var _excluded = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
-var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var buttonRef = React$1.useRef(null);
-  React$1.useImperativeHandle(ref, function () {
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     dripShow = _useState2[0],
     setDripShow = _useState2[1];
-  var _useState3 = React$1.useState(0),
+  var _useState3 = React.useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     dripX = _useState4[0],
     setDripX = _useState4[1];
-  var _useState5 = React$1.useState(0),
+  var _useState5 = React.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
     dripY = _useState6[0],
     setDripY = _useState6[1];
@@ -1625,21 +1625,21 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     var props = _objectWithoutProperties(filteredProps, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-  var _useMemo = React$1.useMemo(function () {
+  var _useMemo = React.useMemo(function () {
       return getButtonColors(theme.palette, filteredProps);
     }, [theme.palette, filteredProps]),
     bg = _useMemo.bg,
     border = _useMemo.border,
     color = _useMemo.color;
-  var hover = React$1.useMemo(function () {
+  var hover = React.useMemo(function () {
     return getButtonHoverColors(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
-  var _useMemo2 = React$1.useMemo(function () {
+  var _useMemo2 = React.useMemo(function () {
       return getButtonCursor(disabled, loading);
     }, [disabled, loading]),
     cursor = _useMemo2.cursor,
     events = _useMemo2.events;
-  var dripColor = React$1.useMemo(function () {
+  var dripColor = React.useMemo(function () {
     return getButtonDripColor(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
 
@@ -1661,7 +1661,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     }
     onClick && onClick(event);
   };
-  var childrenWithIcon = React$1.useMemo(function () {
+  var childrenWithIcon = React.useMemo(function () {
     return getButtonChildrenWithIcon(auto, children, {
       icon: icon,
       iconRight: iconRight
@@ -1669,21 +1669,21 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   }, [auto, children, icon, iconRight]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-  return /*#__PURE__*/React$1.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
     className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React$1.createElement(ButtonLoading, {
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
     color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React$1.createElement(ButtonDrip, {
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
     x: dripX,
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1558010596",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-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;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
@@ -1767,7 +1767,7 @@ var CompactButton = function CompactButton(_ref) {
     iconRight: iconRight
   }, children);
 };
-var button_compact = /*#__PURE__*/React$1.memo(CompactButton);
+var button_compact = /*#__PURE__*/React.memo(CompactButton);
 
 /* "use client" */