@envive-ai/react-toolkit 0.1.0 → 0.1.1

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

@@ -1,26 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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

@@ -1,103 +0,0 @@
-// 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

@@ -1,16 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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 {};

package/dist/packages/components/src/components/search/FilterScrollbar/AppliedFiltersScrollbar.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from '../../../../../../src/components/common/Text/Text';
-export const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter, }) => {
-    if (selectedFilterOptions.length === 0) {
-        return null;
-    }
-    // Extract border and text classes from filterDefaultClasses, excluding background because everything is shared between filters except for the applied filters background
-    const filterDefaultWithoutBg = filterDefaultClasses
-        .replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, '')
-        .trim();
-    const buttonClasses = classNames(' spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap', filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
-    const iconColor = 'currentColor'; // match with text color
-    return (_jsx(ScrollContainer, { className: filterBarClassNames, hideScrollbars: true, children: selectedFilterOptions.map((filter) => {
-            return (_jsx("button", { className: buttonClasses, type: "button", onClick: () => onRemoveFilter(filter), "aria-label": `Remove filter: ${filter.displayName}`, children: _jsxs("div", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]", children: [_jsx(Text, { variant: "body3", children: filter.displayName }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: _jsx("path", { d: "M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z", fill: iconColor }) })] }) }, filter.id));
-        }) }));
-};

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

@@ -1,15 +0,0 @@
-interface DynamicFiltersScrollbarProps {
-    availableDynamicFilters: {
-        name: string;
-        displayName: string;
-    }[];
-    filterBarClassNames: string;
-    filterDefaultClasses: string;
-    filterHoverClasses: string;
-    onToggleDynamicFilter: ({ filter, dynamicFilterDisplayName, }: {
-        filter: string;
-        dynamicFilterDisplayName: string;
-    }) => void;
-}
-export declare const DynamicFiltersScrollbar: ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter, }: DynamicFiltersScrollbarProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/packages/components/src/components/search/FilterScrollbar/DynamicFiltersScrollbar.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from '../../../../../../src/components/common/Text/Text';
-export const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames, filterDefaultClasses, filterHoverClasses, onToggleDynamicFilter, }) => {
-    return (_jsx(ScrollContainer, { className: filterBarClassNames, hideScrollbars: true, children: availableDynamicFilters.map(({ name, displayName }) => {
-            const buttonClasses = classNames('spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ', filterHoverClasses, filterDefaultClasses);
-            return (_jsx("button", { type: "button", className: buttonClasses, onClick: () => {
-                    onToggleDynamicFilter({
-                        filter: name,
-                        dynamicFilterDisplayName: displayName,
-                    });
-                }, children: _jsx(Text, { variant: "body3", children: displayName }) }, name));
-        }) }));
-};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilter.d.ts

