@helpdice/ui 1.4.8 → 1.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1779,7 +1779,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
1779
1779
  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
1780
1780
  };
1781
1781
 
1782
- var _excluded$6 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
1782
+ var _excluded$6 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
1783
1783
  var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1784
1784
  var theme = useTheme();
1785
1785
  var _useScale = useScale(),
@@ -1815,6 +1815,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1815
1815
  ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
1816
1816
  _filteredProps$effect = filteredProps.effect,
1817
1817
  effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
1818
+ _filteredProps$round = filteredProps.round,
1819
+ round = _filteredProps$round === undefined ? false : _filteredProps$round,
1818
1820
  onClick = filteredProps.onClick,
1819
1821
  _filteredProps$auto = filteredProps.auto,
1820
1822
  auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
@@ -1878,7 +1880,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1878
1880
  disabled: disabled,
1879
1881
  onClick: clickHandler
1880
1882
  }, props, {
1881
- 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) || "")
1883
+ 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) || "")
1882
1884
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
1883
1885
  color: color
1884
1886
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -1887,9 +1889,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1887
1889
  color: dripColor,
1888
1890
  onCompleted: dripCompletedHandle
1889
1891
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
1890
- id: "22324076",
1891
- 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']
1892
- }, ".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;}")));
1892
+ id: "1558010596",
1893
+ 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']
1894
+ }, ".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;}")));
1893
1895
  });
1894
1896
  ButtonComponent.displayName = 'Button';
1895
1897
  var Button = withScale(ButtonComponent);
@@ -30892,7 +30892,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
30892
30892
  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
30893
30893
  };
30894
30894
 
30895
- var _excluded$8 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
30895
+ var _excluded$8 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
30896
30896
  var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
30897
30897
  var theme = useTheme();
30898
30898
  var _useScale = useScale(),
@@ -30928,6 +30928,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
30928
30928
  ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
30929
30929
  _filteredProps$effect = filteredProps.effect,
30930
30930
  effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
30931
+ _filteredProps$round = filteredProps.round,
30932
+ round = _filteredProps$round === undefined ? false : _filteredProps$round,
30931
30933
  onClick = filteredProps.onClick,
30932
30934
  _filteredProps$auto = filteredProps.auto,
30933
30935
  auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
@@ -30991,7 +30993,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
30991
30993
  disabled: disabled,
30992
30994
  onClick: clickHandler
30993
30995
  }, props, {
30994
- 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) || "")
30996
+ 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) || "")
30995
30997
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
30996
30998
  color: color
30997
30999
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -31000,9 +31002,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
31000
31002
  color: dripColor,
31001
31003
  onCompleted: dripCompletedHandle
31002
31004
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
31003
- id: "22324076",
31004
- 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']
31005
- }, ".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;}")));
31005
+ id: "1558010596",
31006
+ 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']
31007
+ }, ".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;}")));
31006
31008
  });
31007
31009
  ButtonComponent.displayName = 'Button';
31008
31010
  var Button = withScale(ButtonComponent);
@@ -1772,7 +1772,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
1772
1772
  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
1773
1773
  };
1774
1774
 
1775
- var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
1775
+ var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
1776
1776
  var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1777
1777
  var theme = useTheme();
1778
1778
  var _useScale = useScale(),
@@ -1808,6 +1808,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1808
1808
  ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
1809
1809
  _filteredProps$effect = filteredProps.effect,
1810
1810
  effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
1811
+ _filteredProps$round = filteredProps.round,
1812
+ round = _filteredProps$round === undefined ? false : _filteredProps$round,
1811
1813
  onClick = filteredProps.onClick,
1812
1814
  _filteredProps$auto = filteredProps.auto,
1813
1815
  auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
@@ -1871,7 +1873,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1871
1873
  disabled: disabled,
1872
1874
  onClick: clickHandler
1873
1875
  }, props, {
1874
- 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) || "")
1876
+ 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) || "")
1875
1877
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
1876
1878
  color: color
1877
1879
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -1880,9 +1882,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1880
1882
  color: dripColor,
1881
1883
  onCompleted: dripCompletedHandle
1882
1884
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
1883
- id: "22324076",
1884
- 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']
1885
- }, ".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;}")));
1885
+ id: "1558010596",
1886
+ 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']
1887
+ }, ".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;}")));
1886
1888
  });
1887
1889
  ButtonComponent.displayName = 'Button';
1888
1890
  var Button = withScale(ButtonComponent);
@@ -0,0 +1,15 @@
1
+ import { CSSProperties } from 'react';
2
+ type CompactButtonProps = {
3
+ children?: React.ReactNode;
4
+ iconRight?: React.ReactNode;
5
+ to: string;
6
+ icon?: React.ReactNode;
7
+ scale?: number;
8
+ type?: any;
9
+ style?: CSSProperties;
10
+ a?: boolean;
11
+ target?: string;
12
+ onClick?: () => void;
13
+ };
14
+ export default function CompactButton({ to, children, iconRight, icon, scale, type, style, a, target, onClick }: CompactButtonProps): import("react").JSX.Element;
15
+ export {};
@@ -0,0 +1,77 @@
1
+ import Button from './button';
2
+ export default function CompactButton(_ref) {
3
+ var _ref$to = _ref.to,
4
+ to = _ref$to === void 0 ? '/' : _ref$to,
5
+ children = _ref.children,
6
+ iconRight = _ref.iconRight,
7
+ icon = _ref.icon,
8
+ _ref$scale = _ref.scale,
9
+ scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
10
+ type = _ref.type,
11
+ style = _ref.style,
12
+ a = _ref.a,
13
+ target = _ref.target,
14
+ onClick = _ref.onClick;
15
+ if (a) {
16
+ return /*#__PURE__*/React.createElement("a", {
17
+ style: {
18
+ all: 'unset',
19
+ boxSizing: 'border-box',
20
+ display: 'inline-block',
21
+ lineHeight: 'calc(2.5* 16px)',
22
+ fontWeight: '400',
23
+ fontSize: 'calc(0.875* 16px)',
24
+ textAlign: 'center',
25
+ whiteSpace: 'nowrap',
26
+ position: 'relative',
27
+ overflow: 'hidden',
28
+ color: '#666',
29
+ backgroundColor: '#fff',
30
+ cursor: 'pointer',
31
+ minWidth: 'min-content',
32
+ width: 'auto',
33
+ height: 'calc(2.5* 16px)',
34
+ padding: '0 calc(0.69* 16px) 0 calc(0.69* 16px)',
35
+ margin: 0,
36
+ '--helpdice-ui-button-height': 'calc(2.5* 16px)',
37
+ '--helpdice-ui-button-icon-padding': 'calc(0.4362* 16px)'
38
+ },
39
+ href: to,
40
+ target: target
41
+ }, /*#__PURE__*/React.createElement("span", {
42
+ style: {
43
+ position: 'absolute',
44
+ right: 'auto',
45
+ left: 'var(--helpdice-ui-button-icon-padding)',
46
+ top: '50%',
47
+ transform: 'translateY(-50%)',
48
+ display: 'flex',
49
+ justifyContent: 'center',
50
+ alignItems: 'center',
51
+ color: 'var(--helpdice-ui-button-color)',
52
+ zIndex: 1
53
+ }
54
+ }, icon), /*#__PURE__*/React.createElement("div", {
55
+ style: {
56
+ display: 'inline-flex',
57
+ position: 'relative',
58
+ zIndex: 1,
59
+ justifyContent: 'center',
60
+ alignItems: 'center',
61
+ textAlign: 'center',
62
+ lineHeight: 'inherit',
63
+ paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
64
+ }
65
+ }, children));
66
+ }
67
+ return /*#__PURE__*/React.createElement(Button, {
68
+ icon: icon,
69
+ style: style,
70
+ type: type,
71
+ onClick: onClick,
72
+ auto: true,
73
+ scale: scale,
74
+ px: 0.6,
75
+ iconRight: iconRight
76
+ }, children);
77
+ }
@@ -5,6 +5,7 @@ interface Props {
5
5
  ghost?: boolean;
6
6
  loading?: boolean;
7
7
  shadow?: boolean;
8
+ round?: boolean;
8
9
  auto?: boolean;
9
10
  effect?: boolean;
10
11
  disabled?: boolean;
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
- var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
4
+ var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
5
5
  import _JSXStyle from "../styled-jsx.es.js";
6
6
  /* "use client" */
7
7
 
@@ -50,6 +50,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
50
50
  ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
51
51
  _filteredProps$effect = filteredProps.effect,
52
52
  effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
53
+ _filteredProps$round = filteredProps.round,
54
+ round = _filteredProps$round === void 0 ? false : _filteredProps$round,
53
55
  onClick = filteredProps.onClick,
54
56
  _filteredProps$auto = filteredProps.auto,
55
57
  auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -114,7 +116,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
114
116
  disabled: disabled,
115
117
  onClick: clickHandler
116
118
  }, props, {
117
- 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) || "")
119
+ 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) || "")
118
120
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
119
121
  color: color
