@envive-ai/react-toolkit 0.1.0

package/dist/packages/components/src/index.d.ts

@@ -0,0 +1,45 @@
+export { ButtonBase } from './components/common/ButtonBase/ButtonBase';
+export { Headline } from './components/common/Headline/Headline';
+export { ImageWithFallback } from './components/common/ImageWithFallback/ImageWithFallback';
+export { ProductCard } from './components/common/ProductCard/ProductCard';
+export { ProductCardSkeleton } from './components/common/ProductCard/ProductCardSkeleton';
+export { ProductGrid } from './components/common/ProductGrid/ProductGrid';
+export { SparkleAnimation } from './components/common/SparkleAnimation/SparkleAnimation';
+export { Spinner } from './components/common/Spinner/Spinner';
+export { SuggestionButton } from './components/common/SuggestionButton/SuggestionButton';
+export { Text } from './components/common/Text/Text';
+export { TextInput } from './components/common/TextInput/TextInput';
+export { AppliedFiltersScrollbar } from './components/search/FilterScrollbar/AppliedFiltersScrollbar';
+export { DynamicFiltersScrollbar } from './components/search/FilterScrollbar/DynamicFiltersScrollbar';
+export { SearchFilter } from './components/search/SearchFilter/SearchFilter';
+export { SearchFilterHeader } from './components/search/SearchFilter/SearchFilterHeader';
+export { SearchFilterItem } from './components/search/SearchFilter/SearchFilterItem';
+export { SearchInput } from './components/search/SearchInput/SearchInput';
+export { SearchAutocomplete } from './components/search/SearchInputAutocomplete/SearchAutocomplete';
+export { SearchInputForm } from './components/search/SearchInputForm/SearchInputForm';
+export { SearchResultsFilter } from './components/search/SearchResultsFilterSidebar/SearchResultsFilter';
+export { NoSearchResultsFound } from './components/search/SearchResultsStates/NoSearchResultsFound';
+export { SearchResultsGrid } from './components/search/SearchResultsStates/SearchResultsGrid';
+export { SearchResultsLoadingGrid } from './components/search/SearchResultsStates/SearchResultsLoadingGrid';
+export * from './util/camelCase';
+export * from './util/camelCasedPropertiesDeep';
+export * from './util/formatPrice';
+export * from './util/internal';
+export * from './util/primitive';
+export * from './util/splitWords';
+export * from './util/trim';
+export * from './util/unknownArray';
+export * from './components/common/ButtonBase/types';
+export * from './components/common/ProductCard/types';
+export * from './components/common/SparkleAnimation/types';
+export * from './components/common/SuggestionButton/types';
+export * from './components/common/Text/types';
+export type { HeadlineProps, HeadlineVariant } from './components/common/Text/types';
+export * from './components/search/types';
+export * from './components/search/SearchFilter/types';
+export * from './components/search/SearchInputForm/types';
+export type { SearchFilterSidebarVariant, CloseIconVariant as CloseIconVariantType, } from './components/search/SearchResultsFilterSidebar/types';
+export * from './atoms/search/types';
+export { ChatElementDisplayLocation } from './config/chatElementDisplayLocation';
+export { productGridVariantClasses } from './components/common/ProductGrid/productGridVariants';
+export { searchFilterSidebarVariantClasses } from './components/search/SearchResultsFilterSidebar/searchFilterSidebarVariants';

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

