@spark-web/text-input 2.0.4 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @spark-web/text-input
 
+## 3.0.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/a11y@1.4.0
+  - @spark-web/box@1.2.0
+  - @spark-web/field@3.1.0
+  - @spark-web/text@1.2.0
+  - @spark-web/theme@3.2.0
+  - @spark-web/utils@1.3.0
+
 ## 2.0.4
 
 ### Patch Changes

package/dist/declarations/src/text-input.d.ts

@@ -57,7 +57,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly height: "medium";
     readonly paddingLeft: "none" | "medium";
     readonly paddingRight: "none" | "medium";
-    readonly shadow: "small";
     readonly width: "full";
 }, {
     readonly ':enabled': {
@@ -83,6 +82,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly alignItems?: import("csstype").Property.AlignItems | import("csstype").Property.AlignItems[] | undefined;
     readonly alignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly alignTracks?: import("csstype").Property.AlignTracks | import("csstype").Property.AlignTracks[] | undefined;
+    readonly animationComposition?: import("csstype").Property.AnimationComposition | import("csstype").Property.AnimationComposition[] | undefined;
     readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly animationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
     readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | import("csstype").Property.AnimationDuration<string & {}>[] | undefined;
@@ -278,6 +278,8 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly maskRepeat?: import("csstype").Property.MaskRepeat | import("csstype").Property.MaskRepeat[] | undefined;
     readonly maskSize?: string | number | import("csstype").Property.MaskSize<string | number>[] | undefined;
     readonly maskType?: import("csstype").Property.MaskType | import("csstype").Property.MaskType[] | undefined;
+    readonly mathDepth?: import("csstype").Property.MathDepth | import("csstype").Property.MathDepth[] | undefined;
+    readonly mathShift?: import("csstype").Property.MathShift | import("csstype").Property.MathShift[] | undefined;
     readonly mathStyle?: import("csstype").Property.MathStyle | import("csstype").Property.MathStyle[] | undefined;
     readonly maxBlockSize?: string | number | import("csstype").Property.MaxBlockSize<string | number>[] | undefined;
     readonly maxHeight?: string | number | import("csstype").Property.MaxHeight<string | number>[] | undefined;
@@ -395,7 +397,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | import("csstype").Property.TextDecorationSkipInk[] | undefined;
     readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly textDecorationThickness?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
-    readonly textDecorationWidth?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
     readonly textEmphasisColor?: import("csstype").Property.TextEmphasisColor | import("csstype").Property.TextEmphasisColor[] | undefined;
     readonly textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | import("csstype").Property.TextEmphasisPosition[] | undefined;
     readonly textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | import("csstype").Property.TextEmphasisStyle[] | undefined;
@@ -503,7 +504,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozBoxSizing?: import("csstype").Property.BoxSizing | import("csstype").Property.BoxSizing[] | undefined;
     readonly MozColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly MozColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly MozColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly MozColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -537,7 +537,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozWindowDragging?: import("csstype").Property.MozWindowDragging | import("csstype").Property.MozWindowDragging[] | undefined;
     readonly MozWindowShadow?: import("csstype").Property.MozWindowShadow | import("csstype").Property.MozWindowShadow[] | undefined;
     readonly msAccelerator?: import("csstype").Property.MsAccelerator | import("csstype").Property.MsAccelerator[] | undefined;
-    readonly msAlignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly msBlockProgression?: import("csstype").Property.MsBlockProgression | import("csstype").Property.MsBlockProgression[] | undefined;
     readonly msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | import("csstype").Property.MsContentZoomChaining[] | undefined;
     readonly msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | import("csstype").Property.MsContentZoomLimitMax[] | undefined;
@@ -558,7 +557,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msHyphenateLimitZone?: string | number | import("csstype").Property.MsHyphenateLimitZone<string | number>[] | undefined;
     readonly msHyphens?: import("csstype").Property.Hyphens | import("csstype").Property.Hyphens[] | undefined;
     readonly msImeAlign?: import("csstype").Property.MsImeAlign | import("csstype").Property.MsImeAlign[] | undefined;
-    readonly msJustifySelf?: import("csstype").Property.JustifySelf | import("csstype").Property.JustifySelf[] | undefined;
     readonly msLineBreak?: import("csstype").Property.LineBreak | import("csstype").Property.LineBreak[] | undefined;
     readonly msOrder?: import("csstype").Property.Order | import("csstype").Property.Order[] | undefined;
     readonly msOverflowStyle?: import("csstype").Property.MsOverflowStyle | import("csstype").Property.MsOverflowStyle[] | undefined;
@@ -581,6 +579,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | import("csstype").Property.MsScrollbarFaceColor[] | undefined;
     readonly msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | import("csstype").Property.MsScrollbarHighlightColor[] | undefined;
     readonly msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | import("csstype").Property.MsScrollbarShadowColor[] | undefined;
+    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly msTextAutospace?: import("csstype").Property.MsTextAutospace | import("csstype").Property.MsTextAutospace[] | undefined;
     readonly msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | import("csstype").Property.TextCombineUpright[] | undefined;
     readonly msTextOverflow?: import("csstype").Property.TextOverflow | import("csstype").Property.TextOverflow[] | undefined;
@@ -630,7 +629,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly WebkitClipPath?: import("csstype").Property.ClipPath | import("csstype").Property.ClipPath[] | undefined;
     readonly WebkitColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly WebkitColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly WebkitColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly WebkitColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -759,7 +757,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | import("csstype").Property.ScrollSnapPointsY[] | undefined;
     readonly scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | import("csstype").Property.ScrollSnapTypeX[] | undefined;
     readonly scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | import("csstype").Property.ScrollSnapTypeY[] | undefined;
-    readonly scrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly KhtmlBoxAlign?: import("csstype").Property.BoxAlign | import("csstype").Property.BoxAlign[] | undefined;
     readonly KhtmlBoxDirection?: import("csstype").Property.BoxDirection | import("csstype").Property.BoxDirection[] | undefined;
     readonly KhtmlBoxFlex?: import("csstype").Property.BoxFlex | import("csstype").Property.BoxFlex[] | undefined;
@@ -806,7 +803,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly MozUserInput?: import("csstype").Property.MozUserInput | import("csstype").Property.MozUserInput[] | undefined;
     readonly msImeMode?: import("csstype").Property.ImeMode | import("csstype").Property.ImeMode[] | undefined;
-    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly OAnimation?: import("csstype").Property.Animation<string & {}> | import("csstype").Property.Animation<string & {}>[] | undefined;
     readonly OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly OAnimationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
@@ -912,6 +908,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly "::-ms-browse"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-check"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-clear"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly "::-ms-expand"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-lower"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-upper"?: import("@emotion/serialize").CSSObject | undefined;
@@ -980,6 +977,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly ":paused"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":picture-in-picture"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":placeholder-shown"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly ":playing"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-only"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-write"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":required"?: import("@emotion/serialize").CSSObject | undefined;
@@ -1017,6 +1015,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly alignItems?: import("csstype").Property.AlignItems | import("csstype").Property.AlignItems[] | undefined;
     readonly alignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly alignTracks?: import("csstype").Property.AlignTracks | import("csstype").Property.AlignTracks[] | undefined;
+    readonly animationComposition?: import("csstype").Property.AnimationComposition | import("csstype").Property.AnimationComposition[] | undefined;
     readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly animationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
     readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | import("csstype").Property.AnimationDuration<string & {}>[] | undefined;
@@ -1212,6 +1211,8 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly maskRepeat?: import("csstype").Property.MaskRepeat | import("csstype").Property.MaskRepeat[] | undefined;
     readonly maskSize?: string | number | import("csstype").Property.MaskSize<string | number>[] | undefined;
     readonly maskType?: import("csstype").Property.MaskType | import("csstype").Property.MaskType[] | undefined;
+    readonly mathDepth?: import("csstype").Property.MathDepth | import("csstype").Property.MathDepth[] | undefined;
+    readonly mathShift?: import("csstype").Property.MathShift | import("csstype").Property.MathShift[] | undefined;
     readonly mathStyle?: import("csstype").Property.MathStyle | import("csstype").Property.MathStyle[] | undefined;
     readonly maxBlockSize?: string | number | import("csstype").Property.MaxBlockSize<string | number>[] | undefined;
     readonly maxHeight?: string | number | import("csstype").Property.MaxHeight<string | number>[] | undefined;
@@ -1329,7 +1330,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | import("csstype").Property.TextDecorationSkipInk[] | undefined;
     readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly textDecorationThickness?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
-    readonly textDecorationWidth?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
     readonly textEmphasisColor?: import("csstype").Property.TextEmphasisColor | import("csstype").Property.TextEmphasisColor[] | undefined;
     readonly textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | import("csstype").Property.TextEmphasisPosition[] | undefined;
     readonly textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | import("csstype").Property.TextEmphasisStyle[] | undefined;
@@ -1436,7 +1436,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozBoxSizing?: import("csstype").Property.BoxSizing | import("csstype").Property.BoxSizing[] | undefined;
     readonly MozColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly MozColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly MozColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly MozColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -1470,7 +1469,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozWindowDragging?: import("csstype").Property.MozWindowDragging | import("csstype").Property.MozWindowDragging[] | undefined;
     readonly MozWindowShadow?: import("csstype").Property.MozWindowShadow | import("csstype").Property.MozWindowShadow[] | undefined;
     readonly msAccelerator?: import("csstype").Property.MsAccelerator | import("csstype").Property.MsAccelerator[] | undefined;
-    readonly msAlignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly msBlockProgression?: import("csstype").Property.MsBlockProgression | import("csstype").Property.MsBlockProgression[] | undefined;
     readonly msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | import("csstype").Property.MsContentZoomChaining[] | undefined;
     readonly msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | import("csstype").Property.MsContentZoomLimitMax[] | undefined;
@@ -1491,7 +1489,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msHyphenateLimitZone?: string | number | import("csstype").Property.MsHyphenateLimitZone<string | number>[] | undefined;
     readonly msHyphens?: import("csstype").Property.Hyphens | import("csstype").Property.Hyphens[] | undefined;
     readonly msImeAlign?: import("csstype").Property.MsImeAlign | import("csstype").Property.MsImeAlign[] | undefined;
-    readonly msJustifySelf?: import("csstype").Property.JustifySelf | import("csstype").Property.JustifySelf[] | undefined;
     readonly msLineBreak?: import("csstype").Property.LineBreak | import("csstype").Property.LineBreak[] | undefined;
     readonly msOrder?: import("csstype").Property.Order | import("csstype").Property.Order[] | undefined;
     readonly msOverflowStyle?: import("csstype").Property.MsOverflowStyle | import("csstype").Property.MsOverflowStyle[] | undefined;
@@ -1514,6 +1511,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | import("csstype").Property.MsScrollbarFaceColor[] | undefined;
     readonly msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | import("csstype").Property.MsScrollbarHighlightColor[] | undefined;
     readonly msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | import("csstype").Property.MsScrollbarShadowColor[] | undefined;
+    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly msTextAutospace?: import("csstype").Property.MsTextAutospace | import("csstype").Property.MsTextAutospace[] | undefined;
     readonly msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | import("csstype").Property.TextCombineUpright[] | undefined;
     readonly msTextOverflow?: import("csstype").Property.TextOverflow | import("csstype").Property.TextOverflow[] | undefined;
@@ -1563,7 +1561,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly WebkitClipPath?: import("csstype").Property.ClipPath | import("csstype").Property.ClipPath[] | undefined;
     readonly WebkitColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly WebkitColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly WebkitColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly WebkitColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -1692,7 +1689,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | import("csstype").Property.ScrollSnapPointsY[] | undefined;
     readonly scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | import("csstype").Property.ScrollSnapTypeX[] | undefined;
     readonly scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | import("csstype").Property.ScrollSnapTypeY[] | undefined;
-    readonly scrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly KhtmlBoxAlign?: import("csstype").Property.BoxAlign | import("csstype").Property.BoxAlign[] | undefined;
     readonly KhtmlBoxDirection?: import("csstype").Property.BoxDirection | import("csstype").Property.BoxDirection[] | undefined;
     readonly KhtmlBoxFlex?: import("csstype").Property.BoxFlex | import("csstype").Property.BoxFlex[] | undefined;
@@ -1739,7 +1735,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly MozUserInput?: import("csstype").Property.MozUserInput | import("csstype").Property.MozUserInput[] | undefined;
     readonly msImeMode?: import("csstype").Property.ImeMode | import("csstype").Property.ImeMode[] | undefined;
-    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly OAnimation?: import("csstype").Property.Animation<string & {}> | import("csstype").Property.Animation<string & {}>[] | undefined;
     readonly OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly OAnimationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
@@ -1845,6 +1840,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly "::-ms-browse"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-check"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-clear"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly "::-ms-expand"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-lower"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-upper"?: import("@emotion/serialize").CSSObject | undefined;
@@ -1913,6 +1909,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly ":paused"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":picture-in-picture"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":placeholder-shown"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly ":playing"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-only"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-write"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":required"?: import("@emotion/serialize").CSSObject | undefined;
@@ -1953,6 +1950,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly alignItems?: import("csstype").Property.AlignItems | import("csstype").Property.AlignItems[] | undefined;
     readonly alignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly alignTracks?: import("csstype").Property.AlignTracks | import("csstype").Property.AlignTracks[] | undefined;
+    readonly animationComposition?: import("csstype").Property.AnimationComposition | import("csstype").Property.AnimationComposition[] | undefined;
     readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly animationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
     readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | import("csstype").Property.AnimationDuration<string & {}>[] | undefined;
@@ -2147,6 +2145,8 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly maskRepeat?: import("csstype").Property.MaskRepeat | import("csstype").Property.MaskRepeat[] | undefined;
     readonly maskSize?: string | number | import("csstype").Property.MaskSize<string | number>[] | undefined;
     readonly maskType?: import("csstype").Property.MaskType | import("csstype").Property.MaskType[] | undefined;
+    readonly mathDepth?: import("csstype").Property.MathDepth | import("csstype").Property.MathDepth[] | undefined;
+    readonly mathShift?: import("csstype").Property.MathShift | import("csstype").Property.MathShift[] | undefined;
     readonly mathStyle?: import("csstype").Property.MathStyle | import("csstype").Property.MathStyle[] | undefined;
     readonly maxBlockSize?: string | number | import("csstype").Property.MaxBlockSize<string | number>[] | undefined;
     readonly maxHeight?: string | number | import("csstype").Property.MaxHeight<string | number>[] | undefined;
@@ -2263,7 +2263,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | import("csstype").Property.TextDecorationSkipInk[] | undefined;
     readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly textDecorationThickness?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
-    readonly textDecorationWidth?: string | number | import("csstype").Property.TextDecorationThickness<string | number>[] | undefined;
     readonly textEmphasisColor?: import("csstype").Property.TextEmphasisColor | import("csstype").Property.TextEmphasisColor[] | undefined;
     readonly textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | import("csstype").Property.TextEmphasisPosition[] | undefined;
     readonly textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | import("csstype").Property.TextEmphasisStyle[] | undefined;
@@ -2369,7 +2368,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozBoxSizing?: import("csstype").Property.BoxSizing | import("csstype").Property.BoxSizing[] | undefined;
     readonly MozColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly MozColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly MozColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly MozColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -2403,7 +2401,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozWindowDragging?: import("csstype").Property.MozWindowDragging | import("csstype").Property.MozWindowDragging[] | undefined;
     readonly MozWindowShadow?: import("csstype").Property.MozWindowShadow | import("csstype").Property.MozWindowShadow[] | undefined;
     readonly msAccelerator?: import("csstype").Property.MsAccelerator | import("csstype").Property.MsAccelerator[] | undefined;
-    readonly msAlignSelf?: import("csstype").Property.AlignSelf | import("csstype").Property.AlignSelf[] | undefined;
     readonly msBlockProgression?: import("csstype").Property.MsBlockProgression | import("csstype").Property.MsBlockProgression[] | undefined;
     readonly msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | import("csstype").Property.MsContentZoomChaining[] | undefined;
     readonly msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | import("csstype").Property.MsContentZoomLimitMax[] | undefined;
@@ -2424,7 +2421,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msHyphenateLimitZone?: string | number | import("csstype").Property.MsHyphenateLimitZone<string | number>[] | undefined;
     readonly msHyphens?: import("csstype").Property.Hyphens | import("csstype").Property.Hyphens[] | undefined;
     readonly msImeAlign?: import("csstype").Property.MsImeAlign | import("csstype").Property.MsImeAlign[] | undefined;
-    readonly msJustifySelf?: import("csstype").Property.JustifySelf | import("csstype").Property.JustifySelf[] | undefined;
     readonly msLineBreak?: import("csstype").Property.LineBreak | import("csstype").Property.LineBreak[] | undefined;
     readonly msOrder?: import("csstype").Property.Order | import("csstype").Property.Order[] | undefined;
     readonly msOverflowStyle?: import("csstype").Property.MsOverflowStyle | import("csstype").Property.MsOverflowStyle[] | undefined;
@@ -2447,6 +2443,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | import("csstype").Property.MsScrollbarFaceColor[] | undefined;
     readonly msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | import("csstype").Property.MsScrollbarHighlightColor[] | undefined;
     readonly msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | import("csstype").Property.MsScrollbarShadowColor[] | undefined;
+    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly msTextAutospace?: import("csstype").Property.MsTextAutospace | import("csstype").Property.MsTextAutospace[] | undefined;
     readonly msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | import("csstype").Property.TextCombineUpright[] | undefined;
     readonly msTextOverflow?: import("csstype").Property.TextOverflow | import("csstype").Property.TextOverflow[] | undefined;
@@ -2496,7 +2493,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly WebkitClipPath?: import("csstype").Property.ClipPath | import("csstype").Property.ClipPath[] | undefined;
     readonly WebkitColumnCount?: import("csstype").Property.ColumnCount | import("csstype").Property.ColumnCount[] | undefined;
     readonly WebkitColumnFill?: import("csstype").Property.ColumnFill | import("csstype").Property.ColumnFill[] | undefined;
-    readonly WebkitColumnGap?: string | number | import("csstype").Property.ColumnGap<string | number>[] | undefined;
     readonly WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | import("csstype").Property.ColumnRuleColor[] | undefined;
     readonly WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | import("csstype").Property.ColumnRuleStyle[] | undefined;
     readonly WebkitColumnRuleWidth?: string | number | import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined;
@@ -2625,7 +2621,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | import("csstype").Property.ScrollSnapPointsY[] | undefined;
     readonly scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | import("csstype").Property.ScrollSnapTypeX[] | undefined;
     readonly scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | import("csstype").Property.ScrollSnapTypeY[] | undefined;
-    readonly scrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly KhtmlBoxAlign?: import("csstype").Property.BoxAlign | import("csstype").Property.BoxAlign[] | undefined;
     readonly KhtmlBoxDirection?: import("csstype").Property.BoxDirection | import("csstype").Property.BoxDirection[] | undefined;
     readonly KhtmlBoxFlex?: import("csstype").Property.BoxFlex | import("csstype").Property.BoxFlex[] | undefined;
@@ -2672,7 +2667,6 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | import("csstype").Property.TextDecorationStyle[] | undefined;
     readonly MozUserInput?: import("csstype").Property.MozUserInput | import("csstype").Property.MozUserInput[] | undefined;
     readonly msImeMode?: import("csstype").Property.ImeMode | import("csstype").Property.ImeMode[] | undefined;
-    readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | import("csstype").Property.MsScrollbarTrackColor[] | undefined;
     readonly OAnimation?: import("csstype").Property.Animation<string & {}> | import("csstype").Property.Animation<string & {}>[] | undefined;
     readonly OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | import("csstype").Property.AnimationDelay<string & {}>[] | undefined;
     readonly OAnimationDirection?: import("csstype").Property.AnimationDirection | import("csstype").Property.AnimationDirection[] | undefined;
@@ -2778,6 +2772,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly "::-ms-browse"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-check"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-clear"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly "::-ms-expand"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-lower"?: import("@emotion/serialize").CSSObject | undefined;
     readonly "::-ms-fill-upper"?: import("@emotion/serialize").CSSObject | undefined;
@@ -2846,6 +2841,7 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
     readonly ":paused"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":picture-in-picture"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":placeholder-shown"?: import("@emotion/serialize").CSSObject | undefined;
+    readonly ":playing"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-only"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":read-write"?: import("@emotion/serialize").CSSObject | undefined;
     readonly ":required"?: import("@emotion/serialize").CSSObject | undefined;

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

@@ -29,7 +29,6 @@ var placementToPadding = {
     paddingRight: 'medium'
   }
 };
-
 /**
  * Places an element at the "start" or "end" of the input, only one adornment
  * may be provided for each placement. By default, the adornment element will be
@@ -45,9 +44,9 @@ var placementToPadding = {
  */
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
-      fieldLabel = _ref.fieldLabel,
-      placement = _ref.placement,
-      raw = _ref.raw;
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
   var theme$1 = theme.useTheme();
   var adornmentContext = react.useMemo(function () {
     return {
@@ -55,10 +54,9 @@ var InputAdornment = function InputAdornment(_ref) {
     };
   }, [placement]);
   var _placementToPadding$p = placementToPadding[placement],
-      paddingLeft = _placementToPadding$p.paddingLeft,
-      paddingRight = _placementToPadding$p.paddingRight;
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
   var content = children;
-
   if (!raw) {
     content = /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       paddingLeft: paddingLeft,
@@ -74,29 +72,26 @@ var InputAdornment = function InputAdornment(_ref) {
       })
     });
   }
