braid-design-system 34.6.2 → 34.7.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # braid-design-system
 
+## 34.7.0
+
+### Minor Changes
+
+- **ButtonIcon:** Add `brandAccent` tone ([#2125](https://github.com/seek-oss/braid-design-system/pull/2125))
+
+  Introduces support for the `brandAccent` tone on `ButtonIcon`.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon tone="brandAccent" icon={<IconAdd />} label="Add" />
+  ```
+
+- **ButtonIcon:** Default accent tones to `solid` when `variant` is omitted ([#2125](https://github.com/seek-oss/braid-design-system/pull/2125))
+
+  Accent tones (`formAccent`, `brandAccent`) now default to `solid` when `variant` is omitted — existing `formAccent` usage can pass `variant="soft"` to keep the previous look.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon tone="formAccent" icon={<IconAdd />} label="Add" />
+  ```
+
+### Patch Changes
+
+- **Rating:** Expose the star graphic with `role="img"` so the `aria-label` is announced reliably by assistive technologies. ([#2122](https://github.com/seek-oss/braid-design-system/pull/2122))
+
 ## 34.6.2
 
 ### Patch Changes

package/dist/lib/components/Actions/Actions.cjs

@@ -25,4 +25,3 @@ const Actions = ({ size, data, children }) => {
 };
 //#endregion
 exports.Actions = Actions;
-exports.actionsSpace = actionsSpace;

package/dist/lib/components/Actions/Actions.mjs

@@ -24,4 +24,4 @@ const Actions = ({ size, data, children }) => {
 	});
 };
 //#endregion
-export { Actions, actionsSpace };
+export { Actions };

package/dist/lib/components/ButtonIcon/ButtonIcon.cjs

@@ -19,7 +19,11 @@ const buttonIconVariants = [
 	"transparent",
 	"solid"
 ];
-const buttonIconTones = ["neutral", "formAccent"];
+const buttonIconTones = [
+	"neutral",
+	"formAccent",
+	"brandAccent"
+];
 const buttonIconSizes = [
 	"small",
 	"standard",
@@ -30,7 +34,17 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-const ButtonIconContent = (0, react.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 resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
+	return {
+		variant: variantProp ?? (toneProp === "formAccent" || toneProp === "brandAccent" ? "solid" : "soft"),
+		tone: toneProp ?? "neutral"
+	};
+};
+const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "standard", tone: toneProp, variant: variantProp, 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 { tone, variant } = resolveToneAndVariant({
+		variant: variantProp,
+		tone: toneProp
+	});
 	const { root, content } = require_Button.useButtonStyles({
 		variant,
 		tone,

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

@@ -4,7 +4,7 @@ import { ButtonStyleProps } from "../Button/Button.cjs";
 import { AllHTMLAttributes, ReactElement } from "react";
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
 declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
-declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
+declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent' | 'brandAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;

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

@@ -4,7 +4,7 @@ import { ButtonStyleProps } from "../Button/Button.mjs";
 import { AllHTMLAttributes, ReactElement } from "react";
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
 declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
-declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
+declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent' | 'brandAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;

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

@@ -17,7 +17,11 @@ const buttonIconVariants = [
 	"transparent",
 	"solid"
 ];
-const buttonIconTones = ["neutral", "formAccent"];
+const buttonIconTones = [
+	"neutral",
+	"formAccent",
+	"brandAccent"
+];
 const buttonIconSizes = [
 	"small",
 	"standard",
@@ -28,7 +32,17 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-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 resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
+	return {
+		variant: variantProp ?? (toneProp === "formAccent" || toneProp === "brandAccent" ? "solid" : "soft"),
+		tone: toneProp ?? "neutral"
+	};
+};
+const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone: toneProp, variant: variantProp, 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 { tone, variant } = resolveToneAndVariant({
+		variant: variantProp,
+		tone: toneProp
+	});
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,

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

@@ -4,14 +4,14 @@ import { DataAttributeMap } from "../private/buildDataAttributes.cjs";
 import { CollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.cjs";
 import { FC } from "react";
 //#region src/lib/components/Inline/Inline.d.ts
-declare const validInlineComponents: readonly ["div", "span", "p", "nav", "ul", "ol", "li"];
+type ValidInlineComponent = 'div' | 'span' | 'p' | 'nav' | 'ul' | 'ol' | 'li';
 type InlineProps = CollapsibleAlignmentProps & {
   space: ResponsiveSpace;
-  component?: (typeof validInlineComponents)[number];
+  component?: ValidInlineComponent;
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
   noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion
-export { Inline, InlineProps, validInlineComponents };
+export { Inline, InlineProps };

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

@@ -4,14 +4,14 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { CollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
 import { FC } from "react";
 //#region src/lib/components/Inline/Inline.d.ts
-declare const validInlineComponents: readonly ["div", "span", "p", "nav", "ul", "ol", "li"];
+type ValidInlineComponent = 'div' | 'span' | 'p' | 'nav' | 'ul' | 'ol' | 'li';
 type InlineProps = CollapsibleAlignmentProps & {
   space: ResponsiveSpace;
-  component?: (typeof validInlineComponents)[number];
+  component?: ValidInlineComponent;
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
   noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion
-export { Inline, InlineProps, validInlineComponents };
+export { Inline, InlineProps };

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

@@ -5,22 +5,6 @@ let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 //#region src/lib/components/MenuRenderer/MenuRenderer.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
 const menuYPadding = (0, _vanilla_extract_css.createVar)("menuYPadding");
-(0, _vanilla_extract_css.style)({
-	width: "100vw",
-	height: "100vh"
-}, "backdrop");
-const triggerVars = {
-	top: (0, _vanilla_extract_css.createVar)("triggerVars_top"),
-	left: (0, _vanilla_extract_css.createVar)("triggerVars_left"),
-	bottom: (0, _vanilla_extract_css.createVar)("triggerVars_bottom"),
-	right: (0, _vanilla_extract_css.createVar)("triggerVars_right")
-};
-(0, _vanilla_extract_css.style)({
-	top: triggerVars.bottom,
-	bottom: triggerVars.top,
-	left: triggerVars.left,
-	right: triggerVars.right
-}, "menuPosition");
 const widthVar = (0, _vanilla_extract_css.createVar)("widthVar");
 const baseWidth = (0, _vanilla_extract_css.style)({ width: (0, _vanilla_extract_css_utils.calc)(widthVar).divide(4).toString() }, "baseWidth");
 const { small, medium, large } = require_vars_css.vars.contentWidth;
@@ -34,5 +18,4 @@ const menuHeightLimit = (0, _vanilla_extract_css.style)({ maxHeight: (0, _vanill
 //#endregion
 exports.menuHeightLimit = menuHeightLimit;
 exports.menuYPadding = menuYPadding;
-exports.triggerVars = triggerVars;
 exports.width = width;

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

@@ -5,22 +5,6 @@ import { calc } from "@vanilla-extract/css-utils";
 //#region src/lib/components/MenuRenderer/MenuRenderer.css.ts
 setFileScope("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
 const menuYPadding = createVar("menuYPadding");
-style({
-	width: "100vw",
-	height: "100vh"
-}, "backdrop");
-const triggerVars = {
-	top: createVar("triggerVars_top"),
-	left: createVar("triggerVars_left"),
-	bottom: createVar("triggerVars_bottom"),
-	right: createVar("triggerVars_right")
-};
-style({
-	top: triggerVars.bottom,
-	bottom: triggerVars.top,
-	left: triggerVars.left,
-	right: triggerVars.right
-}, "menuPosition");
 const widthVar = createVar("widthVar");
 const baseWidth = style({ width: calc(widthVar).divide(4).toString() }, "baseWidth");
 const { small, medium, large } = vars.contentWidth;
@@ -32,4 +16,4 @@ const width = styleVariants({
 const menuHeightLimit = style({ maxHeight: calc(vars.touchableSize).multiply(9.5).add(calc(menuYPadding).multiply(2)).toString() }, "menuHeightLimit");
 endFileScope();
 //#endregion
-export { menuHeightLimit, menuYPadding, triggerVars, width };
+export { menuHeightLimit, menuYPadding, width };

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

@@ -26,4 +26,4 @@ declare const MonthPicker: {
   displayName: string;
 };
 //#endregion
-export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps, MonthPickerProps };
+export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps };

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

@@ -26,4 +26,4 @@ declare const MonthPicker: {
   displayName: string;
 };
 //#endregion
-export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps, MonthPickerProps };
+export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps };

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

@@ -11,7 +11,6 @@ const focusRing = (0, _vanilla_extract_css.style)([{ outlineOffset: 0 }, require
 	borderRadius
 })], "focusRing");
 const hover = (0, _vanilla_extract_css.style)({}, "hover");
-(0, _vanilla_extract_css.style)(require_colorModeStyle.colorModeStyle({ lightMode: { opacity: .3 } }), "lightModeCurrentKeyline");
 const darkModeCurrentKeyline = (0, _vanilla_extract_css.style)(require_colorModeStyle.colorModeStyle({ darkMode: { opacity: .3 } }), "darkModeCurrentKeyline");
 const current = (0, _vanilla_extract_css.style)({ opacity: .075 }, "current");
 const background = (0, _vanilla_extract_css.style)({ selectors: { [`${hover}:hover &:not(${current})`]: { opacity: .5 } } }, "background");

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

@@ -11,7 +11,6 @@ const focusRing = style([{ outlineOffset: 0 }, atoms({
 	borderRadius
 })], "focusRing");
 const hover = style({}, "hover");
-style(colorModeStyle({ lightMode: { opacity: .3 } }), "lightModeCurrentKeyline");
 const darkModeCurrentKeyline = style(colorModeStyle({ darkMode: { opacity: .3 } }), "darkModeCurrentKeyline");
 const current = style({ opacity: .075 }, "current");
 const background = style({ selectors: { [`${hover}:hover &:not(${current})`]: { opacity: .5 } } }, "background");

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

@@ -45,6 +45,7 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			component: "span",
 			className: require_Rating_css.inlineFlex,
+			role: "img",
 			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
 			children: variant === "minimal" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
 				percent: 100,

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

@@ -42,6 +42,7 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
 		children: [/* @__PURE__ */ jsx(Box, {
 			component: "span",
 			className: inlineFlex,
+			role: "img",
 			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
 			children: variant === "minimal" ? /* @__PURE__ */ jsx(RatingStar, {
 				percent: 100,

package/dist/lib/components/Stepper/StepperContext.cjs

@@ -6,6 +6,16 @@ const StepContext = (0, react.createContext)({
 	stepNumber: 0,
 	isLast: false
 });
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
 const StepperContext = (0, react.createContext)(null);
 const getNextStep = (moveAmount, current, maxStep) => {
 	if (current === null) return moveAmount > 0 ? 1 : maxStep;
@@ -18,34 +28,34 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 	const stepCount = isLinear ? progress : stepCountProp;
 	const [stepperState, dispatch] = (0, react.useReducer)((state, action) => {
 		switch (action.type) {
-			case 3:
-			case 2: return {
+			case NAV_UP:
+			case NAV_LEFT: return {
 				...state,
 				focusedStep: getNextStep(-1, state.focusedStep, stepCount)
 			};
-			case 1:
-			case 0: return {
+			case NAV_DOWN:
+			case NAV_RIGHT: return {
 				...state,
 				focusedStep: getNextStep(1, state.focusedStep, stepCount)
 			};
-			case 4: return {
+			case NAV_HOME: return {
 				...state,
 				focusedStep: 1
 			};
-			case 5: return {
+			case NAV_END: return {
 				...state,
 				focusedStep: stepCount
 			};
-			case 9:
-			case 6: return {
+			case NAV_BLURRED:
+			case NAV_TAB: return {
 				...state,
 				focusedStep: null
 			};
-			case 7: return {
+			case NAV_CLICKED: return {
 				...state,
 				focusedStep: action.value
 			};
-			case 8: return {
+			case NAV_FOCUSED: return {
 				...state,
 				focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
 			};
@@ -64,27 +74,27 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 		const targetKey = require_normalizeKey.normalizeKey(event);
 		if (targetKey === "Tab") return;
 		const action = {
-			ArrowRight: { type: 0 },
-			ArrowLeft: { type: 2 },
-			ArrowUp: { type: 3 },
-			ArrowDown: { type: 1 },
-			Home: { type: 4 },
-			End: { type: 5 }
+			ArrowRight: { type: NAV_RIGHT },
+			ArrowLeft: { type: NAV_LEFT },
+			ArrowUp: { type: NAV_UP },
+			ArrowDown: { type: NAV_DOWN },
+			Home: { type: NAV_HOME },
+			End: { type: NAV_END }
 		};
 		if (action[targetKey]) dispatch(action[targetKey]);
 	};
 	const onKeyDown = (event) => {
 		const targetKey = require_normalizeKey.normalizeKey(event);
 		if (targetKey === "Tab") {
-			dispatch({ type: 6 });
+			dispatch({ type: NAV_TAB });
 			return;
 		}
 		if (targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey)) event.preventDefault();
 	};
-	const onFocus = () => dispatch({ type: 8 });
-	const onBlur = () => dispatch({ type: 9 });
+	const onFocus = () => dispatch({ type: NAV_FOCUSED });
+	const onBlur = () => dispatch({ type: NAV_BLURRED });
 	const onClick = (index) => dispatch({
-		type: 7,
+		type: NAV_CLICKED,
 		value: index
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperContext.Provider, {

package/dist/lib/components/Stepper/StepperContext.mjs

@@ -6,6 +6,16 @@ const StepContext = createContext({
 	stepNumber: 0,
 	isLast: false
 });
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
 const StepperContext = createContext(null);
 const getNextStep = (moveAmount, current, maxStep) => {
 	if (current === null) return moveAmount > 0 ? 1 : maxStep;
@@ -18,34 +28,34 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 	const stepCount = isLinear ? progress : stepCountProp;
 	const [stepperState, dispatch] = useReducer((state, action) => {
 		switch (action.type) {
-			case 3:
-			case 2: return {
+			case NAV_UP:
+			case NAV_LEFT: return {
 				...state,
 				focusedStep: getNextStep(-1, state.focusedStep, stepCount)
 			};
-			case 1:
-			case 0: return {
+			case NAV_DOWN:
+			case NAV_RIGHT: return {
 				...state,
 				focusedStep: getNextStep(1, state.focusedStep, stepCount)
 			};
-			case 4: return {
+			case NAV_HOME: return {
 				...state,
 				focusedStep: 1
 			};
-			case 5: return {
+			case NAV_END: return {
 				...state,
 				focusedStep: stepCount
 			};
-			case 9:
-			case 6: return {
+			case NAV_BLURRED:
+			case NAV_TAB: return {
 				...state,
 				focusedStep: null
 			};
-			case 7: return {
+			case NAV_CLICKED: return {
 				...state,
 				focusedStep: action.value
 			};
-			case 8: return {
+			case NAV_FOCUSED: return {
 				...state,
 				focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
 			};
@@ -64,27 +74,27 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 		const targetKey = normalizeKey(event);
 		if (targetKey === "Tab") return;
 		const action = {
-			ArrowRight: { type: 0 },
-			ArrowLeft: { type: 2 },
-			ArrowUp: { type: 3 },
-			ArrowDown: { type: 1 },
-			Home: { type: 4 },
-			End: { type: 5 }
+			ArrowRight: { type: NAV_RIGHT },
+			ArrowLeft: { type: NAV_LEFT },
+			ArrowUp: { type: NAV_UP },
+			ArrowDown: { type: NAV_DOWN },
+			Home: { type: NAV_HOME },
+			End: { type: NAV_END }
 		};
 		if (action[targetKey]) dispatch(action[targetKey]);
 	};
 	const onKeyDown = (event) => {
 		const targetKey = normalizeKey(event);
 		if (targetKey === "Tab") {
-			dispatch({ type: 6 });
+			dispatch({ type: NAV_TAB });
 			return;
 		}
 		if (targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey)) event.preventDefault();
 	};
-	const onFocus = () => dispatch({ type: 8 });
-	const onBlur = () => dispatch({ type: 9 });
+	const onFocus = () => dispatch({ type: NAV_FOCUSED });
+	const onBlur = () => dispatch({ type: NAV_BLURRED });
 	const onClick = (index) => dispatch({
-		type: 7,
+		type: NAV_CLICKED,
 		value: index
 	});
 	return /* @__PURE__ */ jsx(StepperContext.Provider, {

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -156,5 +156,3 @@ const TooltipRenderer = ({ id, tooltip, placement = "top", children }) => {
 //#endregion
 exports.TooltipContent = TooltipContent;
 exports.TooltipRenderer = TooltipRenderer;
-exports.TooltipTextDefaultsProvider = TooltipTextDefaultsProvider;
-exports.offsetSpace = offsetSpace;

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -152,4 +152,4 @@ const TooltipRenderer = ({ id, tooltip, placement = "top", children }) => {
 	})] });
 };
 //#endregion
-export { TooltipContent, TooltipRenderer, TooltipTextDefaultsProvider, offsetSpace };
+export { TooltipContent, TooltipRenderer };

package/dist/lib/components/private/InlineField/InlineField.css.cjs

@@ -67,7 +67,6 @@ exports.disabledRadioIndicator = disabledRadioIndicator;
 exports.fakeField = fakeField;
 exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
-exports.indicator = indicator;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;
 exports.radioIndicator = radioIndicator;

package/dist/lib/components/private/InlineField/InlineField.css.mjs

@@ -61,4 +61,4 @@ const radioIndicator = [indicator, style({
 }, "radioScale")];
 endFileScope();
 //#endregion
-export { checkboxIndicator, children, disabledRadioIndicator, fakeField, hideBorderOnDarkBackgroundInLightMode, hoverOverlay, indicator, isMixed, labelOffset, radioIndicator, realField, selected, sizeVars };
+export { checkboxIndicator, children, disabledRadioIndicator, fakeField, hideBorderOnDarkBackgroundInLightMode, hoverOverlay, isMixed, labelOffset, radioIndicator, realField, selected, sizeVars };

package/dist/lib/components/private/InlineField/StyledInput.d.cts

@@ -22,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, InlineFieldTone, StyledInputProps };
+export { CheckboxChecked, StyledInputProps };

package/dist/lib/components/private/InlineField/StyledInput.d.mts

@@ -22,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, InlineFieldTone, StyledInputProps };
+export { CheckboxChecked, StyledInputProps };

package/dist/lib/components/private/Popover/Popover.css.cjs

@@ -10,10 +10,9 @@ const backdrop = (0, _vanilla_extract_css.style)({
 }, "backdrop");
 const placementModifier = (0, _vanilla_extract_css.createVar)("placementModifier");
 const invertPlacement = (0, _vanilla_extract_css.style)({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
-const transitionThreshold = "xxsmall";
 const popupAnimation = (0, _vanilla_extract_css.keyframes)({ from: {
 	opacity: 0,
-	transform: `translateY(${(0, _vanilla_extract_css_utils.calc)(require_vars_css.vars.space[transitionThreshold]).multiply((0, _vanilla_extract_css.fallbackVar)(placementModifier, "1"))})`
+	transform: `translateY(${(0, _vanilla_extract_css_utils.calc)(require_vars_css.vars.space["xxsmall"]).multiply((0, _vanilla_extract_css.fallbackVar)(placementModifier, "1"))})`
 } }, "popupAnimation");
 const animation = (0, _vanilla_extract_css.style)({
 	animationName: popupAnimation,
@@ -29,4 +28,3 @@ exports.animation = animation;
 exports.backdrop = backdrop;
 exports.delayVisibility = delayVisibility;
 exports.invertPlacement = invertPlacement;
-exports.transitionThreshold = transitionThreshold;

package/dist/lib/components/private/Popover/Popover.css.mjs

@@ -10,10 +10,9 @@ const backdrop = style({
 }, "backdrop");
 const placementModifier = createVar("placementModifier");
 const invertPlacement = style({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
-const transitionThreshold = "xxsmall";
 const popupAnimation = keyframes({ from: {
 	opacity: 0,
-	transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
+	transform: `translateY(${calc(vars.space["xxsmall"]).multiply(fallbackVar(placementModifier, "1"))})`
 } }, "popupAnimation");
 const animation = style({
 	animationName: popupAnimation,
@@ -25,4 +24,4 @@ const animation = style({
 const delayVisibility = style({ animationDelay: "250ms" }, "delayVisibility");
 endFileScope();
 //#endregion
-export { animation, backdrop, delayVisibility, invertPlacement, transitionThreshold };
+export { animation, backdrop, delayVisibility, invertPlacement };

package/dist/lib/components/private/Popover/Popover.d.cts

@@ -28,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverPlacementData, PopoverProps };
+export { PopoverProps };

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

@@ -28,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverPlacementData, PopoverProps };
+export { PopoverProps };

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

@@ -23,6 +23,10 @@ const snippets = [
 	{
 		description: "Form accent",
 		code: "<ButtonIcon tone=\"formAccent\" icon={<IconAdd />} label=\"Add\" />"
+	},
+	{
+		description: "Brand accent",
+		code: "<ButtonIcon tone=\"brandAccent\" icon={<IconAdd />} label=\"Add\" />"
 	}
 ];
 //#endregion

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

@@ -23,6 +23,10 @@ const snippets = [
 	{
 		description: "Form accent",
 		code: "<ButtonIcon tone=\"formAccent\" icon={<IconAdd />} label=\"Add\" />"
+	},
+	{
+		description: "Brand accent",
+		code: "<ButtonIcon tone=\"brandAccent\" icon={<IconAdd />} label=\"Add\" />"
 	}
 ];
 //#endregion

package/dist/lib/themes/tokenType.d.cts

@@ -174,4 +174,4 @@ interface BraidTokens {
   };
 }
 //#endregion
-export { BraidTokens, TextBreakpoint, TextDefinition };
+export { BraidTokens, TextDefinition };

package/dist/lib/themes/tokenType.d.mts

@@ -174,4 +174,4 @@ interface BraidTokens {
   };
 }
 //#endregion
-export { BraidTokens, TextBreakpoint, TextDefinition };
+export { BraidTokens, TextDefinition };

package/dist/lib/utils/a11y/index.cjs

@@ -103,8 +103,6 @@ function getAccessibleVariant(color, background) {
 	return findClosestAccessibleDarkerColor(color, background ?? getLightVariant(color), AA_TEXT_CONTRAST);
 }
 //#endregion
-exports.contrast = contrast;
-exports.findClosestAccessibleDarkerColor = findClosestAccessibleDarkerColor;
 exports.findClosestAccessibleLighterColor = findClosestAccessibleLighterColor;
 exports.getAccessibleVariant = getAccessibleVariant;
 exports.getLightVariant = getLightVariant;

package/dist/lib/utils/a11y/index.mjs

@@ -103,4 +103,4 @@ function getAccessibleVariant(color, background) {
 	return findClosestAccessibleDarkerColor(color, background ?? getLightVariant(color), AA_TEXT_CONTRAST);
 }
 //#endregion
-export { contrast, findClosestAccessibleDarkerColor, findClosestAccessibleLighterColor, getAccessibleVariant, getLightVariant };
+export { findClosestAccessibleLighterColor, getAccessibleVariant, getLightVariant };

package/package.json

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