@spark-web/field 1.0.0 → 1.0.1

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 (5) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/spark-web-field.cjs.dev.js +73 -59
  3. package/dist/spark-web-field.cjs.prod.js +73 -59
  4. package/dist/spark-web-field.esm.js +70 -52
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @spark-web/field
2
2
 
3
+ ## 1.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#36](https://github.com/brighte-labs/spark-web/pull/36)
8
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
9
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
10
+ config
11
+
12
+ - Updated dependencies
13
+ [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
14
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
15
+ - @spark-web/theme@2.0.0
16
+ - @spark-web/a11y@1.0.1
17
+ - @spark-web/box@1.0.1
18
+ - @spark-web/icon@1.0.1
19
+ - @spark-web/stack@1.0.1
20
+ - @spark-web/text@1.0.1
21
+ - @spark-web/utils@1.0.1
22
+
3
23
  ## 1.0.0
4
24
 
5
25
  ### Major Changes
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
- var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
7
- var _extends = require('@babel/runtime/helpers/esm/extends');
5
+ var react = require('react');
6
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
8
  var css = require('@emotion/css');
9
9
  var a11y = require('@spark-web/a11y');
10
10
  var box = require('@spark-web/box');
@@ -13,16 +13,13 @@ var stack = require('@spark-web/stack');
13
13
  var text = require('@spark-web/text');
14
14
  var theme = require('@spark-web/theme');
15
15
  var internal = require('@spark-web/utils/internal');
16
+ var jsxRuntime = require('react/jsx-runtime');
16
17
 
17
- function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefault(React);
20
-
21
- var FieldContext = /*#__PURE__*/React.createContext(null);
18
+ var FieldContext = /*#__PURE__*/react.createContext(null);
22
19
  var FieldContextProvider = FieldContext.Provider;
23
20
  var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
24
21
  function useFieldContext() {
25
- var ctx = React.useContext(FieldContext);
22
+ var ctx = react.useContext(FieldContext);
26
23
 
27
24
  if (!ctx) {
28
25
  throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
@@ -32,13 +29,12 @@ function useFieldContext() {
32
29
  }
33
30
 
34
31
  var _excluded = ["children"];
35
- var __jsx = React__default["default"].createElement;
36
32
 
37
33
  /**
38
34
  * Using a [context](https://reactjs.org/docs/context.html), the field
39
35
  * component connects the label, description, and message to the input element.
40
36
  */
41
- var Field = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
37
+ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
42
38
  var children = _ref.children,
43
39
  idProp = _ref.id,
44
40
  data = _ref.data,
@@ -67,48 +63,60 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
67
63
  invalid: Boolean(message && tone === 'critical')
68
64
  }; // label prep
69
65
 
70
- var hiddenLabel = __jsx(a11y.VisuallyHidden, {
66
+ var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
71
67
  as: "label",
72
- htmlFor: inputId
73
- }, label, " ", secondaryLabel);
68
+ htmlFor: inputId,
69
+ children: [label, " ", secondaryLabel]
70
+ });
74
71
 
75
72
  var labelElement = {
76
73
  hidden: hiddenLabel,
77
- visible: __jsx(box.Box, {
74
+ visible: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
78
75
  as: "label",
79
- htmlFor: inputId
80
- }, __jsx(text.Text, {
81
- inline: true,
82
- tone: disabled ? 'disabled' : 'neutral',
83
- weight: "strong"
84
- }, label, ' ', secondaryLabel && __jsx(text.Text, {
85
- inline: true,
86
- tone: disabled ? 'disabled' : 'muted'
87
- }, secondaryLabel))),
88
- 'reserve-space': __jsx(React.Fragment, null, hiddenLabel, __jsx(text.Text, {
89
- inline: true,
90
- "aria-hidden": true
91
- }, "\xA0"))
76
+ htmlFor: inputId,
77
+ children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
78
+ inline: true,
79
+ tone: disabled ? 'disabled' : 'neutral',
80
+ weight: "strong",
81
+ children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
82
+ inline: true,
83
+ tone: disabled ? 'disabled' : 'muted',
84
+ children: secondaryLabel
85
+ })]
86
+ })
87
+ }),
88
+ 'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
89
+ children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
90
+ inline: true,
91
+ "aria-hidden": true,
92
+ children: "\xA0"
93
+ })]
94
+ })
92
95
  };