-
   var wrappedContent = /*#__PURE__*/jsxRuntime.jsx(InputAdornmentContext.Provider, {
     value: adornmentContext,
     children: content
   });
-
   if (fieldLabel) {
     return /*#__PURE__*/jsxRuntime.jsx(FieldAdornment, {
       fieldLabel: fieldLabel,
       children: wrappedContent
     });
   }
-
   return wrappedContent;
 };
+
 /**
  * Wrap the element with a field provider to override the parent field label.
  * Only split-out from `InputAdornment` to avoid the conditional hook rule.
  */
-
 var FieldAdornment = function FieldAdornment(_ref2) {
   var children = _ref2.children,
-      fieldLabel = _ref2.fieldLabel;
+    fieldLabel = _ref2.fieldLabel;
   var parentFieldContext = field.useFieldContext();
   var fieldContext = react.useMemo(function () {
     return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
@@ -112,16 +107,14 @@ 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);
-
+    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;
-
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
   return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
@@ -132,7 +125,6 @@ var InputContainer = function InputContainer(_ref) {
     }), endAdornment]
   }));
 };
-
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
   return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -140,7 +132,8 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     as: "span",
     data: {
       'focus-indicator': 'true'
-    } // Styles
+    }
+    // Styles
     ,
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
@@ -149,6 +142,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     left: 0,
     right: 0,
     top: 0,
