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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/auto-complete/index.js +104 -94
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +110 -103
  4. package/dist/input/index.d.ts +1 -0
  5. package/dist/input/index.js +106 -94
  6. package/dist/input/input-block-label.d.ts +4 -0
  7. package/dist/select/index.js +26 -9
  8. package/dist/select/select.d.ts +1 -0
  9. package/dist/table/index.js +108 -103
  10. package/dist/textarea/index.js +7 -5
  11. package/dist/textarea/textarea.d.ts +1 -0
  12. package/esm/index.d.ts +1 -1
  13. package/esm/index.js +1 -1
  14. package/esm/input/index.d.ts +1 -0
  15. package/esm/input/index.js +1 -0
  16. package/esm/input/input-block-label.d.ts +4 -0
  17. package/esm/input/input-block-label.js +20 -4
  18. package/esm/input/input-field.js +5 -13
  19. package/esm/select/select.d.ts +1 -0
  20. package/esm/select/select.js +5 -9
  21. package/esm/textarea/textarea.d.ts +1 -0
  22. package/esm/textarea/textarea.js +5 -2
  23. package/package.json +1 -1
package/dist/input/index.js CHANGED
@@ -920,88 +920,6 @@ var withScale = function withScale(Render) {
920
920
  return ScaleFC;
921
921
  };
922
922
 
923
- var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
924
- var children = _ref.children,
925
- _ref$required = _ref.required,
926
- required = _ref$required === void 0 ? false : _ref$required;
927
- var theme$1 = theme.useTheme();
928
- var _useScale = useScale(),
929
- SCALES = _useScale.SCALES;
930
- return /*#__PURE__*/jsxRuntime.jsxs("label", {
931
- className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
932
- children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
933
- className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
934
- children: "*"
935
- }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
936
- id: "588038827",
937
- dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
938
- 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;}")
939
- })]
940
- });
941
- };
942
- InputBlockLabelComponent.displayName = 'InputBlockLabel';
943
- var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
944
-
945
- var InputIconComponent = function InputIconComponent(_ref) {
946
- var icon = _ref.icon,
947
- _ref$clickable = _ref.clickable,
948
- clickable = _ref$clickable === void 0 ? false : _ref$clickable,
949
- onClick = _ref.onClick;
950
- return /*#__PURE__*/jsxRuntime.jsxs("span", {
951
- onClick: onClick,
952
- className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
953
- children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
954
- id: "4247656379",
955
- dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
956
- 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);}")
957
- })]
958
- });
959
- };
960
- InputIconComponent.displayName = 'InputIcon';
961
- var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
962
-
963
- var InputIconClear = function InputIconClear(_ref) {
964
- var onClick = _ref.onClick,
965
- disabled = _ref.disabled,
966
- visible = _ref.visible;
967
- var theme$1 = theme.useTheme();
968
- var classes = theme.useClasses('clear-icon', {
969
- visible: visible
970
- });
971
- var clickHandler = function clickHandler(event) {
972
- event.preventDefault();
973
- event.stopPropagation();
974
- event.nativeEvent.stopImmediatePropagation();
975
- onClick && onClick(event);
976
- };
977
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
978
- onClick: clickHandler,
979
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
980
- children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
981
- viewBox: "0 0 24 24",
982
- stroke: "currentColor",
983
- strokeWidth: "1.5",
984
- strokeLinecap: "round",
985
- strokeLinejoin: "round",
986
- fill: "none",
987
- shapeRendering: "geometricPrecision",
988
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
989
- children: [/*#__PURE__*/jsxRuntime.jsx("path", {
990
- d: "M18 6L6 18",
991
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
992
- }), /*#__PURE__*/jsxRuntime.jsx("path", {
993
- d: "M6 6l12 12",
994
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
995
- })]
996
- }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
997
- id: "1567030211",
998
- dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
999
- 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);}")
1000
- })]
1001
- });
1002
- };
1003
- var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
1004
-
1005
923
  var _excluded$8 = ["children", "tag", "className", "color"];
