@envive-ai/react-toolkit 0.3.66 → 0.3.67

package/dist/components/SuggestionButton/SuggestionButton.js

@@ -1,4 +1,5 @@
 import { ButtonBase } from "../ButtonBase/ButtonBase.js";
+import { borderedVariants, getSuggestionButtonVariantClasses } from "./variantClasses.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
@@ -8,134 +9,12 @@ import FourPointStar from "@envive-ai/react-icons/FourPointStar";
 const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
 const SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = "spiffy-suggestion-button-answer-class";
 const SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = "spiffy-suggestion-button-text-class";
-const BORDER_CLASS = "spiffy-tw-border";
-const TEXT_LINK_CLASSES = [
-	"spiffy-tw-text-[--spiffy-colors-text-link]",
-	"spiffy-tw-fill-[--spiffy-colors-text-link]",
-	"spiffy-tw-stroke-[--spiffy-colors-text-link]"
-];
-const TEXT_LIGHT_CLASSES = [
-	"spiffy-tw-text-[--spiffy-colors-text-light]",
-	"spiffy-tw-fill-[--spiffy-colors-text-light]",
-	"spiffy-tw-stroke-[--spiffy-colors-text-light]"
-];
-const TEXT_PRIMARY_CLASSES = [
-	"spiffy-tw-text-[--spiffy-colors-text-primary]",
-	"spiffy-tw-fill-[--spiffy-colors-text-primary]",
-	"spiffy-tw-stroke-[--spiffy-colors-text-primary]"
-];
-const ACCENT_PRIMARY_CLASSES = ["spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-stroke-[--spiffy-colors-accent-primary]"];
-const DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-dark]", "spiffy-tw-border-[--spiffy-colors-background-dark]"];
-const SECONDARY_DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]", "spiffy-tw-border-[--spiffy-colors-background-secondary-dark]"];
-const variantClassMap = new Map([
-	["outlined", ["spiffy-tw-border-[--spiffy-colors-border-outline]", ...TEXT_LINK_CLASSES]],
-	["outlinedLight", [
-		"spiffy-tw-border-[--spiffy-colors-border-outline]",
-		"spiffy-tw-bg-[--spiffy-colors-background-light]",
-		...TEXT_LINK_CLASSES,
-		BORDER_CLASS
-	]],
-	["primary", [
-		"spiffy-tw-bg-[--spiffy-colors-background-primary]",
-		"spiffy-tw-border-[--spiffy-colors-background-primary]",
-		...TEXT_LIGHT_CLASSES,
-		BORDER_CLASS
-	]],
-	["secondary", [
-		"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
-		"spiffy-tw-text-[--spiffy-colors-text-link]",
-		"spiffy-tw-border-[--spiffy-colors-background-secondary]",
-		...ACCENT_PRIMARY_CLASSES,
-		BORDER_CLASS
-	]],
-	["tertiary", [
-		"spiffy-tw-bg-[--spiffy-colors-background-tertiary]",
-		"spiffy-tw-border-[--spiffy-colors-background-tertiary]",
-		...TEXT_LINK_CLASSES,
-		BORDER_CLASS
-	]],
-	["dark", [
-		...DARK_BACKGROUND_CLASSES,
-		...TEXT_LIGHT_CLASSES,
-		BORDER_CLASS
-	]],
-	["darkPrimary", [
-		...DARK_BACKGROUND_CLASSES,
-		"spiffy-tw-text-[--spiffy-colors-text-light]",
-		...ACCENT_PRIMARY_CLASSES,
-		BORDER_CLASS
-	]],
-	["darkAccent", [
-		...DARK_BACKGROUND_CLASSES,
-		"spiffy-tw-text-[--spiffy-colors-text-light]",
-		"spiffy-tw-fill-[--spiffy-colors-text-accent]",
-		"spiffy-tw-stroke-[--spiffy-colors-text-accent]",
-		BORDER_CLASS
-	]],
-	["darkAccentContrast", [
-		...DARK_BACKGROUND_CLASSES,
-		"spiffy-tw-text-[--spiffy-colors-text-light]",
-		"spiffy-tw-fill-[--spiffy-colors-accent-primary]",
-		"spiffy-tw-stroke-[--spiffy-colors-accent-primary]",
-		BORDER_CLASS
-	]],
-	["transparent", [
-		"spiffy-tw-bg-transparent",
-		"spiffy-tw-border-[--spiffy-colors-background-light]",
-		"spiffy-tw-text-[--spiffy-colors-text-light]",
-		"spiffy-tw-fill-transparent",
-		"spiffy-tw-stroke-[--spiffy-colors-text-light]",
-		BORDER_CLASS
-	]],
-	["transparentDark", [
-		"spiffy-tw-bg-transparent",
-		"spiffy-tw-border-[--spiffy-colors-border-light]",
-		"spiffy-tw-text-[--spiffy-colors-text-primary]",
-		"spiffy-tw-fill-transparent",
-		"spiffy-tw-stroke-[--spiffy-colors-text-primary]",
-		BORDER_CLASS
-	]],
-	["secondaryDark", [
-		...SECONDARY_DARK_BACKGROUND_CLASSES,
-		...TEXT_LINK_CLASSES,
-		BORDER_CLASS
-	]],
-	["secondaryAccent", [
-		...SECONDARY_DARK_BACKGROUND_CLASSES,
-		"spiffy-tw-text-[--spiffy-colors-text-link]",
-		...ACCENT_PRIMARY_CLASSES,
-		BORDER_CLASS
-	]],
-	["lightDark", [
-		"spiffy-tw-bg-[--spiffy-colors-background-light]",
-		"spiffy-tw-border-[--spiffy-colors-background-dark]",
-		...TEXT_PRIMARY_CLASSES,
-		BORDER_CLASS
-	]]
-]);
 const Icon = ({ isAnswer, variant }) => {
 	if (isAnswer) return void 0;
 	if (variant === "transparentDark") return /* @__PURE__ */ jsx(OutlinedStar, {});
 	return /* @__PURE__ */ jsx(FourPointStar, {});
 };
