braid-design-system 34.2.0 → 34.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 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

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

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/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.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"];

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.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/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 };

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

@@ -1,5 +1,5 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/TextDropdown/TextDropdown.d.ts
 interface TextDropdownOption<Value> {
@@ -27,6 +27,6 @@ declare function TextDropdown<Value>({
   data,
   tabIndex,
   ...restProps
-}: TextDropdownProps<Value>): react_jsx_runtime0.JSX.Element;
+}: TextDropdownProps<Value>): react.JSX.Element;
 //#endregion
 export { TextDropdown, TextDropdownProps };

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

@@ -1,5 +1,5 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/TextDropdown/TextDropdown.d.ts
 interface TextDropdownOption<Value> {
@@ -27,6 +27,6 @@ declare function TextDropdown<Value>({
   data,
   tabIndex,
   ...restProps
-}: TextDropdownProps<Value>): react_jsx_runtime0.JSX.Element;
+}: TextDropdownProps<Value>): react.JSX.Element;
 //#endregion
 export { TextDropdown, TextDropdownProps };

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

@@ -3,6 +3,7 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import * as react from "react";
 import { ReactElement } from "react";
+
 //#region src/lib/components/TextLink/TextLink.d.ts
 interface TextLinkStyles {
   weight?: 'regular' | 'weak';

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

@@ -52,6 +52,7 @@ const Textarea = (0, react.forwardRef)(({ value, onChange, onBlur, onFocus, onPa
 			zIndex: 0,
 			background,
 			borderRadius,
+			className: require_Textarea_css.focusRing,
 			children: [
 				hasHighlights ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 					ref: highlightsRef,

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

@@ -1,5 +1,6 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_vars_css = require('../../themes/vars.css.cjs');
+const require_outlineStyle = require('../../css/outlineStyle.cjs');
 const require_fieldPaddingX = require('../private/Field/fieldPaddingX.cjs');
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
@@ -9,8 +10,10 @@ let _vanilla_extract_css = require("@vanilla-extract/css");
 const field = (0, _vanilla_extract_css.style)({
 	resize: "vertical",
 	background: "transparent",
-	minHeight: require_vars_css.vars.touchableSize
+	minHeight: require_vars_css.vars.touchableSize,
+	outline: "none"
 }, "field");
+const focusRing = (0, _vanilla_extract_css.style)(require_outlineStyle.outlineStyle("&:focus-within"), "focusRing");
 const highlights = (0, _vanilla_extract_css.style)({
 	color: "transparent !important",
 	wordBreak: "break-word",
@@ -33,5 +36,6 @@ const scrollbarBorderOffset = (0, _vanilla_extract_css.style)({ borderRight: `${
 //#endregion
 exports.clipScrollBar = clipScrollBar;
 exports.field = field;
+exports.focusRing = focusRing;
 exports.highlights = highlights;
 exports.scrollbarBorderOffset = scrollbarBorderOffset;

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

@@ -1,4 +1,5 @@
 import { vars } from "../../themes/vars.css.mjs";
+import { outlineStyle } from "../../css/outlineStyle.mjs";
 import { fieldPaddingX } from "../private/Field/fieldPaddingX.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
@@ -8,8 +9,10 @@ setFileScope("src/lib/components/Textarea/Textarea.css.ts", "braid-design-system
 const field = style({
 	resize: "vertical",
 	background: "transparent",
-	minHeight: vars.touchableSize
+	minHeight: vars.touchableSize,
+	outline: "none"
 }, "field");
+const focusRing = style(outlineStyle("&:focus-within"), "focusRing");
 const highlights = style({
 	color: "transparent !important",
 	wordBreak: "break-word",
@@ -30,4 +33,4 @@ const scrollbarBorderOffset = style({ borderRight: `${vars.borderWidth.standard}
 endFileScope();
 
 //#endregion
-export { clipScrollBar, field, highlights, scrollbarBorderOffset };
+export { clipScrollBar, field, focusRing, highlights, scrollbarBorderOffset };

package/dist/lib/components/Textarea/Textarea.mjs

@@ -2,7 +2,7 @@ import { Box } from "../Box/Box.mjs";
 import { Field } from "../private/Field/Field.mjs";
 import { getCharacterLimitStatus } from "../private/Field/getCharacterLimitStatus.mjs";
 import { formatRanges } from "./formatRanges.mjs";
-import { clipScrollBar, field, highlights, scrollbarBorderOffset } from "./Textarea.css.mjs";
+import { clipScrollBar, field, focusRing, highlights, scrollbarBorderOffset } from "./Textarea.css.mjs";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -51,6 +51,7 @@ const Textarea = forwardRef(({ value, onChange, onBlur, onFocus, onPaste, placeh
 			zIndex: 0,
 			background,
 			borderRadius,
+			className: focusRing,
 			children: [
 				hasHighlights ? /* @__PURE__ */ jsx(Box, {
 					ref: highlightsRef,

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

@@ -1,6 +1,7 @@
 import { ReactNodeNoStrings } from "../private/ReactNodeNoStrings.mjs";
 import { PopoverProps } from "../private/Popover/Popover.mjs";
 import { FC, ReactNode, RefCallback } from "react";
+
 //#region src/lib/components/TooltipRenderer/TooltipRenderer.d.ts
 interface TriggerProps {
   ref: RefCallback<HTMLElement>;

package/dist/lib/components/icons/IconContainer.d.mts

@@ -1,5 +1,6 @@
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import { ReactElement } from "react";
+
 //#region src/lib/components/icons/IconContainer.d.ts
 type IconContainerProps = UseIconProps;
 //#endregion

package/dist/lib/components/private/Field/Field.d.mts

@@ -2,6 +2,7 @@ import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { FieldLabelProps } from "../../FieldLabel/FieldLabel.mjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.mjs";
 import { AllHTMLAttributes, ReactNode } from "react";
+
 //#region src/lib/components/private/Field/Field.d.ts
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant = {

package/dist/lib/components/private/FieldGroup/FieldGroup.d.mts

@@ -2,6 +2,7 @@ import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { FieldLabelProps } from "../../FieldLabel/FieldLabel.mjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.mjs";
 import { AllHTMLAttributes } from "react";
+
 //#region src/lib/components/private/FieldGroup/FieldGroup.d.ts
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant = {

package/dist/lib/components/private/Modal/ModalContent.d.mts

@@ -2,6 +2,7 @@ import { ReactNodeNoStrings } from "../ReactNodeNoStrings.mjs";
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { ReactNode, Ref } from "react";
+
 //#region src/lib/components/private/Modal/ModalContent.d.ts
 type ModalContentCommonProps = {
   id?: string;

package/dist/lib/components/private/Typography/Typography.d.mts

@@ -2,6 +2,7 @@ import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { UseIconProps } from "../../../hooks/useIcon/index.mjs";
 import { ReactElement, ReactNode } from "react";
+
 //#region src/lib/components/private/Typography/Typography.d.ts
 interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
   children?: ReactNode;

package/dist/lib/playroom/FrameComponent.d.cts

@@ -1,6 +1,6 @@
 import { BraidTheme } from "../themes/makeBraidTheme.cjs";
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/FrameComponent.d.ts
 interface Props {
@@ -12,6 +12,6 @@ declare const _default: ({
   theme,
   children,
   frameSettings
-}: Props) => react_jsx_runtime0.JSX.Element;
+}: Props) => react.JSX.Element;
 //#endregion
 export { _default };

package/dist/lib/playroom/FrameComponent.d.mts

@@ -1,6 +1,6 @@
 import { BraidTheme } from "../themes/makeBraidTheme.mjs";
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/FrameComponent.d.ts
 interface Props {
@@ -12,6 +12,6 @@ declare const _default: ({
   theme,
   children,
   frameSettings
-}: Props) => react_jsx_runtime0.JSX.Element;
+}: Props) => react.JSX.Element;
 //#endregion
 export { _default };

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

@@ -1,5 +1,5 @@
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/Placeholder/Placeholder.d.ts
 interface PlaceholderProps {
@@ -17,6 +17,6 @@ declare const Placeholder: ({
   shape,
   image,
   imageSize
-}: PlaceholderProps) => react_jsx_runtime0.JSX.Element;
+}: PlaceholderProps) => react.JSX.Element;
 //#endregion
 export { Placeholder };

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

@@ -1,5 +1,5 @@
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/Placeholder/Placeholder.d.ts
 interface PlaceholderProps {
@@ -17,6 +17,6 @@ declare const Placeholder: ({
   shape,
   image,
   imageSize
-}: PlaceholderProps) => react_jsx_runtime0.JSX.Element;
+}: PlaceholderProps) => react.JSX.Element;
 //#endregion
 export { Placeholder };

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

@@ -1,11 +1,11 @@
+import * as react from "react";
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.ts
 declare const logoForBrand: {
-  seek: react_jsx_runtime0.JSX.Element;
-  jobsdb: react_jsx_runtime0.JSX.Element;
-  jobstreet: react_jsx_runtime0.JSX.Element;
+  seek: react.JSX.Element;
+  jobsdb: react.JSX.Element;
+  jobstreet: react.JSX.Element;
 };
 interface PlaceholderHeaderProps {
   brand?: keyof typeof logoForBrand;

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

@@ -1,11 +1,11 @@
+import * as react from "react";
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.ts
 declare const logoForBrand: {
-  seek: react_jsx_runtime0.JSX.Element;
-  jobsdb: react_jsx_runtime0.JSX.Element;
-  jobstreet: react_jsx_runtime0.JSX.Element;
+  seek: react.JSX.Element;
+  jobsdb: react.JSX.Element;
+  jobstreet: react.JSX.Element;
 };
 interface PlaceholderHeaderProps {
   brand?: keyof typeof logoForBrand;

package/dist/lib/playroom/playroomState.d.mts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 //#region src/lib/playroom/playroomState.d.ts
 interface StateProp {
   stateName?: string;

package/dist/lib/playroom/snippets/Inline.cjs

@@ -12,6 +12,10 @@ const snippets = [
 	{
 		description: "Responsive space",
 		code: "<Inline space={{ mobile: \"small\", tablet: \"large\" }}>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
+	},
+	{
+		description: "No wrap",
+		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
 

package/dist/lib/playroom/snippets/Inline.mjs

@@ -11,6 +11,10 @@ const snippets = [
 	{
 		description: "Responsive space",
 		code: "<Inline space={{ mobile: \"small\", tablet: \"large\" }}>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
+	},
+	{
+		description: "No wrap",
+		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
 

package/dist/lib/playroom/snippets/SteppedSection.cjs

@@ -3,7 +3,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
 
 //#endregion

package/dist/lib/playroom/snippets/SteppedSection.mjs

@@ -2,7 +2,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
 
 //#endregion

package/dist/lib/themes/baseTokens/nvl.cjs

@@ -40,41 +40,41 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 					"1": {
 						mobile: {
 							fontSize: 28,
-							lineGap: 11
+							lineGap: 17
 						},
 						tablet: {
 							fontSize: 36,
-							lineGap: 14
+							lineGap: 22
 						}
 					},
 					"2": {
 						mobile: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						},
 						tablet: {
 							fontSize: 30,
-							lineGap: 13
+							lineGap: 18
 						}
 					},
 					"3": {
 						mobile: {
 							fontSize: 22,
-							lineGap: 10
+							lineGap: 14
 						},
 						tablet: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						}
 					},
 					"4": {
 						mobile: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						},
 						tablet: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						}
 					}
 				}

package/dist/lib/themes/baseTokens/nvl.mjs

@@ -39,41 +39,41 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 					"1": {
 						mobile: {
 							fontSize: 28,
-							lineGap: 11
+							lineGap: 17
 						},
 						tablet: {
 							fontSize: 36,
-							lineGap: 14
+							lineGap: 22
 						}
 					},
 					"2": {
 						mobile: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						},
 						tablet: {
 							fontSize: 30,
-							lineGap: 13
+							lineGap: 18
 						}
 					},
 					"3": {
 						mobile: {
 							fontSize: 22,
-							lineGap: 10
+							lineGap: 14
 						},
 						tablet: {
 							fontSize: 24,
-							lineGap: 11
+							lineGap: 15
 						}
 					},
 					"4": {
 						mobile: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						},
 						tablet: {
 							fontSize: 20,
-							lineGap: 9
+							lineGap: 12
 						}
 					}
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.2.0",
+  "version": "34.3.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {