@helpdice/ui 1.6.2 → 1.6.4

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.
Files changed (13) hide show
  1. package/dist/Placeholder/index.js +2 -2
  2. package/dist/badge/badge.d.ts +1 -1
  3. package/dist/badge/index.js +12 -12
  4. package/dist/checkbox/index.js +9 -8
  5. package/dist/index.js +33 -25
  6. package/dist/table/index.js +12 -5
  7. package/esm/Placeholder/empty.js +2 -2
  8. package/esm/badge/badge.d.ts +1 -1
  9. package/esm/badge/badge.js +12 -12
  10. package/esm/checkbox/checkbox.js +9 -8
  11. package/esm/table/data-table.js +8 -2
  12. package/esm/table/table-body.js +3 -2
  13. package/package.json +1 -1
package/dist/Placeholder/index.js CHANGED
@@ -149,8 +149,8 @@ function _unsupportedIterableToArray(r, a) {
149
149
  function Empty() {
150
150
  return /*#__PURE__*/React.createElement("svg", {
151
151
  xmlns: "http://www.w3.org/2000/svg",
152
- width: "20em",
153
- height: "20em",
152
+ width: "10em",
153
+ height: "10em",
154
154
  "data-name": "Layer 1",
155
155
  viewBox: "0 0 1009.54 789.93"
156
156
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
package/dist/badge/badge.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { NormalTypes } from '../utils/prop-types';
3
3
  export type BadgeTypes = NormalTypes;
4
4
  interface Props {
5
- type?: BadgeTypes;
5
+ color?: BadgeTypes;
6
6
  dot?: boolean;
7
7
  className?: string;
8
8
  }
package/dist/badge/index.js CHANGED
@@ -1180,7 +1180,7 @@ var useClasses = function useClasses() {
1180
1180
  return classes.trim();
1181
1181
  };
1182
1182
 
1183
- var _excluded = ["type", "className", "children", "dot"];
1183
+ var _excluded = ["color", "className", "children", "dot"];
1184
1184
  var getBgColor = function getBgColor(type, palette) {
1185
1185
  var colors = {
1186
1186
  "default": palette.foreground,
@@ -1192,8 +1192,8 @@ var getBgColor = function getBgColor(type, palette) {
1192
1192
  return colors[type];
1193
1193
  };
1194
1194
  var BadgeComponent = function BadgeComponent(_ref) {
1195
- var _ref$type = _ref.type,
1196
- type = _ref$type === void 0 ? 'default' : _ref$type,
1195
+ var _ref$color = _ref.color,
1196
+ color = _ref$color === void 0 ? 'default' : _ref$color,
1197
1197
  _ref$className = _ref.className,
1198
1198
  className = _ref$className === void 0 ? '' : _ref$className,
1199
1199
  children = _ref.children,
@@ -1204,21 +1204,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
1204
1204
  var _useScale = useScale(),
1205
1205
  SCALES = _useScale.SCALES;
1206
1206
  var bg = React.useMemo(function () {
1207
- return getBgColor(type, theme.palette);
1208
- }, [type, theme.palette]);
1209
- var color = React.useMemo(function () {
1210
- if (!type || type === 'default') return theme.palette.background;
1207
+ return getBgColor(color, theme.palette);
1208
+ }, [color, theme.palette]);
1209
+ var _color = React.useMemo(function () {
1210
+ if (!color || color === 'default') return theme.palette.background;
1211
1211
  return 'white';
1212
- }, [type, theme.palette.background]);
1212
+ }, [color, theme.palette.background]);
1213
1213
  var classes = useClasses('badge', {
1214
1214
  dot: dot
1215
1215
  }, className);
1216
1216
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
1217
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
1217
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
1218
1218
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
1219
- id: "427831233",
1220
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
1221
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
1219
+ id: "1238256810",
1220
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
1221
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
1222
1222
  };
1223
1223
  BadgeComponent.displayName = 'Badge';
1224
1224
  var Badge = withScale(BadgeComponent);
package/dist/checkbox/index.js CHANGED
@@ -1345,10 +1345,11 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
1345
1345
  return /*#__PURE__*/React.createElement("label", {
1346
1346
  style: block ? {
1347
1347
  backgroundColor: '#efefef',
1348
- padding: '15px',
1349
- height: '2.5rem'
1348
+ padding: '20px 15px',
1349
+ height: '2.5rem',
1350
+ width: '100%'
1350
1351
  } : {},
1351
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
1352
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
1352
1353
  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
1353
1354
  fill: fill,
1354
1355
  bg: bg,
@@ -1360,13 +1361,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
1360
1361
  checked: selfChecked,
1361
1362
  onChange: changeHandle
1362
1363
  }, props, {
1363
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
1364
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
1364
1365
  })), /*#__PURE__*/React.createElement("span", {
1365
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
1366
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
1366
1367
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
1367
- id: "4126727675",
1368
- dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
1369
- }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
1368
+ id: "204928356",
1369
+ dynamic: [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
1370
+ }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1.1), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
1370
1371
  };
1371
1372
  CheckboxComponent.displayName = 'Checkbox';
1372
1373
  var Checkbox = withScale(CheckboxComponent);
package/dist/index.js CHANGED
@@ -12829,7 +12829,7 @@ var AvatarGroup = withScale(AvatarGroupComponent);
12829
12829
 
12830
12830
  Avatar.Group = AvatarGroup;
12831
12831
 
12832
- var _excluded$1h = ["type", "className", "children", "dot"];
12832
+ var _excluded$1h = ["color", "className", "children", "dot"];
12833
12833
  var getBgColor = function getBgColor(type, palette) {
12834
12834
  var colors = {
12835
12835
  "default": palette.foreground,
@@ -12841,8 +12841,8 @@ var getBgColor = function getBgColor(type, palette) {
12841
12841
  return colors[type];
12842
12842
  };
12843
12843
  var BadgeComponent = function BadgeComponent(_ref) {
12844
- var _ref$type = _ref.type,
12845
- type = _ref$type === void 0 ? 'default' : _ref$type,
12844
+ var _ref$color = _ref.color,
12845
+ color = _ref$color === void 0 ? 'default' : _ref$color,
12846
12846
  _ref$className = _ref.className,
12847
12847
  className = _ref$className === void 0 ? '' : _ref$className,
12848
12848
  children = _ref.children,
@@ -12853,21 +12853,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
12853
12853
  var _useScale = useScale(),
12854
12854
  SCALES = _useScale.SCALES;
12855
12855
  var bg = React$1.useMemo(function () {
12856
- return getBgColor(type, theme.palette);
12857
- }, [type, theme.palette]);
12858
- var color = React$1.useMemo(function () {
12859
- if (!type || type === 'default') return theme.palette.background;
12856
+ return getBgColor(color, theme.palette);
12857
+ }, [color, theme.palette]);
12858
+ var _color = React$1.useMemo(function () {
12859
+ if (!color || color === 'default') return theme.palette.background;
12860
12860
  return 'white';
12861
- }, [type, theme.palette.background]);
12861
+ }, [color, theme.palette.background]);
12862
12862
  var classes = useClasses('badge', {
12863
12863
  dot: dot
12864
12864
  }, className);
12865
12865
  return /*#__PURE__*/React$1.createElement("span", _extends({}, props, {
12866
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
12866
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
12867
12867
  }), !dot && children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
12868
- id: "427831233",
12869
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
12870
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
12868
+ id: "1238256810",
12869
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
12870
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
12871
12871
  };
12872
12872
  BadgeComponent.displayName = 'Badge';
12873
12873
  var Badge = withScale(BadgeComponent);
@@ -14514,10 +14514,11 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
14514
14514
  return /*#__PURE__*/React$1.createElement("label", {
14515
14515
  style: block ? {
14516
14516
  backgroundColor: '#efefef',
14517
- padding: '15px',
14518
- height: '2.5rem'
14517
+ padding: '20px 15px',
14518
+ height: '2.5rem',
14519
+ width: '100%'
14519
14520
  } : {},
14520
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
14521
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
14521
14522
  }, /*#__PURE__*/React$1.createElement(CheckboxIcon, {
14522
14523
  fill: fill,
14523
14524
  bg: bg,
@@ -14529,13 +14530,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
14529
14530
  checked: selfChecked,
14530
14531
  onChange: changeHandle
14531
14532
  }, props, {
14532
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
14533
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
14533
14534
  })), /*#__PURE__*/React$1.createElement("span", {
14534
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
14535
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
14535
14536
  }, children), /*#__PURE__*/React$1.createElement(_JSXStyle, {
14536
- id: "4126727675",
14537
- dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
14538
- }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
14537
+ id: "204928356",
14538
+ dynamic: [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
14539
+ }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1.1), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
14539
14540
  };
14540
14541
  CheckboxComponent.displayName = 'Checkbox';
14541
14542
  var Checkbox = withScale(CheckboxComponent);
@@ -43736,8 +43737,8 @@ var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
43736
43737
  function Empty() {
43737
43738
  return /*#__PURE__*/React$1.createElement("svg", {
43738
43739
  xmlns: "http://www.w3.org/2000/svg",
43739
- width: "20em",
43740
- height: "20em",
43740
+ width: "10em",
43741
+ height: "10em",
43741
43742
  "data-name": "Layer 1",
43742
43743
  viewBox: "0 0 1009.54 789.93"
43743
43744
  }, /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("linearGradient", {
@@ -44526,6 +44527,12 @@ function DataTable(_ref) {
44526
44527
  // }}>Apply</Button></Popover.Item></>
44527
44528
  // )
44528
44529
 
44530
+ var SELECTED = React$1.useMemo(function () {
44531
+ if (selected.length > 0 && onSelected) {
44532
+ return onSelected(selected);
44533
+ }
44534
+ return /*#__PURE__*/React$1.createElement(React$1.Fragment, null);
44535
+ }, [selected]);
44529
44536
  return /*#__PURE__*/React$1.createElement(GridContainer, {
44530
44537
  className: "helpdice-ui-data-table-container",
44531
44538
  direction: "column"
@@ -44562,7 +44569,7 @@ function DataTable(_ref) {
44562
44569
  },
44563
44570
  justify: "flex-end",
44564
44571
  alignContent: "center"
44565
- }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
44572
+ }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
44566
44573
  text: "Edit Selected",
44567
44574
  placement: "bottom",
44568
44575
  font: 0.8,
@@ -44774,10 +44781,11 @@ var TableBody = function TableBody(_ref) {
44774
44781
  // };
44775
44782
 
44776
44783
  // Push Selected Rows
44777
- // useEffect(() => {
44784
+ // const SELECTED = useMemo(() => {
44778
44785
  // if (selected.length > 0 && onSelected) {
44779
- // onSelected(selected);
44786
+ // return onSelected(selected);
44780
44787
  // }
44788
+ // return <></>;
44781
44789
  // }, [selected]);
44782
44790
 
44783
44791
  function renderRow(cols, row, index) {
package/dist/table/index.js CHANGED
@@ -20068,8 +20068,8 @@ var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
20068
20068
  function Empty() {
20069
20069
  return /*#__PURE__*/React.createElement("svg", {
20070
20070
  xmlns: "http://www.w3.org/2000/svg",
20071
- width: "20em",
20072
- height: "20em",
20071
+ width: "10em",
20072
+ height: "10em",
20073
20073
  "data-name": "Layer 1",
20074
20074
  viewBox: "0 0 1009.54 789.93"
20075
20075
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
@@ -31805,6 +31805,12 @@ function DataTable(_ref) {
31805
31805
  // }}>Apply</Button></Popover.Item></>
31806
31806
  // )
31807
31807
 
31808
+ var SELECTED = React.useMemo(function () {
31809
+ if (selected.length > 0 && onSelected) {
31810
+ return onSelected(selected);
31811
+ }
31812
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
31813
+ }, [selected]);
31808
31814
  return /*#__PURE__*/React.createElement(GridContainer, {
31809
31815
  className: "helpdice-ui-data-table-container",
31810
31816
  direction: "column"
@@ -31841,7 +31847,7 @@ function DataTable(_ref) {
31841
31847
  },
31842
31848
  justify: "flex-end",
31843
31849
  alignContent: "center"
31844
- }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
31850
+ }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
31845
31851
  text: "Edit Selected",
31846
31852
  placement: "bottom",
31847
31853
  font: 0.8,
@@ -32053,10 +32059,11 @@ var TableBody = function TableBody(_ref) {
32053
32059
  // };
32054
32060
 
32055
32061
  // Push Selected Rows
32056
- // useEffect(() => {
32062
+ // const SELECTED = useMemo(() => {
32057
32063
  // if (selected.length > 0 && onSelected) {
32058
- // onSelected(selected);
32064
+ // return onSelected(selected);
32059
32065
  // }
32066
+ // return <></>;
32060
32067
  // }, [selected]);
32061
32068
 
32062
32069
  function renderRow(cols, row, index) {
package/esm/Placeholder/empty.js CHANGED
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  function Empty() {
3
3
  return /*#__PURE__*/React.createElement("svg", {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
- width: "20em",
6
- height: "20em",
5
+ width: "10em",
6
+ height: "10em",
7
7
  "data-name": "Layer 1",
8
8
  viewBox: "0 0 1009.54 789.93"
9
9
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
package/esm/badge/badge.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { NormalTypes } from '../utils/prop-types';
3
3
  export type BadgeTypes = NormalTypes;
4
4
  interface Props {
5
- type?: BadgeTypes;
5
+ color?: BadgeTypes;
6
6
  dot?: boolean;
7
7
  className?: string;
8
8
  }
package/esm/badge/badge.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["type", "className", "children", "dot"];
3
+ var _excluded = ["color", "className", "children", "dot"];
4
4
  import _JSXStyle from "../styled-jsx.es.js";
5
5
  /* "use client" */
6
6
 
@@ -19,8 +19,8 @@ var getBgColor = function getBgColor(type, palette) {
19
19
  return colors[type];
20
20
  };
21
21
  var BadgeComponent = function BadgeComponent(_ref) {
22
- var _ref$type = _ref.type,
23
- type = _ref$type === void 0 ? 'default' : _ref$type,
22
+ var _ref$color = _ref.color,
23
+ color = _ref$color === void 0 ? 'default' : _ref$color,
24
24
  _ref$className = _ref.className,
25
25
  className = _ref$className === void 0 ? '' : _ref$className,
26
26
  children = _ref.children,
@@ -31,21 +31,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
31
31
  var _useScale = useScale(),
32
32
  SCALES = _useScale.SCALES;
33
33
  var bg = useMemo(function () {
34
- return getBgColor(type, theme.palette);
35
- }, [type, theme.palette]);
36
- var color = useMemo(function () {
37
- if (!type || type === 'default') return theme.palette.background;
34
+ return getBgColor(color, theme.palette);
35
+ }, [color, theme.palette]);
36
+ var _color = useMemo(function () {
37
+ if (!color || color === 'default') return theme.palette.background;
38
38
  return 'white';
39
- }, [type, theme.palette.background]);
39
+ }, [color, theme.palette.background]);
40
40
  var classes = useClasses('badge', {
41
41
  dot: dot
42
42
  }, className);
43
43
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
44
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
44
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
45
45
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
46
- id: "427831233",
47
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
48
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
46
+ id: "1238256810",
47
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
48
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
49
49
  };
50
50
  BadgeComponent.displayName = 'Badge';
51
51
  var Badge = withScale(BadgeComponent);
package/esm/checkbox/checkbox.js CHANGED
@@ -82,10 +82,11 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
82
82
  return /*#__PURE__*/React.createElement("label", {
83
83
  style: block ? {
84
84
  backgroundColor: '#efefef',
85
- padding: '15px',
86
- height: '2.5rem'
85
+ padding: '20px 15px',
86
+ height: '2.5rem',
87
+ width: '100%'
87
88
  } : {},
88
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
89
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
89
90
  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
90
91
  fill: fill,
91
92
  bg: bg,
@@ -97,13 +98,13 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
97
98
  checked: selfChecked,
98
99
  onChange: changeHandle
99
100
  }, props, {
100
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
101
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
101
102
  })), /*#__PURE__*/React.createElement("span", {
102
- className: _JSXStyle.dynamic([["4126727675", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
103
+ className: _JSXStyle.dynamic([["204928356", [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
103
104
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
104
- id: "4126727675",
105
- dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
106
- }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
105
+ id: "204928356",
106
+ dynamic: [SCALES.font(1.1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
107
+ }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1.1), ";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;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
107
108
  };
108
109
  CheckboxComponent.displayName = 'Checkbox';
109
110
  var Checkbox = withScale(CheckboxComponent);
package/esm/table/data-table.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import React, { memo, useEffect, useState } from 'react';
3
+ import React, { memo, useEffect, useMemo, useState } from 'react';
4
4
  // import { useDebounce } from 'use-debounce';
5
5
  import { ArrowLeft, Columns, Delete, Edit, Filters, Refresh } from '@helpdice/icons';
6
6
  // import InfiniteScroll from 'react-infinite-scroll-component';
@@ -253,6 +253,12 @@ function DataTable(_ref) {
253
253
  // }}>Apply</Button></Popover.Item></>
254
254
  // )
255
255
 
256
+ var SELECTED = useMemo(function () {
257
+ if (selected.length > 0 && onSelected) {
258
+ return onSelected(selected);
259
+ }
260
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
261
+ }, [selected]);
256
262
  return /*#__PURE__*/React.createElement(Container, {
257
263
  className: "helpdice-ui-data-table-container",
258
264
  direction: "column"
@@ -289,7 +295,7 @@ function DataTable(_ref) {
289
295
  },
290
296
  justify: "flex-end",
291
297
  alignContent: "center"
292
- }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
298
+ }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
293
299
  text: "Edit Selected",
294
300
  placement: "bottom",
295
301
  font: 0.8,
package/esm/table/table-body.js CHANGED
@@ -62,10 +62,11 @@ var TableBody = function TableBody(_ref) {
62
62
  // };
63
63
 
64
64
  // Push Selected Rows
65
- // useEffect(() => {
65
+ // const SELECTED = useMemo(() => {
66
66
  // if (selected.length > 0 && onSelected) {
67
- // onSelected(selected);
67
+ // return onSelected(selected);
68
68
  // }
69
+ // return <></>;
69
70
  // }, [selected]);
70
71
 
71
72
  function renderRow(cols, row, index) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.6.2",
3
+ "version": "1.6.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",