-const borderedVariants = [
-	"outlined",
-	"outlinedLight",
-	"primary",
-	"secondary",
-	"tertiary",
-	"dark",
-	"darkAccent",
-	"darkAccentContrast",
-	"darkPrimary",
-	"transparent",
-	"transparentDark",
-	"secondaryDark",
-	"secondaryAccent",
-	"lightDark"
-];
-const hoverTransform = (variantClass) => variantClass?.map((className) => `hover:${className}`);
-const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText, borderRadius = "lg", isAnswer = false, dataAttributes, dataTestId, onClick }) => {
+const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText, borderRadius = "lg", isAnswer = false, dataAttributes, dataTestId, onClick, ariaHidden, tabIndex }) => {
 	const buttonClassName = classNames({
 		[SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS]: !isAnswer,
 		[SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS]: isAnswer,
@@ -156,18 +35,7 @@ const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText
 		"spiffy-tw-stroke-inherit": true,
 		"spiffy-tw-fill-inherit": true
 	});
-	const baseClasses = variantClassMap.get(variant) ?? [];
-	const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
-	const baseBorderClasses = baseClasses.filter((cls) => cls.includes("border"));
-	const baseNonBorderClasses = baseClasses.filter((cls) => !cls.includes("border"));
-	const hoverBorderClasses = hoverClasses.filter((cls) => cls.includes("border"));
-	const hoverNonBorderClasses = hoverClasses.filter((cls) => !cls.includes("border"));
-	const buttonClass = `${buttonClassName} ${[
-		...baseNonBorderClasses,
-		...hoverTransform(hoverNonBorderClasses),
-		...baseBorderClasses,
-		...hoverTransform(hoverBorderClasses)
-	].join(" ")}`;
+	const buttonClass = `${buttonClassName} ${getSuggestionButtonVariantClasses(variant, hoverVariant)}`;
 	return /* @__PURE__ */ jsx(ButtonBase, {
 		text: content,
 		dataAttributes,
@@ -180,7 +48,9 @@ const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText
 		iconClass: isAnswer ? void 0 : iconClass,
 		textClass: `${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`,
 		buttonClass,
-		onClick
+		onClick,
+		ariaHidden,
+		tabIndex
 	});
 };
 

package/dist/components/SuggestionButton/index.cjs

@@ -1,6 +1,8 @@
+const require_variantClasses = require('./variantClasses.cjs');
 const require_SuggestionButton = require('./SuggestionButton.cjs');
 
 exports.SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = require_SuggestionButton.SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS;
 exports.SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = require_SuggestionButton.SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS;
 exports.SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = require_SuggestionButton.SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS;
-exports.SuggestionButton = require_SuggestionButton.SuggestionButton;
+exports.SuggestionButton = require_SuggestionButton.SuggestionButton;
+exports.getSuggestionButtonVariantClasses = require_variantClasses.getSuggestionButtonVariantClasses;

package/dist/components/SuggestionButton/index.d.cts

@@ -1,3 +1,4 @@
 import { SuggestionButtonVariant } from "./types.cjs";
 import { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton } from "./SuggestionButton.cjs";