93
- return __jsx(FieldContextProvider, {
94
- value: fieldContext
95
- }, __jsx(stack.Stack, _extends({
96
- gap: labelVisibility === 'hidden' ? undefined : 'small',
97
- ref: forwardedRef
98
- }, data ? internal.buildDataAttributes(data) : null), __jsx(box.Box, {
99
- display: "flex",
100
- alignItems: "center",
101
- justifyContent: "spaceBetween",
102
- gap: "large"
103
- }, labelElement[labelVisibility], adornment), description && __jsx(text.Text, {
104
- tone: "muted",
105
- size: "small",
106
- id: descriptionId
107
- }, description), children, message && __jsx(FieldMessage, {
108
- tone: tone,
109
- id: messageId,
110
- message: message
111
- })));
96
+ return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
97
+ value: fieldContext,
98
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
99
+ gap: labelVisibility === 'hidden' ? undefined : 'small',
100
+ ref: forwardedRef
101
+ }, data ? internal.buildDataAttributes(data) : null), {}, {
102
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
103
+ display: "flex",
104
+ alignItems: "center",
105
+ justifyContent: "spaceBetween",
106
+ gap: "large",
107
+ children: [labelElement[labelVisibility], adornment]
108
+ }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
109
+ tone: "muted",
110
+ size: "small",
111
+ id: descriptionId,
112
+ children: description
113
+ }), children, message && /*#__PURE__*/jsxRuntime.jsx(FieldMessage, {
114
+ tone: tone,
115
+ id: messageId,
116
+ message: message
117
+ })]
118
+ }))
119
+ });
112
120
  });
113
121
  Field.displayName = 'Field'; // Utils
114
122
  // ------------------------------
@@ -142,17 +150,21 @@ var FieldMessage = function FieldMessage(_ref2) {
142
150
  tone = _ref2.tone;
143
151
  var textTone = messageToneMap[tone];
144
152
  var Icon = messageIconMap[tone];
145
- return __jsx(box.Box, {
153
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
146
154
  display: "flex",
147
- gap: "xsmall"
148
- }, Icon ? __jsx(IndicatorContainer, null, __jsx(Icon, {
149
- size: "xxsmall",
150
- tone: tone
151
- })) : null, __jsx(text.Text, {
152
- tone: textTone,
153
- size: "small",
154
- id: id
155
- }, message));
155
+ gap: "xsmall",
156
+ children: [Icon ? /*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
157
+ children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
158
+ size: "xxsmall",
159
+ tone: tone
160
+ })
161
+ }) : null, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
162
+ tone: textTone,
163
+ size: "small",
164
+ id: id,
165
+ children: message
166
+ })]
167
+ });
156
168
  };
157
169
 
158
170
  function IndicatorContainer(_ref3) {
@@ -174,14 +186,16 @@ function IndicatorContainer(_ref3) {
174
186
  height: tablet.capHeight
175
187
  }
176
188
  });
177
- return __jsx(box.Box, _extends({
189
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
178
190
  display: "flex",
179
191
  alignItems: "center",
180
192
  "aria-hidden": true,
181
193
  cursor: "default",
182
194
  flexShrink: 0,
183
195
  className: css.css(responsiveStyles)
184
- }, props), children);
196
+ }, props), {}, {
197
+ children: children
198
+ }));
185
199
  }
186
200
 
187
201
  exports.Field = Field;
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
- var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
7
- var _extends = require('@babel/runtime/helpers/esm/extends');
5
+ var react = require('react');
6
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
8
  var css = require('@emotion/css');
9
9
  var a11y = require('@spark-web/a11y');
10
10
  var box = require('@spark-web/box');
@@ -13,16 +13,13 @@ var stack = require('@spark-web/stack');
13
13
  var text = require('@spark-web/text');
14
14
  var theme = require('@spark-web/theme');
15
15
  var internal = require('@spark-web/utils/internal');
16
+ var jsxRuntime = require('react/jsx-runtime');
16
17
 
17
- function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefault(React);
20
-
21
- var FieldContext = /*#__PURE__*/React.createContext(null);
18
+ var FieldContext = /*#__PURE__*/react.createContext(null);
22
19
  var FieldContextProvider = FieldContext.Provider;
23
20
  var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
24
21
  function useFieldContext() {
25
- var ctx = React.useContext(FieldContext);
22
+ var ctx = react.useContext(FieldContext);
26
23
 
27
24
  if (!ctx) {
28
25
  throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
@@ -32,13 +29,12 @@ function useFieldContext() {
32
29
  }
33
30
 
34
31
  var _excluded = ["children"];
35
- var __jsx = React__default["default"].createElement;
36
32
 
37
33
  /**
38
34
  * Using a [context](https://reactjs.org/docs/context.html), the field
39
35
  * component connects the label, description, and message to the input element.
40
36
  */
41
- var Field = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
37
+ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
42
38
  var children = _ref.children,
43
39
  idProp = _ref.id,
44
40
  data = _ref.data,
@@ -67,48 +63,60 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
67
63
  invalid: Boolean(message && tone === 'critical')
68
64
  }; // label prep
69
65
 
70
- var hiddenLabel = __jsx(a11y.VisuallyHidden, {
66
+ var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
71
67
  as: "label",
72
- htmlFor: inputId
73
- }, label, " ", secondaryLabel);
68
+ htmlFor: inputId,
69
+ children: [label, " ", secondaryLabel]
70
+ });
74
71
 
75
72
  var labelElement = {
76
73
  hidden: hiddenLabel,
77
- visible: __jsx(box.Box, {
74
+ visible: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
78
75
  as: "label",
79
- htmlFor: inputId
80
- }, __jsx(text.Text, {
81
- inline: true,
82
- tone: disabled ? 'disabled' : 'neutral',
83
- weight: "strong"
84
- }, label, ' ', secondaryLabel && __jsx(text.Text, {
85
- inline: true,
86
- tone: disabled ? 'disabled' : 'muted'
87
- }, secondaryLabel))),
88
- 'reserve-space': __jsx(React.Fragment, null, hiddenLabel, __jsx(text.Text, {
89
- inline: true,
90
- "aria-hidden": true
91
- }, "\xA0"))
76
+ htmlFor: inputId,
77
+ children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
78
+ inline: true,
79
+ tone: disabled ? 'disabled' : 'neutral',
80
+ weight: "strong",
81
+ children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
82
+ inline: true,
83
+ tone: disabled ? 'disabled' : 'muted',
84
+ children: secondaryLabel
85
+ })]
86
+ })
87
+ }),
88
+ 'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
89
+ children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
90
+ inline: true,
91
+ "aria-hidden": true,
92
+ children: "\xA0"
93
+ })]
94
+ })
92
95
  };