@@ -0,0 +1,49 @@
+// Common Components
+export { ButtonBase } from './components/common/ButtonBase/ButtonBase';
+export { Headline } from './components/common/Headline/Headline';
+export { ImageWithFallback } from './components/common/ImageWithFallback/ImageWithFallback';
+export { ProductCard } from './components/common/ProductCard/ProductCard';
+export { ProductCardSkeleton } from './components/common/ProductCard/ProductCardSkeleton';
+export { ProductGrid } from './components/common/ProductGrid/ProductGrid';
+export { SparkleAnimation } from './components/common/SparkleAnimation/SparkleAnimation';
+export { Spinner } from './components/common/Spinner/Spinner';
+export { SuggestionButton } from './components/common/SuggestionButton/SuggestionButton';
+export { Text } from './components/common/Text/Text';
+export { TextInput } from './components/common/TextInput/TextInput';
+// Search Components
+export { AppliedFiltersScrollbar } from './components/search/FilterScrollbar/AppliedFiltersScrollbar';
+export { DynamicFiltersScrollbar } from './components/search/FilterScrollbar/DynamicFiltersScrollbar';
+export { SearchFilter } from './components/search/SearchFilter/SearchFilter';
+export { SearchFilterHeader } from './components/search/SearchFilter/SearchFilterHeader';
+export { SearchFilterItem } from './components/search/SearchFilter/SearchFilterItem';
+export { SearchInput } from './components/search/SearchInput/SearchInput';
+export { SearchAutocomplete } from './components/search/SearchInputAutocomplete/SearchAutocomplete';
+export { SearchInputForm } from './components/search/SearchInputForm/SearchInputForm';
+export { SearchResultsFilter } from './components/search/SearchResultsFilterSidebar/SearchResultsFilter';
+export { NoSearchResultsFound } from './components/search/SearchResultsStates/NoSearchResultsFound';
+export { SearchResultsGrid } from './components/search/SearchResultsStates/SearchResultsGrid';
+export { SearchResultsLoadingGrid } from './components/search/SearchResultsStates/SearchResultsLoadingGrid';
+// Utilities
+export * from './util/camelCase';
+export * from './util/camelCasedPropertiesDeep';
+export * from './util/formatPrice';
+export * from './util/internal';
+export * from './util/primitive';
+export * from './util/splitWords';
+export * from './util/trim';
+export * from './util/unknownArray';
+// Types
+export * from './components/common/ButtonBase/types';
+export * from './components/common/ProductCard/types';
+export * from './components/common/SparkleAnimation/types';
+export * from './components/common/SuggestionButton/types';
+export * from './components/common/Text/types';
+export * from './components/search/types';
+export * from './components/search/SearchFilter/types';
+export * from './components/search/SearchInputForm/types';
+export * from './atoms/search/types';
+// Config exports
+export { ChatElementDisplayLocation } from './config/chatElementDisplayLocation';
+// Variants
+export { productGridVariantClasses } from './components/common/ProductGrid/productGridVariants';
+export { searchFilterSidebarVariantClasses } from './components/search/SearchResultsFilterSidebar/searchFilterSidebarVariants';

package/dist/packages/components/src/logging/logger.d.ts

@@ -0,0 +1,7 @@
+declare class Logger {
+    static logInfo(message: string, ...args: unknown[]): void;
+    static logDebug(message: string, ...args: unknown[]): void;
+    static logError(message: string, error: unknown | undefined, ...args: unknown[]): void;
+    static logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void;
+}
+export default Logger;

package/dist/packages/components/src/logging/logger.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+class Logger {
+    static logInfo(message, ...args) {
+        console.info(`INFO: ${message}`, ...args);
+    }
+    static logDebug(message, ...args) {
+        console.debug(`DEBUG: ${message}`, ...args);
+    }
+    static logError(message, error, ...args) {
+        console.error(`ERROR: ${message} error=${error}`, args);
+    }
+    static logWarn(message, error, ...args) {
+        console.warn(`WARN: ${message} error=${error}`, args);
+    }
+}
+export default Logger;

package/dist/packages/components/src/types/external.d.ts

@@ -0,0 +1,21 @@
+export declare enum ResponseCategory {
+    Product = "product"
+}
+export interface SearchResponseProduct {
+    id: string;
+    title: string;
+    description?: string;
+    price?: number;
+    currency?: string;
+    imageUrl?: string;
+    brand?: string;
+    category?: string;
+    availability?: string;
+    url?: string;
+    responseId?: string;
+    originalPrice?: number;
+    salePrice?: number;
+    averageRating?: number;
+    numberReviews?: number;
+    [key: string]: unknown;
+}

package/dist/packages/components/src/types/external.js

