@spark-web/field 4.0.0-rc.19 → 4.0.0-rc.20

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @spark-web/field
 
+## 4.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/stack@2.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/icon@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

package/dist/spark-web-field.cjs.d.ts

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

package/dist/spark-web-field.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-field.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-field.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/field",
-  "version": "4.0.0-rc.19",
+  "version": "4.0.0-rc.20",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,13 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^2.0.0-rc.19",
-    "@spark-web/box": "^2.0.0-rc.19",
-    "@spark-web/icon": "^2.0.0-rc.19",
-    "@spark-web/stack": "^2.0.0-rc.19",
-    "@spark-web/text": "^2.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.20",
+    "@spark-web/box": "^2.0.0-rc.20",
+    "@spark-web/icon": "^2.0.0-rc.20",
+    "@spark-web/stack": "^2.0.0-rc.20",
+    "@spark-web/text": "^2.0.0-rc.20",
+    "@spark-web/theme": "^4.0.0-rc.20",
+    "@spark-web/utils": "^2.0.0-rc.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare type FieldState = {
-    disabled: boolean;
-    invalid: boolean;
-};
-export declare type InputPropsDerivedFromField = {
-    'aria-describedby'?: string;
-    'aria-invalid': true | undefined;
-    id: string;
-};
-export declare type FieldContextType = [FieldState, InputPropsDerivedFromField];
-export declare const FieldContext: import("react").Context<FieldContextType | null>;
-export declare const FieldContextProvider: import("react").Provider<FieldContextType | null>;
-export declare const FIELD_CONTEXT_ERROR_MESSAGE = "Input components must be inside a `Field`.";
-export declare function useFieldContext(): FieldContextType;

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

