@envive-ai/react-widgets 0.1.2 → 0.1.3

package/dist/packages/components/dist/components/SuggestionButton/SuggestionButton.cjs

@@ -0,0 +1,193 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_ButtonBase = require('../ButtonBase/ButtonBase.cjs');
+const require_OutlinedStar = require('../../../../icons/dist/OutlinedStar.cjs');
+const require_FourPointStar = require('../../../../icons/dist/FourPointStar.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/SuggestionButton/SuggestionButton.js
+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__ */ (0, react_jsx_runtime.jsx)(require_OutlinedStar.OutlinedStar_default, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FourPointStar.FourPointStar_default, {});
+};
+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 buttonClassName = (0, classnames.default)({
+		[SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS]: !isAnswer,
+		[SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS]: isAnswer,
+		"!spiffy-tw-rounded-[20px]": borderRadius === "lg",
+		"!spiffy-tw-rounded-[8px]": borderRadius === "md",
+		"!spiffy-tw-rounded-[0px]": borderRadius === "sm",
+		"spiffy-tw-border-[1px]": borderedVariants.includes(variant),
+		"spiffy-tw-border-solid": borderedVariants.includes(variant)
+	});
+	const textClassName = (0, classnames.default)({
+		"spiffy-tw-text-[14px]": true,
+		"spiffy-tw-leading-[100%]": true,
+		"!spiffy-tw-font-bold": boldText
+	});
+	const iconClass = (0, classnames.default)({
+		"spiffy-tw-w-[11px]": true,
+		"spiffy-tw-h-[11px]": true,
+		"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(" ")}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+		text: content,
+		dataAttributes,
+		dataTestId,
+		isDisabled,
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			isAnswer,
+			variant
+		}),
+		iconClass: isAnswer ? void 0 : iconClass,
+		textClass: `${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`,
+		buttonClass,
+		onClick
+	});
+};
+
+//#endregion
+exports.SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS;
+exports.SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS;
+exports.SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS;
+exports.SuggestionButton = SuggestionButton;

package/dist/packages/components/dist/components/SuggestionButton/SuggestionButton.js

@@ -0,0 +1,188 @@
+import { ButtonBase } from "../ButtonBase/ButtonBase.js";
+import { OutlinedStar_default } from "../../../../icons/dist/OutlinedStar.js";
+import { FourPointStar_default } from "../../../../icons/dist/FourPointStar.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/SuggestionButton/SuggestionButton.js
+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_default, {});
+	return /* @__PURE__ */ jsx(FourPointStar_default, {});
+};
+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 buttonClassName = classNames({
+		[SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS]: !isAnswer,
+		[SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS]: isAnswer,
+		"!spiffy-tw-rounded-[20px]": borderRadius === "lg",
+		"!spiffy-tw-rounded-[8px]": borderRadius === "md",
+		"!spiffy-tw-rounded-[0px]": borderRadius === "sm",
+		"spiffy-tw-border-[1px]": borderedVariants.includes(variant),
+		"spiffy-tw-border-solid": borderedVariants.includes(variant)
+	});
+	const textClassName = classNames({
+		"spiffy-tw-text-[14px]": true,
+		"spiffy-tw-leading-[100%]": true,
+		"!spiffy-tw-font-bold": boldText
+	});
+	const iconClass = classNames({
+		"spiffy-tw-w-[11px]": true,
+		"spiffy-tw-h-[11px]": true,
+		"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(" ")}`;
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		text: content,
+		dataAttributes,
+		dataTestId,
+		isDisabled,
+		icon: /* @__PURE__ */ jsx(Icon, {
+			isAnswer,
+			variant
+		}),
+		iconClass: isAnswer ? void 0 : iconClass,
+		textClass: `${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`,
+		buttonClass,
+		onClick
+	});
+};
+
+//#endregion
+export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton };

package/dist/packages/components/dist/components/SuggestionButton/index.cjs

@@ -0,0 +1 @@
+const require_SuggestionButton = require('./SuggestionButton.cjs');

package/dist/packages/components/dist/components/SuggestionButton/index.js

@@ -0,0 +1 @@
+import { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton } from "./SuggestionButton.js";

package/dist/packages/components/dist/components/TextInput/TextInput.cjs