-export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };
+import { getSuggestionButtonVariantClasses } from "./variantClasses.cjs";
+export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant, getSuggestionButtonVariantClasses };

package/dist/components/SuggestionButton/index.d.ts

@@ -1,3 +1,4 @@
 import { SuggestionButtonVariant } from "./types.js";
 import { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton } from "./SuggestionButton.js";
-export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };
+import { getSuggestionButtonVariantClasses } from "./variantClasses.js";
+export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant, getSuggestionButtonVariantClasses };

package/dist/components/SuggestionButton/index.js

@@ -1,3 +1,4 @@
+import { getSuggestionButtonVariantClasses } from "./variantClasses.js";
 import { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton } from "./SuggestionButton.js";
 
-export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton };
+export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, getSuggestionButtonVariantClasses };

package/dist/components/SuggestionButton/variantClasses.cjs

@@ -0,0 +1,148 @@
+
+//#region src/components/SuggestionButton/variantClasses.ts
+const BORDER_CLASS = "spiffy-tw-border";
+const TEXT_LINK_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-link]",
+	"spiffy-tw-fill-[--spiffy-colors-text-link]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-link]"
+];
+const TEXT_LIGHT_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-light]",
+	"spiffy-tw-fill-[--spiffy-colors-text-light]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-light]"
+];
+const TEXT_PRIMARY_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-primary]",
+	"spiffy-tw-fill-[--spiffy-colors-text-primary]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-primary]"
+];
+const ACCENT_PRIMARY_CLASSES = ["spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-stroke-[--spiffy-colors-accent-primary]"];
+const DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-dark]", "spiffy-tw-border-[--spiffy-colors-background-dark]"];
+const SECONDARY_DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]", "spiffy-tw-border-[--spiffy-colors-background-secondary-dark]"];
+const variantClassMap = new Map([
+	["outlined", ["spiffy-tw-border-[--spiffy-colors-border-outline]", ...TEXT_LINK_CLASSES]],
+	["outlinedLight", [
+		"spiffy-tw-border-[--spiffy-colors-border-outline]",
+		"spiffy-tw-bg-[--spiffy-colors-background-light]",
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["primary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-primary]",
+		"spiffy-tw-border-[--spiffy-colors-background-primary]",
+		...TEXT_LIGHT_CLASSES,
+		BORDER_CLASS
+	]],
+	["secondary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
+		"spiffy-tw-text-[--spiffy-colors-text-link]",
+		"spiffy-tw-border-[--spiffy-colors-background-secondary]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["tertiary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-tertiary]",
+		"spiffy-tw-border-[--spiffy-colors-background-tertiary]",
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["dark", [
+		...DARK_BACKGROUND_CLASSES,
+		...TEXT_LIGHT_CLASSES,
+		BORDER_CLASS
+	]],
+	["darkPrimary", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["darkAccent", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-text-accent]",
+		"spiffy-tw-stroke-[--spiffy-colors-text-accent]",
+		BORDER_CLASS
+	]],
+	["darkAccentContrast", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-accent-primary]",
+		"spiffy-tw-stroke-[--spiffy-colors-accent-primary]",
+		BORDER_CLASS
+	]],
+	["transparent", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border-[--spiffy-colors-background-light]",
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-transparent",
+		"spiffy-tw-stroke-[--spiffy-colors-text-light]",
+		BORDER_CLASS
+	]],
+	["transparentDark", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border-[--spiffy-colors-border-light]",
+		"spiffy-tw-text-[--spiffy-colors-text-primary]",
+		"spiffy-tw-fill-transparent",
+		"spiffy-tw-stroke-[--spiffy-colors-text-primary]",
+		BORDER_CLASS
+	]],
+	["secondaryDark", [
+		...SECONDARY_DARK_BACKGROUND_CLASSES,
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["secondaryAccent", [
+		...SECONDARY_DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-link]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["lightDark", [
+		"spiffy-tw-bg-[--spiffy-colors-background-light]",
+		"spiffy-tw-border-[--spiffy-colors-background-dark]",
+		...TEXT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]]
+]);
+const borderedVariants = [
+	"outlined",
+	"outlinedLight",
+	"primary",
+	"secondary",
+	"tertiary",
+	"dark",
+	"darkAccent",
+	"darkAccentContrast",
+	"darkPrimary",
+	"transparent",
+	"transparentDark",
+	"secondaryDark",
+	"secondaryAccent",
+	"lightDark"
+];
+const hoverTransform = (variantClass) => variantClass?.map((className) => `hover:${className}`);
+/**
+* Background/border/text/icon classes for a suggestion button variant plus its hover
+* variant. Exported so companion controls (e.g. the suggestion bar pause toggle) can
+* match the merchant's button styling.
+*/
+const getSuggestionButtonVariantClasses = (variant, hoverVariant) => {
+	const baseClasses = variantClassMap.get(variant) ?? [];
+	const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
+	const baseBorderClasses = baseClasses.filter((cls) => cls.includes("border"));
+	const baseNonBorderClasses = baseClasses.filter((cls) => !cls.includes("border"));
+	const hoverBorderClasses = hoverClasses.filter((cls) => cls.includes("border"));
+	const hoverNonBorderClasses = hoverClasses.filter((cls) => !cls.includes("border"));
+	return [
+		...baseNonBorderClasses,
+		...hoverTransform(hoverNonBorderClasses),
+		...baseBorderClasses,
+		...hoverTransform(hoverBorderClasses),
+		borderedVariants.includes(variant) && "spiffy-tw-border-[1px] spiffy-tw-border-solid"
+	].filter(Boolean).join(" ");
+};
+
+//#endregion
+exports.borderedVariants = borderedVariants;
+exports.getSuggestionButtonVariantClasses = getSuggestionButtonVariantClasses;

package/dist/components/SuggestionButton/variantClasses.d.cts

@@ -0,0 +1,12 @@
+import { SuggestionButtonVariant } from "./types.cjs";
+
+//#region src/components/SuggestionButton/variantClasses.d.ts
+
+/**
+ * Background/border/text/icon classes for a suggestion button variant plus its hover
+ * variant. Exported so companion controls (e.g. the suggestion bar pause toggle) can
+ * match the merchant's button styling.
+ */
+declare const getSuggestionButtonVariantClasses: (variant: SuggestionButtonVariant, hoverVariant: SuggestionButtonVariant) => string;
+//#endregion
+export { getSuggestionButtonVariantClasses };

package/dist/components/SuggestionButton/variantClasses.d.ts

@@ -0,0 +1,12 @@
+import { SuggestionButtonVariant } from "./types.js";
+
+//#region src/components/SuggestionButton/variantClasses.d.ts
+
+/**
+ * Background/border/text/icon classes for a suggestion button variant plus its hover
+ * variant. Exported so companion controls (e.g. the suggestion bar pause toggle) can
+ * match the merchant's button styling.
+ */
+declare const getSuggestionButtonVariantClasses: (variant: SuggestionButtonVariant, hoverVariant: SuggestionButtonVariant) => string;
+//#endregion
+export { getSuggestionButtonVariantClasses };

package/dist/components/SuggestionButton/variantClasses.js

@@ -0,0 +1,146 @@
+//#region src/components/SuggestionButton/variantClasses.ts
+const BORDER_CLASS = "spiffy-tw-border";
+const TEXT_LINK_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-link]",
+	"spiffy-tw-fill-[--spiffy-colors-text-link]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-link]"
+];
+const TEXT_LIGHT_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-light]",
+	"spiffy-tw-fill-[--spiffy-colors-text-light]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-light]"
+];
+const TEXT_PRIMARY_CLASSES = [
+	"spiffy-tw-text-[--spiffy-colors-text-primary]",
+	"spiffy-tw-fill-[--spiffy-colors-text-primary]",
+	"spiffy-tw-stroke-[--spiffy-colors-text-primary]"
+];
+const ACCENT_PRIMARY_CLASSES = ["spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-stroke-[--spiffy-colors-accent-primary]"];
+const DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-dark]", "spiffy-tw-border-[--spiffy-colors-background-dark]"];
+const SECONDARY_DARK_BACKGROUND_CLASSES = ["spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]", "spiffy-tw-border-[--spiffy-colors-background-secondary-dark]"];
+const variantClassMap = new Map([
+	["outlined", ["spiffy-tw-border-[--spiffy-colors-border-outline]", ...TEXT_LINK_CLASSES]],
+	["outlinedLight", [
+		"spiffy-tw-border-[--spiffy-colors-border-outline]",
+		"spiffy-tw-bg-[--spiffy-colors-background-light]",
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["primary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-primary]",
+		"spiffy-tw-border-[--spiffy-colors-background-primary]",
+		...TEXT_LIGHT_CLASSES,
+		BORDER_CLASS
+	]],
+	["secondary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
+		"spiffy-tw-text-[--spiffy-colors-text-link]",
+		"spiffy-tw-border-[--spiffy-colors-background-secondary]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["tertiary", [
+		"spiffy-tw-bg-[--spiffy-colors-background-tertiary]",
+		"spiffy-tw-border-[--spiffy-colors-background-tertiary]",
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["dark", [
+		...DARK_BACKGROUND_CLASSES,
+		...TEXT_LIGHT_CLASSES,
+		BORDER_CLASS
+	]],
+	["darkPrimary", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["darkAccent", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-text-accent]",
+		"spiffy-tw-stroke-[--spiffy-colors-text-accent]",
+		BORDER_CLASS
+	]],
+	["darkAccentContrast", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-accent-primary]",
+		"spiffy-tw-stroke-[--spiffy-colors-accent-primary]",
+		BORDER_CLASS
+	]],
+	["transparent", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border-[--spiffy-colors-background-light]",
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-transparent",
+		"spiffy-tw-stroke-[--spiffy-colors-text-light]",
+		BORDER_CLASS
+	]],
+	["transparentDark", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border-[--spiffy-colors-border-light]",
+		"spiffy-tw-text-[--spiffy-colors-text-primary]",
+		"spiffy-tw-fill-transparent",
+		"spiffy-tw-stroke-[--spiffy-colors-text-primary]",
+		BORDER_CLASS
+	]],
+	["secondaryDark", [
+		...SECONDARY_DARK_BACKGROUND_CLASSES,
+		...TEXT_LINK_CLASSES,
+		BORDER_CLASS
+	]],
+	["secondaryAccent", [
+		...SECONDARY_DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-link]",
+		...ACCENT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]],
+	["lightDark", [
+		"spiffy-tw-bg-[--spiffy-colors-background-light]",
+		"spiffy-tw-border-[--spiffy-colors-background-dark]",
+		...TEXT_PRIMARY_CLASSES,
+		BORDER_CLASS
+	]]
+]);
+const borderedVariants = [
+	"outlined",
+	"outlinedLight",
+	"primary",
+	"secondary",
+	"tertiary",
+	"dark",
+	"darkAccent",
+	"darkAccentContrast",
+	"darkPrimary",
+	"transparent",
+	"transparentDark",
+	"secondaryDark",
+	"secondaryAccent",
+	"lightDark"
+];
+const hoverTransform = (variantClass) => variantClass?.map((className) => `hover:${className}`);
+/**
+* Background/border/text/icon classes for a suggestion button variant plus its hover
+* variant. Exported so companion controls (e.g. the suggestion bar pause toggle) can
+* match the merchant's button styling.
+*/
+const getSuggestionButtonVariantClasses = (variant, hoverVariant) => {
+	const baseClasses = variantClassMap.get(variant) ?? [];
+	const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
+	const baseBorderClasses = baseClasses.filter((cls) => cls.includes("border"));
+	const baseNonBorderClasses = baseClasses.filter((cls) => !cls.includes("border"));
+	const hoverBorderClasses = hoverClasses.filter((cls) => cls.includes("border"));
+	const hoverNonBorderClasses = hoverClasses.filter((cls) => !cls.includes("border"));
+	return [
+		...baseNonBorderClasses,
+		...hoverTransform(hoverNonBorderClasses),
+		...baseBorderClasses,
+		...hoverTransform(hoverBorderClasses),
+		borderedVariants.includes(variant) && "spiffy-tw-border-[1px] spiffy-tw-border-solid"
+	].filter(Boolean).join(" ");
+};
+
+//#endregion
+export { borderedVariants, getSuggestionButtonVariantClasses };

package/dist/components/ToggleButton/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime2.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.3.66",
+  "version": "0.3.67",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",

package/src/components/ButtonBase/ButtonBase.tsx

@@ -14,6 +14,8 @@ export const ButtonBase = ({
   dataTestId,
   onClick,
   disablePadding = false,
+  ariaHidden,
+  tabIndex,
 }: ButtonBaseProps) => {
   const RenderedIcon = () => icon;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -59,6 +61,8 @@ export const ButtonBase = ({
       className={buttonClassName}
       disabled={isDisabled}
       data-testid={dataTestId}
+      aria-hidden={ariaHidden}
+      tabIndex={tabIndex}
       onClick={onClick}
     >
       {icon && <RenderedIcon />}

package/src/components/ButtonBase/types.ts

@@ -17,6 +17,10 @@ export interface ButtonBaseProps {
   onClick?: () => void;
   disablePadding?: boolean;
   dataTestId?: string;
+  /** Hides the button from assistive technology (e.g. decorative looping copies). */
+  ariaHidden?: boolean;
+  /** Pass `-1` to remove the button from the keyboard tab order. */
+  tabIndex?: number;
 }
 
 export enum ButtonBaseOverrides {