+    shadow: "small",
     className: css.css({
       pointerEvents: 'none'
     })
@@ -162,20 +156,17 @@ var FocusIndicator = function FocusIndicator(_ref2) {
 var childrenToAdornments = function childrenToAdornments(children) {
   var startAdornment = null;
   var endAdornment = null;
-
   if (!children) {
     return {
       startAdornment: startAdornment,
       endAdornment: endAdornment
     };
   }
-
   react.Children.forEach(children, function (child) {
     if ( /*#__PURE__*/react.isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
-
       if (child.props.placement === 'start') {
         startAdornment = child;
       }
@@ -188,34 +179,29 @@ var childrenToAdornments = function childrenToAdornments(children) {
 };
 
 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) {
   var children = _ref.children,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
+    _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;
-
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
   var _useInputStyles = useInputStyles({
-    disabled: disabled,
-    invalid: invalid,
-    startAdornment: Boolean(startAdornment),
-    endAdornment: Boolean(endAdornment)
-  }),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
+      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",
@@ -231,7 +217,6 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   });
 });
 TextInput.displayName = 'TextInput';
-
 /**
  * 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
@@ -239,8 +224,8 @@ TextInput.displayName = 'TextInput';
  **/
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      startAdornment = _ref2.startAdornment,
-      endAdornment = _ref2.endAdornment;
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
   var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
@@ -252,18 +237,15 @@ var useInputStyles = function useInputStyles(_ref2) {
     size: 'standard',
     weight: 'regular'
   });