@@ -0,0 +1,5 @@
+// Local type definitions for external dependencies that may not be available
+export var ResponseCategory;
+(function (ResponseCategory) {
+    ResponseCategory["Product"] = "product";
+})(ResponseCategory || (ResponseCategory = {}));

package/dist/packages/components/src/util/camelCase.d.ts

@@ -0,0 +1,65 @@
+import type { SplitWords } from './splitWords';
+/**
+ * CamelCase options.
+ *
+ * @see {@link CamelCase}
+ */
+export type CamelCaseOptions = {
+    /**
+     * Whether to preserved consecutive uppercase letter.
+     *
+     * @default true
+     */
+    preserveConsecutiveUppercase?: boolean;
+};
+/**
+ * Convert an array of words to camel-case.
+ */
+type CamelCaseFromArray<Words extends string[], Options extends CamelCaseOptions, OutputString extends string = ''> = Words extends [infer FirstWord extends string, ...infer RemainingWords extends string[]] ? Options['preserveConsecutiveUppercase'] extends true ? `${Capitalize<FirstWord>}${CamelCaseFromArray<RemainingWords, Options>}` : `${Capitalize<Lowercase<FirstWord>>}${CamelCaseFromArray<RemainingWords, Options>}` : OutputString;
+/**
+ * Convert a string literal to camel-case.
+ *
+ * This can be useful when, for example, converting some kebab-cased command-line flags or a snake-cased database result.
+ *
+ * By default, consecutive uppercase letter are preserved. See {@link CamelCaseOptions.preserveConsecutiveUppercase preserveConsecutiveUppercase} option to change this behaviour.
+ *
+ * @example
+ * ```
+ * import type {CamelCase} from 'type-fest';
+ *
+ * // Simple
+ *
+ * const someVariable: CamelCase<'foo-bar'> = 'fooBar';
+ *
+ * // Advanced
+ *
+ * type CamelCasedProperties<T> = {
+ * 	[K in keyof T as CamelCase<K>]: T[K]
+ * };
+ *
+ * interface RawOptions {
+ * 	'dry-run': boolean;
+ * 	'full_family_name': string;
+ * 	foo: number;
+ * 	BAR: string;
+ * 	QUZ_QUX: number;
+ * 	'OTHER-FIELD': boolean;
+ * }
+ *
+ * const dbResult: CamelCasedProperties<RawOptions> = {
+ * 	dryRun: true,
+ * 	fullFamilyName: 'bar.js',
+ * 	foo: 123,
+ * 	bar: 'foo',
+ * 	quzQux: 6,
+ * 	otherField: false
+ * };
+ * ```
+ *
+ * @category Change case
+ * @category Template literal
+ */
+export type CamelCase<Type, Options extends CamelCaseOptions = {
+    preserveConsecutiveUppercase: true;
+}> = Type extends string ? string extends Type ? Type : Uncapitalize<CamelCaseFromArray<SplitWords<Type extends Uppercase<Type> ? Lowercase<Type> : Type>, Options>> : Type;
+export {};

package/dist/packages/components/src/util/camelCase.js

@@ -0,0 +1,2 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/camel-case.d.ts
+export {};

package/dist/packages/components/src/util/camelCasedPropertiesDeep.d.ts