@@ -0,0 +1,34 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_typographyVariantClasses = require('../Typography/typographyVariantClasses.cjs');
+require('../Typography/index.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/TextInput/TextInput.js
+const TextInput = react.default.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
+	const placeholderVariantClassNames = require_typographyVariantClasses.getVariantPlaceholderClassNames(placeholderVariant ? require_typographyVariantClasses.TypographyVariantMap[placeholderVariant] : {});
+	const inputClasses = (0, classnames.default)([
+		{
+			"spiffy-text-input": true,
+			"spiffy-tw-outline-none": true,
+			"spiffy-tw-rounded-[64px]": borderRadius === "xl",
+			"spiffy-tw-rounded-[20px]": borderRadius === "lg",
+			"spiffy-tw-rounded-[8px]": borderRadius === "md",
+			"spiffy-tw-rounded-[0px]": borderRadius === "sm",
+			...placeholderVariantClassNames
+		},
+		borderColorClass,
+		className
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		...rest,
+		className: inputClasses
+	});
+});
+
+//#endregion
+exports.TextInput = TextInput;

package/dist/packages/components/dist/components/TextInput/TextInput.js

@@ -0,0 +1,31 @@
+import { TypographyVariantMap, getVariantPlaceholderClassNames } from "../Typography/typographyVariantClasses.js";
+import "../Typography/index.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/TextInput/TextInput.js
+const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
+	const placeholderVariantClassNames = getVariantPlaceholderClassNames(placeholderVariant ? TypographyVariantMap[placeholderVariant] : {});
+	const inputClasses = classNames([
+		{
+			"spiffy-text-input": true,
+			"spiffy-tw-outline-none": true,
+			"spiffy-tw-rounded-[64px]": borderRadius === "xl",
+			"spiffy-tw-rounded-[20px]": borderRadius === "lg",
+			"spiffy-tw-rounded-[8px]": borderRadius === "md",
+			"spiffy-tw-rounded-[0px]": borderRadius === "sm",
+			...placeholderVariantClassNames
+		},
+		borderColorClass,
+		className
+	]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		...rest,
+		className: inputClasses
+	});
+});
+
+//#endregion
+export { TextInput };

package/dist/packages/components/dist/components/TextInput/index.cjs

@@ -0,0 +1 @@
+const require_TextInput = require('./TextInput.cjs');

package/dist/packages/components/dist/components/TextInput/index.js

@@ -0,0 +1 @@
+import { TextInput } from "./TextInput.js";

package/dist/packages/components/dist/components/ToggleButton/ToggleButton.cjs

@@ -0,0 +1,63 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/ToggleButton/ToggleButton.js
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+exports.ToggleButton = ToggleButton;

package/dist/packages/components/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,61 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/ToggleButton/ToggleButton.js
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => classNames({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => classNames({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = classNames({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = classNames({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ jsxs("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ jsx(Typography, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+export { ToggleButton };

package/dist/packages/components/dist/components/ToggleButton/index.cjs

@@ -0,0 +1 @@
+const require_ToggleButton = require('./ToggleButton.cjs');

package/dist/packages/components/dist/components/ToggleButton/index.js

@@ -0,0 +1 @@
+import { ToggleButton } from "./ToggleButton.js";

package/dist/packages/components/dist/components/Typography/Typography.cjs

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_typographyVariantClasses = require('./typographyVariantClasses.cjs');
+const require_util = require('./util.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region ../components/dist/components/Typography/Typography.js
+const Typography = ({ children, className, style, noOfLines, testId, elementType, variant = "body3", id }) => {
+	const variantClassNames = variant ? require_typographyVariantClasses.TypographyVariantMap[variant] : {};
+	const isHeadline = (0, react.useCallback)(() => [
+		"t1",
+		"t2",
+		"t3",
+		"h1",
+		"h2",
+		"h3",
+		"h4"
+	].includes(variant), [variant]);
+	const renderedElementType = (0, react.useMemo)(() => {
+		if (elementType) return elementType;
+		if (!elementType) {
+			if (isHeadline()) return require_util.getElementTypeFromVariant(variant, isHeadline());
+		}
+		return "span";
+	}, [
+		isHeadline,
+		variant,
+		elementType
+	]);
+	const textClassNames = (0, classnames.default)(className, variantClassNames, {
+		"spiffy-tw-font-[Poppins,sans-serif]": isHeadline(),
+		"spiffy-tw-font-[\"Inter Variable,sans-serif\"]": !isHeadline(),
+		"spiffy-tw-line-clamp-1": noOfLines === 1,
+		"spiffy-tw-line-clamp-2": noOfLines === 2,
+		"spiffy-tw-line-clamp-3": noOfLines === 3,
+		"spiffy-tw-line-clamp-4": noOfLines === 4,
+		"spiffy-tw-line-clamp-5": noOfLines === 5,
+		"spiffy-tw-line-clamp-6": noOfLines === 6,
+		"spiffy-tw-line-clamp-7": noOfLines === 7
+	});
+	const renderElement = (elementTypeToRender) => react.default.createElement(elementTypeToRender, {
+		"data-testid": testId,
+		className: textClassNames,
+		style,
+		id
+	}, children);
+	return renderElement(renderedElementType);
+};
+
+//#endregion
+exports.Typography = Typography;