@helpdice/ui 2.6.0-beta.0 → 2.6.0-beta.2

package/dist/table/index.js

@@ -970,88 +970,6 @@ 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 = {
@@ -1899,6 +1817,104 @@ var TextComponent = function TextComponent(_ref) {
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);
 
+var InputError = function InputError(_ref) {
+  var text = _ref.text,
+    error = _ref.error;
+  return /*#__PURE__*/jsxRuntime.jsxs(Text, {
+    font: 0.8,
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left'
+    },
+    color: error ? "error" : 'default',
+    children: ["\xA0", text]
+  });
+};
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$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 getColors$2 = function getColors(palette, status) {
   var colors = {
     "default": {
@@ -2006,7 +2022,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [icon, iconRight]);
   var _useMemo = React.useMemo(function () {
       return getColors$2(theme$1.palette, _color);
-    }, [theme$1.palette, type]),
+    }, [theme$1.palette, _color]),
     color = _useMemo.color,
     borderColor = _useMemo.borderColor,
     hoverBorder = _useMemo.hoverBorder;
@@ -2061,16 +2077,16 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
   var defaultWidth = fullWidth ? '100%' : 'initial';
   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",
+    className: _JSXStyle.dynamic([["2371903369", [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), theme$1.palette.foreground, 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) || ""),
+      className: _JSXStyle.dynamic([["2371903369", [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), theme$1.palette.foreground, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || ""),
       children: [label && /*#__PURE__*/jsxRuntime.jsx(MemoInputLabel, {
         children: label
       }), /*#__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-wrapper', {
+        className: _JSXStyle.dynamic([["2371903369", [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), theme$1.palette.foreground, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
           hover: hover,
           disabled: disabled
         }, labelClasses) || ""),
@@ -2088,7 +2104,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           autoComplete: autoComplete,
           onKeyDown: handleKeyDown
         }, inputProps), {}, {
-          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]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
+          className: _JSXStyle.dynamic([["2371903369", [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), theme$1.palette.foreground, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
             disabled: disabled
           }, iconClasses) || "")
         })), clearable && /*#__PURE__*/jsxRuntime.jsx(MemoInputIconClear, {
@@ -2102,23 +2118,15 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         isRight: true,
         children: labelRight
       }), /*#__PURE__*/jsxRuntime.jsx("br", {
-        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]]])
+        className: _JSXStyle.dynamic([["2371903369", [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), theme$1.palette.foreground, theme$1.palette.accents_3, theme$1.palette.background, color]]])
       })]
-    }), helperText && /*#__PURE__*/jsxRuntime.jsxs(Text, {
-      font: 0.8,
-      style: {
-        marginTop: 0.4,
-        marginRight: 0,
-        marginLeft: 0,
-        marginBottom: '0.4rem',
-        textAlign: 'left'
-      },
-      color: error ? "error" : 'default',
-      children: ["\xA0", helperText]
+    }), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
+      text: helperText,
+      error: error
     }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1343268165",
-      dynamic: [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],
-      children: ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$1.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")
+      id: "2371903369",
+      dynamic: [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), theme$1.palette.foreground, theme$1.palette.accents_3, theme$1.palette.background, color],
+      children: ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$1.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(theme$1.palette.foreground, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")
     })]
   });
 });
@@ -2140,7 +2148,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$c = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded$c = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -2161,6 +2169,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     error = _ref.error,
     label = _ref.label,
+    required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded$c);
@@ -2219,6 +2228,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "with-label",
     children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: label
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (classes || ""),
@@ -21795,7 +21805,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'SelectInput';
 
-var _excluded$6 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$6 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "required", "getPopupContainer", "onDropdownVisibleChange"];
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -21825,6 +21835,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
     helperText = _ref.helperText,
     error = _ref.error,