93
- return __jsx(FieldContextProvider, {
94
- value: fieldContext
95
- }, __jsx(stack.Stack, _extends({
96
- gap: labelVisibility === 'hidden' ? undefined : 'small',
97
- ref: forwardedRef
98
- }, data ? internal.buildDataAttributes(data) : null), __jsx(box.Box, {
99
- display: "flex",
100
- alignItems: "center",
101
- justifyContent: "spaceBetween",
102
- gap: "large"
103
- }, labelElement[labelVisibility], adornment), description && __jsx(text.Text, {
104
- tone: "muted",
105
- size: "small",
106
- id: descriptionId
107
- }, description), children, message && __jsx(FieldMessage, {
108
- tone: tone,
109
- id: messageId,
110
- message: message
111
- })));
96
+ return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
97
+ value: fieldContext,
98
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
99
+ gap: labelVisibility === 'hidden' ? undefined : 'small',
100
+ ref: forwardedRef
101
+ }, data ? internal.buildDataAttributes(data) : null), {}, {
102
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
103
+ display: "flex",
104
+ alignItems: "center",
105
+ justifyContent: "spaceBetween",
106
+ gap: "large",
107
+ children: [labelElement[labelVisibility], adornment]
108
+ }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
109
+ tone: "muted",
110
+ size: "small",
111
+ id: descriptionId,
112
+ children: description
113
+ }), children, message && /*#__PURE__*/jsxRuntime.jsx(FieldMessage, {
114
+ tone: tone,
115
+ id: messageId,
116
+ message: message
117
+ })]
118
+ }))
119
+ });
112
120
  });
113
121
  Field.displayName = 'Field'; // Utils
114
122
  // ------------------------------
