@envive-ai/react-toolkit 0.1.0

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

@@ -0,0 +1,210 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import OutlinedStar from '@envive/icons/src/OutlinedStar';
+import FourPointStar from '@envive/icons/src/FourPointStar';
+import { ButtonBase } from '../ButtonBase/ButtonBase';
+export const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = 'spiffy-suggestion-button-question-class';
+export const SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = 'spiffy-suggestion-button-answer-class';
+export const SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = 'spiffy-suggestion-button-text-class';
+// Add a comment that includes the hover prefix so that tailwind will pickup and generate the right css
+// Common class patterns to avoid duplication
+const BORDER_CLASS = 'spiffy-tw-border'; // hover:spiffy-tw-border
+const TEXT_LINK_CLASSES = [
+    'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+    'spiffy-tw-fill-[--spiffy-colors-text-link]', // hover:spiffy-tw-fill-[--spiffy-colors-text-link]
+    'spiffy-tw-stroke-[--spiffy-colors-text-link]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-link]
+];
+const TEXT_LIGHT_CLASSES = [
+    'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+    'spiffy-tw-fill-[--spiffy-colors-text-light]', // hover:spiffy-tw-fill-[--spiffy-colors-text-light]
+    'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
+];
+const TEXT_PRIMARY_CLASSES = [
+    'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
+    'spiffy-tw-fill-[--spiffy-colors-text-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-text-primary]
+    'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
+];
+const ACCENT_PRIMARY_CLASSES = [
+    'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
+    'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
+];
+const DARK_BACKGROUND_CLASSES = [
+    'spiffy-tw-bg-[--spiffy-colors-background-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-dark]
+    'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+];
+const SECONDARY_DARK_BACKGROUND_CLASSES = [
+    'spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]
+    'spiffy-tw-border-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark]
+];
+const variantClassMap = new Map([
+    [
+        'outlined',
+        [
+            'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
+            ...TEXT_LINK_CLASSES,
+        ],
+    ],
+    [
+        'outlinedLight',
+        [
+            'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
+            'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
+            ...TEXT_LINK_CLASSES,
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'primary',
+        [
+            'spiffy-tw-bg-[--spiffy-colors-background-primary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-primary]
+            'spiffy-tw-border-[--spiffy-colors-background-primary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+            ...TEXT_LIGHT_CLASSES,
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'secondary',
+        [
+            'spiffy-tw-bg-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary]
+            'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+            'spiffy-tw-border-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+            ...ACCENT_PRIMARY_CLASSES,
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'tertiary',
+        [
+            'spiffy-tw-bg-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-tertiary]
+            'spiffy-tw-border-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+            ...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]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+            ...ACCENT_PRIMARY_CLASSES,
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'darkAccent',
+        [
+            ...DARK_BACKGROUND_CLASSES,
+            'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+            'spiffy-tw-fill-[--spiffy-colors-text-accent]', // hover:spiffy-tw-fill-[--spiffy-colors-text-accent]
+            'spiffy-tw-stroke-[--spiffy-colors-text-accent]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-accent]
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'transparent',
+        [
+            'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
+            'spiffy-tw-border-[--spiffy-colors-background-light]', // hover:spiffy-tw-border-[--spiffy-colors-background-light]
+            'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+            'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
+            'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'transparentDark',
+        [
+            'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
+            'spiffy-tw-border-[--spiffy-colors-border-light]', // hover:spiffy-tw-border-[--spiffy-colors-border-light]
+            'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
+            'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
+            'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
+            BORDER_CLASS,
+        ],
+    ],
+    // This is used as the hover state for transparent
+    ['secondaryDark', [...SECONDARY_DARK_BACKGROUND_CLASSES, ...TEXT_LINK_CLASSES, BORDER_CLASS]],
+    [
+        'secondaryAccent',
+        [
+            ...SECONDARY_DARK_BACKGROUND_CLASSES,
+            'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+            ...ACCENT_PRIMARY_CLASSES,
+            BORDER_CLASS,
+        ],
+    ],
+    [
+        'lightDark',
+        [
+            'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
+            'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover: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}`);
+export 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) ?? [];
+    // Separate border classes for proper cascading
+    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(' ')}`;
+    // Choose icon based on variant to match legacy exactly
+    const getIcon = () => {
+        if (isAnswer)
+            return undefined;
+        if (variant === 'transparentDark') {
+            return OutlinedStar;
+        }
+        return FourPointStar;
+    };
+    return (_jsx(ButtonBase, { text: content, dataAttributes: dataAttributes, dataTestId: dataTestId, isDisabled: isDisabled, 
+        // we may want to support custom icons in the future
+        icon: getIcon(), iconClass: isAnswer ? undefined : iconClass, textClass: `${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`, buttonClass: buttonClass, onClick: onClick }));
+};

package/dist/packages/components/src/components/common/SuggestionButton/types.d.ts

@@ -0,0 +1 @@
+export type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';

package/dist/packages/components/src/components/common/SuggestionButton/types.js

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

package/dist/packages/components/src/components/common/Text/Text.d.ts

@@ -0,0 +1,12 @@
+import { type TextType, type TextVariant } from './types';
+type TextProps = {
+    children: React.ReactNode;
+    noOfLines?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: TextVariant;
+    type?: TextType;
+    testId?: string;
+};
+export declare const Text: ({ children, className, style, noOfLines, testId, type, variant, }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/components/src/components/common/Text/Text.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { TextVariantMap } from './textVariantClasses';
+export 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 (_jsx("p", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+        case 'span':
+            return (_jsx("span", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+        case 'sub':
+            return (_jsx("sub", { "data-testid": testId, className: textClassNames, style: style, children: children }));
+        default:
+            throw new Error(`Invalid text type: ${type}`);
+    }
+};

package/dist/packages/components/src/components/common/Text/textVariantClasses.d.ts

@@ -0,0 +1,171 @@
+export declare const HeadlineVariantMap: {
+    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;
+    };
+};
+export declare const TextVariantMap: {
+    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;
+    };
+};
+export 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;
+    };
+};
+export declare const getVariantPlaceholderClassNames: (classes: Record<string, boolean>) => Record<string, boolean>;

package/dist/packages/components/src/components/common/Text/textVariantClasses.js

@@ -0,0 +1,103 @@
+// TODO: add the rest of the variants as needed
+export const HeadlineVariantMap = {
+    t1: {
+        'spiffy-headline': true,
+        'spiffy-headline-1': true,
+        'spiffy-tw-text-[32px]': true,
+        'spiffy-tw-font-medium': true,
+        'spiffy-tw-leading-[124%]': true,
+    },
+    t2: {
+        'spiffy-headline': true,
+        'spiffy-headline-1': true,
+        'spiffy-tw-text-[16px]': true,
+        'spiffy-tw-font-medium': true,
+        'spiffy-tw-leading-[124%]': true,
+    },
+    t3: {
+        'spiffy-headline': true,
+        'spiffy-headline-1': true,
+        'spiffy-tw-text-[24px]': true,
+        'spiffy-tw-leading-[120%]': true,
+    },
+    h1: {
+        'spiffy-headline': true,
+        'spiffy-headline-1': true,
+        'spiffy-tw-text-[20px]': true,
+        'spiffy-tw-font-normal': true,
+        'spiffy-tw-leading-[120%]': true,
+    },
+    h2: {
+        'spiffy-headline': true,
+        'spiffy-headline-2': true,
+        'spiffy-tw-text-[16px]': true,
+        'spiffy-tw-font-normal': true,
+        'spiffy-tw-leading-[124%]': true,
+    },
+    h3: {
+        'spiffy-headline': true,
+        'spiffy-headline-3': true,
+        'spiffy-tw-text-[15px]': true,
+        'spiffy-tw-font-medium': true,
+        'spiffy-tw-leading-[124%]': true,
+    },
+    h4: {
+        'spiffy-headline': true,
+        'spiffy-headline-4': true,
+        'spiffy-tw-text-[14px]': true,
+        'spiffy-tw-font-medium': true,
+        'spiffy-tw-leading-[124%]': true,
+    },
+};
+// TODO: add the rest of the variants as needed
+export const TextVariantMap = {
+    body1: {
+        'spiffy-body-text': true,
+        'spiffy-body-1': true,
+        'spiffy-tw-text-[20px]': true,
+        'spiffy-tw-font-normal': true,
+        'spiffy-tw-line-height-[120%]': true,
+    },
+    body2: {
+        'spiffy-body-text': true,
+        'spiffy-body-2': true,
+        'spiffy-tw-text-[16px]': true,
+        'spiffy-tw-font-normal': true,
+        'spiffy-tw-line-height-[148%]': true,
+    },
+    body3: {
+        'spiffy-body-text': true,
+        'spiffy-body-3': true,
+        'spiffy-tw-text-sm': true,
+        'spiffy-tw-font-normal': true,
+        'spiffy-tw-leading-[140%]': true,
+    },
+    body4: {
+        'spiffy-body-text': true,
+        'spiffy-body-4': true,
+        'spiffy-tw-text-xs': true,
+        'spiffy-tw-font-medium': true,
+        'spiffy-tw-leading-[130%]': true,
+    },
+    body5: {
+        'spiffy-body-text': true,
+        'spiffy-body-5': true,
+        'spiffy-tw-text-[10px]': true,
+        'spiffy-tw-font-normal': true,
+    },
+};
+export const TextStyleVariantMap = {
+    ...TextVariantMap,
+    ...HeadlineVariantMap,
+};
+export const getVariantPlaceholderClassNames = (classes) => {
+    return Object.keys(classes).reduce((acc, key) => {
+        if (key.includes('spiffy-tw')) {
+            acc[`placeholder:${key}`] = classes[key];
+        }
+        else {
+            acc[`${key}-placeholder`] = classes[key];
+        }
+        return acc;
+    }, {});
+};

package/dist/packages/components/src/components/common/Text/types.d.ts

@@ -0,0 +1,16 @@
+export declare enum ExpandableTextOverrides {
+    EXPANDABLE_TEXT_CONTAINER = "spiffy-expandable-text-container",
+    EXPANDABLE_TEXT = "spiffy-expandable-text",
+    EXPANDABLE_BUTTON = "spiffy-expandable-button"
+}
+export type TextVariant = 'body1' | 'body2' | 'body3' | 'body4' | 'body5';
+export type TextType = 'p' | 'span' | 'sub';
+export type HeadlineProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    variant?: HeadlineVariant;
+    testId?: string;
+    id?: string;
+};
+export type HeadlineVariant = 't1' | 't2' | 't3' | 'h1' | 'h2' | 'h3' | 'h4';

package/dist/packages/components/src/components/common/Text/types.js

@@ -0,0 +1,6 @@
+export var ExpandableTextOverrides;
+(function (ExpandableTextOverrides) {
+    ExpandableTextOverrides["EXPANDABLE_TEXT_CONTAINER"] = "spiffy-expandable-text-container";
+    ExpandableTextOverrides["EXPANDABLE_TEXT"] = "spiffy-expandable-text";
+    ExpandableTextOverrides["EXPANDABLE_BUTTON"] = "spiffy-expandable-button";
+})(ExpandableTextOverrides || (ExpandableTextOverrides = {}));

package/dist/packages/components/src/components/common/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextStyleVariantMap } from '../Text/textVariantClasses';
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    borderRadius: 'sm' | 'md' | 'lg' | 'xl';
+    borderColorClass?: string;
+    placeholderVariant?: keyof typeof TextStyleVariantMap;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Disabling this prevents an otherwise simple wrapper around input
+// from becoming needlessly verbose while maintaining flexibility.
+// Keeping it enabled requires listing every possible prop.
+import React from 'react';
+import classNames from 'classnames';
+import { getVariantPlaceholderClassNames, TextStyleVariantMap } from '../Text/textVariantClasses';
+export 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 _jsx("input", { ref: ref, ...rest, className: inputClasses });
+});

package/dist/packages/components/src/components/models/colorsConfig.d.ts

@@ -0,0 +1,26 @@
+declare enum ColorNames {
+    TextPrimary = "text-primary",
+    TextSecondary = "text-secondary",
+    TextAccent = "text-accent",
+    TextLink = "text-link",
+    TextLight = "text-light",
+    BackgroundPrimary = "background-primary",
+    BackgroundSecondary = "background-secondary",
+    BackgroundSecondaryDark = "background-secondary-dark",
+    BackgroundTertiary = "background-tertiary",
+    BackgroundDark = "background-dark",
+    BackgroundLight = "background-light",
+    BackgroundSaturated = "background-saturated",
+    BorderLight = "border-light",
+    BorderMedium = "border-medium",
+    BorderDark = "border-dark",
+    BorderOutline = "border-outline",
+    AccentPrimary = "accent-primary",
+    AccentSecondary = "accent-secondary"
+}
+type ColorMapping = {
+    [key in ColorNames]: string;
+};
+declare const colorVar: (color: ColorNames) => string;
+export { ColorNames, colorVar };
+export type { ColorMapping };

package/dist/packages/components/src/components/models/colorsConfig.js

@@ -0,0 +1,23 @@
+var ColorNames;
+(function (ColorNames) {
+    ColorNames["TextPrimary"] = "text-primary";
+    ColorNames["TextSecondary"] = "text-secondary";
+    ColorNames["TextAccent"] = "text-accent";
+    ColorNames["TextLink"] = "text-link";
+    ColorNames["TextLight"] = "text-light";
+    ColorNames["BackgroundPrimary"] = "background-primary";
+    ColorNames["BackgroundSecondary"] = "background-secondary";
+    ColorNames["BackgroundSecondaryDark"] = "background-secondary-dark";
+    ColorNames["BackgroundTertiary"] = "background-tertiary";
+    ColorNames["BackgroundDark"] = "background-dark";
+    ColorNames["BackgroundLight"] = "background-light";
+    ColorNames["BackgroundSaturated"] = "background-saturated";
+    ColorNames["BorderLight"] = "border-light";
+    ColorNames["BorderMedium"] = "border-medium";
+    ColorNames["BorderDark"] = "border-dark";
+    ColorNames["BorderOutline"] = "border-outline";
+    ColorNames["AccentPrimary"] = "accent-primary";
+    ColorNames["AccentSecondary"] = "accent-secondary";
+})(ColorNames || (ColorNames = {}));
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+export { ColorNames, colorVar };

package/dist/packages/components/src/components/search/FilterScrollbar/AppliedFiltersScrollbar.d.ts

@@ -0,0 +1,11 @@
+import type { SelectedFilterOption } from '../../../../../../src/atoms/search/types';
+interface AppliedFiltersScrollbarProps {
+    selectedFilterOptions: SelectedFilterOption[];
+    filterBarClassNames: string;
+    filterDefaultClasses: string;
+    filterHoverClasses: string;
+    appliedFilterBackgroundClasses: string;
+    onRemoveFilter: (filter: SelectedFilterOption) => void;
+}
+export declare const AppliedFiltersScrollbar: ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter, }: AppliedFiltersScrollbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};