1006
924
  var getTypeColor = function getTypeColor(type, palette) {
1007
925
  var colors = {
@@ -1849,6 +1767,104 @@ var TextComponent = function TextComponent(_ref) {
1849
1767
  TextComponent.displayName = 'Text';
1850
1768
  var Text = withScale(TextComponent);
1851
1769
 
1770
+ var InputError = function InputError(_ref) {
1771
+ var text = _ref.text,
1772
+ error = _ref.error;
1773
+ return /*#__PURE__*/jsxRuntime.jsxs(Text, {
1774
+ font: 0.8,
1775
+ style: {
1776
+ marginTop: 0.4,
1777
+ marginRight: 0,
1778
+ marginLeft: 0,
1779
+ marginBottom: '0.4rem',
1780
+ textAlign: 'left'
1781
+ },
1782
+ color: error ? "error" : 'default',
1783
+ children: ["\xA0", text]
1784
+ });
1785
+ };
1786
+ var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
1787
+ var children = _ref2.children,
1788
+ _ref2$required = _ref2.required,
1789
+ required = _ref2$required === void 0 ? false : _ref2$required;
1790
+ var theme$1 = theme.useTheme();
1791
+ var _useScale = useScale(),
1792
+ SCALES = _useScale.SCALES;
1793
+ return /*#__PURE__*/jsxRuntime.jsxs("label", {
1794
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
1795
+ children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
1796
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
1797
+ children: "*"
1798
+ }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1799
+ id: "588038827",
1800
+ dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
1801
+ 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;}")
1802
+ })]
1803
+ });
1804
+ };
1805
+ InputBlockLabelComponent.displayName = 'InputBlockLabel';
1806
+ var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
1807
+
1808
+ var InputIconComponent = function InputIconComponent(_ref) {
1809
+ var icon = _ref.icon,
1810
+ _ref$clickable = _ref.clickable,
1811
+ clickable = _ref$clickable === void 0 ? false : _ref$clickable,
1812
+ onClick = _ref.onClick;
1813
+ return /*#__PURE__*/jsxRuntime.jsxs("span", {
1814
+ onClick: onClick,
1815
+ className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
1816
+ children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1817
+ id: "4247656379",
1818
+ dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
1819
+ 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);}")
1820
+ })]
1821
+ });
1822
+ };
1823
+ InputIconComponent.displayName = 'InputIcon';
1824
+ var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
1825
+
1826
+ var InputIconClear = function InputIconClear(_ref) {
1827
+ var onClick = _ref.onClick,
1828
+ disabled = _ref.disabled,
1829
+ visible = _ref.visible;
1830
+ var theme$1 = theme.useTheme();
1831
+ var classes = theme.useClasses('clear-icon', {
1832
+ visible: visible
1833
+ });
1834
+ var clickHandler = function clickHandler(event) {
1835
+ event.preventDefault();
1836
+ event.stopPropagation();
1837
+ event.nativeEvent.stopImmediatePropagation();
1838
+ onClick && onClick(event);
1839
+ };
1840
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1841
+ onClick: clickHandler,
1842
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
1843
+ children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
1844
+ viewBox: "0 0 24 24",
1845
+ stroke: "currentColor",
1846
+ strokeWidth: "1.5",
1847
+ strokeLinecap: "round",
1848
+ strokeLinejoin: "round",
1849
+ fill: "none",
1850
+ shapeRendering: "geometricPrecision",
1851
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
1852
+ children: [/*#__PURE__*/jsxRuntime.jsx("path", {
1853
+ d: "M18 6L6 18",
1854
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1855
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1856
+ d: "M6 6l12 12",
1857
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1858
+ })]
1859
+ }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1860
+ id: "1567030211",
1861
+ dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
1862
+ 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);}")
1863
+ })]
1864
+ });
1865
+ };
1866
+ var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
1867
+
1852
1868
  var getColors = function getColors(palette, status) {
1853
1869
  var colors = {
1854
1870
  "default": {
@@ -2054,17 +2070,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2054
2070
  }), /*#__PURE__*/jsxRuntime.jsx("br", {
2055
2071
  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]]])
