@spark-web/text-input 4.0.0-rc.2 → 4.0.0-rc.21

package/CHANGELOG.md

@@ -1,5 +1,309 @@
 # @spark-web/text-input
 
+## 4.0.0-rc.21
+
+### Minor Changes
+
+- Introduce global theming provider to set global default theme
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.21
+  - @spark-web/theme@4.0.0-rc.21
+  - @spark-web/utils@2.0.0-rc.21
+  - @spark-web/a11y@2.0.0-rc.21
+  - @spark-web/text@2.0.0-rc.21
+  - @spark-web/box@2.0.0-rc.21
+
+## 4.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.20
+  - @spark-web/theme@4.0.0-rc.20
+  - @spark-web/utils@2.0.0-rc.20
+  - @spark-web/a11y@2.0.0-rc.20
+  - @spark-web/text@2.0.0-rc.20
+  - @spark-web/box@2.0.0-rc.20
+
+## 4.0.0-rc.19
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.19
+  - @spark-web/theme@4.0.0-rc.19
+  - @spark-web/utils@2.0.0-rc.19
+  - @spark-web/a11y@2.0.0-rc.19
+  - @spark-web/text@2.0.0-rc.19
+  - @spark-web/box@2.0.0-rc.19
+
+## 4.0.0-rc.18
+
+### Major Changes
+
+- tests
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.18
+  - @spark-web/theme@4.0.0-rc.18
+  - @spark-web/utils@2.0.0-rc.18
+  - @spark-web/a11y@2.0.0-rc.18
+  - @spark-web/text@2.0.0-rc.18
+  - @spark-web/box@2.0.0-rc.18
+
+## 4.0.0-rc.17
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.17
+  - @spark-web/theme@4.0.0-rc.17
+  - @spark-web/utils@2.0.0-rc.17
+  - @spark-web/a11y@2.0.0-rc.17
+  - @spark-web/text@2.0.0-rc.17
+  - @spark-web/box@2.0.0-rc.17
+
+## 4.0.0-rc.16
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.16
+  - @spark-web/theme@4.0.0-rc.16
+  - @spark-web/utils@2.0.0-rc.16
+  - @spark-web/a11y@2.0.0-rc.16
+  - @spark-web/text@2.0.0-rc.16
+  - @spark-web/box@2.0.0-rc.16
+
+## 4.0.0-rc.15
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.15
+  - @spark-web/theme@4.0.0-rc.15
+  - @spark-web/utils@2.0.0-rc.15
+  - @spark-web/a11y@2.0.0-rc.15
+  - @spark-web/text@2.0.0-rc.15
+  - @spark-web/box@2.0.0-rc.15
+
+## 4.0.0-rc.14
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.14
+  - @spark-web/theme@4.0.0-rc.14
+  - @spark-web/utils@2.0.0-rc.14
+  - @spark-web/a11y@2.0.0-rc.14
+  - @spark-web/text@2.0.0-rc.14
+  - @spark-web/box@2.0.0-rc.14
+
+## 4.0.0-rc.13
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.13
+  - @spark-web/theme@4.0.0-rc.13
+  - @spark-web/utils@2.0.0-rc.13
+  - @spark-web/a11y@2.0.0-rc.13
+  - @spark-web/text@2.0.0-rc.13
+  - @spark-web/box@2.0.0-rc.13
+
+## 4.0.0-rc.12
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.12
+  - @spark-web/theme@4.0.0-rc.12
+  - @spark-web/utils@2.0.0-rc.12
+  - @spark-web/a11y@2.0.0-rc.12
+  - @spark-web/text@2.0.0-rc.12
+  - @spark-web/box@2.0.0-rc.12
+
+## 4.0.0-rc.11
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.11
+  - @spark-web/theme@4.0.0-rc.11
+  - @spark-web/utils@2.0.0-rc.11
+  - @spark-web/a11y@2.0.0-rc.11
+  - @spark-web/text@2.0.0-rc.11
+  - @spark-web/box@2.0.0-rc.11
+
+## 4.0.0-rc.10
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.10
+  - @spark-web/theme@4.0.0-rc.10
+  - @spark-web/utils@2.0.0-rc.10
+  - @spark-web/a11y@2.0.0-rc.10
+  - @spark-web/text@2.0.0-rc.10
+  - @spark-web/box@2.0.0-rc.10
+
+## 4.0.0-rc.9
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.9
+  - @spark-web/theme@4.0.0-rc.9
+  - @spark-web/utils@2.0.0-rc.9
+  - @spark-web/a11y@2.0.0-rc.9
+  - @spark-web/text@2.0.0-rc.9
+  - @spark-web/box@2.0.0-rc.9
+
+## 4.0.0-rc.8
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.8
+  - @spark-web/theme@4.0.0-rc.8
+  - @spark-web/utils@2.0.0-rc.8
+  - @spark-web/a11y@2.0.0-rc.8
+  - @spark-web/text@2.0.0-rc.8
+  - @spark-web/box@2.0.0-rc.8
+
+## 4.0.0-rc.7
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.7
+  - @spark-web/theme@4.0.0-rc.7
+  - @spark-web/utils@2.0.0-rc.7
+  - @spark-web/a11y@2.0.0-rc.7
+  - @spark-web/text@2.0.0-rc.7
+  - @spark-web/box@2.0.0-rc.7
+
+## 4.0.0-rc.6
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.6
+  - @spark-web/theme@4.0.0-rc.6
+  - @spark-web/utils@2.0.0-rc.6
+  - @spark-web/a11y@2.0.0-rc.6
+  - @spark-web/text@2.0.0-rc.6
+  - @spark-web/box@2.0.0-rc.6
+
+## 4.0.0-rc.5
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.5
+  - @spark-web/theme@4.0.0-rc.5
+  - @spark-web/utils@2.0.0-rc.5
+  - @spark-web/a11y@2.0.0-rc.5
+  - @spark-web/text@2.0.0-rc.5
+  - @spark-web/box@2.0.0-rc.5
+
+## 4.0.0-rc.4
+
+### Major Changes
+
+- bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.4
+  - @spark-web/theme@4.0.0-rc.4
+  - @spark-web/utils@2.0.0-rc.4
+  - @spark-web/a11y@2.0.0-rc.4
+  - @spark-web/text@2.0.0-rc.4
+  - @spark-web/box@2.0.0-rc.4
+
+## 4.0.0-rc.3
+
+### Major Changes
+
+- upgrade package
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.3
+  - @spark-web/theme@4.0.0-rc.3
+  - @spark-web/utils@2.0.0-rc.3
+  - @spark-web/a11y@2.0.0-rc.3
+  - @spark-web/text@2.0.0-rc.3
+  - @spark-web/box@2.0.0-rc.3
+
 ## 4.0.0-rc.2
 
 ### Major Changes