@@ -1,51 +0,0 @@
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { ReactElement, ReactNode } from 'react';
-export declare type Tone = keyof typeof messageToneMap;
-export declare type FieldProps = {
-    /** Sets a unique identifier for the component. */
-    id?: string;
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** Optionally provide a utility or contextual hint, related to the field. */
-    adornment?: ReactElement;
-    /** Input component  */
-    children: ReactNode;
-    /**
-     * Indicates that the field is perceivable but disabled, so it is not editable
-     * or otherwise operable.
-     */
-    disabled?: boolean;
-    /** Provide additional information that will aid user input. */
-    description?: string;
-    /** Concisely label the field. */
-    label: string;
-    /**
-     * The label must always be provided for assistive technology, but you may
-     * hide it from sighted users when the intent can be inferred from context.
-     */
-    labelVisibility?: 'hidden' | 'reserve-space' | 'visible';
-    /** Provide a message, informing the user about changes in state. */
-    message?: string;
-    /** Additional context, typically used to indicate that the field is optional. */
-    secondaryLabel?: string;
-    /** Provide a tone to influence elements of the field, and its input. */
-    tone?: Tone;
-};
-/**
- * Using a [context](https://reactjs.org/docs/context.html), the field
- * component connects the label, description, and message to the input element.
- */
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare function useFieldIds(id?: string): {
-    descriptionId: string;
-    inputId: string;
-    messageId: string;
-};
-declare const messageToneMap: {
-    readonly critical: "critical";
-    readonly neutral: "muted";
-    readonly positive: "positive";
-};
-declare type FieldMessageProps = Required<Pick<FieldProps, 'message' | 'id' | 'tone'>>;
-export declare const FieldMessage: ({ message, id, tone }: FieldMessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,4 +0,0 @@
-export { FieldContextProvider, useFieldContext } from "./context.js";
-export { Field, FieldMessage, useFieldIds } from "./field.js";
-export type { FieldContextType, FieldState, InputPropsDerivedFromField, } from "./context.js";
-export type { FieldProps, Tone } from "./field.js";

package/dist/spark-web-field.cjs.dev.js

@@ -1,205 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
-var box = require('@spark-web/box');
-var icon = require('@spark-web/icon');
-var stack = require('@spark-web/stack');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-var FieldContext = /*#__PURE__*/react.createContext(null);
-var FieldContextProvider = FieldContext.Provider;
-var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
-function useFieldContext() {
-  var ctx = react.useContext(FieldContext);
-  if (!ctx) {
-    throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
-  }
-  return ctx;
-}
-
-/**
- * Using a [context](https://reactjs.org/docs/context.html), the field
- * component connects the label, description, and message to the input element.
- */
-var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    idProp = _ref.id,
-    data = _ref.data,
-    description = _ref.description,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    label = _ref.label,
-    adornment = _ref.adornment,
-    _ref$labelVisibility = _ref.labelVisibility,
-    labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
-    message = _ref.message,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$tone = _ref.tone,
-    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var _useFieldIds = useFieldIds(idProp),
-    descriptionId = _useFieldIds.descriptionId,
-    inputId = _useFieldIds.inputId,
-    messageId = _useFieldIds.messageId;
-
-  // field context
-  var invalid = Boolean(message && tone === 'critical');
-  var fieldContext = react.useMemo(function () {
-    return [{
-      disabled: disabled,
-      invalid: invalid
-    }, {
-      'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-      'aria-invalid': invalid || undefined,
-      id: inputId
-    }];
-  }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
-
-  // label prep
-  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
-    as: "label",
-    htmlFor: inputId,
-    children: [label, " ", secondaryLabel]
-  });
-  var labelElement = {
-    hidden: hiddenLabel,
-    visible: jsxRuntime.jsx(box.Box, {
-      as: "label",
-      htmlFor: inputId,
-      children: jsxRuntime.jsxs(text.Text, {
-        tone: disabled ? 'disabled' : 'neutral',
-        weight: "semibold",
-        children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
-          inline: true,
-          tone: disabled ? 'disabled' : 'muted',
-          weight: "regular",
-          children: secondaryLabel
-        })]
-      })
-    }),
-    'reserve-space': jsxRuntime.jsxs(react.Fragment, {
-      children: [hiddenLabel, jsxRuntime.jsx(text.Text, {
-        "aria-hidden": true,
-        children: "\xA0"
-      })]
-    })
-  };
-  var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
-  return jsxRuntime.jsx(FieldContextProvider, {
-    value: fieldContext,
-    children: jsxRuntime.jsxs(stack.Stack, {
-      ref: forwardedRef,
-      data: data,
-      gap: "medium",
-      children: [jsxRuntime.jsxs(LabelWrapper, {
-        children: [labelElement[labelVisibility], adornment]
-      }), description && jsxRuntime.jsx(text.Text, {
-        tone: "muted",
-        size: "small",
-        id: descriptionId,
-        children: description
-      }), children, message && jsxRuntime.jsx(FieldMessage, {
-        tone: tone,
-        id: messageId,
-        message: message
-      })]
-    })
-  });
-});
-Field.displayName = 'Field';
-
-// Utils
-// ------------------------------
-
-function useFieldIds(id) {
-  var inputId = a11y.useId(id);
-  var descriptionId = a11y.composeId(inputId, 'description');
-  var messageId = a11y.composeId(inputId, 'message');
-  return {
-    descriptionId: descriptionId,
-    inputId: inputId,
-    messageId: messageId
-  };
-}
-
-// Styled components
-// ------------------------------
-function FieldLabelWrapper(_ref2) {
-  var children = _ref2.children;
-  return jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "spaceBetween",
-    gap: "large",
-    children: children
-  });
-}
-var messageToneMap = {
-  critical: 'critical',
-  neutral: 'muted',
-  positive: 'positive'
-};
-
-// NOTE: use icons in addition to color for folks with visions issues
-var messageIconMap = {
-  critical: icon.ExclamationCircleIcon,
-  neutral: null,
-  positive: icon.CheckCircleIcon
-};
-var FieldMessage = function FieldMessage(_ref3) {
-  var message = _ref3.message,
-    id = _ref3.id,
-    tone = _ref3.tone;
-  var textTone = messageToneMap[tone];
-  var Icon = messageIconMap[tone];
-  return jsxRuntime.jsxs(box.Box, {
-    display: "flex",
-    gap: "xsmall",
-    children: [Icon ? jsxRuntime.jsx(IndicatorContainer, {
-      children: jsxRuntime.jsx(Icon, {
-        size: "xxsmall",
-        tone: tone
-      })
-    }) : null, jsxRuntime.jsx(text.Text, {
-      tone: textTone,
-      size: "small",
-      id: id,
-      children: message
-    })]
-  });
-};
-function IndicatorContainer(_ref4) {
-  var children = _ref4.children;
-  var theme$1 = theme.useTheme();
-  var _theme$typography$tex = theme$1.typography.text.small,
-    mobile = _theme$typography$tex.mobile,
-    tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme$1.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": true,
-    cursor: "default",
-    flexShrink: 0,
-    css: react$1.css(responsiveStyles),
-    children: children
-  });
-}
-
-exports.Field = Field;
-exports.FieldContextProvider = FieldContextProvider;
-exports.FieldMessage = FieldMessage;
-exports.useFieldContext = useFieldContext;
-exports.useFieldIds = useFieldIds;