@@ -1,2 +0,0 @@
-import type { SearchFilterProps } from './types';
-export declare const SearchFilter: ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilter.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { SearchFilterItem } from './SearchFilterItem';
-import { Text } from '../../../../../../src/components/common/Text/Text';
-import { ButtonBase } from '../../../../../../src/components/common/ButtonBase/ButtonBase';
-export const SearchFilter = ({ isOpen, setIsOpen, filters, 
-// productCount,
-selectFilterItem, clearAllFilters, 
-// applyFiltersUnchangedClasses,
-// applyFiltersChangedClasses,
-filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, 
-// filterCloseIconVariant,
-headerContent, }) => {
-    const modalClasses = classNames('spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all', {
-        'spiffy-tw-translate-x-full': !isOpen,
-        'spiffy-tw-translate-x-0': isOpen,
-    });
-    const overlayClasses = classNames('spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50', {
-        'spiffy-tw-opacity-0': !isOpen,
-        'spiffy-tw-opacity-100': isOpen,
-    });
-    const sidebarClasses = classNames('spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl');
-    return (_jsxs("div", { className: modalClasses, children: [_jsx("div", { className: overlayClasses, onClick: () => setIsOpen(false) }), _jsxs("div", { className: sidebarClasses, children: [headerContent, _jsx("div", { className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6", children: filters.map((filter) => (_jsxs("div", { className: "spiffy-tw-mb-6", children: [_jsx(Text, { variant: "body2", className: "spiffy-tw-font-medium spiffy-tw-mb-3", children: filter.displayName }), _jsx("ul", { children: filter.items.map((item) => (_jsx(SearchFilterItem, { filterItem: item, onSelectFilterItem: selectFilterItem, radioButtonFillColor: radioButtonFillColor, radioButtonHoverColor: radioButtonHoverColor, radioButtonUncheckedBorderColor: radioButtonUncheckedBorderColor }, item.id))) })] }, filter.id))) }), _jsxs("div", { className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3", children: [_jsx(ButtonBase, { onClick: clearAllFilters, text: "Clear All", buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2" }), _jsx(ButtonBase, { onClick: () => setIsOpen(false), text: filterButtonText, buttonClass: "spiffy-tw-w-full" })] })] })] }));
-};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterHeader.d.ts

@@ -1,2 +0,0 @@
-import type { SearchFilterHeaderProps } from './types';
-export declare const SearchFilterHeader: ({ closeModal, productCount, headerClassName, filterCloseIconVariant, }: SearchFilterHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterHeader.js

@@ -1,9 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { Text } from '../../../../../../src/components/common/Text/Text';
-export const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant, }) => {
-    const closeIconColor = filterCloseIconVariant === 'dark'
-        ? 'var(--spiffy-colors-text-primary)'
-        : 'var(--spiffy-colors-text-light)';
-    return (_jsxs("div", { className: classNames('spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3', headerClassName), children: [_jsxs(Text, { variant: "body2", className: "spiffy-tw-font-medium", children: ["Filters (", productCount, ")"] }), _jsx("button", { onClick: closeModal, className: "spiffy-tw-p-2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: _jsx("path", { d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z", fill: closeIconColor }) }) })] }));
-};

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterItem.d.ts

@@ -1,2 +0,0 @@
-import type { SearchFilterItemProps } from './types';
-export declare const SearchFilterItem: ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, }: SearchFilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/src/components/search/SearchFilter/SearchFilterItem.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { Text } from '../../../../../../src/components/common/Text/Text';
-export const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, }) => {
-    const { displayName, isSelected } = filterItem;
-    const radioClasses = classNames('spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2', 'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center', radioButtonUncheckedBorderColor, radioButtonHoverColor, {
-        [radioButtonFillColor]: isSelected,
-    });
-    return (_jsxs("li", { className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer", onClick: () => onSelectFilterItem(filterItem), children: [_jsx(Text, { variant: "body3", children: displayName }), _jsx("div", { className: radioClasses, children: isSelected && (_jsx("div", { className: classNames('spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full', {
-                        'spiffy-tw-bg-white': radioButtonFillColor.includes('spiffy-tw-bg-'),
-                        'spiffy-tw-bg-black': radioButtonFillColor.includes('spiffy-tw-bg-white'),
-                    }) })) })] }));
-};

package/dist/packages/components/src/components/search/SearchFilter/types.d.ts

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-export type SearchFilterItem = {
-    id: string;
-    displayName: string;
-    value: string;
-    isSelected: boolean;
-};
-export type SearchFilter = {
-    id: string;
-    displayName: string;
-    items: SearchFilterItem[];
-};
-export type SelectFilterItem = (filterItem: SearchFilterItem) => void;
-export interface SearchFilterItemProps {
-    filterItem: SearchFilterItem;
-    onSelectFilterItem: SelectFilterItem;
-    radioButtonFillColor: string;
-    radioButtonHoverColor: string;
-    radioButtonUncheckedBorderColor: string;
-}
-export interface SearchFilterHeaderProps {
-    closeModal: () => void;
-    productCount: number;
-    headerClassName: string;
-    filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
-}
-export interface SearchFilterProps {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    filters: SearchFilter[];
-    productCount: number;
-    selectFilterItem: SelectFilterItem;
-    clearAllFilters: () => void;
-    applyFiltersUnchangedClasses: string;
-    applyFiltersChangedClasses: string;
-    filterButtonText: string;
-    radioButtonFillColor: string;
-    radioButtonHoverColor: string;
-    radioButtonUncheckedBorderColor: string;
-    filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
-    headerContent: ReactNode;
-}

package/dist/packages/components/src/components/search/SearchFilter/types.js

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

package/dist/packages/components/src/components/search/SearchInput/SearchInput.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { SearchInputVariant } from '../SearchInputForm/types';
-export interface SearchInputProps {
-    searchInputVariant?: SearchInputVariant;
-    value: string;
-    placeholder?: string;
-    suggestions?: string[];
-    className?: string;
-    dataTestId?: string;
-    ariaActivedescendant?: string;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onChange: (newValue: string) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-}
-export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;