braid-design-system 34.2.0 → 34.4.0

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

@@ -5,7 +5,7 @@ import * as react from "react";
 import { AllHTMLAttributes, ReactElement } from "react";
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
-declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>>;
+declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
 declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
@@ -25,7 +25,9 @@ interface ButtonIconProps {
   'aria-haspopup'?: NativeButtonProps['aria-haspopup'];
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: number;
+  loading?: boolean;
   data?: DataAttributeMap;
   bleed?: boolean;
   tooltipPlacement?: 'bottom' | 'top';

package/dist/lib/components/ButtonIcon/ButtonIcon.mjs

@@ -4,6 +4,7 @@ import { useFallbackId } from "../../hooks/useFallbackId.mjs";
 import { Text } from "../Text/Text.mjs";
 import { iconContainerSize, iconSize } from "../../hooks/useIcon/index.mjs";
 import { Bleed } from "../Bleed/Bleed.mjs";
+import { ButtonLoader } from "../Button/ButtonLoader.mjs";
 import { ButtonOverlays, useButtonStyles } from "../Button/Button.mjs";
 import { TooltipRenderer } from "../TooltipRenderer/TooltipRenderer.mjs";
 import { button } from "./ButtonIcon.css.mjs";
@@ -12,7 +13,11 @@ import { cloneElement, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.tsx
-const buttonIconVariants = ["soft", "transparent"];
+const buttonIconVariants = [
+	"soft",
+	"transparent",
+	"solid"
+];
 const buttonIconTones = ["neutral", "formAccent"];
 const buttonIconSizes = [
 	"small",
@@ -24,13 +29,16 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, tabIndex, data, ...restProps }, forwardedRef) => {
+const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, loading, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-pressed": ariaPressed, tabIndex, data, ...restProps }, forwardedRef) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
+		loading,
 		size: size === "small" ? "small" : "standard",
 		radius: "full"
 	});
+	const fallbackIconTone = variant === "solid" ? "neutral" : tone;
+	const resolvedIconTone = icon.props.tone || fallbackIconTone;
 	assert(icon && icon.props.size === void 0, "Icons cannot set the 'size' prop when passed to a ButtonIcon component");
 	const button$1 = /* @__PURE__ */ jsx(Box, {
 		component: "button",
@@ -42,6 +50,7 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 		"aria-haspopup": ariaHasPopUp,
 		"aria-expanded": ariaExpanded,
 		"aria-describedby": ariaDescribedBy,
+		"aria-pressed": ariaPressed,
 		onClick,
 		onKeyUp,
 		onKeyDown,
@@ -49,6 +58,7 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 		maxWidth: "content",
 		tabIndex,
 		...root,
+		disabled: loading,
 		className: [root.className, button],
 		...buildDataAttributes_default({
 			data,
@@ -70,8 +80,11 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 					size,
 					crop: true
 				}),
-				children: cloneElement(icon, {
-					tone: icon.props.tone || tone,
+				children: loading ? /* @__PURE__ */ jsx(ButtonLoader, {
+					tone: resolvedIconTone,
+					size: "fill"
+				}) : cloneElement(icon, {
+					tone: resolvedIconTone,
 					size: "fill"
 				})
 			})]

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/hooks/useFallbackId.cjs

@@ -4,7 +4,7 @@ let react = require("react");
 //#region src/lib/hooks/useFallbackId.ts
 const useFallbackId = (id) => {
 	const fallbackId = (0, react.useId)();
-	return id || fallbackId;
+	return id || `id-${fallbackId}`;
 };
 
 //#endregion

package/dist/lib/hooks/useFallbackId.mjs

@@ -3,7 +3,7 @@ import { useId } from "react";
 //#region src/lib/hooks/useFallbackId.ts
 const useFallbackId = (id) => {
 	const fallbackId = useId();
-	return id || fallbackId;
+	return id || `id-${fallbackId}`;
 };
 
 //#endregion

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;