@envive-ai/react-toolkit 0.1.1 → 0.1.3

package/dist/SuggestionButton-C4p08bZv.js

@@ -0,0 +1,178 @@
+import { ButtonBase } from "./ButtonBase-Dk_5Bxe0.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import FourPointStar from "@envive-ai/react-icons/src/FourPointStar";
+import OutlinedStar from "@envive-ai/react-icons/src/OutlinedStar";
+
+//#region src/components/common/SuggestionButton/SuggestionButton.tsx
+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
+	]],
+	["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",
+	"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 variantClasses = [
+		...baseNonBorderClasses,
+		...hoverTransform(hoverNonBorderClasses),
+		...baseBorderClasses,
+		...hoverTransform(hoverBorderClasses)
+	];
+	const buttonClass = `${buttonClassName} ${variantClasses.join(" ")}`;
+	const getIcon = () => {
+		if (isAnswer) return void 0;
+		if (variant === "transparentDark") return OutlinedStar;
+		return FourPointStar;
+	};
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		text: content,
+		dataAttributes,
+		dataTestId,
+		isDisabled,
+		icon: getIcon(),
+		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/SuggestionButton-CNwyzi1V.d.cts

@@ -0,0 +1,35 @@
+import { TestProps } from "./types-TYhhwWZw.cjs";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+
+//#region src/components/common/SuggestionButton/types.d.ts
+type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
+//#endregion
+//#region src/components/common/SuggestionButton/SuggestionButton.d.ts
+declare const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
+declare const SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = "spiffy-suggestion-button-answer-class";
+declare const SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = "spiffy-suggestion-button-text-class";
+interface SuggestionButtonProps extends TestProps {
+  variant: SuggestionButtonVariant;
+  hoverVariant: SuggestionButtonVariant;
+  isDisabled: boolean;
+  content: string;
+  boldText?: boolean;
+  borderRadius?: 'sm' | 'md' | 'lg';
+  isAnswer?: boolean;
+  dataAttributes?: Record<string, string>;
+  onClick: () => void;
+}
+declare const SuggestionButton: ({
+  variant,
+  hoverVariant,
+  isDisabled,
+  content,
+  boldText,
+  borderRadius,
+  isAnswer,
+  dataAttributes,
+  dataTestId,
+  onClick
+}: SuggestionButtonProps) => react_jsx_runtime9.JSX.Element;
+//#endregion
+export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/Text-Bdv7F5-u.js