@@ -0,0 +1,53 @@
+import type { CamelCase, CamelCaseOptions } from './camelCase';
+import type { UnknownArray } from './unknownArray';
+/**
+ * Convert object properties to camel case recursively.
+ *
+ * This can be useful when, for example, converting some API types from a different style.
+ *
+ * @see CamelCasedProperties
+ * @see CamelCase
+ *
+ * @example
+ * ```
+ * import type {CamelCasedPropertiesDeep} from 'type-fest';
+ *
+ * interface User {
+ * 	UserId: number;
+ * 	UserName: string;
+ * }
+ *
+ * interface UserWithFriends {
+ * 	UserInfo: User;
+ * 	UserFriends: User[];
+ * }
+ *
+ * const result: CamelCasedPropertiesDeep<UserWithFriends> = {
+ * 	userInfo: {
+ * 		userId: 1,
+ * 		userName: 'Tom',
+ * 	},
+ * 	userFriends: [
+ * 		{
+ * 			userId: 2,
+ * 			userName: 'Jerry',
+ * 		},
+ * 		{
+ * 			userId: 3,
+ * 			userName: 'Spike',
+ * 		},
+ * 	],
+ * };
+ * ```
+ *
+ * @category Change case
+ * @category Template literal
+ * @category Object
+ */
+export type CamelCasedPropertiesDeep<Value, Options extends CamelCaseOptions = {
+    preserveConsecutiveUppercase: true;
+}> = Value extends Function ? Value : Value extends UnknownArray ? CamelCasedPropertiesArrayDeep<Value> : Value extends Set<infer U> ? Set<CamelCasedPropertiesDeep<U, Options>> : {
+    [K in keyof Value as CamelCase<K, Options>]: CamelCasedPropertiesDeep<Value[K], Options>;
+};
+type CamelCasedPropertiesArrayDeep<Value extends UnknownArray> = Value extends [] ? [] : Value extends [infer U, ...infer V] ? [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>] : Value extends readonly [infer U, ...infer V] ? readonly [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>] : Value extends readonly [...infer U, infer V] ? [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>] : Value extends readonly [...infer U, infer V] ? readonly [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>] : Value extends Array<infer U> ? Array<CamelCasedPropertiesDeep<U>> : Value extends ReadonlyArray<infer U> ? ReadonlyArray<CamelCasedPropertiesDeep<U>> : never;
+export {};

package/dist/packages/components/src/util/camelCasedPropertiesDeep.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/src/util/formatPrice.d.ts

@@ -0,0 +1 @@
+export declare const formatPrice: (price?: number, currency?: string) => string;

package/dist/packages/components/src/util/formatPrice.js

@@ -0,0 +1,11 @@
+export const formatPrice = (price, currency = '$') => {
+    if (price == null) {
+        return '';
+    }
+    const options = {};
+    if (!Number.isInteger(price)) {
+        options.minimumFractionDigits = 2;
+        options.maximumFractionDigits = 2;
+    }
+    return `${currency}${price.toLocaleString('en-US', options)}`;
+};

package/dist/packages/components/src/util/internal.d.ts

@@ -0,0 +1,27 @@
+import type { Primitive } from './primitive';
+import type { Trim } from './trim';
+/**
+ * Matches any primitive, `void`, `Date`, or `RegExp` value.
+ */
+export type BuiltIns = Primitive | void | Date | RegExp;
+/**
+ * Matches non-recursive types.
+ */
+export type NonRecursiveType = BuiltIns | Function | (new (...arguments_: any[]) => unknown);
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+export type IsNumeric<T extends string> = T extends `${number}` ? Trim<T> extends T ? true : false : false;
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+export type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+export type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+export type WordSeparators = '-' | '_' | Whitespace;
+export type Whitespace = '\u{9}' | '\u{A}' | '\u{B}' | '\u{C}' | '\u{D}' | '\u{20}' | '\u{85}' | '\u{A0}' | '\u{1680}' | '\u{2000}' | '\u{2001}' | '\u{2002}' | '\u{2003}' | '\u{2004}' | '\u{2005}' | '\u{2006}' | '\u{2007}' | '\u{2008}' | '\u{2009}' | '\u{200A}' | '\u{2028}' | '\u{2029}' | '\u{202F}' | '\u{205F}' | '\u{3000}' | '\u{FEFF}';
+export type UpperCaseCharacters = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

package/dist/packages/components/src/util/internal.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/internal.d.ts
+export {};

package/dist/packages/components/src/util/primitive.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
+ *
+ * @category Type
+ */
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;

package/dist/packages/components/src/util/primitive.js

@@ -0,0 +1,2 @@
+// this type comes from https://github.com/sindresorhus/type-fest/blob/main/source/primitive.d.ts
+export {};

package/dist/packages/components/src/util/splitWords.d.ts