-
   var _textStyles = _slicedToArray(textStyles, 2),
-      typographyStyles = _textStyles[0],
-      responsiveStyles = _textStyles[1];
-
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
   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': {

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

@@ -29,7 +29,6 @@ var placementToPadding = {
     paddingRight: 'medium'
   }
 };
-
 /**
  * Places an element at the "start" or "end" of the input, only one adornment
  * may be provided for each placement. By default, the adornment element will be
@@ -45,9 +44,9 @@ var placementToPadding = {
  */
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
-      fieldLabel = _ref.fieldLabel,
-      placement = _ref.placement,
-      raw = _ref.raw;
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
   var theme$1 = theme.useTheme();
   var adornmentContext = react.useMemo(function () {
     return {
@@ -55,10 +54,9 @@ var InputAdornment = function InputAdornment(_ref) {
     };
   }, [placement]);
   var _placementToPadding$p = placementToPadding[placement],
-      paddingLeft = _placementToPadding$p.paddingLeft,
-      paddingRight = _placementToPadding$p.paddingRight;
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
   var content = children;
-
   if (!raw) {
     content = /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       paddingLeft: paddingLeft,
@@ -74,29 +72,26 @@ var InputAdornment = function InputAdornment(_ref) {
       })
     });
   }
-
   var wrappedContent = /*#__PURE__*/jsxRuntime.jsx(InputAdornmentContext.Provider, {
     value: adornmentContext,
     children: content
   });