+    required = _ref.required,
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
@@ -21952,14 +21963,8 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   }, className);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["1795507141", [disabled ? 'not-allowed' : 'pointer', border, theme$1.layout.radius, disabled ? theme$1.palette.accents_1 : theme$1.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, fullWidth ? '100%' : 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme$1.palette.border : borderActive, disabled ? theme$1.palette.accents_5 : borderActive, disabled ? theme$1.palette.accents_4 : theme$1.palette.foreground, placeholderColor, theme$1.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]),
-    children: [label && /*#__PURE__*/jsxRuntime.jsx("label", {
-      style: {
-        display: 'block',
-        marginBottom: '0.4rem',
-        fontSize: '14px',
-        fontWeight: 'light'
-      },
-      className: _JSXStyle.dynamic([["1795507141", [disabled ? 'not-allowed' : 'pointer', border, theme$1.layout.radius, disabled ? theme$1.palette.accents_1 : theme$1.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, fullWidth ? '100%' : 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme$1.palette.border : borderActive, disabled ? theme$1.palette.accents_5 : borderActive, disabled ? theme$1.palette.accents_4 : theme$1.palette.foreground, placeholderColor, theme$1.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]),
+    children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(SelectContext.Provider, {
       value: initialValue,

package/dist/textarea/index.js

@@ -1787,10 +1787,10 @@ var TextComponent = function TextComponent(_ref) {
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);
 
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1809,7 +1809,7 @@ var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
 InputBlockLabelComponent.displayName = 'InputBlockLabel';
 var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 
-var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1830,6 +1830,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     error = _ref.error,
     label = _ref.label,
+    required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -1888,6 +1889,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "with-label",
     children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: label
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (classes || ""),

package/dist/textarea/textarea.d.ts

@@ -15,6 +15,7 @@ interface Props {
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     className?: string;
     error?: boolean;
+    required?: boolean;
     helperText?: string;
     label?: string;
     resize?: TextareaResizes;

package/esm/index.d.ts

@@ -42,7 +42,7 @@ export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export type { ImageProps, ImageBrowserProps } from './image';
-export { default as Input, getColors } from './input';
+export { default as Input, getColors, InputLabel, InputError } from './input';
 export type { InputProps, InputPasswordProps } from './input';
 export { default as Keyboard } from './keyboard';
 export type { KeyboardProps } from './keyboard';

package/esm/index.js

@@ -28,7 +28,7 @@ export { default as Grid } from './grid';
 export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
-export { default as Input, getColors } from './input';
+export { default as Input, getColors, InputLabel, InputError } from './input';
 export { default as Keyboard } from './keyboard';
 export { default as Link } from './link';
 export { default as Loading } from './loading';

package/esm/input/index.d.ts

@@ -14,5 +14,6 @@ export type { InputProps } from './input-field';
 export type { InputTypes } from './input-props';
 export type { InputPasswordProps } from './password';
 export type { TextareaProps } from '../textarea';
+export { default as InputLabel, InputError } from "./input-block-label";
 declare const _default: InputComponentType;
 export default _default;

package/esm/input/index.js

@@ -9,4 +9,5 @@ Input.Password = InputPassword;
 Input.Phone = PhoneInput;
 Input.Currency = CurrencyInput;
 export { getColors } from './styles';
+export { default as InputLabel, InputError } from "./input-block-label";
 export default Input;

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

@@ -2,5 +2,9 @@ import React from 'react';
 export interface InputBlockLabelLabel {
     required?: boolean;
 }
+export declare const InputError: React.FC<{
+    text: string;
+    error?: string;
+}>;
 declare const InputBlockLabel: React.NamedExoticComponent<React.PropsWithChildren<InputBlockLabelLabel>>;
 export default InputBlockLabel;

package/esm/input/input-block-label.js

@@ -2,10 +2,26 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import { useTheme } from '@helpdice/theme';
 import useScale from '../use-scale';
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+import Text from '../text';
+export var InputError = function InputError(_ref) {
+  var text = _ref.text,
+    error = _ref.error;
+  return /*#__PURE__*/React.createElement(Text, {
+    font: 0.8,
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left'
+    },
+    color: error ? "error" : 'default'
+  }, "\xA0", text);
+};
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;

package/esm/input/input-field.js

@@ -10,10 +10,9 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme, useClasses } from '@helpdice/theme';
 import InputLabel from './input-label';
-import InputBlockLabel from './input-block-label';
+import InputBlockLabel, { InputError } from './input-block-label';
 import InputIcon from './input-icon';
 import InputClearIcon from './input-icon-clear';
-import Text from '../text';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
@@ -90,7 +89,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [icon, iconRight]);
   var _useMemo = useMemo(function () {
       return getColors(theme.palette, _color);
-    }, [theme.palette, type]),
+    }, [theme.palette, _color]),
     color = _useMemo.color,
     borderColor = _useMemo.borderColor,
     hoverBorder = _useMemo.hoverBorder;
@@ -145,13 +144,13 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputProps = _extends({}, props, controlledValue);
   var defaultWidth = fullWidth ? '100%' : 'initial';
   return /*#__PURE__*/React.createElement("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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: _JSXStyle.dynamic([["2371903369", [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
     required: required
   }, children), /*#__PURE__*/React.createElement("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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
+    className: _JSXStyle.dynamic([["2371903369", [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
   }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
+    className: _JSXStyle.dynamic([["2371903369", [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -169,7 +168,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     autoComplete: autoComplete,
     onKeyDown: handleKeyDown
   }, inputProps, {
-    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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
+    className: _JSXStyle.dynamic([["2371903369", [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
@@ -181,21 +180,14 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
     isRight: true
   }, labelRight), /*#__PURE__*/React.createElement("br", {
-    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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
-  })), helperText && /*#__PURE__*/React.createElement(Text, {
-    font: 0.8,
-    style: {
-      marginTop: 0.4,
-      marginRight: 0,
-      marginLeft: 0,
-      marginBottom: '0.4rem',
-      textAlign: 'left'
-    },
-    color: error ? "error" : 'default'
-  }, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1343268165",
-    dynamic: [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+    className: _JSXStyle.dynamic([["2371903369", [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]])
+  })), helperText && /*#__PURE__*/React.createElement(InputError, {
+    text: helperText,
+    error: error
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2371903369",
+    dynamic: [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.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(theme.palette.foreground, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
 });
 InputComponent.displayName = 'Input';
 var Input = withScale(InputComponent);

package/esm/select/select.d.ts

@@ -24,6 +24,7 @@ interface Props {
     dropdownStyle?: CSSProperties;
     disableMatchWidth?: boolean;
     error?: boolean;
+    required?: boolean;
     helperText?: string;
     onDropdownVisibleChange?: (visible: boolean) => void;
     getPopupContainer?: () => HTMLElement | null;