@@ -142,17 +150,21 @@ var FieldMessage = function FieldMessage(_ref2) {
142
150
  tone = _ref2.tone;
143
151
  var textTone = messageToneMap[tone];
144
152
  var Icon = messageIconMap[tone];
145
- return __jsx(box.Box, {
153
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
146
154
  display: "flex",
147
- gap: "xsmall"
148
- }, Icon ? __jsx(IndicatorContainer, null, __jsx(Icon, {
149
- size: "xxsmall",
150
- tone: tone
151
- })) : null, __jsx(text.Text, {
152
- tone: textTone,
153
- size: "small",
154
- id: id
155
- }, message));
155
+ gap: "xsmall",
156
+ children: [Icon ? /*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
157
+ children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
158
+ size: "xxsmall",
159
+ tone: tone
160
+ })
161
+ }) : null, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
162
+ tone: textTone,
163
+ size: "small",
164
+ id: id,
165
+ children: message
166
+ })]
167
+ });
156
168
  };
157
169
 
158
170
  function IndicatorContainer(_ref3) {
@@ -174,14 +186,16 @@ function IndicatorContainer(_ref3) {
174
186
  height: tablet.capHeight
175
187
  }
176
188
  });
177
- return __jsx(box.Box, _extends({
189
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
178
190
  display: "flex",
179
191
  alignItems: "center",
180
192
  "aria-hidden": true,
181
193
  cursor: "default",
182
194
  flexShrink: 0,
183
195
  className: css.css(responsiveStyles)
184
- }, props), children);
196
+ }, props), {}, {
197
+ children: children
198
+ }));
185
199
  }
186
200
 
187
201
  exports.Field = Field;
package/dist/spark-web-field.esm.js CHANGED
@@ -1,14 +1,15 @@
1
- import React, { createContext, useContext, forwardRef, Fragment } from 'react';
1
+ import { createContext, useContext, forwardRef, Fragment } from 'react';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import _extends from '@babel/runtime/helpers/esm/extends';
3
+ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
4
4
  import { css } from '@emotion/css';
5
- import { mergeIds, VisuallyHidden, useId, composeId } from '@spark-web/a11y';
5
+ import { mergeIds, useId, composeId, VisuallyHidden } from '@spark-web/a11y';
6
6
  import { Box } from '@spark-web/box';
7
7
  import { ExclamationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
8
8
  import { Stack } from '@spark-web/stack';
9
9
  import { Text } from '@spark-web/text';
10
10
  import { useTheme } from '@spark-web/theme';
11
11
  import { buildDataAttributes } from '@spark-web/utils/internal';
12
+ import { jsx, jsxs } from 'react/jsx-runtime';
12
13
 
13
14
  var FieldContext = /*#__PURE__*/createContext(null);
14
15
  var FieldContextProvider = FieldContext.Provider;
@@ -24,7 +25,6 @@ function useFieldContext() {
24
25
  }
25
26
 
26
27
  var _excluded = ["children"];
27
- var __jsx = React.createElement;
28
28
 
29
29
  /**
30
30
  * Using a [context](https://reactjs.org/docs/context.html), the field
@@ -59,48 +59,60 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
59
59
  invalid: Boolean(message && tone === 'critical')
60
60
  }; // label prep
61
61
 
62
- var hiddenLabel = __jsx(VisuallyHidden, {
62
+ var hiddenLabel = /*#__PURE__*/jsxs(VisuallyHidden, {
63
63
  as: "label",
64
- htmlFor: inputId
65
- }, label, " ", secondaryLabel);
64
+ htmlFor: inputId,
65
+ children: [label, " ", secondaryLabel]
66
+ });
66
67
 
67
68
  var labelElement = {
68
69
  hidden: hiddenLabel,
69
- visible: __jsx(Box, {
70
+ visible: /*#__PURE__*/jsx(Box, {
70
71
  as: "label",
71
- htmlFor: inputId
72
- }, __jsx(Text, {
73
- inline: true,
74
- tone: disabled ? 'disabled' : 'neutral',
75
- weight: "strong"
76
- }, label, ' ', secondaryLabel && __jsx(Text, {
77
- inline: true,
78
- tone: disabled ? 'disabled' : 'muted'
79
- }, secondaryLabel))),
80
- 'reserve-space': __jsx(Fragment, null, hiddenLabel, __jsx(Text, {
81
- inline: true,
82
- "aria-hidden": true
83
- }, "\xA0"))
72
+ htmlFor: inputId,
73
+ children: /*#__PURE__*/jsxs(Text, {
74
+ inline: true,
75
+ tone: disabled ? 'disabled' : 'neutral',
76
+ weight: "strong",
77
+ children: [label, ' ', secondaryLabel && /*#__PURE__*/jsx(Text, {
78
+ inline: true,
79
+ tone: disabled ? 'disabled' : 'muted',
80
+ children: secondaryLabel
81
+ })]
82
+ })
83
+ }),
84
+ 'reserve-space': /*#__PURE__*/jsxs(Fragment, {
85
+ children: [hiddenLabel, /*#__PURE__*/jsx(Text, {
86
+ inline: true,
87
+ "aria-hidden": true,
88
+ children: "\xA0"
89
+ })]
90
+ })
84
91
  };