2056
2072
  })]
2057
- }), helperText && /*#__PURE__*/jsxRuntime.jsxs(Text, {
2058
- font: 0.8,
2059
- style: {
2060
- marginTop: 0.4,
2061
- marginRight: 0,
2062
- marginLeft: 0,
2063
- marginBottom: '0.4rem',
2064
- textAlign: 'left'
2065
- },
2066
- color: error ? "error" : 'default',
2067
- children: ["\xA0", helperText]
2073
+ }), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
2074
+ text: helperText,
2075
+ error: error
2068
2076
  }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
2069
2077
  id: "2371903369",
2070
2078
  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],
@@ -2090,7 +2098,7 @@ tuple('hover', 'click');
2090
2098
  tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
2091
2099
  tuple('start', 'center', 'end', 'left', 'right');
2092
2100
 
2093
- var _excluded$2 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
2101
+ var _excluded$2 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
2094
2102
  tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
2095
2103
  var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2096
2104
  var _ref$type = _ref.type,
@@ -2111,6 +2119,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2111
2119
  helperText = _ref.helperText,
2112
2120
  error = _ref.error,
2113
2121
  label = _ref.label,
2122
+ required = _ref.required,
2114
2123
  _ref$resize = _ref.resize,
2115
2124
  resize = _ref$resize === void 0 ? 'none' : _ref$resize,
2116
2125
  props = _objectWithoutProperties(_ref, _excluded$2);
@@ -2169,6 +2178,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2169
2178
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2170
2179
  className: "with-label",
2171
2180
  children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
2181
+ required: required,
2172
2182
  children: label
2173
2183
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2174
2184
  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 || ""),
@@ -4191,5 +4201,7 @@ Input.Password = InputPassword;
4191
4201
  Input.Phone = PhoneInput$1;
4192
4202
  Input.Currency = CurrencyInput;
4193
4203
 
4204
+ exports.InputError = InputError;
4205
+ exports.InputLabel = InputBlockLabel;
4194
4206
  exports.default = Input;
4195
4207
  exports.getColors = getColors;
package/dist/input/input-block-label.d.ts CHANGED
@@ -2,5 +2,9 @@ import React from 'react';
2
2
  export interface InputBlockLabelLabel {
3
3
  required?: boolean;
4
4
  }
5
+ export declare const InputError: React.FC<{
6
+ text: string;
7
+ error?: string;
8
+ }>;
5
9
  declare const InputBlockLabel: React.NamedExoticComponent<React.PropsWithChildren<InputBlockLabelLabel>>;
6
10
  export default InputBlockLabel;
package/dist/select/index.js CHANGED
@@ -2117,7 +2117,29 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
2117
2117
  });
2118
2118
  SelectInput.displayName = 'SelectInput';
2119
2119
 
2120
- var _excluded$1 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "getPopupContainer", "onDropdownVisibleChange"];
2120
+ var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
2121
+ var children = _ref2.children,
2122
+ _ref2$required = _ref2.required,
2123
+ required = _ref2$required === void 0 ? false : _ref2$required;
2124
+ var theme$1 = theme.useTheme();
2125
+ var _useScale = useScale(),
2126
+ SCALES = _useScale.SCALES;
2127
+ return /*#__PURE__*/jsxRuntime.jsxs("label", {
2128
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
2129
+ children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
2130
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
2131
+ children: "*"
2132
+ }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
2133
+ id: "588038827",
2134
+ dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
2135
+ 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;}")
2136
+ })]
2137
+ });
2138
+ };
2139
+ InputBlockLabelComponent.displayName = 'InputBlockLabel';
2140
+ var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
2141
+
2142
+ var _excluded$1 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "required", "getPopupContainer", "onDropdownVisibleChange"];
2121
2143
  var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
