@helpdice/ui 1.4.8 → 1.5.0

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+type CompactButtonProps = {
+    children?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    to: string;
+    icon?: React.ReactNode;
+    scale?: number;
+    type?: any;
+    style?: CSSProperties;
+    a?: boolean;
+    target?: string;
+    onClick?: () => void;
+};
+declare const _default: import("react").NamedExoticComponent<CompactButtonProps>;
+export default _default;

package/dist/button/button.d.ts

@@ -5,6 +5,7 @@ interface Props {
     ghost?: boolean;
     loading?: boolean;
     shadow?: boolean;
+    round?: boolean;
     auto?: boolean;
     effect?: boolean;
     disabled?: boolean;

package/dist/button/index.d.ts

@@ -1,4 +1,5 @@
 import Button from './button';
+export { default as LinkButton } from './button.compact';
 export type { ButtonProps } from './button';
 export type { ButtonTypes } from '../utils/prop-types';
 export default Button;

package/dist/button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = 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$1 = React;
+	var React = React$1;
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-	var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 	/*
 	Based on Glamor's sheet
@@ -633,15 +633,15 @@ function requireIndex () {
 	        throw new Error("StyleSheetRegistry: " + message + ".");
 	    }
 	}
-	var StyleSheetContext = /*#__PURE__*/ React$1.createContext(null);
+	var StyleSheetContext = /*#__PURE__*/ React.createContext(null);
 	StyleSheetContext.displayName = "StyleSheetContext";
 	function createStyleRegistry() {
 	    return new StyleSheetRegistry();
 	}
 	function StyleRegistry(param) {
 	    var configuredRegistry = param.registry, children = param.children;
-	    var rootRegistry = React$1.useContext(StyleSheetContext);
-	    var ref = React$1.useState(function() {
+	    var rootRegistry = React.useContext(StyleSheetContext);
+	    var ref = React.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$1.useContext(StyleSheetContext);
+	    return React.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.createContext(defaultContext$1);
+var ScaleContext = /*#__PURE__*/React$1.createContext(defaultContext$1);
 var useScale = function useScale() {
-  return React.useContext(ScaleContext);
+  return React$1.useContext(ScaleContext);
 };
 
 var defaultFont = {
@@ -987,9 +987,9 @@ var Themes = {
 /* "use client" */
 
 var defaultTheme = Themes.getPresetStaticTheme();
-var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
+var ThemeContext = /*#__PURE__*/React$1.createContext(defaultTheme);
 var useTheme = function useTheme() {
-  return React.useContext(ThemeContext);
+  return React$1.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.forwardRef(function (_ref, ref) {
+  var ScaleFC = /*#__PURE__*/React$1.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.createElement(ScaleContext.Provider, {
+    return /*#__PURE__*/React$1.createElement(ScaleContext.Provider, {
       value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
+    }, /*#__PURE__*/React$1.createElement(Render, _extends({}, props, {
       ref: ref
     }), children));
   });
@@ -1144,12 +1144,12 @@ var ButtonDrip = function ButtonDrip(_ref) {
     y = _ref$y === undefined ? 0 : _ref$y,
     color = _ref.color,
     onCompleted = _ref.onCompleted;
-  var dripRef = React.useRef(null);
+  var dripRef = React$1.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.useEffect(function () {
+  React$1.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.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     ref: dripRef,
     className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React.createElement("svg", {
+  }, /*#__PURE__*/React$1.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.createElement("g", {
+  }, /*#__PURE__*/React$1.createElement("g", {
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd",
     className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, /*#__PURE__*/React$1.createElement("g", {
     fill: color,
     className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React$1.createElement("rect", {
     width: "100%",
     height: "100%",
     rx: "10",
     className: "jsx-3424889537"
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })))), /*#__PURE__*/React$1.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.useMemo(function () {
+  var bgColor = React$1.useMemo(function () {
     return getIconBgColor(type, theme.palette, color);
   }, [type, theme.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/React$1.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.createElement("span", {
+  }), /*#__PURE__*/React$1.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.createElement("label", {
+  }, children && /*#__PURE__*/React$1.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.createElement("i", {
+  }, children), /*#__PURE__*/React$1.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.createElement("i", {
+  }), /*#__PURE__*/React$1.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.createElement("i", {
+  }), /*#__PURE__*/React$1.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.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React$1.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.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
+  }, /*#__PURE__*/React$1.createElement(Loading, {
     color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }), /*#__PURE__*/React$1.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.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement("span", _extends({}, props, {
     className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  }), children, /*#__PURE__*/React$1.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.createElement("div", {
+  if (!hasIcon) return /*#__PURE__*/React$1.createElement("div", {
     className: "text"
   }, children);
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
+  if (React$1.Children.count(children) === 0) {
+    return /*#__PURE__*/React$1.createElement(ButtonIcon, {
       isRight: isRight,
       isSingle: true
     }, hasIcon);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(ButtonIcon, {
     isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
+  }, hasIcon), /*#__PURE__*/React$1.createElement("div", {
     className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, children, /*#__PURE__*/React$1.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.createContext(defaultContext);
+var ButtonGroupContext = /*#__PURE__*/React$1.createContext(defaultContext);
 var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
+  return React$1.useContext(ButtonGroupContext);
 };
 
 var hexToRgb = function hexToRgb(color) {
@@ -1574,24 +1574,24 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
-var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
+  var buttonRef = React$1.useRef(null);
+  React$1.useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-  var _useState = React.useState(false),
+  var _useState = React$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     dripShow = _useState2[0],
     setDripShow = _useState2[1];
-  var _useState3 = React.useState(0),
+  var _useState3 = React$1.useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     dripX = _useState4[0],
     setDripX = _useState4[1];
-  var _useState5 = React.useState(0),
+  var _useState5 = React$1.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
     dripY = _useState6[0],
     setDripY = _useState6[1];
@@ -1610,6 +1610,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
     _filteredProps$effect = filteredProps.effect,
     effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
+    _filteredProps$round = filteredProps.round,
+    round = _filteredProps$round === undefined ? false : _filteredProps$round,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
@@ -1623,21 +1625,21 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     var props = _objectWithoutProperties(filteredProps, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-  var _useMemo = React.useMemo(function () {
+  var _useMemo = React$1.useMemo(function () {
       return getButtonColors(theme.palette, filteredProps);
     }, [theme.palette, filteredProps]),
     bg = _useMemo.bg,
     border = _useMemo.border,
     color = _useMemo.color;
-  var hover = React.useMemo(function () {
+  var hover = React$1.useMemo(function () {
     return getButtonHoverColors(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
-  var _useMemo2 = React.useMemo(function () {
+  var _useMemo2 = React$1.useMemo(function () {
       return getButtonCursor(disabled, loading);
     }, [disabled, loading]),
     cursor = _useMemo2.cursor,
     events = _useMemo2.events;
-  var dripColor = React.useMemo(function () {
+  var dripColor = React$1.useMemo(function () {
     return getButtonDripColor(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
 
@@ -1659,7 +1661,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     }
     onClick && onClick(event);
   };
-  var childrenWithIcon = React.useMemo(function () {
+  var childrenWithIcon = React$1.useMemo(function () {
     return getButtonChildrenWithIcon(auto, children, {
       icon: icon,
       iconRight: iconRight
@@ -1667,28 +1669,107 @@ var ButtonComponent = /*#__PURE__*/React.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.createElement("button", _extends({
+  return /*#__PURE__*/React$1.createElement("button", _extends({
     ref: buttonRef,
     type: htmlType,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["22324076", [SCALES.height(2.5), 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.createElement(ButtonLoading, {
+    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, {
     color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React$1.createElement(ButtonDrip, {
     x: dripX,
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "22324076",
-    dynamic: [SCALES.height(2.5), 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(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;}")));
+  }), /*#__PURE__*/React$1.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;}")));
 });
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
+var CompactButton = function CompactButton(_ref) {
+  var _ref$to = _ref.to,
+    to = _ref$to === undefined ? '/' : _ref$to,
+    children = _ref.children,
+    iconRight = _ref.iconRight,
+    icon = _ref.icon,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === undefined ? 2 / 3 : _ref$scale,
+    type = _ref.type,
+    style = _ref.style,
+    a = _ref.a,
+    target = _ref.target,
+    onClick = _ref.onClick;
+  if (a) {
+    return /*#__PURE__*/React.createElement("a", {
+      style: {
+        all: 'unset',
+        boxSizing: 'border-box',
+        display: 'inline-block',
+        lineHeight: 'calc(2.5* 16px)',
+        fontWeight: '400',
+        fontSize: 'calc(0.875* 16px)',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        position: 'relative',
+        overflow: 'hidden',
+        color: '#666',
+        backgroundColor: '#fff',
+        cursor: 'pointer',
+        minWidth: 'min-content',
+        width: 'auto',
+        height: 'calc(2.5* 16px)',
+        padding: '0 calc(0.69* 16px) 0 calc(0.69* 16px)',
+        margin: 0,
+        '--helpdice-ui-button-height': 'calc(2.5* 16px)',
+        '--helpdice-ui-button-icon-padding': 'calc(0.4362* 16px)'
+      },
+      href: to,
+      target: target
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        right: 'auto',
+        left: 'var(--helpdice-ui-button-icon-padding)',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'var(--helpdice-ui-button-color)',
+        zIndex: 1
+      }
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-flex',
+        position: 'relative',
+        zIndex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        textAlign: 'center',
+        lineHeight: 'inherit',
+        paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
+      }
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(Button, {
+    icon: icon,
+    style: style,
+    type: type,
+    onClick: onClick,
+    auto: true,
+    scale: scale,
+    px: 0.6,
+    iconRight: iconRight
+  }, children);
+};
+var button_compact = /*#__PURE__*/React$1.memo(CompactButton);
+
 /* "use client" */
 
+exports.LinkButton = button_compact;
 exports.default = Button;

package/dist/html-renderer/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type RendererProps = {
+    htmlString: string;
+};
+declare const HtmlRenderer: React.FC<RendererProps>;
+export default HtmlRenderer;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as Badge } from './badge';
 export type { BadgeProps, BadgeAnchorProps } from './badge';
 export { default as Breadcrumbs } from './breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbsSeparatorProps, } from './breadcrumbs';
-export { default as Button } from './button';
+export { default as Button, LinkButton } from './button';
 export type { ButtonProps } from './button';
 export { default as ButtonDropdown } from './button-dropdown';
 export type { ButtonDropdownProps, ButtonDropdownItemProps } from './button-dropdown';
@@ -41,6 +41,7 @@ export type { UiProviderProps } from './ui-provider';
 export { default as Grid } from './grid';
 export { default as Container } from './grid/grid-container';
 export type { GridProps, GridContainerProps } from './grid';
+export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export type { ImageProps, ImageBrowserProps } from './image';
 export { default as Input } from './input';
@@ -95,6 +96,7 @@ export { default as Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
 export { default as Tree } from './tree';
 export type { TreeProps } from './tree';
+export { useTime, useTimer, useStopwatch } from './timer';
 export { default as useAllThemes } from './use-all-themes';
 export type { AllThemesConfig } from './use-all-themes';
 export { default as useToasts } from './use-toasts';