braid-design-system 34.1.0 → 34.3.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # braid-design-system
 
+## 34.3.0
+
+### Minor Changes
+
+- **Inline:** Add _noWrap_ prop to support single-row compositions ([#2069](https://github.com/seek-oss/braid-design-system/pull/2069))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Inline space="small" noWrap>
+    <Placeholder width={20} height={48} />
+    <Placeholder width={80} height={48} />
+    <Placeholder width={40} height={48} />
+  </Inline>
+  ```
+
+### Patch Changes
+
+- **Textarea:** Ensure focus ring displays correctly ([#2066](https://github.com/seek-oss/braid-design-system/pull/2066))
+
+- **Heading:** Increase line height to improve legibility ([#2073](https://github.com/seek-oss/braid-design-system/pull/2073))
+
+  Increases the line height of all `Heading` levels to improve legibility of wrapping lines of text — focusing on reducing the collision of diacritical marks in Thai Script.
+
+## 34.2.0
+
+### Minor Changes
+
+- **Dialog:** Add `coverImage` support ([#2052](https://github.com/seek-oss/braid-design-system/pull/2052))
+
+  Add support for providing a URL for a cover image to display at the top of the Dialog via the `coverImage` prop.
+  The provided image must be compatible with the [CSS background-image “url” function].
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Dialog
+    title="Cover Image"
+    coverImage="https://placehold.co/1600x900/051A49/FFFFFF/png?text=​++++++16:9++++++​"
+    open={true}
+    onClose={() => {}}
+  >
+    <Placeholder height={100} width="100%" label="Dialog Content" />
+  </Dialog>
+  ```
+
+  [CSS background-image “url” function]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image
+
+- **vars:** Exposed `vars.transition`. Transition CSS variables are available in stylesheets and runtime styles. ([#2034](https://github.com/seek-oss/braid-design-system/pull/2034))
+
+  **EXAMPLE USAGE:**
+
+  ```ts
+  import { vars } from 'braid-design-system/css':
+
+  export const myStyle = style({
+    transition: vars.transition.fast,
+  });
+  ```
+
+- **Badge:** Added aria-hidden and aria-label props. ([#2034](https://github.com/seek-oss/braid-design-system/pull/2034))
+
+  `aria-hidden` allows a badge to be hidden from assistive technology
+
+  `aria-label` allows visible badge text to be overridden with a more descriptive label for screen readers
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Badge aria-hidden>Deprecated</Badge>
+  ```
+
+  ```jsx
+  <Badge aria-label="You have 2 notifications">2</Badge>
+  ```
+
+### Patch Changes
+
+- **seekJobs, seekBusiness:** Update webfont url ([#2044](https://github.com/seek-oss/braid-design-system/pull/2044))
+
+  Point to the `www.seek.com` domain instead of `www.seek.com.au`.
+
 ## 34.1.0
 
 ### Minor Changes

package/dist/css.cjs

@@ -8,7 +8,7 @@ const require_atoms = require('./lib/css/atoms/atoms.cjs');
 const require_globalTypographyStyles = require('./lib/css/globalTypographyStyles.cjs');
 
 //#region src/css.ts
-const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow } = require_vars_css.vars;
+const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = require_vars_css.vars;
 const vars = {
 	grid,
 	space,
@@ -20,7 +20,8 @@ const vars = {
 	borderColor,
 	borderRadius,
 	borderWidth,
-	shadow
+	shadow,
+	transition
 };
 function atoms(props) {
 	if (process.env.NODE_ENV !== "production") {

package/dist/css.d.cts

@@ -131,6 +131,10 @@ declare const vars: {
     medium: `var(--${string})`;
     large: `var(--${string})`;
   };
+  transition: {
+    fast: `var(--${string})`;
+    touchable: `var(--${string})`;
+  };
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 //#endregion

package/dist/css.d.mts

@@ -131,6 +131,10 @@ declare const vars: {
     medium: `var(--${string})`;
     large: `var(--${string})`;
   };
+  transition: {
+    fast: `var(--${string})`;
+    touchable: `var(--${string})`;
+  };
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 //#endregion

package/dist/css.mjs

@@ -7,7 +7,7 @@ import { atoms as atoms$1 } from "./lib/css/atoms/atoms.mjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
 
 //#region src/css.ts
-const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow } = vars$1;
+const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = vars$1;
 const vars = {
 	grid,
 	space,
@@ -19,7 +19,8 @@ const vars = {
 	borderColor,
 	borderRadius,
 	borderWidth,
-	shadow
+	shadow,
+	transition
 };
 function atoms(props) {
 	if (process.env.NODE_ENV !== "production") {

package/dist/lib/components/Autosuggest/Autosuggest.playroom.d.cts

@@ -1,6 +1,6 @@
 import { AutosuggestBaseProps, AutosuggestLabelProps } from "./Autosuggest.cjs";
 import { StateProp } from "../../playroom/playroomState.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 import { Optional } from "utility-types";
 
 //#region src/lib/components/Autosuggest/Autosuggest.playroom.d.ts
@@ -12,6 +12,6 @@ declare function Autosuggest<Value>({
   onClear,
   tabIndex,
   ...restProps
-}: PlayroomAutosuggestProps<Value>): react_jsx_runtime0.JSX.Element;
+}: PlayroomAutosuggestProps<Value>): react.JSX.Element;
 //#endregion
 export { Autosuggest };

package/dist/lib/components/Autosuggest/Autosuggest.playroom.d.mts

@@ -1,6 +1,6 @@
 import { AutosuggestBaseProps, AutosuggestLabelProps } from "./Autosuggest.mjs";
 import { StateProp } from "../../playroom/playroomState.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 import { Optional } from "utility-types";
 
 //#region src/lib/components/Autosuggest/Autosuggest.playroom.d.ts
@@ -12,6 +12,6 @@ declare function Autosuggest<Value>({
   onClear,
   tabIndex,
   ...restProps
-}: PlayroomAutosuggestProps<Value>): react_jsx_runtime0.JSX.Element;
+}: PlayroomAutosuggestProps<Value>): react.JSX.Element;
 //#endregion
 export { Autosuggest };

package/dist/lib/components/Badge/Badge.cjs

@@ -35,7 +35,7 @@ const stringifyChildren = (children) => {
 	if (typeof children === "number") return children.toString();
 	return children.join("");
 };
-const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, ...restProps }, ref) => {
+const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...restProps }, ref) => {
 	(0, assert.default)(validBadgeTones.indexOf(tone) >= 0, `Badge tone of "${tone}" is not valid.`);
 	(0, assert.default)(react.Children.toArray(children).every((child) => ["string", "number"].includes(typeof child)), "Badge may only contain strings or numbers");
 	const textContext = (0, react.useContext)(require_TextContext.TextContext);
@@ -53,6 +53,8 @@ const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY
 				ref,
 				tabIndex,
 				"aria-describedby": ariaDescribedBy,
+				"aria-hidden": ariaHidden,
+				"aria-label": ariaLabel,
 				title: title ?? (!ariaDescribedBy ? stringifyChildren(children) : void 0),
 				background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
 				paddingY: require_Badge_css.verticalPadding,

package/dist/lib/components/Badge/Badge.d.cts

@@ -18,6 +18,8 @@ interface BadgeProps {
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
   'aria-describedby'?: string;
+  'aria-hidden'?: boolean;
+  'aria-label'?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/lib/components/Badge/Badge.d.mts

@@ -18,6 +18,8 @@ interface BadgeProps {
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
   'aria-describedby'?: string;
+  'aria-hidden'?: boolean;
+  'aria-label'?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/lib/components/Badge/Badge.mjs

@@ -33,7 +33,7 @@ const stringifyChildren = (children) => {
 	if (typeof children === "number") return children.toString();
 	return children.join("");
 };
-const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, ...restProps }, ref) => {
+const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...restProps }, ref) => {
 	assert(validBadgeTones.indexOf(tone) >= 0, `Badge tone of "${tone}" is not valid.`);
 	assert(Children.toArray(children).every((child) => ["string", "number"].includes(typeof child)), "Badge may only contain strings or numbers");
 	const textContext = useContext(TextContext);
@@ -51,6 +51,8 @@ const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYPro
 				ref,
 				tabIndex,
 				"aria-describedby": ariaDescribedBy,
+				"aria-hidden": ariaHidden,
+				"aria-label": ariaLabel,
 				title: title ?? (!ariaDescribedBy ? stringifyChildren(children) : void 0),
 				background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
 				paddingY: verticalPadding,

package/dist/lib/components/Box/BoxRenderer.d.cts

@@ -1,8 +1,8 @@
 import { Atoms } from "../../css/atoms/atoms.cjs";
 import { BoxShadow } from "../../css/atoms/atomicProperties.cjs";
 import { BoxBaseProps, SimpleBackground } from "./Box.cjs";
+import * as react from "react";
 import { ReactElement } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/components/Box/BoxRenderer.d.ts
 interface BoxRendererProps extends BoxBaseProps {
@@ -18,6 +18,6 @@ declare const BoxRenderer: ({
   background,
   boxShadow,
   ...props
-}: BoxRendererProps) => react_jsx_runtime0.JSX.Element | null;
+}: BoxRendererProps) => react.JSX.Element | null;
 //#endregion
 export { BoxRenderer };

package/dist/lib/components/Box/BoxRenderer.d.mts

@@ -1,8 +1,8 @@
 import { Atoms } from "../../css/atoms/atoms.mjs";
 import { BoxShadow } from "../../css/atoms/atomicProperties.mjs";
 import { BoxBaseProps, SimpleBackground } from "./Box.mjs";
+import * as react from "react";
 import { ReactElement } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/components/Box/BoxRenderer.d.ts
 interface BoxRendererProps extends BoxBaseProps {
@@ -18,6 +18,6 @@ declare const BoxRenderer: ({
   background,
   boxShadow,
   ...props
-}: BoxRendererProps) => react_jsx_runtime0.JSX.Element | null;
+}: BoxRendererProps) => react.JSX.Element | null;
 //#endregion
 export { BoxRenderer };

package/dist/lib/components/BraidTestProvider/BraidTestProvider.d.cts

@@ -1,7 +1,7 @@
 import { Breakpoint } from "../../css/breakpoints.cjs";
 import { BraidProviderProps } from "../BraidProvider/BraidProvider.cjs";
 import { index_d_exports } from "../../themes/index.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.d.ts
 interface BraidTestProviderProps extends Omit<BraidProviderProps, 'theme' | 'styleBody'> {
@@ -12,6 +12,6 @@ declare const BraidTestProvider: ({
   themeName,
   breakpoint,
   ...restProps
-}: BraidTestProviderProps) => react_jsx_runtime0.JSX.Element;
+}: BraidTestProviderProps) => react.JSX.Element;
 //#endregion
 export { BraidTestProvider };

package/dist/lib/components/BraidTestProvider/BraidTestProvider.d.mts

@@ -1,7 +1,7 @@
 import { Breakpoint } from "../../css/breakpoints.mjs";
 import { BraidProviderProps } from "../BraidProvider/BraidProvider.mjs";
 import { index_d_exports } from "../../themes/index.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.d.ts
 interface BraidTestProviderProps extends Omit<BraidProviderProps, 'theme' | 'styleBody'> {
@@ -12,6 +12,6 @@ declare const BraidTestProvider: ({
   themeName,
   breakpoint,
   ...restProps
-}: BraidTestProviderProps) => react_jsx_runtime0.JSX.Element;
+}: BraidTestProviderProps) => react.JSX.Element;
 //#endregion
 export { BraidTestProvider };

package/dist/lib/components/Button/Button.d.mts

@@ -3,6 +3,7 @@ import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import { buttonTones } from "./buttonTones.mjs";
 import * as react from "react";
 import { AllHTMLAttributes, ReactElement, ReactNode } from "react";
+
 //#region src/lib/components/Button/Button.d.ts
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
 declare const buttonSizes: readonly ["standard", "small"];

package/dist/lib/components/Dialog/Dialog.d.mts

@@ -1,5 +1,6 @@
 import { ModalProps } from "../private/Modal/Modal.mjs";
 import { FC } from "react";
+
 //#region src/lib/components/Dialog/Dialog.d.ts
 declare const modalStyle: {
   readonly position: "center";

package/dist/lib/components/Drawer/Drawer.d.cts

@@ -8,7 +8,7 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position'> {
+interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
 }

package/dist/lib/components/Drawer/Drawer.d.mts

@@ -1,5 +1,6 @@
 import { ModalProps } from "../private/Modal/Modal.mjs";
 import { FC } from "react";
+
 //#region src/lib/components/Drawer/Drawer.d.ts
 declare const validWidths: readonly ["small", "medium", "large"];
 declare const validPositions: readonly ["left", "right"];
@@ -7,7 +8,7 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position'> {
+interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
 }

package/dist/lib/components/Inline/Inline.cjs

@@ -8,7 +8,7 @@ assert = require_runtime.__toESM(assert);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/lib/components/Inline/Inline.tsx
-const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false, component = "div", data, children, ...restProps }) => {
+const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false, component = "div", data, children, noWrap = false, ...restProps }) => {
 	(0, assert.default)(!reverse || reverse && collapseBelow, "The `reverse` prop should only be applied in combination with the `collapseBelow` prop.\nIf you do not want to collapse responsively, it is recommended to reorder the content directly.\n\nSee documentation for details: https://seek-oss.github.io/braid-design-system/components/Inline#reversing-the-order");
 	const { collapseMobile, collapseTablet, collapseDesktop, collapsibleAlignmentProps } = require_collapsibleAlignmentProps.resolveCollapsibleAlignmentProps({
 		align,
@@ -21,13 +21,13 @@ const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false,
 		component,
 		...collapsibleAlignmentProps,
 		gap: space,
-		flexWrap: "wrap",
-		className: collapseBelow ? {
+		flexWrap: noWrap ? "nowrap" : "wrap",
+		className: [collapseBelow ? {
 			[require_Inline_css.fitContentMobile]: !collapseMobile,
 			[require_Inline_css.fitContentTablet]: !collapseTablet,
 			[require_Inline_css.fitContentDesktop]: !collapseDesktop,
 			[require_Inline_css.fitContentWide]: true
-		} : require_Inline_css.fitContentMobile,
+		} : require_Inline_css.fitContentMobile, noWrap && require_Inline_css.preventShrink],
 		...require_buildDataAttributes.default({
 			data,
 			validateRestProps: restProps

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

@@ -9,6 +9,7 @@ const fitContentMobile = (0, _vanilla_extract_css.style)({}, "fitContentMobile")
 const fitContentTablet = (0, _vanilla_extract_css.style)({}, "fitContentTablet");
 const fitContentDesktop = (0, _vanilla_extract_css.style)({}, "fitContentDesktop");
 const fitContentWide = (0, _vanilla_extract_css.style)({}, "fitContentWide");
+const preventShrink = (0, _vanilla_extract_css.style)({}, "preventShrink");
 const fitContentStyleRule = {
 	flexBasis: "auto",
 	width: "auto",
@@ -18,6 +19,7 @@ const fitContentStyleRule = {
 (0, _vanilla_extract_css.globalStyle)(`${fitContentTablet} > *`, require_responsiveStyle.responsiveStyle({ tablet: fitContentStyleRule }));
 (0, _vanilla_extract_css.globalStyle)(`${fitContentDesktop} > *`, require_responsiveStyle.responsiveStyle({ desktop: fitContentStyleRule }));
 (0, _vanilla_extract_css.globalStyle)(`${fitContentWide} > *`, require_responsiveStyle.responsiveStyle({ wide: fitContentStyleRule }));
+(0, _vanilla_extract_css.globalStyle)(`${preventShrink} > *`, { flexShrink: 0 });
 (0, _vanilla_extract_css_fileScope.endFileScope)();
 
 //#endregion
@@ -25,4 +27,5 @@ exports.fitContentDesktop = fitContentDesktop;
 exports.fitContentMobile = fitContentMobile;
 exports.fitContentStyleRule = fitContentStyleRule;
 exports.fitContentTablet = fitContentTablet;
-exports.fitContentWide = fitContentWide;
+exports.fitContentWide = fitContentWide;
+exports.preventShrink = preventShrink;

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

@@ -8,6 +8,7 @@ const fitContentMobile = style({}, "fitContentMobile");
 const fitContentTablet = style({}, "fitContentTablet");
 const fitContentDesktop = style({}, "fitContentDesktop");
 const fitContentWide = style({}, "fitContentWide");
+const preventShrink = style({}, "preventShrink");
 const fitContentStyleRule = {
 	flexBasis: "auto",
 	width: "auto",
@@ -17,7 +18,8 @@ globalStyle(`${fitContentMobile} > *`, fitContentStyleRule);
 globalStyle(`${fitContentTablet} > *`, responsiveStyle({ tablet: fitContentStyleRule }));
 globalStyle(`${fitContentDesktop} > *`, responsiveStyle({ desktop: fitContentStyleRule }));
 globalStyle(`${fitContentWide} > *`, responsiveStyle({ wide: fitContentStyleRule }));
+globalStyle(`${preventShrink} > *`, { flexShrink: 0 });
 endFileScope();
 
 //#endregion
-export { fitContentDesktop, fitContentMobile, fitContentStyleRule, fitContentTablet, fitContentWide };
+export { fitContentDesktop, fitContentMobile, fitContentStyleRule, fitContentTablet, fitContentWide, preventShrink };

package/dist/lib/components/Inline/Inline.d.cts

@@ -11,6 +11,7 @@ type InlineProps = CollapsibleAlignmentProps & {
   component?: (typeof validInlineComponents)[number];
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
+  noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion

package/dist/lib/components/Inline/Inline.d.mts

@@ -11,6 +11,7 @@ type InlineProps = CollapsibleAlignmentProps & {
   component?: (typeof validInlineComponents)[number];
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
+  noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion

package/dist/lib/components/Inline/Inline.mjs

@@ -1,12 +1,12 @@
 import buildDataAttributes_default from "../private/buildDataAttributes.mjs";
 import { Box } from "../Box/Box.mjs";
-import { fitContentDesktop, fitContentMobile, fitContentTablet, fitContentWide } from "./Inline.css.mjs";
+import { fitContentDesktop, fitContentMobile, fitContentTablet, fitContentWide, preventShrink } from "./Inline.css.mjs";
 import { resolveCollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
 import assert from "assert";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/lib/components/Inline/Inline.tsx
-const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false, component = "div", data, children, ...restProps }) => {
+const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false, component = "div", data, children, noWrap = false, ...restProps }) => {
 	assert(!reverse || reverse && collapseBelow, "The `reverse` prop should only be applied in combination with the `collapseBelow` prop.\nIf you do not want to collapse responsively, it is recommended to reorder the content directly.\n\nSee documentation for details: https://seek-oss.github.io/braid-design-system/components/Inline#reversing-the-order");
 	const { collapseMobile, collapseTablet, collapseDesktop, collapsibleAlignmentProps } = resolveCollapsibleAlignmentProps({
 		align,
@@ -19,13 +19,13 @@ const Inline = ({ space = "none", align, alignY, collapseBelow, reverse = false,
 		component,
 		...collapsibleAlignmentProps,
 		gap: space,
-		flexWrap: "wrap",
-		className: collapseBelow ? {
+		flexWrap: noWrap ? "nowrap" : "wrap",
+		className: [collapseBelow ? {
 			[fitContentMobile]: !collapseMobile,
 			[fitContentTablet]: !collapseTablet,
 			[fitContentDesktop]: !collapseDesktop,
 			[fitContentWide]: true
-		} : fitContentMobile,
+		} : fitContentMobile, noWrap && preventShrink],
 		...buildDataAttributes_default({
 			data,
 			validateRestProps: restProps

package/dist/lib/components/MenuItem/useMenuItem.d.mts

@@ -1,6 +1,7 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { BadgeProps } from "../Badge/Badge.mjs";
 import { ReactElement, ReactNode } from "react";
+
 //#region src/lib/components/MenuItem/useMenuItem.d.ts
 type MenuItemTone = 'critical' | undefined;
 interface UseMenuItemProps {

package/dist/lib/components/MenuRenderer/MenuRenderer.cjs

@@ -7,9 +7,9 @@ const require_Overlay = require('../private/Overlay/Overlay.cjs');
 const require_Popover = require('../private/Popover/Popover.cjs');
 const require_getNextIndex = require('../private/getNextIndex.cjs');
 const require_normalizeKey = require('../private/normalizeKey.cjs');
+const require_ScrollContainer = require('../private/ScrollContainer/ScrollContainer.cjs');
 const require_MenuRendererContext = require('./MenuRendererContext.cjs');
 const require_MenuItemDivider = require('../MenuItemDivider/MenuItemDivider.cjs');
-const require_ScrollContainer = require('../private/ScrollContainer/ScrollContainer.cjs');
 const require_MenuRenderer_actions = require('./MenuRenderer.actions.cjs');
 const require_MenuRendererItemContext = require('./MenuRendererItemContext.cjs');
 const require_MenuRenderer_css = require('./MenuRenderer.css.cjs');

package/dist/lib/components/MenuRenderer/MenuRenderer.d.mts

@@ -3,6 +3,7 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { PopoverProps } from "../private/Popover/Popover.mjs";
 import { width as width$1 } from "./MenuRenderer.css.mjs";
 import { FC, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
+
 //#region src/lib/components/MenuRenderer/MenuRenderer.d.ts
 interface TriggerProps {
   'aria-haspopup': boolean;

package/dist/lib/components/MenuRenderer/MenuRenderer.mjs

@@ -6,9 +6,9 @@ import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { Popover } from "../private/Popover/Popover.mjs";
 import { getNextIndex } from "../private/getNextIndex.mjs";
 import { normalizeKey } from "../private/normalizeKey.mjs";
+import { ScrollContainer } from "../private/ScrollContainer/ScrollContainer.mjs";
 import { MenuRendererContext } from "./MenuRendererContext.mjs";
 import { MenuItemDivider } from "../MenuItemDivider/MenuItemDivider.mjs";
-import { ScrollContainer } from "../private/ScrollContainer/ScrollContainer.mjs";
 import { actionTypes } from "./MenuRenderer.actions.mjs";
 import { MenuRendererItemContext } from "./MenuRendererItemContext.mjs";
 import { menuHeightLimit, menuYPadding, width } from "./MenuRenderer.css.mjs";

package/dist/lib/components/MonthPicker/MonthPicker.d.cts

@@ -1,5 +1,5 @@
 import { FieldGroupBaseProps, FieldLabelVariant } from "../private/FieldGroup/FieldGroup.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/MonthPicker/MonthPicker.d.ts
 interface MonthPickerValue {
@@ -39,7 +39,7 @@ declare const MonthPicker: {
     tabIndex,
     monthNames,
     ...restProps
-  }: MonthPickerProps): react_jsx_runtime0.JSX.Element;
+  }: MonthPickerProps): react.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/lib/components/MonthPicker/MonthPicker.d.mts

@@ -1,5 +1,5 @@
 import { FieldGroupBaseProps, FieldLabelVariant } from "../private/FieldGroup/FieldGroup.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/MonthPicker/MonthPicker.d.ts
 interface MonthPickerValue {
@@ -39,7 +39,7 @@ declare const MonthPicker: {
     tabIndex,
     monthNames,
     ...restProps
-  }: MonthPickerProps): react_jsx_runtime0.JSX.Element;
+  }: MonthPickerProps): react.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/lib/components/RadioGroup/RadioGroup.d.cts

@@ -1,8 +1,8 @@
 import { InlineFieldProps } from "../private/InlineField/InlineField.cjs";
 import { FieldGroupBaseProps, FieldLabelVariant } from "../private/FieldGroup/FieldGroup.cjs";
 import { RadioItemProps } from "./RadioItem.cjs";
+import * as react from "react";
 import { FormEvent, ReactElement } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/components/RadioGroup/RadioGroup.d.ts
 type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseProps & {
@@ -25,7 +25,7 @@ declare const RadioGroup: {
     tone,
     size,
     ...props
-  }: RadioGroupProps): react_jsx_runtime0.JSX.Element;
+  }: RadioGroupProps): react.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/lib/components/RadioGroup/RadioGroup.d.mts

@@ -1,8 +1,8 @@
 import { InlineFieldProps } from "../private/InlineField/InlineField.mjs";
 import { FieldGroupBaseProps, FieldLabelVariant } from "../private/FieldGroup/FieldGroup.mjs";
 import { RadioItemProps } from "./RadioItem.mjs";
+import * as react from "react";
 import { FormEvent, ReactElement } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/components/RadioGroup/RadioGroup.d.ts
 type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseProps & {
@@ -25,7 +25,7 @@ declare const RadioGroup: {
     tone,
     size,
     ...props
-  }: RadioGroupProps): react_jsx_runtime0.JSX.Element;
+  }: RadioGroupProps): react.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/lib/components/Stepper/StepperContext.d.mts

@@ -1,5 +1,6 @@
 import { tone as tone$1 } from "./Stepper.css.mjs";
 import { KeyboardEvent, ReactNode } from "react";
+
 //#region src/lib/components/Stepper/StepperContext.d.ts
 type StepperMode = 'linear' | 'non-linear';
 type StepperTone = Exclude<keyof typeof tone$1, 'formAccent'>;

package/dist/lib/components/Tag/Tag.playroom.d.cts

@@ -1,11 +1,11 @@
 import { TagProps } from "./Tag.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/Tag/Tag.playroom.d.ts
 declare const Tag: ({
   icon,
   size,
   ...restProps
-}: TagProps) => react_jsx_runtime0.JSX.Element;
+}: TagProps) => react.JSX.Element;
 //#endregion
 export { Tag };

package/dist/lib/components/Tag/Tag.playroom.d.mts

@@ -1,11 +1,11 @@
 import { TagProps } from "./Tag.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/Tag/Tag.playroom.d.ts
 declare const Tag: ({
   icon,
   size,
   ...restProps
-}: TagProps) => react_jsx_runtime0.JSX.Element;
+}: TagProps) => react.JSX.Element;
 //#endregion
 export { Tag };