braid-design-system 32.24.0 → 32.24.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # braid-design-system
 
+## 32.24.1
+
+### Patch Changes
+
+- **BraidTestProvider:** Provide `scrollIntoView` stub function for jsdom ([#1590](https://github.com/seek-oss/braid-design-system/pull/1590))
+
+  Fixes an issue where `scrollIntoView` is not defined in jsdom, causing tests to fail with the following error:
+
+  ```
+  Error: Uncaught [TypeError: highlightedItem?.scrollIntoView is not a function]
+  ```
+
+- **Autosuggest:** Update suggestion group heading design ([#1581](https://github.com/seek-oss/braid-design-system/pull/1581))
+
+  Updating the design of the suggestion group headings, moving from `formAccent` to `secondary` tone, from all caps to provided casing, and from `xsmall` to `small` size.
+
+- **Text, Heading:** Ensure `maxLines` truncates correctly when used as the direct child of a flex container. ([#1580](https://github.com/seek-oss/braid-design-system/pull/1580))
+
+- Validate accessible field labels in development ([#1591](https://github.com/seek-oss/braid-design-system/pull/1591))
+
+  Introduce development-time validation for the `label` prop on form fields to guard against blank values and guide towards the alternative labelling options that are available.
+  This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.
+
+- **Spread:** Apply content width to children ([#1583](https://github.com/seek-oss/braid-design-system/pull/1583))
+
+  Align the behaviour of children in `Spread` to be the same as `Inline` children.
+  This makes their behaviour more predicatable when spreading full width elements, while also ensuring child elements are not stretched vertically.
+
+- **Icons:** Support rendering inline as child of a flex container ([#1585](https://github.com/seek-oss/braid-design-system/pull/1585))
+
 ## 32.24.0
 
 ### Minor Changes
@@ -16,7 +46,7 @@
 
   #### Migration Guide
 
-  See [the migration guide] for details on how to migrate off the `dividers` prop.
+  See [migration guide] for details on how to migrate off the `dividers` prop.
 
   [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
   [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
@@ -2049,7 +2079,7 @@ For more detail on the specific changes in this release, please read on.
 
   ```jsx
   <MenuRenderer
-    onClose={closeReason => {
+    onClose={(closeReason) => {
       // ...
     }}
   />
@@ -2348,7 +2378,7 @@ For more detail on the specific changes in this release, please read on.
 
   ```jsx
   <MenuRenderer
-    trigger={triggerProps => <Button {...triggerProps}>Button</Button>}
+    trigger={(triggerProps) => <Button {...triggerProps}>Button</Button>}
   >
     ...
   </MenuRenderer>
@@ -2780,8 +2810,9 @@ For more detail on the specific changes in this release, please read on.
 
   type ThemeName = 'apac' | 'catho';
 
-  const BraidTheme = loadable.lib((props: { themeName: ThemeName }) =>
-    import(`braid-design-system/themes/${props.themeName}`),
+  const BraidTheme = loadable.lib(
+    (props: { themeName: ThemeName }) =>
+      import(`braid-design-system/themes/${props.themeName}`),
   );
 
   interface AppProps {
@@ -5440,7 +5471,7 @@ For more detail on the specific changes in this release, please read on.
   <AccordionItem
     id="id"
     label="Label"
-    onToggle={expanded => trackSomething(expanded)}
+    onToggle={(expanded) => trackSomething(expanded)}
   >
     ...
   </AccordionItem>

package/dist/lib/components/Autosuggest/Autosuggest.cjs

@@ -117,13 +117,12 @@ function GroupHeading({ children }) {
     {
       paddingX: "small",
       className: [
-        lib_components_Autosuggest_Autosuggest_css_cjs.groupHeading,
         lib_css_typography_css_cjs.touchableText.xsmall,
         lib_css_typography_cjs.textStyles({
-          size: "xsmall",
-          baseline: false,
+          size: "small",
+          baseline: true,
           weight: "strong",
-          tone: "formAccent"
+          tone: "secondary"
         })
       ],
       "data-testid": process.env.NODE_ENV !== "production" ? `group-heading-${children}` : void 0,
@@ -520,6 +519,7 @@ const Autosuggest = React.forwardRef(function({
             lib_components_private_Field_Field_cjs.Field,
             {
               ...restProps,
+              componentName: "Autosuggest",
               id,
               value: value.text,
               prefix: void 0,

package/dist/lib/components/Autosuggest/Autosuggest.css.cjs

@@ -23,11 +23,7 @@ const menu = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
     maxHeight: calcMenuHeight(8)
   }
 }), "menu");
-const groupHeading = css.style({
-  textTransform: "uppercase"
-}, "groupHeading");
 fileScope.endFileScope();
 exports.backdrop = backdrop;
 exports.backdropVisible = backdropVisible;
-exports.groupHeading = groupHeading;
 exports.menu = menu;

package/dist/lib/components/Autosuggest/Autosuggest.css.mjs

@@ -22,13 +22,9 @@ const menu = style(responsiveStyle({
     maxHeight: calcMenuHeight(8)
   }
 }), "menu");
-const groupHeading = style({
-  textTransform: "uppercase"
-}, "groupHeading");
 endFileScope();
 export {
   backdrop,
   backdropVisible,
-  groupHeading,
   menu
 };

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -21,7 +21,7 @@ import { RemoveScroll } from "react-remove-scroll";
 import { getItemId, createAccessibilityProps } from "./createAccessibilityProps.mjs";
 import { autosuggest } from "../../translations/en.mjs";
 import { reverseMatches } from "./reverseMatches.mjs";
-import { backdrop, backdropVisible, menu, groupHeading } from "./Autosuggest.css.mjs";
+import { backdrop, backdropVisible, menu } from "./Autosuggest.css.mjs";
 import { IconClear } from "../icons/IconClear/IconClear.mjs";
 const INPUT_FOCUS = 0;
 const INPUT_BLUR = 1;
@@ -112,13 +112,12 @@ function GroupHeading({ children }) {
     {
       paddingX: "small",
       className: [
-        groupHeading,
         touchableText.xsmall,
         textStyles({
-          size: "xsmall",
-          baseline: false,
+          size: "small",
+          baseline: true,
           weight: "strong",
-          tone: "formAccent"
+          tone: "secondary"
         })
       ],
       "data-testid": process.env.NODE_ENV !== "production" ? `group-heading-${children}` : void 0,
@@ -515,6 +514,7 @@ const Autosuggest = forwardRef(function({
             Field,
             {
               ...restProps,
+              componentName: "Autosuggest",
               id,
               value: value.text,
               prefix: void 0,
@@ -579,14 +579,14 @@ const Autosuggest = forwardRef(function({
                       ) : null,
                       isOpen && hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
                         const { text } = suggestion;
-                        const groupHeading2 = groupHeadingIndexes.get(index);
+                        const groupHeading = groupHeadingIndexes.get(index);
                         const highlights = suggestionHighlight ? highlightSuggestions(
                           suggestion.text,
                           value.text,
                           suggestionHighlight
                         ) : suggestion.highlights;
                         return /* @__PURE__ */ jsxs(Fragment, { children: [
-                          groupHeading2 ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading2 }) : null,
+                          groupHeading ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading }) : null,
                           /* @__PURE__ */ jsx(
                             SuggestionItem,
                             {

package/dist/lib/components/BraidTestProvider/BraidTestProvider.cjs

@@ -1,9 +1,14 @@
 "use strict";
+var _a;
 const jsxRuntime = require("react/jsx-runtime");
 const lib_themes_index_cjs = require("../../themes/index.cjs");
 const lib_components_BraidProvider_BraidProvider_cjs = require("../BraidProvider/BraidProvider.cjs");
 const lib_components_BraidTestProvider_BraidTestProviderContext_cjs = require("./BraidTestProviderContext.cjs");
 const lib_components_BraidProvider_BreakpointContext_cjs = require("../BraidProvider/BreakpointContext.cjs");
+if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
+  window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
+  });
+}
 const BraidTestProvider = ({
   themeName = "wireframe",
   breakpoint = null,

package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs

@@ -1,8 +1,13 @@
+var _a;
 import { jsx } from "react/jsx-runtime";
 import { themes } from "../../themes/index.mjs";
 import { BraidProvider } from "../BraidProvider/BraidProvider.mjs";
 import { BraidTestProviderContext } from "./BraidTestProviderContext.mjs";
 import { breakpointContext } from "../BraidProvider/BreakpointContext.mjs";
+if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
+  window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
+  });
+}
 const BraidTestProvider = ({
   themeName = "wireframe",
   breakpoint = null,

package/dist/lib/components/Dropdown/Dropdown.cjs

@@ -22,6 +22,7 @@ const Dropdown = React.forwardRef(
       lib_components_private_Field_Field_cjs.Field,
       {
         ...restProps,
+        componentName: "Dropdown",
         disabled,
         prefix: void 0,
         secondaryMessage: null,

package/dist/lib/components/Dropdown/Dropdown.mjs

@@ -21,6 +21,7 @@ const Dropdown = forwardRef(
       Field,
       {
         ...restProps,
+        componentName: "Dropdown",
         disabled,
         prefix: void 0,
         secondaryMessage: null,

package/dist/lib/components/MonthPicker/MonthPicker.cjs

@@ -110,6 +110,7 @@ const MonthPicker = ({
       disabled,
       value: customValueToString(currentValue),
       ...restProps,
+      componentName: "MonthPicker",
       icon: void 0,
       prefix: void 0,
       name: void 0,
@@ -134,40 +135,50 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_FieldGroup_FieldGroup_cjs.FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "xsmall", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Dropdown_Dropdown_cjs.Dropdown,
-      {
-        id: monthId,
-        value: currentValue.month || "",
-        onChange: makeChangeHandler(onChange, value, "month"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: monthLabel,
-        "aria-label": monthLabel,
-        ...fieldGroupProps,
-        ref: monthRef,
-        children: getMonths(monthNames)
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Dropdown_Dropdown_cjs.Dropdown,
-      {
-        id: yearId,
-        value: currentValue.year || "",
-        onChange: makeChangeHandler(onChange, value, "year"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: yearLabel,
-        "aria-label": yearLabel,
-        ...fieldGroupProps,
-        ref: yearRef,
-        children: getYears(minYear, maxYear, ascendingYears)
-      }
-    ) })
-  ] }) });
+  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_private_FieldGroup_FieldGroup_cjs.FieldGroup,
+    {
+      id,
+      tone,
+      disabled,
+      componentName: "MonthPicker",
+      ...restProps,
+      children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "xsmall", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Dropdown_Dropdown_cjs.Dropdown,
+          {
+            id: monthId,
+            value: currentValue.month || "",
+            onChange: makeChangeHandler(onChange, value, "month"),
+            onBlur: blurHandler,
+            onFocus: focusHandler,
+            tone,
+            placeholder: monthLabel,
+            "aria-label": monthLabel,
+            ...fieldGroupProps,
+            ref: monthRef,
+            children: getMonths(monthNames)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Dropdown_Dropdown_cjs.Dropdown,
+          {
+            id: yearId,
+            value: currentValue.year || "",
+            onChange: makeChangeHandler(onChange, value, "year"),
+            onBlur: blurHandler,
+            onFocus: focusHandler,
+            tone,
+            placeholder: yearLabel,
+            "aria-label": yearLabel,
+            ...fieldGroupProps,
+            ref: yearRef,
+            children: getYears(minYear, maxYear, ascendingYears)
+          }
+        ) })
+      ] })
+    }
+  );
   return renderNativeInput ? nativeField : customFieldGroup;
 };
 MonthPicker.displayName = "MonthPicker";

package/dist/lib/components/MonthPicker/MonthPicker.mjs

@@ -107,6 +107,7 @@ const MonthPicker = ({
       disabled,
       value: customValueToString(currentValue),
       ...restProps,
+      componentName: "MonthPicker",
       icon: void 0,
       prefix: void 0,
       name: void 0,
@@ -131,40 +132,50 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "xsmall", children: [
-    /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        id: monthId,
-        value: currentValue.month || "",
-        onChange: makeChangeHandler(onChange, value, "month"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: monthLabel,
-        "aria-label": monthLabel,
-        ...fieldGroupProps,
-        ref: monthRef,
-        children: getMonths(monthNames)
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        id: yearId,
-        value: currentValue.year || "",
-        onChange: makeChangeHandler(onChange, value, "year"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: yearLabel,
-        "aria-label": yearLabel,
-        ...fieldGroupProps,
-        ref: yearRef,
-        children: getYears(minYear, maxYear, ascendingYears)
-      }
-    ) })
-  ] }) });
+  const customFieldGroup = /* @__PURE__ */ jsx(
+    FieldGroup,
+    {
+      id,
+      tone,
+      disabled,
+      componentName: "MonthPicker",
+      ...restProps,
+      children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "xsmall", children: [
+        /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            id: monthId,
+            value: currentValue.month || "",
+            onChange: makeChangeHandler(onChange, value, "month"),
+            onBlur: blurHandler,
+            onFocus: focusHandler,
+            tone,
+            placeholder: monthLabel,
+            "aria-label": monthLabel,
+            ...fieldGroupProps,
+            ref: monthRef,
+            children: getMonths(monthNames)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            id: yearId,
+            value: currentValue.year || "",
+            onChange: makeChangeHandler(onChange, value, "year"),
+            onBlur: blurHandler,
+            onFocus: focusHandler,
+            tone,
+            placeholder: yearLabel,
+            "aria-label": yearLabel,
+            ...fieldGroupProps,
+            ref: yearRef,
+            children: getYears(minYear, maxYear, ascendingYears)
+          }
+        ) })
+      ] })
+    }
+  );
   return renderNativeInput ? nativeField : customFieldGroup;
 };
 MonthPicker.displayName = "MonthPicker";

package/dist/lib/components/PasswordField/PasswordField.cjs

@@ -41,6 +41,7 @@ const PasswordField = React.forwardRef(
       lib_components_private_Field_Field_cjs.Field,
       {
         ...restProps,
+        componentName: "PasswordField",
         id,
         value,
         icon: void 0,

package/dist/lib/components/PasswordField/PasswordField.mjs

@@ -40,6 +40,7 @@ const PasswordField = forwardRef(
       Field,
       {
         ...restProps,
+        componentName: "PasswordField",
         id,
         value,
         icon: void 0,

package/dist/lib/components/RadioGroup/RadioGroup.cjs

@@ -35,6 +35,7 @@ const RadioGroup = ({
     {
       id,
       ...props,
+      componentName: "RadioGroup",
       disabled,
       tone,
       role: "radiogroup",

package/dist/lib/components/RadioGroup/RadioGroup.mjs

@@ -32,6 +32,7 @@ const RadioGroup = ({
     {
       id,
       ...props,
+      componentName: "RadioGroup",
       disabled,
       tone,
       role: "radiogroup",

package/dist/lib/components/Rating/Rating.cjs

@@ -16,7 +16,9 @@ const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const getPercent = (rating, position) => Math.round(Math.min(Math.max(rating - position, 0), 1) * 100);
 const RatingStar = ({ percent, ...restProps }) => {
   const currentBg = lib_components_Box_BackgroundContext_cjs.useBackground();
-  const { className, ...iconProps } = lib_hooks_useIcon_index_cjs.useIcon(restProps);
+  const {
+    svgProps: { className, ...svgProps }
+  } = lib_hooks_useIcon_index_cjs.useIcon(restProps);
   let component = lib_components_icons_IconStar_IconStarSvg_cjs.IconStarSvg;
   if (percent >= 25 && percent < 75) {
     component = lib_components_icons_IconStar_IconStarHalfSvg_cjs.IconStarHalfSvg;
@@ -28,7 +30,7 @@ const RatingStar = ({ percent, ...restProps }) => {
     lib_components_Box_Box_cjs.Box,
     {
       component,
-      ...iconProps,
+      ...svgProps,
       className: [
         className,
         {

package/dist/lib/components/Rating/Rating.mjs

@@ -12,7 +12,9 @@ import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from
 const getPercent = (rating, position) => Math.round(Math.min(Math.max(rating - position, 0), 1) * 100);
 const RatingStar = ({ percent, ...restProps }) => {
   const currentBg = useBackground();
-  const { className, ...iconProps } = useIcon(restProps);
+  const {
+    svgProps: { className, ...svgProps }
+  } = useIcon(restProps);
   let component = IconStarSvg;
   if (percent >= 25 && percent < 75) {
     component = IconStarHalfSvg;
@@ -24,7 +26,7 @@ const RatingStar = ({ percent, ...restProps }) => {
     Box,
     {
       component,
-      ...iconProps,
+      ...svgProps,
       className: [
         className,
         {

package/dist/lib/components/Spread/Spread.cjs

@@ -10,7 +10,7 @@ const Spread = ({
   space,
   direction = "horizontal",
   align,
-  alignY,
+  alignY = "top",
   data,
   ...restProps
 }) => {
@@ -19,7 +19,7 @@ const Spread = ({
   let alignItems;
   if (align && isVertical) {
     alignItems = lib_utils_align_cjs.alignToFlexAlign(align);
-  } else if (alignY && isHorizontal) {
+  } else if (isHorizontal) {
     alignItems = lib_utils_align_cjs.alignYToFlexAlign(alignY);
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -32,7 +32,11 @@ const Spread = ({
       height: isVertical ? "full" : void 0,
       justifyContent: "spaceBetween",
       alignItems,
-      className: lib_components_Spread_Spread_css_cjs.responsiveGap({ gap: space }),
+      className: [
+        isHorizontal ? lib_components_Spread_Spread_css_cjs.fitContent : void 0,
+        isVertical ? lib_components_Spread_Spread_css_cjs.maxWidth : void 0,
+        lib_components_Spread_Spread_css_cjs.responsiveGap({ gap: space })
+      ],
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
       children
     }

package/dist/lib/components/Spread/Spread.css.cjs

@@ -1,9 +1,19 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
 const sprinkles = require("@vanilla-extract/sprinkles");
 const lib_css_breakpoints_cjs = require("../../css/breakpoints.cjs");
 const lib_css_atoms_atomicProperties_cjs = require("../../css/atoms/atomicProperties.cjs");
 fileScope.setFileScope("src/lib/components/Spread/Spread.css.ts", "braid-design-system");
+const fitContent = css.style({}, "fitContent");
+css.globalStyle(`${fitContent} > *`, {
+  flexBasis: "auto",
+  width: "auto"
+});
+const maxWidth = css.style({}, "maxWidth");
+css.globalStyle(`${maxWidth} > *`, {
+  maxWidth: "100%"
+});
 const responsiveGapProperties = sprinkles.defineProperties({
   defaultCondition: "mobile",
   conditions: {
@@ -24,4 +34,6 @@ const responsiveGapProperties = sprinkles.defineProperties({
 });
 const responsiveGap = sprinkles.createSprinkles(responsiveGapProperties);
 fileScope.endFileScope();
+exports.fitContent = fitContent;
+exports.maxWidth = maxWidth;
 exports.responsiveGap = responsiveGap;

package/dist/lib/components/Spread/Spread.css.mjs

@@ -1,8 +1,18 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, globalStyle } from "@vanilla-extract/css";
 import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
 import { breakpoints } from "../../css/breakpoints.mjs";
 import { space } from "../../css/atoms/atomicProperties.mjs";
 setFileScope("src/lib/components/Spread/Spread.css.ts", "braid-design-system");
+const fitContent = style({}, "fitContent");
+globalStyle(`${fitContent} > *`, {
+  flexBasis: "auto",
+  width: "auto"
+});
+const maxWidth = style({}, "maxWidth");
+globalStyle(`${maxWidth} > *`, {
+  maxWidth: "100%"
+});
 const responsiveGapProperties = defineProperties({
   defaultCondition: "mobile",
   conditions: {
@@ -24,5 +34,7 @@ const responsiveGapProperties = defineProperties({
 const responsiveGap = createSprinkles(responsiveGapProperties);
 endFileScope();
 export {
+  fitContent,
+  maxWidth,
   responsiveGap
 };

package/dist/lib/components/Spread/Spread.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { alignToFlexAlign, alignYToFlexAlign } from "../../utils/align.mjs";
-import { responsiveGap } from "./Spread.css.mjs";
+import { fitContent, maxWidth, responsiveGap } from "./Spread.css.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 const Spread = ({
   component,
@@ -9,7 +9,7 @@ const Spread = ({
   space,
   direction = "horizontal",
   align,
-  alignY,
+  alignY = "top",
   data,
   ...restProps
 }) => {
@@ -18,7 +18,7 @@ const Spread = ({
   let alignItems;
   if (align && isVertical) {
     alignItems = alignToFlexAlign(align);
-  } else if (alignY && isHorizontal) {
+  } else if (isHorizontal) {
     alignItems = alignYToFlexAlign(alignY);
   }
   return /* @__PURE__ */ jsx(
@@ -31,7 +31,11 @@ const Spread = ({
       height: isVertical ? "full" : void 0,
       justifyContent: "spaceBetween",
       alignItems,
-      className: responsiveGap({ gap: space }),
+      className: [
+        isHorizontal ? fitContent : void 0,
+        isVertical ? maxWidth : void 0,
+        responsiveGap({ gap: space })
+      ],
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children
     }

package/dist/lib/components/TextField/TextField.cjs

@@ -48,6 +48,7 @@ const TextField = React.forwardRef(
       lib_components_private_Field_Field_cjs.Field,
       {
         ...restProps,
+        componentName: "TextField",
         id,
         value,
         secondaryMessage: characterLimit ? lib_components_private_Field_getCharacterLimitStatus_cjs.getCharacterLimitStatus({

package/dist/lib/components/TextField/TextField.mjs

@@ -47,6 +47,7 @@ const TextField = forwardRef(
       Field,
       {
         ...restProps,
+        componentName: "TextField",
         id,
         value,
         secondaryMessage: characterLimit ? getCharacterLimitStatus({

package/dist/lib/components/Textarea/Textarea.cjs

@@ -57,6 +57,7 @@ const Textarea = React.forwardRef(
       lib_components_private_Field_Field_cjs.Field,
       {
         ...restProps,
+        componentName: "Textarea",
         tone,
         value,
         icon: void 0,