120
122
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -123,9 +125,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
123
125
  color: dripColor,
124
126
  onCompleted: dripCompletedHandle
125
127
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
126
- id: "22324076",
127
- 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']
128
- }, ".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;}")));
128
+ id: "1558010596",
129
+ 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']
130
+ }, ".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;}")));
129
131
  });
130
132
  ButtonComponent.displayName = 'Button';
131
133
  var Button = withScale(ButtonComponent);
@@ -1,4 +1,5 @@
1
1
  import Button from './button';
2
+ export { default as LinkButton } from './button.compact';
2
3
  export type { ButtonProps } from './button';
3
4
  export type { ButtonTypes } from '../utils/prop-types';
4
5
  export default Button;
@@ -1,4 +1,5 @@
1
1
  /* "use client" */
2
2
 
3
3
  import Button from './button';
4
+ export { default as LinkButton } from './button.compact';
4
5
  export default Button;
package/esm/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export { default as Badge } from './badge';
6
6
  export type { BadgeProps, BadgeAnchorProps } from './badge';
7
7
  export { default as Breadcrumbs } from './breadcrumbs';
8
8
  export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbsSeparatorProps, } from './breadcrumbs';
9
- export { default as Button } from './button';
9
+ export { default as Button, LinkButton } from './button';
10
10
  export type { ButtonProps } from './button';
11
11
  export { default as ButtonDropdown } from './button-dropdown';
12
12
  export type { ButtonDropdownProps, ButtonDropdownItemProps } from './button-dropdown';
@@ -95,6 +95,7 @@ export { default as Tooltip } from './tooltip';
95
95
  export type { TooltipProps } from './tooltip';
96
96
  export { default as Tree } from './tree';
97
97
  export type { TreeProps } from './tree';
98
+ export { useTime, useTimer, useStopwatch } from './timer';
98
99
  export { default as useAllThemes } from './use-all-themes';
99
100
  export type { AllThemesConfig } from './use-all-themes';
100
101
  export { default as useToasts } from './use-toasts';
package/esm/index.js CHANGED
@@ -5,7 +5,7 @@ export { default as AutoComplete } from './auto-complete';
5
5
  export { default as Avatar } from './avatar';
6
6
  export { default as Badge } from './badge';
7
7
  export { default as Breadcrumbs } from './breadcrumbs';
8
- export { default as Button } from './button';
8
+ export { default as Button, LinkButton } from './button';
9
9
  export { default as ButtonDropdown } from './button-dropdown';
10
10
  export { default as ButtonGroup } from './button-group';
11
11
  export { default as Capacity } from './capacity';
@@ -54,6 +54,7 @@ export { default as Themes } from './themes';
54
54
  export { default as Toggle } from './toggle';
55
55
  export { default as Tooltip } from './tooltip';
56
56
  export { default as Tree } from './tree';
57
+ export { useTime, useTimer, useStopwatch } from './timer';
57
58
  export { default as useAllThemes } from './use-all-themes';
58
59
  export { default as useToasts } from './use-toasts';
59
60
  export { default as User } from './user';