-
   if (fieldLabel) {
     return /*#__PURE__*/jsxRuntime.jsx(FieldAdornment, {
       fieldLabel: fieldLabel,
       children: wrappedContent
     });
   }
-
   return wrappedContent;
 };
+
 /**
  * Wrap the element with a field provider to override the parent field label.
  * Only split-out from `InputAdornment` to avoid the conditional hook rule.
  */
-
 var FieldAdornment = function FieldAdornment(_ref2) {
   var children = _ref2.children,
-      fieldLabel = _ref2.fieldLabel;
+    fieldLabel = _ref2.fieldLabel;
   var parentFieldContext = field.useFieldContext();
   var fieldContext = react.useMemo(function () {
     return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
@@ -112,16 +107,14 @@ 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);
-
+    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;
-
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
   return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
@@ -132,7 +125,6 @@ var InputContainer = function InputContainer(_ref) {
     }), endAdornment]
   }));
 };
-
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
   return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -140,7 +132,8 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     as: "span",
     data: {
       'focus-indicator': 'true'
-    } // Styles
+    }
+    // Styles
     ,
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
@@ -149,6 +142,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     left: 0,
     right: 0,
     top: 0,
+    shadow: "small",
     className: css.css({
       pointerEvents: 'none'
     })
@@ -162,20 +156,17 @@ var FocusIndicator = function FocusIndicator(_ref2) {
 var childrenToAdornments = function childrenToAdornments(children) {
   var startAdornment = null;
   var endAdornment = null;
-
   if (!children) {
     return {
       startAdornment: startAdornment,
       endAdornment: endAdornment
     };
   }
-
   react.Children.forEach(children, function (child) {
     if ( /*#__PURE__*/react.isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
-
       if (child.props.placement === 'start') {
         startAdornment = child;
       }
@@ -188,34 +179,29 @@ var childrenToAdornments = function childrenToAdornments(children) {
 };
 
 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) {
   var children = _ref.children,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
+    _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;
-
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
   var _useInputStyles = useInputStyles({
-    disabled: disabled,
-    invalid: invalid,
-    startAdornment: Boolean(startAdornment),
-    endAdornment: Boolean(endAdornment)
-  }),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
+      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",
@@ -231,7 +217,6 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   });
 });
 TextInput.displayName = 'TextInput';
-
 /**
  * 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
@@ -239,8 +224,8 @@ TextInput.displayName = 'TextInput';
  **/
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      startAdornment = _ref2.startAdornment,
-      endAdornment = _ref2.endAdornment;
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
   var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
@@ -252,18 +237,15 @@ var useInputStyles = function useInputStyles(_ref2) {
     size: 'standard',
     weight: 'regular'
   });