package/dist/spark-web-field.cjs.prod.js

@@ -1,205 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
-var box = require('@spark-web/box');
-var icon = require('@spark-web/icon');
-var stack = require('@spark-web/stack');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-var FieldContext = /*#__PURE__*/react.createContext(null);
-var FieldContextProvider = FieldContext.Provider;
-var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
-function useFieldContext() {
-  var ctx = react.useContext(FieldContext);
-  if (!ctx) {
-    throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
-  }
-  return ctx;
-}
-
-/**
- * Using a [context](https://reactjs.org/docs/context.html), the field
- * component connects the label, description, and message to the input element.
- */
-var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    idProp = _ref.id,
-    data = _ref.data,
-    description = _ref.description,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    label = _ref.label,
-    adornment = _ref.adornment,
-    _ref$labelVisibility = _ref.labelVisibility,
-    labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
-    message = _ref.message,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$tone = _ref.tone,
-    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var _useFieldIds = useFieldIds(idProp),
-    descriptionId = _useFieldIds.descriptionId,
-    inputId = _useFieldIds.inputId,
-    messageId = _useFieldIds.messageId;
-
-  // field context
-  var invalid = Boolean(message && tone === 'critical');
-  var fieldContext = react.useMemo(function () {
-    return [{
-      disabled: disabled,
-      invalid: invalid
-    }, {
-      'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-      'aria-invalid': invalid || undefined,
-      id: inputId
-    }];
-  }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
-
-  // label prep
-  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
-    as: "label",
-    htmlFor: inputId,
-    children: [label, " ", secondaryLabel]
-  });
-  var labelElement = {
-    hidden: hiddenLabel,
-    visible: jsxRuntime.jsx(box.Box, {
-      as: "label",
-      htmlFor: inputId,
-      children: jsxRuntime.jsxs(text.Text, {
-        tone: disabled ? 'disabled' : 'neutral',
-        weight: "semibold",
-        children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
-          inline: true,
-          tone: disabled ? 'disabled' : 'muted',
-          weight: "regular",
-          children: secondaryLabel
-        })]
-      })
-    }),
-    'reserve-space': jsxRuntime.jsxs(react.Fragment, {
-      children: [hiddenLabel, jsxRuntime.jsx(text.Text, {
-        "aria-hidden": true,
-        children: "\xA0"
-      })]
-    })
-  };
-  var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
-  return jsxRuntime.jsx(FieldContextProvider, {
-    value: fieldContext,
-    children: jsxRuntime.jsxs(stack.Stack, {
-      ref: forwardedRef,
-      data: data,
-      gap: "medium",
-      children: [jsxRuntime.jsxs(LabelWrapper, {
-        children: [labelElement[labelVisibility], adornment]
-      }), description && jsxRuntime.jsx(text.Text, {
-        tone: "muted",
-        size: "small",
-        id: descriptionId,
-        children: description
-      }), children, message && jsxRuntime.jsx(FieldMessage, {
-        tone: tone,
-        id: messageId,
-        message: message
-      })]
-    })
-  });
-});
-Field.displayName = 'Field';
-
-// Utils
-// ------------------------------
-
-function useFieldIds(id) {
-  var inputId = a11y.useId(id);
-  var descriptionId = a11y.composeId(inputId, 'description');
-  var messageId = a11y.composeId(inputId, 'message');
-  return {
-    descriptionId: descriptionId,
-    inputId: inputId,
-    messageId: messageId
-  };
-}
-
-// Styled components
-// ------------------------------
-function FieldLabelWrapper(_ref2) {
-  var children = _ref2.children;
-  return jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "spaceBetween",
-    gap: "large",
-    children: children
-  });
-}
-var messageToneMap = {
-  critical: 'critical',
-  neutral: 'muted',
-  positive: 'positive'
-};
-
-// NOTE: use icons in addition to color for folks with visions issues
-var messageIconMap = {
-  critical: icon.ExclamationCircleIcon,
-  neutral: null,
-  positive: icon.CheckCircleIcon
-};
-var FieldMessage = function FieldMessage(_ref3) {
-  var message = _ref3.message,
-    id = _ref3.id,
-    tone = _ref3.tone;
-  var textTone = messageToneMap[tone];
-  var Icon = messageIconMap[tone];
-  return jsxRuntime.jsxs(box.Box, {
-    display: "flex",
-    gap: "xsmall",
-    children: [Icon ? jsxRuntime.jsx(IndicatorContainer, {
-      children: jsxRuntime.jsx(Icon, {
-        size: "xxsmall",
-        tone: tone
-      })
-    }) : null, jsxRuntime.jsx(text.Text, {
-      tone: textTone,
-      size: "small",
-      id: id,
-      children: message
-    })]
-  });
-};
-function IndicatorContainer(_ref4) {
-  var children = _ref4.children;
-  var theme$1 = theme.useTheme();
-  var _theme$typography$tex = theme$1.typography.text.small,
-    mobile = _theme$typography$tex.mobile,
-    tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme$1.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": true,
-    cursor: "default",
-    flexShrink: 0,
-    css: react$1.css(responsiveStyles),
-    children: children
-  });
-}
-
-exports.Field = Field;
-exports.FieldContextProvider = FieldContextProvider;
-exports.FieldMessage = FieldMessage;
-exports.useFieldContext = useFieldContext;
-exports.useFieldIds = useFieldIds;