2122
2144
  var children = _ref.children,
2123
2145
  label = _ref.label,
@@ -2147,6 +2169,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
2147
2169
  disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
2148
2170
  helperText = _ref.helperText,
2149
2171
  error = _ref.error,
2172
+ required = _ref.required,
2150
2173
  getPopupContainer = _ref.getPopupContainer,
2151
2174
  _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
2152
2175
  onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
@@ -2274,14 +2297,8 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
2274
2297
  }, className);
2275
2298
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2276
2299
  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]]]),
2277
- children: [label && /*#__PURE__*/jsxRuntime.jsx("label", {
2278
- style: {
2279
- display: 'block',
2280
- marginBottom: '0.4rem',
2281
- fontSize: '14px',
2282
- fontWeight: 'light'
2283
- },
2284
- 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]]]),
2300
+ children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
2301
+ required: required,
2285
2302
  children: label
2286
2303
  }), /*#__PURE__*/jsxRuntime.jsx(SelectContext.Provider, {
2287
2304
  value: initialValue,
package/dist/select/select.d.ts CHANGED
@@ -24,6 +24,7 @@ interface Props {
24
24
  dropdownStyle?: CSSProperties;
25
25
  disableMatchWidth?: boolean;
26
26
  error?: boolean;
27
+ required?: boolean;
27
28
  helperText?: string;
28
29
  onDropdownVisibleChange?: (visible: boolean) => void;
29
30
  getPopupContainer?: () => HTMLElement | null;
package/dist/table/index.js CHANGED
@@ -970,88 +970,6 @@ var withScale = function withScale(Render) {
970
970
  return ScaleFC;
971
971
  };
972
972
 
973
- var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
974
- var children = _ref.children,
975
- _ref$required = _ref.required,
976
- required = _ref$required === void 0 ? false : _ref$required;
977
- var theme$1 = theme.useTheme();
978
- var _useScale = useScale(),
979
- SCALES = _useScale.SCALES;
980
- return /*#__PURE__*/jsxRuntime.jsxs("label", {
981
- className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
982
- children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
983
- className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
984
- children: "*"
985
- }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
986
- id: "588038827",
987
- dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
988
- 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;}")
989
- })]
990
- });
991
- };
992
- InputBlockLabelComponent.displayName = 'InputBlockLabel';
993
- var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
994
-
995
- var InputIconComponent = function InputIconComponent(_ref) {
996
- var icon = _ref.icon,
997
- _ref$clickable = _ref.clickable,
998
- clickable = _ref$clickable === void 0 ? false : _ref$clickable,
999
- onClick = _ref.onClick;
1000
- return /*#__PURE__*/jsxRuntime.jsxs("span", {
1001
- onClick: onClick,
1002
- className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
1003
- children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1004
- id: "4247656379",
1005
- dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
1006
- 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);}")
1007
- })]
1008
- });
1009
- };
1010
- InputIconComponent.displayName = 'InputIcon';
1011
- var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
1012
-
1013
- var InputIconClear = function InputIconClear(_ref) {
1014
- var onClick = _ref.onClick,
1015
- disabled = _ref.disabled,
1016
- visible = _ref.visible;
1017
- var theme$1 = theme.useTheme();
1018
- var classes = theme.useClasses('clear-icon', {
1019
- visible: visible
1020
- });
1021
- var clickHandler = function clickHandler(event) {
1022
- event.preventDefault();
1023
- event.stopPropagation();
1024
- event.nativeEvent.stopImmediatePropagation();
1025
- onClick && onClick(event);
1026
- };
1027
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1028
- onClick: clickHandler,
1029
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
1030
- children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
1031
- viewBox: "0 0 24 24",
1032
- stroke: "currentColor",
1033
- strokeWidth: "1.5",
1034
- strokeLinecap: "round",
1035
- strokeLinejoin: "round",
1036
- fill: "none",
1037
- shapeRendering: "geometricPrecision",
1038
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
1039
- children: [/*#__PURE__*/jsxRuntime.jsx("path", {
1040
- d: "M18 6L6 18",
1041
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1042
- }), /*#__PURE__*/jsxRuntime.jsx("path", {
1043
- d: "M6 6l12 12",
1044
- className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1045
- })]
1046
- }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1047
- id: "1567030211",
1048
- dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
1049
- 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);}")
1050
- })]
1051
- });
1052
- };
1053
- var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
1054
-
1055
973
  var _excluded$i = ["children", "tag", "className", "color"];