-
   var _textStyles = _slicedToArray(textStyles, 2),
-      typographyStyles = _textStyles[0],
-      responsiveStyles = _textStyles[1];
-
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
   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': {

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

@@ -25,7 +25,6 @@ var placementToPadding = {
     paddingRight: 'medium'
   }
 };
-
 /**
  * Places an element at the "start" or "end" of the input, only one adornment
  * may be provided for each placement. By default, the adornment element will be
@@ -41,9 +40,9 @@ var placementToPadding = {
  */
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
-      fieldLabel = _ref.fieldLabel,
-      placement = _ref.placement,
-      raw = _ref.raw;
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
   var theme = useTheme();
   var adornmentContext = useMemo(function () {
     return {
@@ -51,10 +50,9 @@ var InputAdornment = function InputAdornment(_ref) {
     };
   }, [placement]);
   var _placementToPadding$p = placementToPadding[placement],
-      paddingLeft = _placementToPadding$p.paddingLeft,
-      paddingRight = _placementToPadding$p.paddingRight;
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
   var content = children;
-
   if (!raw) {
     content = /*#__PURE__*/jsx(Box, {
       paddingLeft: paddingLeft,
@@ -70,29 +68,26 @@ var InputAdornment = function InputAdornment(_ref) {
       })
     });
   }