package/dist/spark-web-field.esm.js

@@ -1,197 +0,0 @@
-import { createContext, useContext, forwardRef, useMemo, Fragment } from 'react';
-import { css } from '@emotion/react';
-import { mergeIds, VisuallyHidden, useId, composeId } from '@spark-web/a11y';
-import { Box } from '@spark-web/box';
-import { ExclamationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
-import { Stack } from '@spark-web/stack';
-import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-var FieldContext = /*#__PURE__*/createContext(null);
-var FieldContextProvider = FieldContext.Provider;
-var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
-function useFieldContext() {
-  var ctx = useContext(FieldContext);
-  if (!ctx) {
-    throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
-  }
-  return ctx;
-}
-
-/**
- * Using a [context](https://reactjs.org/docs/context.html), the field
- * component connects the label, description, and message to the input element.
- */
-var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var children = _ref.children,
-    idProp = _ref.id,
-    data = _ref.data,
-    description = _ref.description,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    label = _ref.label,
-    adornment = _ref.adornment,
-    _ref$labelVisibility = _ref.labelVisibility,
-    labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
-    message = _ref.message,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$tone = _ref.tone,
-    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var _useFieldIds = useFieldIds(idProp),
-    descriptionId = _useFieldIds.descriptionId,
-    inputId = _useFieldIds.inputId,
-    messageId = _useFieldIds.messageId;
-
-  // field context
-  var invalid = Boolean(message && tone === 'critical');
-  var fieldContext = useMemo(function () {
-    return [{
-      disabled: disabled,
-      invalid: invalid
-    }, {
-      'aria-describedby': mergeIds(message && messageId, description && descriptionId),
-      'aria-invalid': invalid || undefined,
-      id: inputId
-    }];
-  }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
-
-  // label prep
-  var hiddenLabel = jsxs(VisuallyHidden, {
-    as: "label",
-    htmlFor: inputId,
-    children: [label, " ", secondaryLabel]
-  });
-  var labelElement = {
-    hidden: hiddenLabel,
-    visible: jsx(Box, {
-      as: "label",
-      htmlFor: inputId,
-      children: jsxs(Text, {
-        tone: disabled ? 'disabled' : 'neutral',
-        weight: "semibold",
-        children: [label, ' ', secondaryLabel && jsx(Text, {
-          inline: true,
-          tone: disabled ? 'disabled' : 'muted',
-          weight: "regular",
-          children: secondaryLabel
-        })]
-      })
-    }),
-    'reserve-space': jsxs(Fragment, {
-      children: [hiddenLabel, jsx(Text, {
-        "aria-hidden": true,
-        children: "\xA0"
-      })]
-    })
-  };
-  var LabelWrapper = labelVisibility === 'hidden' ? Fragment : FieldLabelWrapper;
-  return jsx(FieldContextProvider, {
-    value: fieldContext,
-    children: jsxs(Stack, {
-      ref: forwardedRef,
-      data: data,
-      gap: "medium",
-      children: [jsxs(LabelWrapper, {
-        children: [labelElement[labelVisibility], adornment]
-      }), description && jsx(Text, {
-        tone: "muted",
-        size: "small",
-        id: descriptionId,
-        children: description
-      }), children, message && jsx(FieldMessage, {
-        tone: tone,
-        id: messageId,
-        message: message
-      })]
-    })
-  });
-});
-Field.displayName = 'Field';
-
-// Utils
-// ------------------------------
-
-function useFieldIds(id) {
-  var inputId = useId(id);
-  var descriptionId = composeId(inputId, 'description');
-  var messageId = composeId(inputId, 'message');
-  return {
-    descriptionId: descriptionId,
-    inputId: inputId,
-    messageId: messageId
-  };
-}
-
-// Styled components
-// ------------------------------
-function FieldLabelWrapper(_ref2) {
-  var children = _ref2.children;
-  return jsx(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "spaceBetween",
-    gap: "large",
-    children: children
-  });
-}
-var messageToneMap = {
-  critical: 'critical',
-  neutral: 'muted',
-  positive: 'positive'
-};
-
-// NOTE: use icons in addition to color for folks with visions issues
-var messageIconMap = {
-  critical: ExclamationCircleIcon,
-  neutral: null,
-  positive: CheckCircleIcon
-};
-var FieldMessage = function FieldMessage(_ref3) {
-  var message = _ref3.message,
-    id = _ref3.id,
-    tone = _ref3.tone;
-  var textTone = messageToneMap[tone];
-  var Icon = messageIconMap[tone];
-  return jsxs(Box, {
-    display: "flex",
-    gap: "xsmall",
-    children: [Icon ? jsx(IndicatorContainer, {
-      children: jsx(Icon, {
-        size: "xxsmall",
-        tone: tone
-      })
-    }) : null, jsx(Text, {
-      tone: textTone,
-      size: "small",
-      id: id,
-      children: message
-    })]
-  });
-};
-function IndicatorContainer(_ref4) {
-  var children = _ref4.children;
-  var theme = useTheme();
-  var _theme$typography$tex = theme.typography.text.small,
-    mobile = _theme$typography$tex.mobile,
-    tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return jsx(Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": true,
-    cursor: "default",
-    flexShrink: 0,
-    css: css(responsiveStyles),
-    children: children
-  });
-}
-
-export { Field, FieldContextProvider, FieldMessage, useFieldContext, useFieldIds };