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

package/dist/auto-complete/index.js

@@ -934,88 +934,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$9 = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
@@ -1863,6 +1781,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 = function getColors(palette, status) {
   var colors = {
     "default": {
@@ -2068,17 +2084,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("br", {
         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: "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],
@@ -2104,7 +2112,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$3 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded$3 = ["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,
@@ -2125,6 +2133,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$3);
@@ -2183,6 +2192,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/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/dist/index.js

@@ -1265,88 +1265,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$1n = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
@@ -2194,6 +2112,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$7 = function getColors(palette, status) {
   var colors = {
     "default": {
@@ -2399,17 +2415,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("br", {
         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: "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],
@@ -2441,7 +2449,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$1h = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded$1h = ["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,
@@ -2462,6 +2470,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$1h);
@@ -2520,6 +2529,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 || ""),
@@ -17190,7 +17200,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'SelectInput';
 
-var _excluded$f = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$f = ["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,
@@ -17220,6 +17230,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,
@@ -17347,14 +17358,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,
@@ -42529,6 +42534,8 @@ exports.Grid = Grid;
 exports.HtmlRenderer = HtmlRenderer;
 exports.Image = Image;
 exports.Input = Input;
+exports.InputError = InputError;
+exports.InputLabel = InputBlockLabel;
 exports.KeyCode = KeyCode;
 exports.KeyMod = KeyMod;
 exports.Keyboard = Keyboard;

package/dist/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;