@spark-web/text-input 1.1.1 → 2.0.0

package/dist/declarations/src/index.d.ts

@@ -1,4 +1,6 @@
 export { InputAdornment } from './InputAdornment';
-export { TextInput, useInput } from './TextInput';
+export { InputContainer } from './InputContainer';
+export { TextInput, useInputStyles } from './TextInput';
 export type { AdornmentChild } from './childrenToAdornments';
-export type { TextInputProps, UseInputProps } from './TextInput';
+export type { InputContainerProps } from './InputContainer';
+export type { TextInputProps, UseInputStylesProps } from './TextInput';

package/dist/spark-web-text-input.cjs.dev.js

@@ -112,6 +112,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = field.useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -144,8 +189,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
@@ -154,53 +198,53 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css.css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      "aria-invalid": invalid || undefined,
-      ref: forwardedRef,
-      disabled: disabled // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css.css(useInput({
-        disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+      className: css.css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
@@ -215,27 +259,30 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
-    ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
+      }, focusRingStyles)
     },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme$1.border.color.fieldAccent
-    })
-  });
+    ':focus': {
+      outline: 'none'
+    },
+    ':invalid': {
+      color: theme$1.color.foreground.muted
+    }
+  })];
 };
 
 exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
-exports.useInput = useInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.cjs.prod.js

@@ -112,6 +112,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = field.useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -144,8 +189,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
@@ -154,53 +198,53 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css.css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      "aria-invalid": invalid || undefined,
-      ref: forwardedRef,
-      disabled: disabled // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css.css(useInput({
-        disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+      className: css.css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
@@ -215,27 +259,30 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
-    ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
+      }, focusRingStyles)
     },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme$1.border.color.fieldAccent
-    })
-  });
+    ':focus': {
+      outline: 'none'
+    },
+    ':invalid': {
+      color: theme$1.color.foreground.muted
+    }
+  })];
 };
 
 exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
-exports.useInput = useInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.esm.js

@@ -8,7 +8,7 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { css } from '@emotion/css';
 import { useFocusRing } from '@spark-web/a11y';
-import { useText } from '@spark-web/text';
+import { useOverflowStrategy, useText } from '@spark-web/text';
 
 /**
  * Components like the `SelectInput` may subscribe to the adornment context and
@@ -108,6 +108,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsx(Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -140,8 +185,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
@@ -150,53 +194,53 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxs(Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
+  return /*#__PURE__*/jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      "aria-invalid": invalid || undefined,
-      ref: forwardedRef,
-      disabled: disabled // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css(useInput({
-        disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+      className: css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme = useTheme();
+  var overflowStyles = useOverflowStrategy('truncate');
   var focusRingStyles = useFocusRing({
     always: true
   });
@@ -211,25 +255,27 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
-    ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme.border.color.fieldAccent
-      })
+      }, focusRingStyles)
     },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme.border.color.fieldAccent
-    })
-  });
+    ':focus': {
+      outline: 'none'
+    },
+    ':invalid': {
+      color: theme.color.foreground.muted
+    }
+  })];
 };
 
-export { InputAdornment, TextInput, useInput };
+export { InputAdornment, InputContainer, TextInput, useInputStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "dist/spark-web-text-input.cjs.js",
   "module": "dist/spark-web-text-input.esm.js",
@@ -8,20 +8,21 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.14.6",
-    "@emotion/css": "^11.7.1",
-    "@spark-web/a11y": "^1.0.4",
-    "@spark-web/box": "^1.0.4",
-    "@spark-web/field": "^1.1.0",
-    "@spark-web/text": "^1.0.4",
-    "@spark-web/theme": "^3.0.0",
-    "@spark-web/utils": "^1.1.2"
+    "@babel/runtime": "^7.18.3",
+    "@emotion/css": "^11.9.0",
+    "@spark-web/a11y": "^1.1.0",
+    "@spark-web/box": "^1.0.6",
+    "@spark-web/text": "^1.0.6",
+    "@spark-web/theme": "^3.0.2",
+    "@spark-web/utils": "^1.1.5"
   },
   "devDependencies": {
+    "@spark-web/field": "^3.0.1",
     "@types/react": "^17.0.12",
     "react": "^17.0.2"
   },
   "peerDependencies": {
+    "@spark-web/field": "^3.0.1",
     "react": ">=17.0.2"
   },
   "engines": {