@@ -0,0 +1,55 @@
+import type { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from './internal';
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+export type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [
+    ...SkipEmptyWord<CurrentWord>,
+    ...SplitWords<RemainingCharacters>
+] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [
+    false,
+    true
+] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [
+    ...SkipEmptyWord<CurrentWord>,
+    ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>
+] : [
+    true,
+    false
+] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [
+    ...SkipEmptyWord<CurrentWord>,
+    ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>
+] : [
+    true,
+    true
+] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [
+    true,
+    true
+] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [
+    ...SkipEmptyWord<CurrentWord>,
+    ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>
+] : [
+    true,
+    true
+] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [
+    ...RemoveLastCharacter<CurrentWord, LastCharacter>,
+    ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>
+] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+export {};

package/dist/packages/components/src/util/splitWords.js

@@ -0,0 +1,2 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/split-words.d.ts
+export {};

package/dist/packages/components/src/util/trim.d.ts

@@ -0,0 +1,24 @@
+import type { Whitespace } from './internal';
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+export type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+export {};

package/dist/packages/components/src/util/trim.js

@@ -0,0 +1,2 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/trim.d.ts
+export {};

package/dist/packages/components/src/util/unknownArray.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+export type UnknownArray = readonly unknown[];

package/dist/packages/components/src/util/unknownArray.js

@@ -0,0 +1 @@
+export {};

package/dist/src/atoms/search/types.d.ts

@@ -0,0 +1,5 @@
+export type SelectedFilterOption = {
+    id: string;
+    displayName: string;
+    value: string;
+};

package/dist/src/atoms/search/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/common/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,2 @@
+import { type ButtonBaseProps } from './types';
+export declare const ButtonBase: ({ type, isDisabled, dataAttributes, buttonClass, text, textClass, icon, iconClass, dataTestId, onClick, disablePadding, }: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/common/ButtonBase/ButtonBase.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { createElement, useEffect, useRef } from 'react';
+import { ButtonBaseOverrides } from './types';
+import { Text } from '../../../components/common/Text/Text';
+export const ButtonBase = ({ type = 'button', isDisabled = false, dataAttributes, buttonClass, text, textClass, icon, iconClass = 'spiffy-tw-w-[21px] spiffy-tw-h-[21px]', dataTestId, onClick, disablePadding = false, }) => {
+    const buttonRef = useRef(null);
+    const buttonClassName = classNames({
+        [ButtonBaseOverrides.BUTTON]: true,
+        'spiffy-tw-flex': true,
+        'spiffy-tw-min-h-[36px]': true,
+        'spiffy-tw-cursor-pointer': true,
+        'spiffy-tw-items-center': true,
+        'spiffy-tw-gap-2': true,
+        'spiffy-tw-px-4': !disablePadding,
+        'spiffy-tw-transition-colors': true,
+        'spiffy-tw-opacity-40': isDisabled,
+        'spiffy-tw-cursor-not-allowed': isDisabled,
+        [`${buttonClass}`]: buttonClass != null,
+    });
+    const textClassName = classNames({
+        [ButtonBaseOverrides.BUTTON_TEXT]: true,
+        'spiffy-tw-whitespace-nowrap': true,
+        [`${textClass}`]: textClass != null,
+    });
+    const iconClassName = classNames({
+        [ButtonBaseOverrides.BUTTON_ICON]: true,
+        [`${iconClass}`]: iconClass != null,
+    });
+    useEffect(() => {
+        if (dataAttributes && buttonRef.current) {
+            Object.entries(dataAttributes).forEach(([key, value]) => {
+                buttonRef.current?.setAttribute(key, value);
+            });
+        }
+    }, [dataAttributes]);
+    return (_jsxs("button", { type: type, ref: buttonRef, className: buttonClassName, disabled: isDisabled, "data-testid": dataTestId, onClick: onClick, children: [icon &&
+                createElement(icon, {
+                    className: iconClassName,
+                }), _jsx(Text, { className: textClassName, children: text })] }));
+};

package/dist/src/components/common/ButtonBase/types.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, CSSProperties } from 'react';
+import type { TestProps } from '../../../components/test/types';
+export interface ButtonHoverStyles extends CSSProperties {
+    backgroundColor?: string;
+    color?: string;
+}
+export interface ButtonBaseProps extends TestProps {
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    isDisabled?: boolean;
+    dataAttributes?: Record<string, string>;
+    buttonClass?: string;
+    text: string;
+    textClass?: string;
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    iconClass?: string;
+    onClick?: () => void;
+    disablePadding?: boolean;
+    dataTestId?: string;
+}
+export declare enum ButtonBaseOverrides {
+    BUTTON = "spiffy-button-base-button",
+    BUTTON_TEXT = "spiffy-button-base-button-text",
+    BUTTON_ICON = "spiffy-button-base-button-icon"
+}

package/dist/src/components/common/ButtonBase/types.js

@@ -0,0 +1,6 @@
+export var ButtonBaseOverrides;
+(function (ButtonBaseOverrides) {
+    ButtonBaseOverrides["BUTTON"] = "spiffy-button-base-button";
+    ButtonBaseOverrides["BUTTON_TEXT"] = "spiffy-button-base-button-text";
+    ButtonBaseOverrides["BUTTON_ICON"] = "spiffy-button-base-button-icon";
+})(ButtonBaseOverrides || (ButtonBaseOverrides = {}));

package/dist/src/components/common/Headline/Headline.d.ts

@@ -0,0 +1,10 @@
+export type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';
+export type HeadlineProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: HeadlineVariant;
+    testId?: string;
+    id?: string;
+};
+export declare const Headline: ({ children, className, style, testId, variant }: HeadlineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/common/Headline/Headline.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { HeadlineVariantMap } from '../Text/textVariantClasses';
+export const Headline = ({ children, className, style, testId, variant = 'h1' }) => {
+    const variantClassNames = variant ? HeadlineVariantMap[variant] : {};
+    const textClassNames = classNames(className, variantClassNames, {
+        'spiffy-tw-font-[Poppins,sans-serif]': true,
+    });
+    const T1 = () => (_jsx("h1", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const T2 = () => (_jsx("h2", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const T3 = () => (_jsx("h3", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const H1 = () => (_jsx("h1", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const H2 = () => (_jsx("h2", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const H3 = () => (_jsx("h3", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    const H4 = () => (_jsx("h4", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+    switch (variant) {
+        case 't1':
+            return T1();
+        case 't2':
+            return T2();
+        case 't3':
+            return T3();
+        case 'h1':
+            return H1();
+        case 'h2':
+            return H2();
+        case 'h3':
+            return H3();
+        case 'h4':
+            return H4();
+        default:
+            throw new Error(`Invalid variant: ${variant}`);
+    }
+};

package/dist/src/components/common/ImageWithFallback/ImageWithFallback.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ImageWithFallbackProps {
+    src: string | undefined;
+    alt: string;
+    fallbackClassnames?: string;
+    fallback: React.ReactNode;
+    dataTestId?: string;
+    imageClassnames: string;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+export declare const ImageWithFallback: ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError, }: ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/common/ImageWithFallback/ImageWithFallback.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState } from 'react';
+export const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError, }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const imageExtraClassnames = classNames(imageClassnames, {
+        'spiffy-tw-block': isLoaded,
+        'spiffy-tw-hidden': !isLoaded,
+    });
+    const fallbackMergedClassNames = classNames({
+        'spiffy-tw-flex': true,
+        'spiffy-tw-flex-col': true,
+        'spiffy-tw-items-center': true,
+    }, fallbackClassnames);
+    if (isError) {
+        return _jsx("div", { className: fallbackMergedClassNames, children: fallback });
+    }
+    return (_jsxs(_Fragment, { children: [!isLoaded && _jsx("div", { className: fallbackMergedClassNames, children: fallback }), _jsx("img", { src: src, className: imageExtraClassnames, "data-testid": dataTestId, alt: alt, onLoad: () => {
+                    setIsLoaded(true);
+                    onLoad?.();
+                }, onError: () => {
+                    setIsError(true);
+                    onError?.();
+                } })] }));
+};