1056
974
  var getTypeColor = function getTypeColor(type, palette) {
1057
975
  var colors = {
@@ -1899,6 +1817,104 @@ var TextComponent = function TextComponent(_ref) {
1899
1817
  TextComponent.displayName = 'Text';
1900
1818
  var Text = withScale(TextComponent);
1901
1819
 
1820
+ var InputError = function InputError(_ref) {
1821
+ var text = _ref.text,
1822
+ error = _ref.error;
1823
+ return /*#__PURE__*/jsxRuntime.jsxs(Text, {
1824
+ font: 0.8,
1825
+ style: {
1826
+ marginTop: 0.4,
1827
+ marginRight: 0,
1828
+ marginLeft: 0,
1829
+ marginBottom: '0.4rem',
1830
+ textAlign: 'left'
1831
+ },
1832
+ color: error ? "error" : 'default',
1833
+ children: ["\xA0", text]
1834
+ });
1835
+ };
1836
+ var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
1837
+ var children = _ref2.children,
1838
+ _ref2$required = _ref2.required,
1839
+ required = _ref2$required === void 0 ? false : _ref2$required;
1840
+ var theme$1 = theme.useTheme();
1841
+ var _useScale = useScale(),
1842
+ SCALES = _useScale.SCALES;
1843
+ return /*#__PURE__*/jsxRuntime.jsxs("label", {
1844
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
1845
+ children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
1846
+ className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
1847
+ children: "*"
1848
+ }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1849
+ id: "588038827",
1850
+ dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
1851
+ 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;}")
1852
+ })]
1853
+ });
1854
+ };
1855
+ InputBlockLabelComponent.displayName = 'InputBlockLabel';
1856
+ var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
1857
+
1858
+ var InputIconComponent = function InputIconComponent(_ref) {
1859
+ var icon = _ref.icon,
1860
+ _ref$clickable = _ref.clickable,
1861
+ clickable = _ref$clickable === void 0 ? false : _ref$clickable,
1862
+ onClick = _ref.onClick;
1863
+ return /*#__PURE__*/jsxRuntime.jsxs("span", {
1864
+ onClick: onClick,
1865
+ className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
1866
+ children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1867
+ id: "4247656379",
1868
+ dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
1869
+ 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);}")
1870
+ })]
1871
+ });
1872
+ };
1873
+ InputIconComponent.displayName = 'InputIcon';
1874
+ var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
1875
+
1876
+ var InputIconClear = function InputIconClear(_ref) {
1877
+ var onClick = _ref.onClick,
1878
+ disabled = _ref.disabled,
1879
+ visible = _ref.visible;
1880
+ var theme$1 = theme.useTheme();
1881
+ var classes = theme.useClasses('clear-icon', {
1882
+ visible: visible
1883
+ });
1884
+ var clickHandler = function clickHandler(event) {
1885
+ event.preventDefault();
1886
+ event.stopPropagation();
1887
+ event.nativeEvent.stopImmediatePropagation();
1888
+ onClick && onClick(event);
1889
+ };
1890
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1891
+ onClick: clickHandler,
1892
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
1893
+ children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
1894
+ viewBox: "0 0 24 24",
1895
+ stroke: "currentColor",
1896
+ strokeWidth: "1.5",
1897
+ strokeLinecap: "round",
1898
+ strokeLinejoin: "round",
1899
+ fill: "none",
1900
+ shapeRendering: "geometricPrecision",
1901
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
1902
+ children: [/*#__PURE__*/jsxRuntime.jsx("path", {
1903
+ d: "M18 6L6 18",
1904
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1905
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
1906
+ d: "M6 6l12 12",
1907
+ className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
1908
+ })]
1909
+ }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
1910
+ id: "1567030211",
1911
+ dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
1912
+ 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);}")
1913
+ })]
1914
+ });
1915
+ };
1916
+ var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
1917
+
1902
1918
  var getColors$2 = function getColors(palette, status) {
1903
1919
  var colors = {
1904
1920
  "default": {
@@ -2104,17 +2120,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2104
2120
  }), /*#__PURE__*/jsxRuntime.jsx("br", {
2105
2121
  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]]])
