@astral/ui 0.23.0 → 0.24.0

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 (7) hide show
  1. package/FormHelperText/styled.js +13 -5
  2. package/TextField/TextField.js +3 -1
  3. package/esm/FormHelperText/styled.js +13 -5
  4. package/esm/TextField/TextField.js +4 -2
  5. package/esm/theme/components/MuiFormHelperText.js +4 -1
  6. package/package.json +2 -2
  7. package/theme/components/MuiFormHelperText.js +4 -1
package/FormHelperText/styled.js CHANGED
@@ -7,8 +7,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.Content = exports.ErrorIcon = exports.SuccessIcon = void 0;
8
8
  var icons_1 = require("@astral/icons");
9
9
  var styles_1 = require("../styles");
10
- var styles = "\n display: inline-flex;\n justify-content: center;\n width: 16px;\n vertical-align: middle;\n";
11
- exports.SuccessIcon = (0, styles_1.styled)(icons_1.SuccessFillSm)(styles);
12
- exports.ErrorIcon = (0, styles_1.styled)(icons_1.ErrorFillSm)(styles);
13
- exports.Content = styles_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n vertical-align: middle;\n"], ["\n vertical-align: middle;\n"])));
14
- var templateObject_1;
10
+ var getStyles = function (theme) {
11
+ return "display: inline-flex;\n justify-content: center;\n font-size: ".concat(theme.typography.h5.fontSize, ";\n vertical-align: middle;");
12
+ };
13
+ exports.SuccessIcon = (0, styles_1.styled)(icons_1.SuccessFillSm)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
14
+ var theme = _a.theme;
15
+ return getStyles(theme);
16
+ });
17
+ exports.ErrorIcon = (0, styles_1.styled)(icons_1.ErrorFillSm)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
18
+ var theme = _a.theme;
19
+ return getStyles(theme);
20
+ });
21
+ exports.Content = styles_1.styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n vertical-align: middle;\n"], ["\n vertical-align: middle;\n"])));
22
+ var templateObject_1, templateObject_2, templateObject_3;
package/TextField/TextField.js CHANGED
@@ -45,7 +45,9 @@ exports.TextField = (0, react_1.forwardRef)(function (props, ref) {
45
45
  if (error) {
46
46
  return (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, __assign({ error: true }, { children: helperTextProp }), void 0);
47
47
  }
48
- return helperTextProp;
48
+ if (helperTextProp)
49
+ return helperTextProp;
50
+ return (0, jsx_runtime_1.jsx)(react_1.Fragment, {}, void 0);
49
51
  }, [helperTextProp, success, error]);
50
52
  return ((0, jsx_runtime_1.jsx)(TextField_1.default, __assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps), void 0));
51
53
  });
package/esm/FormHelperText/styled.js CHANGED
@@ -4,8 +4,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { ErrorFillSm, SuccessFillSm } from '@astral/icons';
6
6
  import { styled } from '../styles';
7
- var styles = "\n display: inline-flex;\n justify-content: center;\n width: 16px;\n vertical-align: middle;\n";
8
- export var SuccessIcon = styled(SuccessFillSm)(styles);
9
- export var ErrorIcon = styled(ErrorFillSm)(styles);
10
- export var Content = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n vertical-align: middle;\n"], ["\n vertical-align: middle;\n"])));
11
- var templateObject_1;
7
+ var getStyles = function (theme) {
8
+ return "display: inline-flex;\n justify-content: center;\n font-size: ".concat(theme.typography.h5.fontSize, ";\n vertical-align: middle;");
9
+ };
10
+ export var SuccessIcon = styled(SuccessFillSm)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
11
+ var theme = _a.theme;
12
+ return getStyles(theme);
13
+ });
14
+ export var ErrorIcon = styled(ErrorFillSm)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
15
+ var theme = _a.theme;
16
+ return getStyles(theme);
17
+ });
18
+ export var Content = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n vertical-align: middle;\n"], ["\n vertical-align: middle;\n"])));
19
+ var templateObject_1, templateObject_2, templateObject_3;
package/esm/TextField/TextField.js CHANGED
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
- import { forwardRef, useMemo } from 'react';
24
+ import { Fragment, forwardRef, useMemo } from 'react';
25
25
  import MuiTextField from '@mui/material/TextField';
26
26
  import { FormHelperText } from '../FormHelperText';
27
27
  export var TextField = forwardRef(function (props, ref) {
@@ -39,7 +39,9 @@ export var TextField = forwardRef(function (props, ref) {
39
39
  if (error) {
40
40
  return _jsx(FormHelperText, __assign({ error: true }, { children: helperTextProp }), void 0);
41
41
  }
42
- return helperTextProp;
42
+ if (helperTextProp)
43
+ return helperTextProp;
44
+ return _jsx(Fragment, {}, void 0);
43
45
  }, [helperTextProp, success, error]);
44
46
  return (_jsx(MuiTextField, __assign({ ref: ref, variant: "outlined", error: error, color: color, helperText: helperText }, restProps), void 0));
45
47
  });
package/esm/theme/components/MuiFormHelperText.js CHANGED
@@ -3,8 +3,11 @@ export var MuiFormHelperText = {
3
3
  root: function (_a) {
4
4
  var theme = _a.theme;
5
5
  return {
6
+ display: 'flex',
7
+ minHeight: theme.typography.small.lineHeight,
8
+ fontSize: theme.typography.small.fontSize,
6
9
  margin: theme.spacing(1, 0, 0),
7
- lineHeight: theme.typography.pxToRem(16),
10
+ lineHeight: theme.typography.small.lineHeight,
8
11
  '&.Mui-error': {
9
12
  color: theme.palette.error.dark,
10
13
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.23.0",
3
+ "version": "0.24.0",
4
4
  "browser": "./src/index.ts",
5
5
  "jest": {
6
6
  "moduleNameMapper": {
@@ -8,7 +8,7 @@
8
8
  }
9
9
  },
10
10
  "dependencies": {
11
- "@astral/icons": "^0.23.0",
11
+ "@astral/icons": "^0.24.0",
12
12
  "@emotion/cache": "11.7.1",
13
13
  "@emotion/react": "11.8.1",
14
14
  "@emotion/server": "11.4.0",
package/theme/components/MuiFormHelperText.js CHANGED
@@ -6,8 +6,11 @@ exports.MuiFormHelperText = {
6
6
  root: function (_a) {
7
7
  var theme = _a.theme;
8
8
  return {
9
+ display: 'flex',
10
+ minHeight: theme.typography.small.lineHeight,
11
+ fontSize: theme.typography.small.fontSize,
9
12
  margin: theme.spacing(1, 0, 0),
10
- lineHeight: theme.typography.pxToRem(16),
13
+ lineHeight: theme.typography.small.lineHeight,
11
14
  '&.Mui-error': {
12
15
  color: theme.palette.error.dark,
13
16
  },