@helpdice/ui 2.5.8 → 2.6.0-beta.0

package/dist/input/index.js

@@ -736,81 +736,6 @@ var InputLabel = function InputLabel(_ref) {
 };
 var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
 
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
-  var theme$1 = theme.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme$1.palette.accents_6]]]),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1278828862",
-      dynamic: [theme$1.palette.accents_6],
-      children: "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
-    })]
-  });
-};
-InputBlockLabelComponent.displayName = 'InputBlockLabel';
-var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
-
-var InputIconComponent = function InputIconComponent(_ref) {
-  var icon = _ref.icon,
-    _ref$clickable = _ref.clickable,
-    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
-    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "4247656379",
-      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
-      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-InputIconComponent.displayName = 'InputIcon';
-var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
-
-var InputIconClear = function InputIconClear(_ref) {
-  var onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    visible = _ref.visible;
-  var theme$1 = theme.useTheme();
-  var classes = theme.useClasses('clear-icon', {
-    visible: visible
-  });
-  var clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
-      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M18 6L6 18",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M6 6l12 12",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1567030211",
-      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
-      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
-
 /* "use client" */
 
 var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
@@ -995,6 +920,88 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
+  var children = _ref.children,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
+    children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
+      children: "*"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "588038827",
+      dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
+      children: "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme$1.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
+    })]
+  });
+};
+InputBlockLabelComponent.displayName = 'InputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
+
+var InputIconComponent = function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4247656379",
+      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
+      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
+};
+InputIconComponent.displayName = 'InputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
+
+var InputIconClear = function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    visible = _ref.visible;
+  var theme$1 = theme.useTheme();
+  var classes = theme.useClasses('clear-icon', {
+    visible: visible
+  });
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18 6L6 18",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M6 6l12 12",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1567030211",
+      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
+      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
+};
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
+
 var _excluded$8 = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
@@ -1874,7 +1881,7 @@ var getColors = function getColors(palette, status) {
   return colors[status];
 };
 
-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 _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", "required"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1920,6 +1927,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded$3);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -2005,6 +2013,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["1343268165", [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]]]) + " " + "with-label",
     children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: children
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: _JSXStyle.dynamic([["1343268165", [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]]]) + " " + (theme.useClasses('input-container', className) || ""),

package/dist/input/input-block-label.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface InputBlockLabelLabel {
+    required?: boolean;
 }
 declare const InputBlockLabel: React.NamedExoticComponent<React.PropsWithChildren<InputBlockLabelLabel>>;
 export default InputBlockLabel;

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

@@ -19,6 +19,7 @@ export interface Props {
     iconClickable?: boolean;
     className?: string;
     clearable?: boolean;
+    required?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;

package/dist/table/index.js

@@ -8,7 +8,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var pro = require('@helpdice/pro');
 var icons = require('@helpdice/icons');
-var Loading$1 = require('components/loading');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -745,81 +744,6 @@ var InputLabel = function InputLabel(_ref) {
 };
 var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
 
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
-  var theme$1 = theme.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme$1.palette.accents_6]]]),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1278828862",
-      dynamic: [theme$1.palette.accents_6],
-      children: "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
-    })]
-  });
-};
-InputBlockLabelComponent.displayName = 'InputBlockLabel';
-var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
-
-var InputIconComponent = function InputIconComponent(_ref) {
-  var icon = _ref.icon,
-    _ref$clickable = _ref.clickable,
-    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
-    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "4247656379",
-      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
-      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-InputIconComponent.displayName = 'InputIcon';
-var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
-
-var InputIconClear = function InputIconClear(_ref) {
-  var onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    visible = _ref.visible;
-  var theme$1 = theme.useTheme();
-  var classes = theme.useClasses('clear-icon', {
-    visible: visible
-  });
-  var clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
-      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M18 6L6 18",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M6 6l12 12",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1567030211",
-      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
-      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
-
 /* "use client" */
 
 var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
@@ -1046,6 +970,88 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
+  var children = _ref.children,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
+    children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
+      children: "*"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "588038827",
+      dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
+      children: "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme$1.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
+    })]
+  });
+};
+InputBlockLabelComponent.displayName = 'InputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
+
+var InputIconComponent = function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4247656379",
+      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
+      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
+};
+InputIconComponent.displayName = 'InputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
+
+var InputIconClear = function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    visible = _ref.visible;
+  var theme$1 = theme.useTheme();
+  var classes = theme.useClasses('clear-icon', {
+    visible: visible
+  });
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18 6L6 18",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M6 6l12 12",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1567030211",
+      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
+      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
+    })]
+  });
+};
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
+
 var _excluded$i = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
@@ -1925,7 +1931,7 @@ var getColors$2 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$d = ["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 _excluded$d = ["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", "required"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1971,6 +1977,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded$d);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -2056,6 +2063,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["1343268165", [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]]]) + " " + "with-label",
     children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: children
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: _JSXStyle.dynamic([["1343268165", [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]]]) + " " + (theme.useClasses('input-container', className) || ""),
@@ -24164,16 +24172,16 @@ function TableComponent(tableProps) {
         borderBottomLeftRadius: '5px',
         borderBottomRightRadius: '5px'
       },
-      className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
+      className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: _objectSpread2({
           overflow: 'auto'
         }, containerStyle),
-        className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
+        className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
         children: [/*#__PURE__*/jsxRuntime.jsxs("table", _objectSpread2(_objectSpread2({
           ref: ref
         }, props), {}, {
-          className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]) + " " + (props && props.className != null && props.className || className || ""),
+          className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]) + " " + (props && props.className != null && props.className || className || ""),
           children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
             stickyHeader: stickyHeader,
             onFilters: onFilters,
@@ -24195,20 +24203,20 @@ function TableComponent(tableProps) {
             readOnly: readOnly,
             onSelected: onSelected
           }), children]
