@envive-ai/react-toolkit 0.1.9 → 0.1.11

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,84 +1,181 @@
 import classNames from 'classnames';
-import { SearchFilterItem } from './SearchFilterItem';
-import { Text } from 'src/components/Text/Text';
-import { ButtonBase } from 'src/components/ButtonBase/ButtonBase';
 import { SearchFilterProps } from './types';
+import { useCallback } from 'react';
+import { SearchFilterHeader } from './SearchFilterHeader';
+import { useHasFilterStateChanged } from './useHasFilterStateChanged';
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from './utils';
+import { ModalSheet } from '../ModalSheet';
+import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
+import { ToggleButton } from '../ToggleButton';
+import { Accordion } from '../Accordion';
+import { RadioButtonGroup } from '../RadioButtonGroup';
+import { SearchFilterFooter } from './SearchFilterFooter';
+
+const SortFilter = ({
+  filter,
+  selectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+}: FilterProps) => {
+  const filterTitle = filter.displayName;
+
+  const options = filter.items.map((item) => ({
+    label: item.displayName,
+    value: item.filterItemId,
+    isSelected: item.isSelected,
+  }));
+
+  const content = (
+    <RadioButtonGroup
+      options={options}
+      name={filterTitle}
+      onChange={(value) => {
+        const selectedItem = filter.items.find((item) => item.filterItemId === value);
+        selectFilterItem({
+          filterId: filter.filterId,
+          filterItemId: value,
+          isSelected: true,
+          displayName: selectedItem?.displayName || value,
+        });
+      }}
+      gap="large"
+      textButtonGap="large"
+      value={filter.items.find((item) => item.isSelected)?.filterItemId}
+      fillColor={radioButtonFillColor}
+      hoverColor={radioButtonHoverColor}
+      uncheckedBorderColor={radioButtonUncheckedBorderColor}
+    />
+  );
+
+  return <Accordion title={filterTitle} content={content} />;
+};
+
+const FilterItem = ({ filterId, filterItem, selectFilterItem }: FilterItemProps) => (
+  <ToggleButton
+    label={filterItem.displayName}
+    secondaryLabel={`(${filterItem.productCount})`}
+    isSelected={filterItem.isSelected}
+    onClick={() =>
+      selectFilterItem({
+        filterId,
+        filterItemId: filterItem.filterItemId,
+        isSelected: !filterItem.isSelected,
+        displayName: filterItem.displayName,
+      })
+    }
+    variant="default"
+  />
+);
+
+const Filter = ({ filter, selectFilterItem }: FilterProps) => {
+  const filterContentClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-wrap': true,
+    'spiffy-tw-gap-[8px]': true,
+    'spiffy-tw-pb-[1px]': true,
+  });
+
+  const selectedFilterItems = getSelectedFilterItemsCount(filter);
+
+  const filterTitle =
+    selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
+  const content = (
+    <div className={filterContentClassName}>
+      {filter.items.map((item) => (
+        <FilterItem
+          key={item.filterItemId}
+          filterId={filter.filterId}
+          filterItem={item}
+          selectFilterItem={selectFilterItem}
+        />
+      ))}
+    </div>
+  );
+  return <Accordion title={filterTitle} content={content} />;
+};
 
 export const SearchFilter = ({
-  isOpen,
-  setIsOpen,
   filters,
-  // productCount,
+  productCount,
   selectFilterItem,
   clearAllFilters,
-  // applyFiltersUnchangedClasses,
-  // applyFiltersChangedClasses,
-  filterButtonText,
+  isOpen,
+  setIsOpen,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  headerContent,
+  footerContent,
+  headerClassName,
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
-  // filterCloseIconVariant,
-  headerContent,
+  filterCloseIconVariant,
 }: SearchFilterProps) => {
-  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 closeModal = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const filterCount = getTotalSelectedFilterItemsCount(filters);
 
-  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 hasFiltersChanged = useHasFilterStateChanged(filters, 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',
-  );
+  const filterWrapperClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-gap-[16px]': true,
+    'spiffy-tw-px-[24px]': true,
+    'spiffy-tw-py-[16px]': true,
+    'spiffy-tw-max-h-screen': true,
+    'spiffy-tw-overflow-y-auto': true,
+  });
 
   return (
-    <div className={modalClasses}>
-      <div className={overlayClasses} onClick={() => setIsOpen(false)} />
-      <div className={sidebarClasses}>
-        {headerContent}
-        <div className="spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6">
-          {filters.map((filter) => (
-            <div key={filter.filterId} className="spiffy-tw-mb-6">
-              <Text variant="body2" className="spiffy-tw-font-medium spiffy-tw-mb-3">
-                {filter.displayName}
-              </Text>
-              <ul>
-                {filter.items.map((item) => (
-                  <SearchFilterItem
-                    key={item.filterItemId}
-                    filterItem={{ ...item, filterId: filter.filterId }}
-                    onSelectFilterItem={selectFilterItem}
-                    radioButtonFillColor={radioButtonFillColor}
-                    radioButtonHoverColor={radioButtonHoverColor}
-                    radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
-                  />
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-        <div className="spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3">
-          <ButtonBase
-            onClick={clearAllFilters}
-            text="Clear All"
-            buttonClass="spiffy-tw-w-full spiffy-tw-mb-2"
+    <ModalSheet
+      isOpen={isOpen}
+      closeModal={closeModal}
+      headerProps={{
+        headerContent: headerContent || (
+          <SearchFilterHeader
+            closeModal={closeModal}
+            productCount={productCount}
+            headerClassName={headerClassName ?? ''}
+            filterCloseIconVariant={filterCloseIconVariant}
           />
-          <ButtonBase
-            onClick={() => setIsOpen(false)}
-            text={filterButtonText}
-            buttonClass="spiffy-tw-w-full"
+        ),
+        chevronColor: '#000',
+      }}
+      footerProps={{
+        footerContent: footerContent || (
+          <SearchFilterFooter
+            closeModal={closeModal}
+            clearAllFilters={clearAllFilters}
+            filterCount={filterCount}
+            hasFiltersChanged={hasFiltersChanged}
+            applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+            applyFiltersChangedClasses={applyFiltersChangedClasses}
           />
-        </div>
+        ),
+      }}
+    >
+      <div className={filterWrapperClassName}>
+        {filters
+          .filter((filter) => filter.displayName !== '')
+          .map((filter) => {
+            if (filter.filterId === 'sort') {
+              return (
+                <SortFilter
+                  key={filter.filterId}
+                  filter={filter}
+                  selectFilterItem={selectFilterItem}
+                  radioButtonFillColor={radioButtonFillColor}
+                  radioButtonHoverColor={radioButtonHoverColor}
+                  radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+                />
+              );
+            }
+            return (
+              <Filter key={filter.filterId} filter={filter} selectFilterItem={selectFilterItem} />
+            );
+          })}
       </div>
-    </div>
+    </ModalSheet>
   );
 };

package/src/components/SearchFilter/SearchFilterFooter.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { ButtonBase } from '../ButtonBase';
+import { FilterFooterProps } from '@envive-ai/react-hooks/types';
+
+export const SearchFilterFooter = ({
+  closeModal,
+  clearAllFilters,
+  filterCount,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  hasFiltersChanged,
+}: FilterFooterProps) => {
+  const clearAllButtonEnabled = filterCount > 0;
+
+  const footerWrapperClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-col': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-border-t': true,
+    'spiffy-tw-border-t-[--spiffy-colors-border-light]': true,
+    'spiffy-tw-p-[16px]': true,
+    'spiffy-tw-gap-[16px]': true,
+  });
+  const applyFilterButtonClassName = classNames(
+    'spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full',
+    hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses,
+  );
+  const clearAllButtonClassName = classNames({
+    'spiffy-tw-flex': true,
+    'spiffy-tw-flex-row': true,
+    'spiffy-tw-justify-center': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': clearAllButtonEnabled,
+    'spiffy-tw-text-[--spiffy-colors-text-secondary]': !clearAllButtonEnabled,
+  });
+
+  return (
+    <div className={footerWrapperClassName}>
+      <ButtonBase
+        isDisabled={!hasFiltersChanged}
+        buttonClass={applyFilterButtonClassName}
+        text="Apply Filters"
+        onClick={closeModal}
+      />
+      <ButtonBase
+        isDisabled={!clearAllButtonEnabled}
+        buttonClass={clearAllButtonClassName}
+        text="Clear All"
+        onClick={clearAllFilters}
+      />
+    </div>
+  );
+};

package/src/components/SearchFilter/types.ts

@@ -1,4 +1,5 @@
 import {
+  CloseIconVariant,
   SearchFilterDatum,
   SearchFilterItemDatum,
   SelectFilterItem,
@@ -40,5 +41,5 @@ export type SearchFilterProps = {
   radioButtonFillColor: string;
   radioButtonHoverColor?: string;
   radioButtonUncheckedBorderColor?: string;
-  // filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant;
 };

package/src/components/SearchFilter/useHasFilterStateChanged.tsx

@@ -0,0 +1,40 @@
+import { useState, useMemo, useEffect } from 'react';
+import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
+
+export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: boolean) => {
+  // Track initial filter states when modal opens
+  const [initialFilterStates, setInitialFilterStates] = useState<Record<string, boolean>>({});
+
+  // Create current filter states map to check for filter changes
+  const currentFilterStates = useMemo(() => {
+    const states: Record<string, boolean> = {};
+    filters.forEach((filter) => {
+      filter.items.forEach((item) => {
+        states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
+      });
+    });
+    return states;
+  }, [filters]);
+
+  // Check if filters have changed by comparing states
+  const hasFiltersChanged = useMemo(() => {
+    // If no initial states captured yet, no changes
+    if (Object.keys(initialFilterStates).length === 0) {
+      return false;
+    }
+
+    const changed = Object.keys(currentFilterStates).some(
+      (key) => currentFilterStates[key] !== initialFilterStates[key],
+    );
+
+    return changed;
+  }, [currentFilterStates, initialFilterStates]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setInitialFilterStates(currentFilterStates);
+    }
+  }, [isOpen]);
+
+  return hasFiltersChanged;
+};

package/src/components/SearchFilter/utils.ts

@@ -0,0 +1,15 @@
+import { SearchFilterDatum, SearchFilterItemDatum } from '@envive-ai/react-hooks/types';
+
+export const getSelectedFilterItemsCount = (filter: SearchFilterDatum) => {
+  return filter.items.filter((item: SearchFilterItemDatum) => item.isSelected).length;
+};
+
+// Gets the count of total active filters excluding sort filters
+export const getTotalSelectedFilterItemsCount = (filters: SearchFilterDatum[]) => {
+  return filters.reduce((acc: number, filter: SearchFilterDatum) => {
+    if (filter.filterId === 'sort') {
+      return acc;
+    }
+    return acc + getSelectedFilterItemsCount(filter);
+  }, 0);
+};

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -10,7 +10,7 @@ import {
   SearchResultsGrid,
   SearchResultsLoadingGrid,
 } from '../SearchResultsStates';
-import { SearchResultsState } from './utils';
+import { SearchResultsState } from '@envive-ai/react-hooks/hooks';
 
 interface SearchResultsContentProps {
   searchResultsState: SearchResultsState;

package/src/components/SearchResultsContent/index.ts

@@ -1,2 +1 @@
 export * from './SearchResultsContent';
-export * from './utils';

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
-import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
 import { SearchFilterSidebarVariant } from './types';
 import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
 
 export type SearchResultsFilterProps = {
   productCount: number;
@@ -58,7 +58,7 @@ export const SearchResultsFilter = ({
         radioButtonFillColor={radioButtonFillColor}
         radioButtonHoverColor={radioButtonHoverColor}
         radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
-        // filterCloseIconVariant={filterCloseIconVariant}
+        filterCloseIconVariant={filterCloseIconVariant}
         headerContent={
           <SearchFilterHeader
             closeModal={() => setIsOpen(false)}

package/src/components/Styles/EnviveTailwindPreset.ts

@@ -0,0 +1,285 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import typography from '@tailwindcss/typography';
+
+/**
+ * Helper function to create content paths for the Envive React Toolkit
+ * This should be used in the consuming application's tailwind.config.js
+ *
+ * @param additionalPaths - Additional content paths to include
+ * @returns Array of content paths including the toolkit components
+ */
+export const createEnviveContentPaths = (additionalPaths: string[] = []): string[] => {
+  // Dynamically resolve the path to the toolkit's dist directory
+  let toolkitPath: string;
+
+  try {
+    // This will work in Node.js environments (build time)
+    if (typeof require !== 'undefined' && typeof require.resolve === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const path = require('path');
+      toolkitPath = path.join(
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        path.dirname(require.resolve('@envive-ai/react-toolkit/package.json')),
+        'dist/**/*.{js,cjs}',
+      );
+    } else {
+      // Fallback for environments where require is not available
+      toolkitPath = './node_modules/@envive-ai/react-toolkit/dist/**/*.{js,cjs}';
+    }
+  } catch {
+    // Fallback if resolution fails
+    toolkitPath = './node_modules/@envive-ai/react-toolkit/dist/**/*.{js,cjs}';
+  }
+
+  return [
+    // Include the toolkit's built components
+    toolkitPath,
+    // Include any additional paths provided by the consuming application
+    ...additionalPaths,
+  ];
+};
+
+/** @type {import('tailwindcss').Config} */
+export const EnviveTailwindPreset = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  prefix: 'spiffy-tw-',
+  theme: {
+    screens: {
+      sm: '480px',
+      md: '768px',
+      lg: '976px',
+      xl: '1440px',
+    },
+    fontFamily: {
+      sans: ['Inter Variable', 'Poppins', 'sans-serif'],
+    },
+    fontSize: {
+      xs: '12px',
+      sm: '14px',
+      md: '16px',
+      lg: '18px',
+      xl: '20px',
+    },
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    spacing: {
+      px: '1px',
+      0.5: '2px',
+      1: '4px',
+      1.5: '6px',
+      2: '8px',
+      2.5: '10px',
+      3: '12px',
+      3.5: '14px',
+      4: '16px',
+      5: '20px',
+      6: '24px',
+      7: '28px',
+      8: '32px',
+      9: '36px',
+      10: '40px',
+      12: '48px',
+      14: '56px',
+      16: '64px',
+      20: '80px',
+      24: '96px',
+      28: '112px',
+      32: '128px',
+      36: '144px',
+      40: '160px',
+      44: '176px',
+      48: '192px',
+      52: '208px',
+      56: '224px',
+      60: '240px',
+      64: '256px',
+      72: '288px',
+      80: '320px',
+      96: '384px',
+    },
+    borderRadius: {
+      none: '0',
+      sm: '2px',
+      base: '4px',
+      md: '6px',
+      lg: '8px',
+      xl: '12px',
+      '2xl': '16px',
+      '3xl': '24px',
+      full: '9999px',
+    },
+    extend: {
+      keyframes: {
+        pulse: {
+          '0%': { borderColor: '#EDF2F7', background: '#EDF2F7' },
+          '50%': {},
+          '100%': { borderColor: '#A0AEC0', background: '#A0AEC0' },
+        },
+        ellipse_162_1_flow_1: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_162_1_flow_2: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_162_1_flow_5: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_162_1_flow_6: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        // Ellipse 163_2 animations
+        ellipse_163_2_flow_2: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_163_2_flow_3: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_163_2_flow_6: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_163_2_flow_7: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        // Ellipse 164_3 animations
+        ellipse_164_3_flow_3: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_164_3_flow_4: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_164_3_flow_7: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_164_3_flow_8: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+      },
+      animation: {
+        pulse: 'pulse 0.8s linear infinite alternate',
+        'ellipse-1-complete':
+          'ellipse_162_1_flow_1 0.3s ease-out 0s forwards, ellipse_162_1_flow_2 0.2s ease-out 0.3s forwards, ellipse_162_1_flow_5 0.2s ease-out 0.91s forwards, ellipse_162_1_flow_6 0.2s ease-out 1.11s forwards',
+        'ellipse-2-complete':
+          'ellipse_163_2_flow_2 0.2s ease-out 0.3s forwards, ellipse_163_2_flow_3 0.2s ease-out 0.5s forwards, ellipse_163_2_flow_6 0.2s ease-out 1.11s forwards, ellipse_163_2_flow_7 0.2s ease-out 1.31s forwards',
+        'ellipse-3-complete':
+          'ellipse_164_3_flow_3 0.2s ease-out 0.5s forwards, ellipse_164_3_flow_4 0.2s ease-out 0.7s forwards, ellipse_164_3_flow_7 0.2s ease-out 1.31s forwards, ellipse_164_3_flow_8 0.2s ease-out 1.51s forwards',
+      },
+    },
+  },
+  // Content should be defined by the consuming application
+  content: [createEnviveContentPaths(['./index.html', './src/**/*.{js,ts,jsx,tsx}'])],
+  plugins: [typography],
+};