package/dist/spark-web-text-input.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQtaW5wdXQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQtaW5wdXQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

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

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-text-input.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-text-input.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "4.0.0-rc.2",
+  "version": "4.0.0-rc.21",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -16,20 +16,20 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@emotion/react": "^11.13.5",
-    "@spark-web/a11y": "^2.0.0-rc.2",
-    "@spark-web/box": "^2.0.0-rc.2",
-    "@spark-web/text": "^2.0.0-rc.2",
-    "@spark-web/theme": "^4.0.0-rc.2",
-    "@spark-web/utils": "^2.0.0-rc.2"
+    "@emotion/react": "^11.14.0",
+    "@spark-web/a11y": "^2.0.0-rc.21",
+    "@spark-web/box": "^2.0.0-rc.21",
+    "@spark-web/text": "^2.0.0-rc.21",
+    "@spark-web/theme": "^4.0.0-rc.21",
+    "@spark-web/utils": "^2.0.0-rc.21"
   },
   "devDependencies": {
-    "@spark-web/field": "^4.0.0-rc.2",
+    "@spark-web/field": "^4.0.0-rc.21",
     "@types/react": "^18.2.0",
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^4.0.0-rc.2",
+    "@spark-web/field": "^4.0.0-rc.21",
     "react": ">=17.0.2"
   },
   "engines": {

package/dist/declarations/src/children-to-adornments.d.ts

@@ -1,12 +0,0 @@
-import type { ReactElement } from 'react';
-import type { InputAdornmentProps } from "./input-adornment.js";
-export declare type AdornmentChild = ReactElement<InputAdornmentProps> | null | undefined;
-export declare type AdornmentsAsChildren = AdornmentChild | [AdornmentChild, AdornmentChild];
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-export declare const childrenToAdornments: (children?: AdornmentsAsChildren) => {
-    startAdornment: ReactElement<InputAdornmentProps> | null;
-    endAdornment: ReactElement<InputAdornmentProps> | null;
-};

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

@@ -1,6 +0,0 @@
-export { InputAdornment } from "./input-adornment.js";
-export { InputContainer } from "./input-container.js";
-export { TextInput, useInputStyles } from "./text-input.js";
-export type { AdornmentChild } from "./children-to-adornments.js";
-export type { InputContainerProps } from "./input-container.js";
-export type { TextInputProps, UseInputStylesProps } from "./text-input.js";

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

@@ -1,46 +0,0 @@
-import type { ReactElement } from 'react';
-declare type InputAdornmentContextType = {
-    placement: PlacementType;
-};
-export declare const useInputAdornmentContext: () => InputAdornmentContextType | null;
-declare const placementToPadding: {
-    readonly start: {
-        readonly paddingLeft: "medium";
-        readonly paddingRight: "xsmall";
-    };
-    readonly end: {
-        readonly paddingLeft: "xsmall";
-        readonly paddingRight: "medium";
-    };
-};
-declare type PlacementType = keyof typeof placementToPadding;
-export declare type InputAdornmentProps = {
-    children: ReactElement;
-    /**
-     * When using another input component as an adornment, you may optionally
-     * override the parent field label.
-     */
-    fieldLabel?: string;
-    /** Where to place the adornment. */
-    placement: PlacementType;
-    /**
-     * By default, the adornment element will be wrapped to provide alignment and
-     * spacing, use the "raw" property to opt-out of this behaviour.
-     */
-    raw?: boolean;
-};
-/**
- * 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
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-export declare const InputAdornment: ({ children, fieldLabel, placement, raw, }: InputAdornmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,10 +0,0 @@
-import type { BoxProps } from '@spark-web/box';
-import type { ReactElement } from 'react';
-import type { InputAdornmentProps } from "./input-adornment.js";
-export declare type InputContainerProps = {
-    /** Slot to start render adornment. */
-    startAdornment?: ReactElement<InputAdornmentProps> | null;
-    /** Slot to end render adornment. */
-    endAdornment?: ReactElement<InputAdornmentProps> | null;
-} & Omit<BoxProps, 'background' | 'position'>;
-export declare const InputContainer: ({ children, startAdornment, endAdornment, ...boxProps }: InputContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,62 +0,0 @@
-import type { FieldState } from '@spark-web/field';
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { InputHTMLAttributes } from 'react';
-import type { AdornmentsAsChildren } from "./children-to-adornments.js";
-declare type ValidTypes = 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url';
-declare type ValidModes = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required'>;
-export declare type TextInputProps = {
-    /** Sets data attributes for the element. */
-    data?: DataAttributeMap;
-    /**
-     * How an input behaves varies considerably depending on the value of its type
-     * attribute. If this attribute is not specified, the default type "text".
-     */
-    type?: ValidTypes;
-    /** Sets the input mode attribute for the component. */
-    inputMode?: ValidModes;
-    /**
-     * Adorn the input with ornamental element(s) to aid user input, or
-     * interactive element(s) to augment user input. Each child **must** be
-     * wrapped with the `InputAdornment` component to ensure proper layout,
-     * otherwise it will not be rendered.
-     */
-    children?: AdornmentsAsChildren;
-} & NativeInputProps;
-/** Organize and emphasize information quickly and effectively in a list of text elements. */
-export declare const TextInput: import("react").ForwardRefExoticComponent<{
-    /** Sets data attributes for the element. */
-    data?: DataAttributeMap | undefined;
-    /**
-     * How an input behaves varies considerably depending on the value of its type
-     * attribute. If this attribute is not specified, the default type "text".
-     */
-    type?: ValidTypes | undefined;
-    /** Sets the input mode attribute for the component. */
-    inputMode?: ValidModes | undefined;
-    /**
-     * Adorn the input with ornamental element(s) to aid user input, or
-     * interactive element(s) to augment user input. Each child **must** be
-     * wrapped with the `InputAdornment` component to ensure proper layout,
-     * otherwise it will not be rendered.
-     */
-    children?: AdornmentsAsChildren;
-} & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare type UseInputStylesProps = FieldState & {
-    startAdornment?: boolean;
-    endAdornment?: boolean;
-};
-/**
- * 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
- **/
-export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, }: UseInputStylesProps) => readonly [{
-    readonly flex: 1;
-    readonly position: "relative";
-    readonly height: "medium";
-    readonly paddingLeft: "medium" | "none";
-    readonly paddingRight: "medium" | "none";
-    readonly width: "full";
-}, any];
-export {};

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