@@ -0,0 +1,2 @@
1
+ import useInterval from './useInterval';
2
+ export { useInterval };
@@ -0,0 +1,20 @@
1
+ import { useEffect, useRef } from 'react';
2
+ export default function useInterval(callback, delay) {
3
+ var callbackRef = useRef();
4
+
5
+ // update callback function with current render callback that has access to latest props and state
6
+ useEffect(function () {
7
+ callbackRef.current = callback;
8
+ });
9
+ useEffect(function () {
10
+ if (!delay) {
11
+ return function () {};
12
+ }
13
+ var interval = setInterval(function () {
14
+ callbackRef.current && callbackRef.current();
15
+ }, delay);
16
+ return function () {
17
+ return clearInterval(interval);
18
+ };
19
+ }, [delay]);
20
+ }
@@ -0,0 +1,21 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import useTimer from './useTimer';
3
+ import useStopwatch from './useStopwatch';
4
+ import useTime from './useTime';
5
+ export { useTimer, useStopwatch, useTime };
6
+ export default function useTimerDeprecated(settings) {
7
+ if (settings.expiryTimestamp) {
8
+ var _values = useTimer(settings); // eslint-disable-line
9
+ return _extends({}, _values, {
10
+ startTimer: _values.start,
11
+ stopTimer: _values.pause,
12
+ resetTimer: function resetTimer() {}
13
+ });
14
+ }
15
+ var values = useStopwatch(settings); // eslint-disable-line
16
+ return _extends({}, values, {
17
+ startTimer: values.start,
18
+ stopTimer: values.pause,
19
+ resetTimer: values.reset
20
+ });
21
+ }
@@ -0,0 +1,55 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import { useState, useCallback } from 'react';
4
+ import { Time } from './utils';
5
+ import { useInterval } from './hooks';
6
+ export default function useStopwatch() {
7
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
8
+ autoStart = _ref.autoStart,
9
+ offsetTimestamp = _ref.offsetTimestamp;
10
+ var _useState = useState(Time.getSecondsFromExpiry(offsetTimestamp, true) || 0),
11
+ _useState2 = _slicedToArray(_useState, 2),
12
+ passedSeconds = _useState2[0],
13
+ setPassedSeconds = _useState2[1];
14
+ var _useState3 = useState(new Date()),
15
+ _useState4 = _slicedToArray(_useState3, 2),
16
+ prevTime = _useState4[0],
17
+ setPrevTime = _useState4[1];
18
+ var _useState5 = useState(passedSeconds + Time.getSecondsFromPrevTime(prevTime || 0, true)),
19
+ _useState6 = _slicedToArray(_useState5, 2),
20
+ seconds = _useState6[0],
21
+ setSeconds = _useState6[1];
22
+ var _useState7 = useState(autoStart),
23
+ _useState8 = _slicedToArray(_useState7, 2),
24
+ isRunning = _useState8[0],
25
+ setIsRunning = _useState8[1];
26
+ useInterval(function () {
27
+ setSeconds(passedSeconds + Time.getSecondsFromPrevTime(prevTime, true));
28
+ }, isRunning ? 1000 : null);
29
+ var start = useCallback(function () {
30
+ var newPrevTime = new Date();
31
+ setPrevTime(newPrevTime);
32
+ setIsRunning(true);
33
+ setSeconds(passedSeconds + Time.getSecondsFromPrevTime(newPrevTime, true));
34
+ }, [passedSeconds]);
35
+ var pause = useCallback(function () {
36
+ setPassedSeconds(seconds);
37
+ setIsRunning(false);
38
+ }, [seconds]);
39
+ var reset = useCallback(function () {
40
+ var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
41
+ var newAutoStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
42
+ var newPassedSeconds = Time.getSecondsFromExpiry(offset, true) || 0;
43
+ var newPrevTime = new Date();
44
+ setPrevTime(newPrevTime);
45
+ setPassedSeconds(newPassedSeconds);
46
+ setIsRunning(newAutoStart);
47
+ setSeconds(newPassedSeconds + Time.getSecondsFromPrevTime(newPrevTime, true));
48
+ }, []);
49
+ return _extends({}, Time.getTimeFromSeconds(seconds), {
50
+ start: start,
51
+ pause: pause,
52
+ reset: reset,
53
+ isRunning: isRunning
54
+ });
55
+ }
@@ -0,0 +1,17 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import { useState } from 'react';
4
+ import { Time } from './utils';
5
+ import { useInterval } from './hooks';
6
+ export default function useTime() {
7
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
8
+ format = _ref.format;
9
+ var _useState = useState(Time.getSecondsFromTimeNow()),
10
+ _useState2 = _slicedToArray(_useState, 2),
11
+ seconds = _useState2[0],
12
+ setSeconds = _useState2[1];
13
+ useInterval(function () {
14
+ setSeconds(Time.getSecondsFromTimeNow());
15
+ }, 1000);
16
+ return _extends({}, Time.getFormattedTimeFromSeconds(seconds, format));
17
+ }
@@ -0,0 +1,87 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import { useState, useCallback } from 'react';
4
+ import { Time, Validate } from './utils';
5
+ import { useInterval } from './hooks';
6
+ var DEFAULT_DELAY = 1000;
7
+ function getDelayFromExpiryTimestamp(expiryTimestamp) {
8
+ if (!Validate.expiryTimestamp(expiryTimestamp)) {
9
+ return null;
10
+ }
11
+ var seconds = Time.getSecondsFromExpiry(expiryTimestamp);
12
+ var extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1000);
13
+ return extraMilliSeconds > 0 ? extraMilliSeconds : DEFAULT_DELAY;
14
+ }
15
+ export default function useTimer() {
16
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
17
+ expiry = _ref.expiryTimestamp,
18
+ onExpire = _ref.onExpire,
19
+ _ref$autoStart = _ref.autoStart,
20
+ autoStart = _ref$autoStart === void 0 ? true : _ref$autoStart;
21
+ var _useState = useState(expiry),
22
+ _useState2 = _slicedToArray(_useState, 2),
23
+ expiryTimestamp = _useState2[0],
24
+ setExpiryTimestamp = _useState2[1];
25
+ var _useState3 = useState(Time.getSecondsFromExpiry(expiryTimestamp)),
26
+ _useState4 = _slicedToArray(_useState3, 2),
27
+ seconds = _useState4[0],
28
+ setSeconds = _useState4[1];
29
+ var _useState5 = useState(autoStart),
30
+ _useState6 = _slicedToArray(_useState5, 2),
31
+ isRunning = _useState6[0],
32
+ setIsRunning = _useState6[1];
33
+ var _useState7 = useState(autoStart),
34
+ _useState8 = _slicedToArray(_useState7, 2),
35
+ didStart = _useState8[0],
36
+ setDidStart = _useState8[1];
37
+ var _useState9 = useState(getDelayFromExpiryTimestamp(expiryTimestamp)),
38
+ _useState10 = _slicedToArray(_useState9, 2),
39
+ delay = _useState10[0],
40
+ setDelay = _useState10[1];
41
+ var handleExpire = useCallback(function () {
42
+ Validate.onExpire(onExpire) && onExpire();
43
+ setIsRunning(false);
44
+ setDelay(null);
45
+ }, [onExpire]);
46
+ var pause = useCallback(function () {
47
+ setIsRunning(false);
48
+ }, []);
49
+ var restart = useCallback(function (newExpiryTimestamp) {
50
+ var newAutoStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
51
+ setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp));
52
+ setDidStart(newAutoStart);
53
+ setIsRunning(newAutoStart);
54
+ setExpiryTimestamp(newExpiryTimestamp);
55
+ setSeconds(Time.getSecondsFromExpiry(newExpiryTimestamp));
56
+ }, []);
57
+ var resume = useCallback(function () {
58
+ var time = new Date();
59
+ time.setMilliseconds(time.getMilliseconds() + seconds * 1000);
60
+ restart(time);
61
+ }, [seconds, restart]);
62
+ var start = useCallback(function () {
63
+ if (didStart) {
64
+ setSeconds(Time.getSecondsFromExpiry(expiryTimestamp));
65
+ setIsRunning(true);
66
+ } else {
67
+ resume();
68
+ }
69
+ }, [expiryTimestamp, didStart, resume]);
70
+ useInterval(function () {
71
+ if (delay !== DEFAULT_DELAY) {
72
+ setDelay(DEFAULT_DELAY);
73
+ }
74
+ var secondsValue = Time.getSecondsFromExpiry(expiryTimestamp);
75
+ setSeconds(secondsValue);
76
+ if (secondsValue <= 0) {
77
+ handleExpire();
78
+ }
79
+ }, isRunning ? delay : null);
80
+ return _extends({}, Time.getTimeFromSeconds(seconds), {
81
+ start: start,
82
+ pause: pause,
83
+ resume: resume,
84
+ restart: restart,
85
+ isRunning: isRunning
86
+ });
87
+ }