@helpdice/ui 2.3.2 → 2.3.5

package/dist/index.js

@@ -1368,7 +1368,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$1o = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded$1o = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1404,6 +1404,7 @@ var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
+    onEnter = _ref.onEnter,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
     _ref$placeholder = _ref.placeholder,
@@ -1483,6 +1484,11 @@ var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
       setSelfValue(value);
     }
   });
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      onEnter && onEnter(e);
+    }
+  };
   var controlledValue = isControlledComponent ? {
     value: selfValue
   } : {
@@ -1510,7 +1516,8 @@ var InputComponent = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
     onFocus: focusHandler,
     onBlur: blurHandler,
     onChange: changeHandler,
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    onKeyDown: handleKeyDown
   }, inputProps, {
     className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
       disabled: disabled
@@ -4226,7 +4233,7 @@ AutoComplete.Option = AutoCompleteItemComponent;
 AutoComplete.Searching = AutoCompleteSearch;
 AutoComplete.Empty = AutoCompleteEmpty;
 
-var _excluded$1i = ["src", "stacked", "text", "isSquare", "className", "children"];
+var _excluded$1i = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
 
 // type NativeAttrs = Omit<
 //   Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>,
@@ -4239,6 +4246,7 @@ var safeText = function safeText(text) {
 };
 var AvatarComponent = function AvatarComponent(_ref) {
   var src = _ref.src,
+    errorSrc = _ref.errorSrc,
     _ref$stacked = _ref.stacked,
     stacked = _ref$stacked === void 0 ? false : _ref$stacked,
     _ref$text = _ref.text,
@@ -4263,6 +4271,11 @@ var AvatarComponent = function AvatarComponent(_ref) {
     src: src,
     draggable: false
   }, props, {
+    onError: function onError(e) {
+      var target = e.currentTarget;
+      target.onerror = null; // prevent loop
+      target.src = errorSrc !== null && errorSrc !== void 0 ? errorSrc : "https://helpdice.com/avatar.webp";
+    },
     className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
   })), showText && /*#__PURE__*/React$1.createElement("span", _extends({}, props, {
     className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
@@ -4931,7 +4944,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1d = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$1d = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "a", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -4970,6 +4983,8 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
     _filteredProps$round = filteredProps.round,
     round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    _filteredProps$a = filteredProps.a,
+    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -5073,7 +5088,11 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React$1.createElement("button", _extends({
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, a ? /*#__PURE__*/React$1.createElement("a", _extends({}, props, {
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React$1.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon) : /*#__PURE__*/React$1.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
@@ -5087,7 +5106,7 @@ var ButtonComponent = /*#__PURE__*/React$1.forwardRef(function (btnProps, ref) {
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React$1.createElement(_JSXStyle, {
     id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : '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(btnShadow, ";}.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;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
@@ -5097,36 +5116,25 @@ var Button = withScale(ButtonComponent);
 
 var CompactButton = function CompactButton(_ref) {
   _ref.color;
-    var _ref$to = _ref.to,
-    to = _ref$to === void 0 ? '/' : _ref$to,
-    children = _ref.children,
+    var children = _ref.children,
     iconRight = _ref.iconRight,
     icon = _ref.icon,
     _ref$scale = _ref.scale,
     scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
     type = _ref.type,
     style = _ref.style,
-    a = _ref.a,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? "_self" : _ref$target,
     onClick = _ref.onClick;
   var theme$1 = theme.useTheme();
-  if (a) {
-    return /*#__PURE__*/React$1.createElement(Button, {
-      icon: icon,
-      style: _objectSpread2(_objectSpread2({}, style), {}, {
-        backgroundColor: theme$1.palette.background
-      }),
-      type: type,
-      onClick: function onClick() {
-        return window.open(to, target);
-      },
-      auto: true,
-      scale: scale,
-      px: 0.6,
-      iconRight: iconRight
-    }, children);
-  }
+  // if (a) {
+  //     return (
+  //         <Button icon={icon} style={{
+  //             ...style,
+  //             backgroundColor: theme.palette.background
+  //         }} type={type} onClick={() => window.open(to, target)} auto scale={scale} px={0.6} iconRight={iconRight}>
+  //             {children}
+  //         </Button>
+  //     );
+  // }
   return /*#__PURE__*/React$1.createElement(Button, {
     icon: icon,
     style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -5140,7 +5148,11 @@ var CompactButton = function CompactButton(_ref) {
     iconRight: iconRight
   }, children);
 };
-var button_compact = /*#__PURE__*/React$1.memo(CompactButton);
+var CompactButton$1 = /*#__PURE__*/React$1.memo(CompactButton);
+
+/* "use client" */
+
+Button.Compact = CompactButton$1;
 
 /* "use client" */
 
@@ -35689,7 +35701,7 @@ var TableCell = function TableCell(_ref) {
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, columns.map(function (column, index) {
     var _row$_id;
     var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
+    var cellValue = _typeof(currentRowValue) === "object" ? currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.value : currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
     return /*#__PURE__*/React$1.createElement("td", {
       style: _objectSpread2({
@@ -42223,7 +42235,6 @@ exports.KeyMod = KeyMod;
 exports.Keyboard = Keyboard;
 exports.LinearProgress = LinearProgress;
 exports.Link = Link;
-exports.LinkButton = button_compact;
 exports.List = List;
 exports.Loading = Loading;
 exports.LoginWithApple = index$1;

package/dist/input/index.js

@@ -1024,7 +1024,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$3 = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded$3 = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1060,6 +1060,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
+    onEnter = _ref.onEnter,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
     _ref$placeholder = _ref.placeholder,
@@ -1139,6 +1140,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setSelfValue(value);
     }
   });
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      onEnter && onEnter(e);
+    }
+  };
   var controlledValue = isControlledComponent ? {
     value: selfValue
   } : {
@@ -1166,7 +1172,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus: focusHandler,
     onBlur: blurHandler,
     onChange: changeHandler,
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    onKeyDown: handleKeyDown
   }, inputProps, {
     className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
       disabled: disabled

package/dist/input/input-props.d.ts

@@ -24,6 +24,7 @@ export interface Props {
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     autoComplete?: string;
     crossOrigin?: any;
     onPointerEnterCapture?: any;

package/dist/modal/index.js

@@ -1460,7 +1460,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$5 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$5 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "a", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -1499,6 +1499,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
     _filteredProps$round = filteredProps.round,
     round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    _filteredProps$a = filteredProps.a,
+    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -1602,7 +1604,11 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, a ? /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
@@ -1616,7 +1622,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : '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(btnShadow, ";}.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;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));

package/dist/placeholder/index.js

@@ -1683,7 +1683,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$1 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "a", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -1722,6 +1722,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
     _filteredProps$round = filteredProps.round,
     round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    _filteredProps$a = filteredProps.a,
+    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -1825,7 +1827,11 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, a ? /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
@@ -1839,7 +1845,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : '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(btnShadow, ";}.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;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
@@ -1847,6 +1853,46 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
+var CompactButton = function CompactButton(_ref) {
+  _ref.color;
+    var children = _ref.children,
+    iconRight = _ref.iconRight,
+    icon = _ref.icon,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
+    type = _ref.type,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  var theme$1 = theme.useTheme();
+  // if (a) {
+  //     return (
+  //         <Button icon={icon} style={{
+  //             ...style,
+  //             backgroundColor: theme.palette.background
+  //         }} type={type} onClick={() => window.open(to, target)} auto scale={scale} px={0.6} iconRight={iconRight}>
+  //             {children}
+  //         </Button>
+  //     );
+  // }
+  return /*#__PURE__*/React.createElement(Button, {
+    icon: icon,
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      backgroundColor: theme$1.palette.background
+    }),
+    type: type,
+    onClick: onClick,
+    auto: true,
+    scale: scale,
+    px: 0.6,
+    iconRight: iconRight
+  }, children);
+};
+var CompactButton$1 = /*#__PURE__*/React.memo(CompactButton);
+
+/* "use client" */
+
+Button.Compact = CompactButton$1;
+
 var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;

package/dist/table/index.js

@@ -183,6 +183,15 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -1073,7 +1082,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$i = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded$i = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1109,6 +1118,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
+    onEnter = _ref.onEnter,
     _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
     _ref$placeholder = _ref.placeholder,
@@ -1188,6 +1198,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setSelfValue(value);
     }
   });
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      onEnter && onEnter(e);
+    }
+  };
   var controlledValue = isControlledComponent ? {
     value: selfValue
   } : {
@@ -1215,7 +1230,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus: focusHandler,
     onBlur: blurHandler,
     onChange: changeHandler,
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    onKeyDown: handleKeyDown
   }, inputProps, {
     className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
       disabled: disabled
@@ -22340,7 +22356,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$6 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$6 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "a", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -22379,6 +22395,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
     _filteredProps$round = filteredProps.round,
     round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    _filteredProps$a = filteredProps.a,
+    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -22482,7 +22500,11 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, a ? /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
@@ -22496,7 +22518,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : '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(btnShadow, ";}.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;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
@@ -22504,6 +22526,46 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
+var CompactButton = function CompactButton(_ref) {
+  _ref.color;
+    var children = _ref.children,
+    iconRight = _ref.iconRight,
+    icon = _ref.icon,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
+    type = _ref.type,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  var theme$1 = theme.useTheme();
+  // if (a) {
+  //     return (
+  //         <Button icon={icon} style={{
+  //             ...style,
+  //             backgroundColor: theme.palette.background
+  //         }} type={type} onClick={() => window.open(to, target)} auto scale={scale} px={0.6} iconRight={iconRight}>
+  //             {children}
+  //         </Button>
+  //     );
+  // }
+  return /*#__PURE__*/React.createElement(Button, {
+    icon: icon,
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      backgroundColor: theme$1.palette.background
+    }),
+    type: type,
+    onClick: onClick,
+    auto: true,
+    scale: scale,
+    px: 0.6,
+    iconRight: iconRight
+  }, children);
+};
+var CompactButton$1 = /*#__PURE__*/React.memo(CompactButton);
+
+/* "use client" */
+
+Button.Compact = CompactButton$1;
+
 var _excluded$5 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
@@ -22723,7 +22785,7 @@ var TableCell = function TableCell(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
     var _row$_id;
     var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
+    var cellValue = _typeof(currentRowValue) === "object" ? currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.value : currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
     return /*#__PURE__*/React.createElement("td", {
       style: _objectSpread2({

package/dist/text/index.js

@@ -1378,7 +1378,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$1 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "a", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -1417,6 +1417,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
     _filteredProps$round = filteredProps.round,
     round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    _filteredProps$a = filteredProps.a,
+    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
     onClick = filteredProps.onClick,
     _filteredProps$auto = filteredProps.auto,
     auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
@@ -1520,7 +1522,11 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 
   // If shadow provided is string then value other default
   var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, a ? /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
@@ -1534,7 +1540,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     y: dripY,
     color: dripColor,
     onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : '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, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.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(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : '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(btnShadow, ";}.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;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
@@ -1542,6 +1548,46 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
+var CompactButton = function CompactButton(_ref) {
+  _ref.color;
+    var children = _ref.children,
+    iconRight = _ref.iconRight,
+    icon = _ref.icon,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
+    type = _ref.type,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  var theme$1 = theme.useTheme();
+  // if (a) {
+  //     return (
+  //         <Button icon={icon} style={{
+  //             ...style,
+  //             backgroundColor: theme.palette.background
+  //         }} type={type} onClick={() => window.open(to, target)} auto scale={scale} px={0.6} iconRight={iconRight}>
+  //             {children}
+  //         </Button>
+  //     );
+  // }
+  return /*#__PURE__*/React.createElement(Button, {
+    icon: icon,
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      backgroundColor: theme$1.palette.background
+    }),
+    type: type,
+    onClick: onClick,
+    auto: true,
+    scale: scale,
+    px: 0.6,
+    iconRight: iconRight
+  }, children);
+};
+var CompactButton$1 = /*#__PURE__*/React.memo(CompactButton);
+
+/* "use client" */
+
+Button.Compact = CompactButton$1;
+
 var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;