@@ -1,270 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
-var text = require('@spark-web/text');
-
-/**
- * Components like the `SelectInput` may subscribe to the adornment context and
- * change their appearance or behaviour.
- */
-var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
-var placementToPadding = {
-  start: {
-    paddingLeft: 'medium',
-    paddingRight: 'xsmall'
-  },
-  end: {
-    paddingLeft: 'xsmall',
-    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
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-var InputAdornment = function InputAdornment(_ref) {
-  var children = _ref.children,
-    fieldLabel = _ref.fieldLabel,
-    placement = _ref.placement,
-    raw = _ref.raw;
-  var theme$1 = theme.useTheme();
-  var adornmentContext = react.useMemo(function () {
-    return {
-      placement: placement
-    };
-  }, [placement]);
-  var _placementToPadding$p = placementToPadding[placement],
-    paddingLeft = _placementToPadding$p.paddingLeft,
-    paddingRight = _placementToPadding$p.paddingRight;
-  var content = children;
-  if (!raw) {
-    content = jsxRuntime.jsx(box.Box, {
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
-      children: jsxRuntime.jsx(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        style: {
-          minWidth: theme$1.sizing.xxsmall
-        },
-        children: children
-      })
-    });
-  }
-  var wrappedContent = jsxRuntime.jsx(InputAdornmentContext.Provider, {
-    value: adornmentContext,
-    children: content
-  });
-  if (fieldLabel) {
-    return 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;
-  var parentFieldContext = field.useFieldContext();
-  var fieldContext = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
-      accessibilityLabel: fieldLabel
-    });
-  }, [fieldLabel, parentFieldContext]);
-  return jsxRuntime.jsx(field.FieldContextProvider, {
-    value: fieldContext,
-    children: children
-  });
-};
-
-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 jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    borderRadius: "small",
-    position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
-  }, boxProps), {}, {
-    children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
-      invalid: invalid
-    }), endAdornment]
-  }));
-};
-var FocusIndicator = function FocusIndicator(_ref2) {
-  var invalid = _ref2.invalid;
-  return 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,
-    shadow: "small",
-    css: react$1.css({
-      pointerEvents: 'none'
-    })
-  });
-};
-
-// NOTE: `null | undefined` allow consumers to conditionally render adornments
-
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-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;
-      }
-    }
-  });
-  return {
-    startAdornment: startAdornment,
-    endAdornment: endAdornment
-  };
-};
-
-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);
-  var _useFieldContext = field.useFieldContext(),
-    _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;
-  var _useInputStyles = useInputStyles({
-      disabled: disabled,
-      invalid: invalid,
-      startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
-    }),
-    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-    boxProps = _useInputStyles2[0],
-    inputStyles = _useInputStyles2[1];
-  return jsxRuntime.jsx(InputContainer, {
-    display: "inline-flex",
-    alignItems: "center",
-    startAdornment: startAdornment,
-    endAdornment: endAdornment,
-    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
-      as: "input",
-      css: react$1.css(inputStyles),
-      data: data,
-      disabled: disabled,
-      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
- * item is a CSS object to be passed to Emotion's `css` function
- **/
-var useInputStyles = function useInputStyles(_ref2) {
-  var disabled = _ref2.disabled,
-    startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
-  var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
-  var focusRingStyles = a11y.useFocusRing({
-    always: true
-  });
-  var textStyles = text.useText({
-    baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
-    size: 'standard',
-    weight: 'regular'
-  });
-  var _textStyles = _slicedToArray(textStyles, 2),
-    typographyStyles = _textStyles[0],
-    responsiveStyles = _textStyles[1];
-  return [{
-    flex: 1,
-    position: 'relative',
-    height: 'medium',
-    paddingLeft: startAdornment ? 'none' : 'medium',
-    paddingRight: endAdornment ? 'none' : 'medium',
-    width: 'full'
-  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
-    ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
-        borderColor: theme$1.border.color.fieldAccent
-      }, focusRingStyles)
-    },
-    ':focus': {
-      outline: 'none'
-    },
-    '&[aria-invalid=true]': {
-      color: theme$1.color.foreground.muted
-    }
-  })];
-};
-
-exports.InputAdornment = InputAdornment;
-exports.InputContainer = InputContainer;
-exports.TextInput = TextInput;
-exports.useInputStyles = useInputStyles;

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