85
- return __jsx(FieldContextProvider, {
86
- value: fieldContext
87
- }, __jsx(Stack, _extends({
88
- gap: labelVisibility === 'hidden' ? undefined : 'small',
89
- ref: forwardedRef
90
- }, data ? buildDataAttributes(data) : null), __jsx(Box, {
91
- display: "flex",
92
- alignItems: "center",
93
- justifyContent: "spaceBetween",
94
- gap: "large"
95
- }, labelElement[labelVisibility], adornment), description && __jsx(Text, {
96
- tone: "muted",
97
- size: "small",
98
- id: descriptionId
99
- }, description), children, message && __jsx(FieldMessage, {
100
- tone: tone,
101
- id: messageId,
102
- message: message
103
- })));
92
+ return /*#__PURE__*/jsx(FieldContextProvider, {
93
+ value: fieldContext,
94
+ children: /*#__PURE__*/jsxs(Stack, _objectSpread(_objectSpread({
95
+ gap: labelVisibility === 'hidden' ? undefined : 'small',
96
+ ref: forwardedRef
97
+ }, data ? buildDataAttributes(data) : null), {}, {
98
+ children: [/*#__PURE__*/jsxs(Box, {
99
+ display: "flex",
100
+ alignItems: "center",
101
+ justifyContent: "spaceBetween",
102
+ gap: "large",
103
+ children: [labelElement[labelVisibility], adornment]
104
+ }), description && /*#__PURE__*/jsx(Text, {
105
+ tone: "muted",
106
+ size: "small",
107
+ id: descriptionId,
108
+ children: description
109
+ }), children, message && /*#__PURE__*/jsx(FieldMessage, {
110
+ tone: tone,
111
+ id: messageId,
112
+ message: message
113
+ })]
114
+ }))
115
+ });
104
116
  });
105
117
  Field.displayName = 'Field'; // Utils
106
118
  // ------------------------------
@@ -134,17 +146,21 @@ var FieldMessage = function FieldMessage(_ref2) {
134
146
  tone = _ref2.tone;
135
147
  var textTone = messageToneMap[tone];
136
148
  var Icon = messageIconMap[tone];
137
- return __jsx(Box, {
149
+ return /*#__PURE__*/jsxs(Box, {
138
150
  display: "flex",
139
- gap: "xsmall"
140
- }, Icon ? __jsx(IndicatorContainer, null, __jsx(Icon, {
141
- size: "xxsmall",
142
- tone: tone
143
- })) : null, __jsx(Text, {
144
- tone: textTone,
145
- size: "small",
146
- id: id
147
- }, message));
151
+ gap: "xsmall",
152
+ children: [Icon ? /*#__PURE__*/jsx(IndicatorContainer, {
153
+ children: /*#__PURE__*/jsx(Icon, {
154
+ size: "xxsmall",
155
+ tone: tone
156
+ })
157
+ }) : null, /*#__PURE__*/jsx(Text, {
158
+ tone: textTone,
159
+ size: "small",
160
+ id: id,
161
+ children: message
162
+ })]
163
+ });
148
164
  };
149
165
 
150
166
  function IndicatorContainer(_ref3) {
@@ -166,14 +182,16 @@ function IndicatorContainer(_ref3) {
166
182
  height: tablet.capHeight
167
183
  }
168
184
  });
169
- return __jsx(Box, _extends({
185
+ return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
170
186
  display: "flex",
171
187
  alignItems: "center",
172
188
  "aria-hidden": true,
173
189
  cursor: "default",
174
190
  flexShrink: 0,
175
191
  className: css(responsiveStyles)
176
- }, props), children);
192
+ }, props), {}, {
193
+ children: children
194
+ }));
177
195
  }
178
196
 
179
197
  export { Field, FieldMessage, useFieldContext, useFieldIds };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
3
  "license": "MIT",
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "main": "dist/spark-web-field.cjs.js",
6
6
  "module": "dist/spark-web-field.esm.js",
7
7
  "devDependencies": {
@@ -10,13 +10,13 @@
10
10
  "dependencies": {
11
11
  "@babel/runtime": "^7.14.6",
12
12
  "@emotion/css": "^11.7.1",
13
- "@spark-web/a11y": "^1.0.0",
14
- "@spark-web/box": "^1.0.0",
15
- "@spark-web/icon": "^1.0.0",
16
- "@spark-web/stack": "^1.0.0",
17
- "@spark-web/text": "^1.0.0",
18
- "@spark-web/theme": "^1.0.0",
19
- "@spark-web/utils": "^1.0.0",
13
+ "@spark-web/a11y": "^1.0.1",
14
+ "@spark-web/box": "^1.0.1",
15
+ "@spark-web/icon": "^1.0.1",
16
+ "@spark-web/stack": "^1.0.1",
17
+ "@spark-web/text": "^1.0.1",
18
+ "@spark-web/theme": "^2.0.0",
19
+ "@spark-web/utils": "^1.0.1",
20
20
  "react": "^17.0.2"
21
21
  },
22
22
  "engines": {