-
   var wrappedContent = /*#__PURE__*/jsx(InputAdornmentContext.Provider, {
     value: adornmentContext,
     children: content
   });
-
   if (fieldLabel) {
     return /*#__PURE__*/jsx(FieldAdornment, {
       fieldLabel: fieldLabel,
       children: wrappedContent
     });
   }
-
   return wrappedContent;
 };
+
 /**
  * Wrap the element with a field provider to override the parent field label.
  * Only split-out from `InputAdornment` to avoid the conditional hook rule.
  */
-
 var FieldAdornment = function FieldAdornment(_ref2) {
   var children = _ref2.children,
-      fieldLabel = _ref2.fieldLabel;
+    fieldLabel = _ref2.fieldLabel;
   var parentFieldContext = useFieldContext();
   var fieldContext = useMemo(function () {
     return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
@@ -108,16 +103,14 @@ 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);
-
+    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;
-
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
   return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
@@ -128,7 +121,6 @@ var InputContainer = function InputContainer(_ref) {
     }), endAdornment]
   }));
 };
-
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
   return /*#__PURE__*/jsx(Box, {
@@ -136,7 +128,8 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     as: "span",
     data: {
       'focus-indicator': 'true'
-    } // Styles
+    }
+    // Styles
     ,
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
@@ -145,6 +138,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     left: 0,
     right: 0,
     top: 0,
+    shadow: "small",
     className: css({
       pointerEvents: 'none'
     })
@@ -158,20 +152,17 @@ var FocusIndicator = function FocusIndicator(_ref2) {
 var childrenToAdornments = function childrenToAdornments(children) {
   var startAdornment = null;
   var endAdornment = null;
-
   if (!children) {
     return {
       startAdornment: startAdornment,
       endAdornment: endAdornment
     };
   }
-
   Children.forEach(children, function (child) {
     if ( /*#__PURE__*/isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
-
       if (child.props.placement === 'start') {
         startAdornment = child;
       }
@@ -184,34 +175,29 @@ var childrenToAdornments = function childrenToAdornments(children) {
 };
 
 var _excluded = ["children", "data"];
-
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
+    _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;
-
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
   var _useInputStyles = useInputStyles({
-    disabled: disabled,
-    invalid: invalid,
-    startAdornment: Boolean(startAdornment),
-    endAdornment: Boolean(endAdornment)
-  }),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
+      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",
@@ -227,7 +213,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   });
 });
 TextInput.displayName = 'TextInput';
-
 /**
  * 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
@@ -235,8 +220,8 @@ TextInput.displayName = 'TextInput';
  **/
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      startAdornment = _ref2.startAdornment,
-      endAdornment = _ref2.endAdornment;
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
   var theme = useTheme();
   var overflowStyles = useOverflowStrategy('truncate');
   var focusRingStyles = useFocusRing({
@@ -248,18 +233,15 @@ var useInputStyles = function useInputStyles(_ref2) {
     size: 'standard',
     weight: 'regular'
   });
-
   var _textStyles = _slicedToArray(textStyles, 2),
-      typographyStyles = _textStyles[0],
-      responsiveStyles = _textStyles[1];
-
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
   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': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.3.2",
-    "@spark-web/box": "^1.1.0",
-    "@spark-web/text": "^1.1.2",
-    "@spark-web/theme": "^3.1.0",
-    "@spark-web/utils": "^1.2.3"
+    "@spark-web/a11y": "^1.4.0",
+    "@spark-web/box": "^1.2.0",
+    "@spark-web/text": "^1.2.0",
+    "@spark-web/theme": "^3.2.0",
+    "@spark-web/utils": "^1.3.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^3.0.6",
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@spark-web/field": "^3.1.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^3.0.6",
+    "@spark-web/field": "^3.1.0",
     "react": ">=17.0.2"
   },
   "engines": {