@@ -1,270 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
-var text = require('@spark-web/text');
-
-/**
- * Components like the `SelectInput` may subscribe to the adornment context and
- * change their appearance or behaviour.
- */
-var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
-var placementToPadding = {
-  start: {
-    paddingLeft: 'medium',
-    paddingRight: 'xsmall'
-  },
-  end: {
-    paddingLeft: 'xsmall',
-    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
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-var InputAdornment = function InputAdornment(_ref) {
-  var children = _ref.children,
-    fieldLabel = _ref.fieldLabel,
-    placement = _ref.placement,
-    raw = _ref.raw;
-  var theme$1 = theme.useTheme();
-  var adornmentContext = react.useMemo(function () {
-    return {
-      placement: placement
-    };
-  }, [placement]);
-  var _placementToPadding$p = placementToPadding[placement],
-    paddingLeft = _placementToPadding$p.paddingLeft,
-    paddingRight = _placementToPadding$p.paddingRight;
-  var content = children;
-  if (!raw) {
-    content = jsxRuntime.jsx(box.Box, {
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
-      children: jsxRuntime.jsx(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        style: {
-          minWidth: theme$1.sizing.xxsmall
-        },
-        children: children
-      })
-    });
-  }
-  var wrappedContent = jsxRuntime.jsx(InputAdornmentContext.Provider, {
-    value: adornmentContext,
-    children: content
-  });
-  if (fieldLabel) {
-    return 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;
-  var parentFieldContext = field.useFieldContext();
-  var fieldContext = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
-      accessibilityLabel: fieldLabel
-    });
-  }, [fieldLabel, parentFieldContext]);
-  return jsxRuntime.jsx(field.FieldContextProvider, {
-    value: fieldContext,
-    children: children
-  });
-};
-
-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 jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    borderRadius: "small",
-    position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
-  }, boxProps), {}, {
-    children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
-      invalid: invalid
-    }), endAdornment]
-  }));
-};
-var FocusIndicator = function FocusIndicator(_ref2) {
-  var invalid = _ref2.invalid;
-  return 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,
-    shadow: "small",
-    css: react$1.css({
-      pointerEvents: 'none'
-    })
-  });
-};
-
-// NOTE: `null | undefined` allow consumers to conditionally render adornments
-
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-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;
-      }
-    }
-  });
-  return {
-    startAdornment: startAdornment,
-    endAdornment: endAdornment
-  };
-};
-
-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);
-  var _useFieldContext = field.useFieldContext(),
-    _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;
-  var _useInputStyles = useInputStyles({
-      disabled: disabled,
-      invalid: invalid,
-      startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
-    }),
-    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-    boxProps = _useInputStyles2[0],
-    inputStyles = _useInputStyles2[1];
-  return jsxRuntime.jsx(InputContainer, {
-    display: "inline-flex",
-    alignItems: "center",
-    startAdornment: startAdornment,
-    endAdornment: endAdornment,
-    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
-      as: "input",
-      css: react$1.css(inputStyles),
-      data: data,
-      disabled: disabled,
-      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
- * item is a CSS object to be passed to Emotion's `css` function
- **/
-var useInputStyles = function useInputStyles(_ref2) {
-  var disabled = _ref2.disabled,
-    startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
-  var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
-  var focusRingStyles = a11y.useFocusRing({
-    always: true
-  });
-  var textStyles = text.useText({
-    baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
-    size: 'standard',
-    weight: 'regular'
-  });
-  var _textStyles = _slicedToArray(textStyles, 2),
-    typographyStyles = _textStyles[0],
-    responsiveStyles = _textStyles[1];
-  return [{
-    flex: 1,
-    position: 'relative',
-    height: 'medium',
-    paddingLeft: startAdornment ? 'none' : 'medium',
-    paddingRight: endAdornment ? 'none' : 'medium',
-    width: 'full'
-  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
-    ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
-        borderColor: theme$1.border.color.fieldAccent
-      }, focusRingStyles)
-    },
-    ':focus': {
-      outline: 'none'
-    },
-    '&[aria-invalid=true]': {
-      color: theme$1.color.foreground.muted
-    }
-  })];
-};
-
-exports.InputAdornment = InputAdornment;
-exports.InputContainer = InputContainer;
-exports.TextInput = TextInput;
-exports.useInputStyles = useInputStyles;

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