@@ -0,0 +1,42 @@
+import { TextVariantMap } from "./textVariantClasses-5t3OricK.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/common/Text/Text.tsx
+const Text = ({ children, className, style, noOfLines, testId, type = "span", variant = "body3" }) => {
+	const variantClassNames = variant ? TextVariantMap[variant] : {};
+	const textClassNames = classNames(className, variantClassNames, {
+		"spiffy-tw-font-[\"Inter Variable,sans-serif\"]": true,
+		"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
+	});
+	switch (type) {
+		case "p": return /* @__PURE__ */ jsx("p", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		case "span": return /* @__PURE__ */ jsx("span", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		case "sub": return /* @__PURE__ */ jsx("sub", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		default: throw new Error(`Invalid text type: ${type}`);
+	}
+};
+
+//#endregion
+export { Text };

package/dist/Text-C04c4Z93.cjs

@@ -0,0 +1,50 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_textVariantClasses = require('./textVariantClasses-Bhf4VY5z.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/common/Text/Text.tsx
+const Text = ({ children, className, style, noOfLines, testId, type = "span", variant = "body3" }) => {
+	const variantClassNames = variant ? require_textVariantClasses.TextVariantMap[variant] : {};
+	const textClassNames = (0, classnames.default)(className, variantClassNames, {
+		"spiffy-tw-font-[\"Inter Variable,sans-serif\"]": true,
+		"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
+	});
+	switch (type) {
+		case "p": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		case "span": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		case "sub": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sub", {
+			"data-testid": testId,
+			className: textClassNames,
+			style,
+			children
+		});
+		default: throw new Error(`Invalid text type: ${type}`);
+	}
+};
+
+//#endregion
+Object.defineProperty(exports, 'Text', {
+  enumerable: true,
+  get: function () {
+    return Text;
+  }
+});

package/dist/Text-D8WEjUal.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/components/common/Text/types.d.ts
+declare enum ExpandableTextOverrides {
+  EXPANDABLE_TEXT_CONTAINER = "spiffy-expandable-text-container",
+  EXPANDABLE_TEXT = "spiffy-expandable-text",
+  EXPANDABLE_BUTTON = "spiffy-expandable-button",
+}
+type TextVariant = 'body1' | 'body2' | 'body3' | 'body4' | 'body5';
+type TextType = 'p' | 'span' | 'sub';
+type HeadlineProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: HeadlineVariant;
+  testId?: string;
+  id?: string;
+};
+type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';
+//#endregion
+//#region src/components/common/Text/Text.d.ts
+type TextProps = {
+  children: React.ReactNode;
+  noOfLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: TextVariant;
+  type?: TextType;
+  testId?: string;
+};
+declare const Text: ({
+  children,
+  className,
+  style,
+  noOfLines,
+  testId,
+  type,
+  variant
+}: TextProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { ExpandableTextOverrides, HeadlineProps, HeadlineVariant, Text, TextType, TextVariant };

package/dist/Text-D8bCCNPT.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/common/Text/types.d.ts
+declare enum ExpandableTextOverrides {
+  EXPANDABLE_TEXT_CONTAINER = "spiffy-expandable-text-container",
+  EXPANDABLE_TEXT = "spiffy-expandable-text",
+  EXPANDABLE_BUTTON = "spiffy-expandable-button",
+}
+type TextVariant = 'body1' | 'body2' | 'body3' | 'body4' | 'body5';
+type TextType = 'p' | 'span' | 'sub';
+type HeadlineProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: HeadlineVariant;
+  testId?: string;
+  id?: string;
+};
+type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';
+//#endregion
+//#region src/components/common/Text/Text.d.ts
+type TextProps = {
+  children: React.ReactNode;
+  noOfLines?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: TextVariant;
+  type?: TextType;
+  testId?: string;
+};
+declare const Text: ({
+  children,
+  className,
+  style,
+  noOfLines,
+  testId,
+  type,
+  variant
+}: TextProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { ExpandableTextOverrides, HeadlineProps, HeadlineVariant, Text, TextType, TextVariant };

package/dist/TextInput-BZSsdOtq.js

@@ -0,0 +1,31 @@
+import { TextStyleVariantMap, getVariantPlaceholderClassNames } from "./textVariantClasses-5t3OricK.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/common/TextInput/TextInput.tsx
+const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {
+	const variantClassNames = placeholderVariant ? TextStyleVariantMap[placeholderVariant] : {};
+	const placeholderVariantClassNames = getVariantPlaceholderClassNames(variantClassNames);
+	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/TextInput-CZogcpzR.cjs

@@ -0,0 +1,40 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_textVariantClasses = require('./textVariantClasses-Bhf4VY5z.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/common/TextInput/TextInput.tsx
+const TextInput = react.default.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {
+	const variantClassNames = placeholderVariant ? require_textVariantClasses.TextStyleVariantMap[placeholderVariant] : {};
+	const placeholderVariantClassNames = require_textVariantClasses.getVariantPlaceholderClassNames(variantClassNames);
+	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
+Object.defineProperty(exports, 'TextInput', {
+  enumerable: true,
+  get: function () {
+    return TextInput;
+  }
+});

package/dist/TextInput-CtSUuczk.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+
+//#region src/components/common/Text/textVariantClasses.d.ts
+
+declare const TextStyleVariantMap: {
+  t1: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[32px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  t2: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  t3: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[24px]': boolean;
+    'spiffy-tw-leading-[120%]': boolean;
+  };
+  h1: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[20px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[120%]': boolean;
+  };
+  h2: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-2': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  h3: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-3': boolean;
+    'spiffy-tw-text-[15px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  h4: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-4': boolean;
+    'spiffy-tw-text-[14px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  body1: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-1': boolean;
+    'spiffy-tw-text-[20px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-line-height-[120%]': boolean;
+  };
+  body2: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-2': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-line-height-[148%]': boolean;
+  };
+  body3: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-3': boolean;
+    'spiffy-tw-text-sm': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[140%]': boolean;
+  };
+  body4: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-4': boolean;
+    'spiffy-tw-text-xs': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[130%]': boolean;
+  };
+  body5: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-5': boolean;
+    'spiffy-tw-text-[10px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+  };
+};
+//#endregion
+//#region src/components/common/TextInput/TextInput.d.ts
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  borderRadius: 'sm' | 'md' | 'lg' | 'xl';
+  borderColorClass?: string;
+  placeholderVariant?: keyof typeof TextStyleVariantMap;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TextInput, TextInputProps };

package/dist/TextInput-QqdJV52m.d.cts

@@ -0,0 +1,98 @@
+import React from "react";
+
+//#region src/components/common/Text/textVariantClasses.d.ts
+
+declare const TextStyleVariantMap: {
+  t1: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[32px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  t2: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  t3: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[24px]': boolean;
+    'spiffy-tw-leading-[120%]': boolean;
+  };
+  h1: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-1': boolean;
+    'spiffy-tw-text-[20px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[120%]': boolean;
+  };
+  h2: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-2': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  h3: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-3': boolean;
+    'spiffy-tw-text-[15px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  h4: {
+    'spiffy-headline': boolean;
+    'spiffy-headline-4': boolean;
+    'spiffy-tw-text-[14px]': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[124%]': boolean;
+  };
+  body1: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-1': boolean;
+    'spiffy-tw-text-[20px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-line-height-[120%]': boolean;
+  };
+  body2: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-2': boolean;
+    'spiffy-tw-text-[16px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-line-height-[148%]': boolean;
+  };
+  body3: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-3': boolean;
+    'spiffy-tw-text-sm': boolean;
+    'spiffy-tw-font-normal': boolean;
+    'spiffy-tw-leading-[140%]': boolean;
+  };
+  body4: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-4': boolean;
+    'spiffy-tw-text-xs': boolean;
+    'spiffy-tw-font-medium': boolean;
+    'spiffy-tw-leading-[130%]': boolean;
+  };
+  body5: {
+    'spiffy-body-text': boolean;
+    'spiffy-body-5': boolean;
+    'spiffy-tw-text-[10px]': boolean;
+    'spiffy-tw-font-normal': boolean;
+  };
+};
+//#endregion
+//#region src/components/common/TextInput/TextInput.d.ts
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  borderRadius: 'sm' | 'md' | 'lg' | 'xl';
+  borderColorClass?: string;
+  placeholderVariant?: keyof typeof TextStyleVariantMap;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TextInput, TextInputProps };