-        })), loading === "default" && isLoading ? /*#__PURE__*/jsxRuntime.jsx(Loading$1, {}) : data.length == 0 && /*#__PURE__*/jsxRuntime.jsx(Placeholder, {
+        })), loading === "default" && isLoading ? /*#__PURE__*/jsxRuntime.jsx(Loading, {}) : null, data.length == 0 && !isLoading ? /*#__PURE__*/jsxRuntime.jsx(Placeholder, {
+          height: "90%",
           empty: true,
           textOnly: textPlaceholder,
           msg: "No Data to show"
-        })]
-      }), cursorPagination || viewLength ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]) + " " + "table-footer",
-        children: cursorPagination ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }) : null]
+      }), cursorPagination || viewLength ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]) + " " + "table-footer",
+        children: [cursorPagination && /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
             display: 'flex',
-            gap: 10,
-            margin: '10px'
+            gap: 10
           },
-          className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
+          className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background]]]),
           children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip.Small, {
             text: "Previous",
             type: "dark",
@@ -24226,21 +24234,23 @@ function TableComponent(tableProps) {
             text: "Next",
             type: "dark",
             children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-              disabled: !nextCursor,
+              disabled: !nextCursor || isLoading,
               onClick: function onClick() {
                 return onNextPage && onNextPage(nextCursor);
               },
               auto: true,
               px: 0.6,
               scale: 2 / 3,
-              iconRight: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {})
+              iconRight: isLoading ? /*#__PURE__*/jsxRuntime.jsx(Loading, {
+                width: "20px",
+                height: "20px"
+              }) : /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {})
             })
           })]
-        }) : dataLength && viewLength && onPageChange ? /*#__PURE__*/jsxRuntime.jsxs(Pagination, {
+        }), dataLength && viewLength && onPageChange ? /*#__PURE__*/jsxRuntime.jsxs(Pagination, {
           style: {
             marginLeft: '10px',
-            marginRight: '10px',
-            marginTop: '10px'
+            marginRight: '10px'
           },
           onChange: function onChange(pageNumber) {
             // Get the range for the current page
@@ -24256,11 +24266,11 @@ function TableComponent(tableProps) {
           }), /*#__PURE__*/jsxRuntime.jsx(Pagination.Previous, {
             children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
           })]
-        }) : null
+        }) : null]
       }) : null, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-        id: "1809040460",
+        id: "638332526",
         dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.background],
-        children: "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";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), ";}.table-footer.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.background, ";width:100%;bottom:0;}")
+        children: "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";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), ";}.table-footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:").concat(theme$1.palette.background, ";width:100%;bottom:0;padding:10px;}")
       })]
     })
   });

package/dist/table/table.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { RowErrorMap, TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './table-types';
 import { ScaleProps } from '../use-scale';
 interface Props<TableDataItem extends TableDataItemBase> {
@@ -26,7 +26,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     nextCursor?: string;
     hasMore?: boolean;
     rowErrors?: RowErrorMap;
-    containerStyle?: object;
+    containerStyle?: CSSProperties;
     loading?: string;
     isLoading?: boolean;
     onNextPage?: (next?: string) => void;

package/dist/textarea/index.js

@@ -1788,14 +1788,21 @@ TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);
 
 var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
   var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
   return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme$1.palette.accents_6]]]),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1278828862",
-      dynamic: [theme$1.palette.accents_6],
-      children: "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
+    children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
+      children: "*"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "588038827",
+      dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
+      children: "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme$1.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
     })]
   });
 };

package/esm/grid/grid-base.d.ts

@@ -7,7 +7,6 @@ export type GridProps = Props & GridBasicItemProps;
 declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item").GridBasicComponentProps & {
     children?: React.ReactNode;
     style?: React.CSSProperties | undefined;
-    onClick?: React.MouseEventHandler<any> | undefined;
     onChange?: React.FormEventHandler<any> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -16,7 +15,7 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -201,6 +200,7 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item
     onWaitingCapture?: React.ReactEventHandler<any> | undefined;
     onAuxClick?: React.MouseEventHandler<any> | undefined;
     onAuxClickCapture?: React.MouseEventHandler<any> | undefined;
+    onClick?: React.MouseEventHandler<any> | undefined;
     onClickCapture?: React.MouseEventHandler<any> | undefined;
     onContextMenu?: React.MouseEventHandler<any> | undefined;
     onContextMenuCapture?: React.MouseEventHandler<any> | undefined;

package/esm/grid/grid-container.d.ts

@@ -10,7 +10,6 @@ export type GridContainerProps = Props & GridBasicItemProps;
 declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./basic-item").GridBasicComponentProps & {
     children?: React.ReactNode;
     style?: React.CSSProperties | undefined;
-    onClick?: React.MouseEventHandler<any> | undefined;
     onChange?: React.FormEventHandler<any> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -19,7 +18,7 @@ declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./b
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -204,6 +203,7 @@ declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./b
     onWaitingCapture?: React.ReactEventHandler<any> | undefined;
     onAuxClick?: React.MouseEventHandler<any> | undefined;
     onAuxClickCapture?: React.MouseEventHandler<any> | undefined;
+    onClick?: React.MouseEventHandler<any> | undefined;
     onClickCapture?: React.MouseEventHandler<any> | undefined;
     onContextMenu?: React.MouseEventHandler<any> | undefined;
     onContextMenuCapture?: React.MouseEventHandler<any> | undefined;