@@ -1,263 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import { Box } from '@spark-web/box';
-import { useFieldContext, FieldContextProvider } from '@spark-web/field';
-import { useTheme } from '@spark-web/theme';
-import { useMemo, createContext, Children, isValidElement, forwardRef } from 'react';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { css } from '@emotion/react';
-import { useFocusRing } from '@spark-web/a11y';
-import { useOverflowStrategy, useText } from '@spark-web/text';
-
-/**
- * Components like the `SelectInput` may subscribe to the adornment context and
- * change their appearance or behaviour.
- */
-var InputAdornmentContext = /*#__PURE__*/createContext(null);
-var placementToPadding = {
-  start: {
-    paddingLeft: 'medium',
-    paddingRight: 'xsmall'
-  },
-  end: {
-    paddingLeft: 'xsmall',
-    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
- * wrapped to provide alignment and spacing, use the "raw" property to opt-out
- * of this behaviour.
- *
- * @example
- * <TextInput>
- *   <InputAdornment placement="start">
- *     <Text tone="placeholder">$</Text>
- *   </InputAdornment>
- * </TextInput>
- */
-var InputAdornment = function InputAdornment(_ref) {
-  var children = _ref.children,
-    fieldLabel = _ref.fieldLabel,
-    placement = _ref.placement,
-    raw = _ref.raw;
-  var theme = useTheme();
-  var adornmentContext = useMemo(function () {
-    return {
-      placement: placement
-    };
-  }, [placement]);
-  var _placementToPadding$p = placementToPadding[placement],
-    paddingLeft = _placementToPadding$p.paddingLeft,
-    paddingRight = _placementToPadding$p.paddingRight;
-  var content = children;
-  if (!raw) {
-    content = jsx(Box, {
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
-      children: jsx(Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        style: {
-          minWidth: theme.sizing.xxsmall
-        },
-        children: children
-      })
-    });
-  }
-  var wrappedContent = jsx(InputAdornmentContext.Provider, {
-    value: adornmentContext,
-    children: content
-  });
-  if (fieldLabel) {
-    return 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;
-  var parentFieldContext = useFieldContext();
-  var fieldContext = useMemo(function () {
-    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
-      accessibilityLabel: fieldLabel
-    });
-  }, [fieldLabel, parentFieldContext]);
-  return jsx(FieldContextProvider, {
-    value: fieldContext,
-    children: children
-  });
-};
-
-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 jsxs(Box, _objectSpread(_objectSpread({
-    borderRadius: "small",
-    position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
-  }, boxProps), {}, {
-    children: [startAdornment, children, jsx(FocusIndicator, {
-      invalid: invalid
-    }), endAdornment]
-  }));
-};
-var FocusIndicator = function FocusIndicator(_ref2) {
-  var invalid = _ref2.invalid;
-  return 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,
-    shadow: "small",
-    css: css({
-      pointerEvents: 'none'
-    })
-  });
-};
-
-// NOTE: `null | undefined` allow consumers to conditionally render adornments
-
-/**
- * Map children for placement within the `TextInput` flex container. Ensures that
- * placeholders are provided for unused placements.
- */
-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;
-      }
-    }
-  });
-  return {
-    startAdornment: startAdornment,
-    endAdornment: endAdornment
-  };
-};
-
-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);
-  var _useFieldContext = useFieldContext(),
-    _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;
-  var _useInputStyles = useInputStyles({
-      disabled: disabled,
-      invalid: invalid,
-      startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
-    }),
-    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-    boxProps = _useInputStyles2[0],
-    inputStyles = _useInputStyles2[1];
-  return jsx(InputContainer, {
-    display: "inline-flex",
-    alignItems: "center",
-    startAdornment: startAdornment,
-    endAdornment: endAdornment,
-    children: jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
-      as: "input",
-      css: css(inputStyles),
-      data: data,
-      disabled: disabled,
-      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
- * item is a CSS object to be passed to Emotion's `css` function
- **/
-var useInputStyles = function useInputStyles(_ref2) {
-  var disabled = _ref2.disabled,
-    startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
-  var theme = useTheme();
-  var overflowStyles = useOverflowStrategy('truncate');
-  var focusRingStyles = useFocusRing({
-    always: true
-  });
-  var textStyles = useText({
-    baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
-    size: 'standard',
-    weight: 'regular'
-  });
-  var _textStyles = _slicedToArray(textStyles, 2),
-    typographyStyles = _textStyles[0],
-    responsiveStyles = _textStyles[1];
-  return [{
-    flex: 1,
-    position: 'relative',
-    height: 'medium',
-    paddingLeft: startAdornment ? 'none' : 'medium',
-    paddingRight: endAdornment ? 'none' : 'medium',
-    width: 'full'
-  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
-    ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
-        borderColor: theme.border.color.fieldAccent
-      }, focusRingStyles)
-    },
-    ':focus': {
-      outline: 'none'
-    },
-    '&[aria-invalid=true]': {
-      color: theme.color.foreground.muted
-    }
-  })];
-};
-
-export { InputAdornment, InputContainer, TextInput, useInputStyles };