@envive-ai/react-toolkit 0.1.4 → 0.1.6

package/dist/textVariantClasses-Cdg-UUHi.d.cts

@@ -0,0 +1,174 @@
+//#region src/components/Text/textVariantClasses.d.ts
+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;
+  };
+};
+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;
+  };
+};
+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;
+  };
+};
+declare const getVariantPlaceholderClassNames: (classes: Record<string, boolean>) => Record<string, boolean>;
+//#endregion
+export { HeadlineVariantMap, TextStyleVariantMap, TextVariantMap, getVariantPlaceholderClassNames };

package/dist/{textVariantClasses-5t3OricK.js → textVariantClasses-CnjwO2Fv.js}

@@ -1,4 +1,4 @@
-//#region src/components/common/Text/textVariantClasses.ts
+//#region src/components/Text/textVariantClasses.ts
 const HeadlineVariantMap = {
 	t1: {
 		"spiffy-headline": true,

package/dist/types-BQYpWDJ4.d.cts

@@ -0,0 +1,6 @@
+//#region src/test/types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+export { TestProps };

package/dist/types-BruEHw-X.d.ts

@@ -0,0 +1,6 @@
+//#region src/test/types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+export { TestProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -11,9 +11,9 @@
   "author": "Envive AI",
   "license": "UNLICENSED",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
   "files": [
     "dist",
     "src",
@@ -24,116 +24,94 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "@envive-ai/react-icons": "0.1.0",
+    "@envive-ai/react-hooks": "^0.1.1",
+    "@envive-ai/react-icons": "0.1.1",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
     "react-icons": "^5.0.1",
-    "react-indiana-drag-scroll": "^3.0.3-alpha",
-    "vite-plugin-svgr": "^4.5.0"
+    "react-indiana-drag-scroll": "^3.0.3-alpha"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@svgr/cli": "^8.1.0",
-    "copyfiles": "^2.4.1",
     "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   },
   "exports": {
-    "./common/ButtonBase/ButtonBase": {
-      "import": "./dist/common/ButtonBase/ButtonBase.js",
-      "require": "./dist/common/ButtonBase/ButtonBase.cjs"
+    "./Accordion": {
+      "import": "./dist/Accordion/index.js",
+      "require": "./dist/Accordion/index.cjs"
     },
-    "./common/Headline/Headline": {
-      "import": "./dist/common/Headline/Headline.js",
-      "require": "./dist/common/Headline/Headline.cjs"
+    "./ButtonBase": {
+      "import": "./dist/ButtonBase/index.js",
+      "require": "./dist/ButtonBase/index.cjs"
     },
-    "./common/ImageWithFallback/ImageWithFallback": {
-      "import": "./dist/common/ImageWithFallback/ImageWithFallback.js",
-      "require": "./dist/common/ImageWithFallback/ImageWithFallback.cjs"
+    "./FilterScrollbar": {
+      "import": "./dist/FilterScrollbar/index.js",
+      "require": "./dist/FilterScrollbar/index.cjs"
     },
-    "./common/ProductCard/ProductCard": {
-      "import": "./dist/common/ProductCard/ProductCard.js",
-      "require": "./dist/common/ProductCard/ProductCard.cjs"
+    "./Headline": {
+      "import": "./dist/Headline/index.js",
+      "require": "./dist/Headline/index.cjs"
     },
-    "./common/ProductCard/ProductCardSkeleton": {
-      "import": "./dist/common/ProductCard/ProductCardSkeleton.js",
-      "require": "./dist/common/ProductCard/ProductCardSkeleton.cjs"
+    "./ImageWithFallback": {
+      "import": "./dist/ImageWithFallback/index.js",
+      "require": "./dist/ImageWithFallback/index.cjs"
     },
-    "./common/ProductGrid/ProductGrid": {
-      "import": "./dist/common/ProductGrid/ProductGrid.js",
-      "require": "./dist/common/ProductGrid/ProductGrid.cjs"
+    "./ProductCard": {
+      "import": "./dist/ProductCard/index.js",
+      "require": "./dist/ProductCard/index.cjs"
     },
-    "./common/SparkleAnimation/SparkleAnimation": {
-      "import": "./dist/common/SparkleAnimation/SparkleAnimation.js",
-      "require": "./dist/common/SparkleAnimation/SparkleAnimation.cjs"
+    "./ProductGrid": {
+      "import": "./dist/ProductGrid/index.js",
+      "require": "./dist/ProductGrid/index.cjs"
     },
-    "./common/Spinner/Spinner": {
-      "import": "./dist/common/Spinner/Spinner.js",
-      "require": "./dist/common/Spinner/Spinner.cjs"
+    "./SearchAutocomplete": {
+      "import": "./dist/SearchAutocomplete/index.js",
+      "require": "./dist/SearchAutocomplete/index.cjs"
     },
-    "./common/SuggestionButton/SuggestionButton": {
-      "import": "./dist/common/SuggestionButton/SuggestionButton.js",
-      "require": "./dist/common/SuggestionButton/SuggestionButton.cjs"
+    "./SearchFilter": {
+      "import": "./dist/SearchFilter/index.js",
+      "require": "./dist/SearchFilter/index.cjs"
     },
-    "./common/Text/Text": {
-      "import": "./dist/common/Text/Text.js",
-      "require": "./dist/common/Text/Text.cjs"
+    "./SearchInput": {
+      "import": "./dist/SearchInput/index.js",
+      "require": "./dist/SearchInput/index.cjs"
     },
-    "./common/TextInput/TextInput": {
-      "import": "./dist/common/TextInput/TextInput.js",
-      "require": "./dist/common/TextInput/TextInput.cjs"
+    "./SearchInputForm": {
+      "import": "./dist/SearchInputForm/index.js",
+      "require": "./dist/SearchInputForm/index.cjs"
     },
-    "./search/FilterScrollbar/AppliedFiltersScrollbar": {
-      "import": "./dist/search/FilterScrollbar/AppliedFiltersScrollbar.js",
-      "require": "./dist/search/FilterScrollbar/AppliedFiltersScrollbar.cjs"
+    "./SearchResultsFilterSidebar": {
+      "import": "./dist/SearchResultsFilterSidebar/index.js",
+      "require": "./dist/SearchResultsFilterSidebar/index.cjs"
     },
-    "./search/FilterScrollbar/DynamicFiltersScrollbar": {
-      "import": "./dist/search/FilterScrollbar/DynamicFiltersScrollbar.js",
-      "require": "./dist/search/FilterScrollbar/DynamicFiltersScrollbar.cjs"
+    "./SearchResultsStates": {
+      "import": "./dist/SearchResultsStates/index.js",
+      "require": "./dist/SearchResultsStates/index.cjs"
     },
-    "./search/SearchFilter/SearchFilter": {
-      "import": "./dist/search/SearchFilter/SearchFilter.js",
-      "require": "./dist/search/SearchFilter/SearchFilter.cjs"
+    "./SparkleAnimation": {
+      "import": "./dist/SparkleAnimation/index.js",
+      "require": "./dist/SparkleAnimation/index.cjs"
     },
-    "./search/SearchFilter/SearchFilterHeader": {
-      "import": "./dist/search/SearchFilter/SearchFilterHeader.js",
-      "require": "./dist/search/SearchFilter/SearchFilterHeader.cjs"
+    "./Spinner": {
+      "import": "./dist/Spinner/index.js",
+      "require": "./dist/Spinner/index.cjs"
     },
-    "./search/SearchFilter/SearchFilterItem": {
-      "import": "./dist/search/SearchFilter/SearchFilterItem.js",
-      "require": "./dist/search/SearchFilter/SearchFilterItem.cjs"
+    "./SuggestionButton": {
+      "import": "./dist/SuggestionButton/index.js",
+      "require": "./dist/SuggestionButton/index.cjs"
     },
-    "./search/SearchInput/SearchInput": {
-      "import": "./dist/search/SearchInput/SearchInput.js",
-      "require": "./dist/search/SearchInput/SearchInput.cjs"
+    "./Text": {
+      "import": "./dist/Text/index.js",
+      "require": "./dist/Text/index.cjs"
     },
-    "./search/SearchInputAutocomplete/SearchAutocomplete": {
-      "import": "./dist/search/SearchInputAutocomplete/SearchAutocomplete.js",
-      "require": "./dist/search/SearchInputAutocomplete/SearchAutocomplete.cjs"
+    "./TextInput": {
+      "import": "./dist/TextInput/index.js",
+      "require": "./dist/TextInput/index.cjs"
     },
-    "./search/SearchInputForm/SearchInputForm": {
-      "import": "./dist/search/SearchInputForm/SearchInputForm.js",
-      "require": "./dist/search/SearchInputForm/SearchInputForm.cjs"
-    },
-    "./search/SearchResultsFilterSidebar/SearchResultsFilter": {
-      "import": "./dist/search/SearchResultsFilterSidebar/SearchResultsFilter.js",
-      "require": "./dist/search/SearchResultsFilterSidebar/SearchResultsFilter.cjs"
-    },
-    "./search/SearchResultsStates/NoSearchResultsFound": {
-      "import": "./dist/search/SearchResultsStates/NoSearchResultsFound.js",
-      "require": "./dist/search/SearchResultsStates/NoSearchResultsFound.cjs"
-    },
-    "./search/SearchResultsStates/SearchResultsGrid": {
-      "import": "./dist/search/SearchResultsStates/SearchResultsGrid.js",
-      "require": "./dist/search/SearchResultsStates/SearchResultsGrid.cjs"
-    },
-    "./search/SearchResultsStates/SearchResultsLoadingGrid": {
-      "import": "./dist/search/SearchResultsStates/SearchResultsLoadingGrid.js",
-      "require": "./dist/search/SearchResultsStates/SearchResultsLoadingGrid.cjs"
-    },
-    "./*": "./*"
+    "./package.json": "./package.json"
   }
 }

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,90 @@
+import { motion } from 'framer-motion';
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Text } from '@envive-ai/react-toolkit/Text';
+import ChevronDown from '@envive-ai/react-icons/ChevronDown';
+
+interface AccordionProps {
+  title: string;
+  content: React.ReactNode;
+}
+
+const ANIMATION_DURATION = 0.3;
+
+export const Accordion = ({ title, content }: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const titleWrapperClasses = classNames({
+    'spiffy-tw-border-b': true,
+    'spiffy-tw-border-[--spiffy-colors-border-light]': true,
+    'spiffy-tw-pb-2': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-group': true,
+  });
+
+  const titleClasses = classNames({
+    'spiffy-tw-uppercase': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': true,
+    '!spiffy-tw-font-[400]': true,
+    'group-aria-expanded:!spiffy-tw-font-medium': true,
+  });
+
+  const contentClasses = classNames({
+    'spiffy-tw-overflow-hidden': true,
+  });
+
+  return (
+    <div>
+      <button
+        aria-expanded={isOpen}
+        type="button"
+        className={titleWrapperClasses}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Text variant="body4" className={titleClasses}>
+          {title}
+        </Text>
+        <motion.div
+          variants={{
+            open: {
+              rotate: 180,
+            },
+            closed: {
+              rotate: 360,
+            },
+          }}
+          animate={isOpen ? 'open' : 'closed'}
+          transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        >
+          <ChevronDown />
+        </motion.div>
+      </button>
+      <motion.div
+        variants={{
+          open: {
+            height: 'auto',
+            marginTop: '24px',
+            marginBottom: '24px',
+          },
+          closed: {
+            height: '0px',
+            marginTop: '0px',
+            marginBottom: '0px',
+          },
+        }}
+        className={contentClasses}
+        initial={{ height: 0 }}
+        animate={isOpen ? 'open' : 'closed'}
+        transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        ref={contentRef}
+      >
+        {content}
+      </motion.div>
+    </div>
+  );
+};

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { SelectedFilterOption } from 'src/atoms/search/types';
+import { Text } from '@envive-ai/react-toolkit/Text';
+
+interface AppliedFiltersScrollbarProps {
+  selectedFilterOptions: SelectedFilterOption[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+}
+
+export const AppliedFiltersScrollbar = ({
+  selectedFilterOptions,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  appliedFilterBackgroundClasses,
+  onRemoveFilter,
+}: AppliedFiltersScrollbarProps) => {
+  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 (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {selectedFilterOptions.map((filter) => {
+        return (
+          <button
+            key={filter.id}
+            className={buttonClasses}
+            type="button"
+            onClick={() => onRemoveFilter(filter)}
+            aria-label={`Remove filter: ${filter.displayName}`}
+          >
+            <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
+              <Text variant="body3">{filter.displayName}</Text>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+              >
+                <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}
+                />
+              </svg>
+            </div>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/ButtonBase/index.ts

@@ -0,0 +1,2 @@
+export * from './ButtonBase';
+export * from './types';

package/src/components/{common/ButtonBase → ButtonBase}/types.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
-import { TestProps } from 'src/components/test/types';
+import { TestProps } from 'src/test/types';
 
 export interface ButtonHoverStyles extends CSSProperties {
   backgroundColor?: string;

package/src/components/{search/FilterScrollbar → DynamicFiltersScrollbar}/DynamicFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/common/Text/Text';
+import { Text } from '@envive-ai/react-toolkit/Text';
 
 interface DynamicFiltersScrollbarProps {
   availableDynamicFilters: { name: string; displayName: string }[];

package/src/components/{search/FilterScrollbar → FilterScrollbar}/AppliedFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from 'src/components/common/Text/Text';
+import { Text } from 'src/components/Text/Text';
 import type { SelectedFilterOption } from 'src/atoms/search/types';
 
 interface AppliedFiltersScrollbarProps {

package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from 'src/components/Text/Text';
+
+interface DynamicFiltersScrollbarProps {
+  availableDynamicFilters: { name: string; displayName: string }[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+
+export const DynamicFiltersScrollbar = ({
+  availableDynamicFilters,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  onToggleDynamicFilter,
+}: DynamicFiltersScrollbarProps) => {
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {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 (
+          <button
+            key={name}
+            type="button"
+            className={buttonClasses}
+            onClick={() => {
+              onToggleDynamicFilter({
+                filter: name,
+                dynamicFilterDisplayName: displayName,
+              });
+            }}
+          >
+            <Text variant="body3">{displayName}</Text>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/FilterScrollbar/index.ts

@@ -0,0 +1,2 @@
+export * from './AppliedFiltersScrollbar';
+export * from './DynamicFiltersScrollbar';

package/src/components/Headline/index.ts

@@ -0,0 +1 @@
+export * from './Headline';

package/src/components/ImageWithFallback/index.ts

@@ -0,0 +1 @@
+export * from './ImageWithFallback';