2106
2122
  })]
2107
- }), helperText && /*#__PURE__*/jsxRuntime.jsxs(Text, {
2108
- font: 0.8,
2109
- style: {
2110
- marginTop: 0.4,
2111
- marginRight: 0,
2112
- marginLeft: 0,
2113
- marginBottom: '0.4rem',
2114
- textAlign: 'left'
2115
- },
2116
- color: error ? "error" : 'default',
2117
- children: ["\xA0", helperText]
2123
+ }), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
2124
+ text: helperText,
2125
+ error: error
2118
2126
  }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
2119
2127
  id: "2371903369",
2120
2128
  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],
@@ -2140,7 +2148,7 @@ tuple('hover', 'click');
2140
2148
  tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
2141
2149
  tuple('start', 'center', 'end', 'left', 'right');
2142
2150
 
2143
- var _excluded$c = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
2151
+ var _excluded$c = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
2144
2152
  tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
2145
2153
  var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2146
2154
  var _ref$type = _ref.type,
@@ -2161,6 +2169,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2161
2169
  helperText = _ref.helperText,
2162
2170
  error = _ref.error,
2163
2171
  label = _ref.label,
2172
+ required = _ref.required,
2164
2173
  _ref$resize = _ref.resize,
2165
2174
  resize = _ref$resize === void 0 ? 'none' : _ref$resize,
2166
2175
  props = _objectWithoutProperties(_ref, _excluded$c);
@@ -2219,6 +2228,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2219
2228
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2220
2229
  className: "with-label",
2221
2230
  children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
2231
+ required: required,
2222
2232
  children: label
2223
2233
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2224
2234
  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) {
21795
21805
  });
21796
21806
  SelectInput.displayName = 'SelectInput';
21797
21807
 
21798
- var _excluded$6 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "getPopupContainer", "onDropdownVisibleChange"];
21808
+ 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"];
21799
21809
  var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
21800
21810
  var children = _ref.children,
21801
21811
  label = _ref.label,
@@ -21825,6 +21835,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
21825
21835
  disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
21826
21836
  helperText = _ref.helperText,
21827
21837
  error = _ref.error,
21838
+ required = _ref.required,
21828
21839
  getPopupContainer = _ref.getPopupContainer,
21829
21840
  _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
21830
21841
  onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
@@ -21952,14 +21963,8 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
21952
21963
  }, className);
21953
21964
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
21954
21965
  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]]]),
21955
- children: [label && /*#__PURE__*/jsxRuntime.jsx("label", {
21956
- style: {
21957
- display: 'block',
21958
- marginBottom: '0.4rem',
21959
- fontSize: '14px',
21960
- fontWeight: 'light'
21961
- },
21962
- 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]]]),
21966
+ children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
21967
+ required: required,
21963
21968
  children: label
21964
21969
  }), /*#__PURE__*/jsxRuntime.jsx(SelectContext.Provider, {
21965
21970
  value: initialValue,