stackable-components 1.0.0

package/README.md

@@ -0,0 +1,295 @@
+# Stackables Components
+
+A collection of reusable React components designed for use with Contentstack projects. These components are built with Tailwind CSS and designed to work seamlessly with Contentstack's content modeling capabilities.
+
+## Installation
+
+```bash
+npm install stackables-components
+```
+
+## Quick Start
+
+```jsx
+import { HeroBanner, ProductCard } from 'stackables-components';
+
+// Import the required styles
+import 'stackables-components/styles/globals.css';
+
+function MyPage() {
+  return (
+    <div>
+      <HeroBanner 
+        heading="Welcome to Our Site"
+        subheading="Discover amazing products"
+        cta_button={{ text: "Get Started", link: "/products" }}
+      />
+      <ProductCard 
+        product_name="Amazing Product"
+        description="This product will change your life"
+        price={99.99}
+      />
+    </div>
+  );
+}
+```
+
+## Available Components
+
+### Typography
+- **Typography**: Themed text primitive for headings/body copy
+
+### Hero Banners
+- **HeroBanner**: Full-width gradient hero with CTA button
+- **SplitHeroBanner**: Split layout hero with content and image placeholder
+- **HeroBannerClassic**: Classic hero with heading lines, avatars, and footer stats
+- **SpotlightHero**: Hero with a spotlighted CTA list
+- **VideoDemoHero**: Hero with an animated video/thumbnail demo
+
+### Banners
+- **Banner** / **BannerLight**: Full-width promo banners (dark/light)
+- **BannerCallout**: Inline callout banner
+- **PromoBanner**: Rotating multi-slide promo banner
+- **CommunityBanner**: Banner with avatar stack and CTA
+- **CountdownBanner**: Banner with a countdown timer
+- **CookieConsentBanner**: Cookie consent bar
+
+### Carousels & Sliders
+- **ImageVideoCarousel**: Interactive image/video carousel with navigation
+- **CircleImageCarousel**: Circular image carousel
+- **VerticalProductCarousel**: Vertical scrolling product carousel
+- **GalleryCarousel**: Gallery-style slide carousel
+- **ProductSlider**: Product slide carousel with CTA
+
+### Product Components
+- **ProductCard** / **ProductCardRegular** / **ProductCardLarge**: Product display cards
+- **ProductBanner**: Banner-style product highlight
+- **ProductListing**: Grid layout for multiple products (PLP)
+- **ProductDetails**: Product detail page layout (PDP)
+
+### Cards
+- **FeatureCard**: Feature highlight card with icon
+- **ResourceCard**: Resource/article card list
+- **ProfileCard**: Profile card with stats
+- **FlipCard**: Card with a flip animation
+- **CardAccordion**: Expandable accordion card
+
+### Grids
+- **BentoGrid**: Bento-style mixed grid layout
+- **IndexSection**: Indexed list/grid section
+- **HexTileGrid**: Hexagonal tile grid
+- **CategoryGrid**: Category tile grid
+- **FlipCardGrid**: Grid of flip cards
+- **ImageGrid** / **ImageGridDynamic**: Static and dynamic image grids
+
+### Testimonials & Reviews
+- **Testimonial**: Testimonial quote block
+- **RatingSummary**: Aggregate rating summary
+- **CardStack**: Stacked testimonial cards
+- **Reviews**: Review list section
+
+### Logo Cloud
+- **LogoCloud**: Scrolling/static logo strip
+
+### FAQ
+- **FAQ**: Standard FAQ accordion
+- **FaqCategorized**: FAQ grouped by category
+
+### Empty State
+- **EmptyState**: Empty/placeholder state block
+
+### Pricing
+- **Pricing**: Pricing tier comparison
+- **PricingSpreadCard**: Single spread pricing card
+
+### Statistics
+- **StatCounterRow**: Row of animated stat counters
+
+### Forms
+- **ContactForm**: Customizable contact form
+- **ContactFormSplit**: Split-layout contact form
+- **NewsletterSignup**: Newsletter signup form
+
+### Navigation
+- **NavigationBar**: Responsive navigation with mobile menu
+- **ExtendedNavigation**: Multi-level navigation menu
+- **BreadcrumbNavigation**: Breadcrumb trail
+- **Sidebar**: Sidebar navigation
+- **FloatingDock**: Floating dock/quick-links nav
+
+### Footers
+- **FooterSimple**: Minimal single-row footer
+- **FooterMultiColumn**: Multi-column footer with links
+
+### CTAs
+- **TextCTA**: Text-led call-to-action section
+- **JustifiedTextCTA**: Justified-text call-to-action section
+
+### Buttons
+- **PrimaryButton**: Primary action button
+- **ToggleSwitch**: On/off toggle control
+
+### Article Pages
+- **ArticleDetails**: Article detail page layout
+- **ArticleListing**: Article listing page layout
+
+### Tabs
+- **Tabs**: Tabbed content section
+
+### Section Introduction
+- **SectionIntroduction**: Section heading/intro block
+- **SectionIntroductionTwoColumn**: Two-column section intro
+
+### Video
+- **VideoSection**: Video showcase section
+
+### Feature Benefits
+- **FeatureBenefitStrip**: Compact benefit strip
+- **FeatureBenefit** / **FeatureBenefitDark**: Benefit list sections (light/dark)
+- **FeatureBenefitWithImage**: Benefit section with supporting image
+- **FeatureBenefitRenderer**: Variant-driven benefit renderer
+- **StandardBenefit**: Configurable standard benefits section
+
+### Feature Showcase
+- **StickyScrollFeature**: Sticky scroll-driven feature showcase
+
+### Timeline
+- **VerticalTimeline** / **TimelineHorizontal** / **TimelineColumn**: Timeline layouts
+- **TimelineYearBlocks**: Year-grouped timeline blocks
+
+### Feature Comparison
+- **FeatureComparisonTable**: Tabular feature comparison
+- **FeatureComparisonVs**: Head-to-head comparison
+- **FeatureComparisonCards**: Card-based comparison
+
+### Team
+- **TeamBanner**: Team member showcase banner
+
+### Social
+- **SocialPostEmbed**: Embedded social post
+- **SocialLinks**: Social media link list
+
+### Process
+- **ProcessStep**: Step-by-step process section
+
+### Awards
+- **AwardsSection**: Awards/recognition showcase
+
+### Auth
+- **AuthSplitScreen**: Split-screen auth (sign in/up) layout
+
+
+## Container Width System
+
+Components use a flexible container width system. You can control the maximum width using CSS custom properties:
+
+```css
+/* Set global container width */
+.component-container {
+  --container-width: 1200px;
+}
+
+/* Or use preset classes */
+<div className="container-1440">
+  <HeroBanner />
+</div>
+```
+
+Available preset classes:
+- `container-768` (768px)
+- `container-1024` (1024px)
+- `container-1280` (1280px)
+- `container-1440` (1440px - default)
+- `container-1600` (1600px)
+- `container-1920` (1920px)
+
+## Component Schema (Supabase)
+
+This package ships **components only** — no bundled component catalog or schema data. Schema, default content, previews, and versioning for each component live in Supabase and are fetched at runtime, so the catalog can change without a new npm release.
+
+### Where it lives
+
+The `stackables_components` table holds one row per component **version**. The columns that matter for rendering:
+
+| Column                  | Purpose                                                                                      |
+| ----------------------- | --------------------------------------------------------------------------------------------- |
+| `react_component`     | Name of the export from this package (e.g.`"HeroBanner"`) — the key used to look it up in a `componentMap`. |
+| `content_type_uid`     | Contentstack content type / global field uid — identifies a component across versions.       |
+| `schema`               | JSONB array of Contentstack field definitions.                                               |
+| `default_field_values` | Curated starter content, keyed by field uid.                                                  |
+| `is_active`            | `true` for the current live version of a component.                                          |
+
+Full column reference, versioning rules, and RLS policy: see [`stackables-data-model.md`](../stackables-data-model.md) at the project root.
+
+### Matching types
+
+This package exports the TypeScript shapes that mirror that schema, so consuming apps don't have to redefine them:
+
+```ts
+import type { ComponentMetadata, ContentModel, ContentModelField } from 'stackables-components';
+```
+
+- **`ContentModelField`** — one Contentstack field definition (`uid`, `data_type`, `mandatory`, `enum`, nested `schema` for groups, …).
+- **`ContentModel`** — a content type / global field (`title`, `uid`, `schema: ContentModelField[]`).
+- **`ComponentMetadata`** — a catalog entry as consumed by an app: `{ id, name, category, description, component, contentModel }`.
+
+### Fetching it in your app
+
+Read the active catalog (directly from Supabase, or via an API route such as this project's `GET /api/catalog`), map each row into the `ComponentMetadata` shape, then resolve `component` against the components this package actually exports:
+
+```ts
+import { HeroBanner, ProductCard } from 'stackables-components';
+import type { ComponentMetadata } from 'stackables-components';
+
+const componentMap = { HeroBanner, ProductCard /* … */ };
+
+const { data: rows } = await supabase
+  .from('stackables_components')
+  .select('*')
+  .eq('is_active', true);
+
+const catalog: ComponentMetadata[] = (rows ?? []).map((row) => ({
+  id: row.slug ?? row.content_type_uid,
+  name: row.name,
+  category: row.category,
+  description: row.description ?? '',
+  component: row.react_component,
+  contentModel: {
+    title: row.content_type_title,
+    uid: row.content_type_uid,
+    schema: row.schema ?? [],
+  },
+}));
+
+catalog.forEach(({ component, contentModel }) => {
+  const Component = componentMap[component];
+  // contentModel.schema drives the editor controls/preview for this component
+});
+```
+
+> An earlier version of this package bundled a static `ComponentSchema` metadata array. That's been superseded by the Supabase catalog above — schema is now database-driven, not shipped in the npm package.
+
+## Styling
+
+This library requires Tailwind CSS. Make sure your project has Tailwind CSS configured. The components use utility classes and should integrate seamlessly with your existing Tailwind setup.
+
+## TypeScript Support
+
+Full TypeScript definitions are included. Import types for better development experience:
+
+```tsx
+import { HeroBannerProps, ProductCardProps } from 'stackables-components';
+
+const myHeroProps: HeroBannerProps = {
+  heading: "Welcome",
+  subheading: "Get started today"
+};
+```
+
+## Contributing
+
+This is a Contentstack Solutions project. For contributions or issues, please contact the Contentstack Solutions team.
+
+## License
+
+MIT

package/dist/components/ArticleDetailsPage/ArticleDetails.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ArticleDetailsProps {
+    article_title: string;
+    eyebrow_text: string;
+    subheading: string;
+    summary: string;
+    image: string;
+}
+export declare function ArticleDetails({ article_title: articleTitle, eyebrow_text: eyebrowText, subheading, summary, image, }: ArticleDetailsProps): React.JSX.Element;
+export default ArticleDetails;

package/dist/components/ArticleDetailsPage/index.d.ts

@@ -0,0 +1 @@
+export { ArticleDetails } from './ArticleDetails';

package/dist/components/ArticleListingPage/ArticleListing.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface ArticleItem {
+    uid?: string;
+    category?: string;
+    title?: string;
+    article_title?: string;
+    eyebrow_text?: string;
+    summary?: string;
+    image?: {
+        url?: string;
+        title?: string;
+    } | string;
+    author_details?: {
+        author_name?: string;
+        author_image?: string;
+        company_designation?: string;
+    };
+}
+export interface ArticleListingProps {
+    article?: ArticleItem[];
+    list_type?: 'Grid' | 'Carousel' | string;
+    columns?: 1 | 2 | 3 | 4 | number;
+    className?: string;
+}
+export declare function ArticleListing({ article, list_type: listType, columns, }: ArticleListingProps): React.JSX.Element;
+export default ArticleListing;

package/dist/components/ArticleListingPage/index.d.ts

@@ -0,0 +1 @@
+export { ArticleListing } from './ArticleListing';

package/dist/components/Auth/AuthSplitScreen.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface AuthSplitScreenLink {
+    title?: string;
+    href?: string;
+}
+export interface AuthSplitScreenSocialProvider {
+    /** Preset provider — ships a real brand mark. Ignored when `icon_image` is set. */
+    provider?: 'google' | 'facebook' | 'apple' | 'github' | 'microsoft' | string;
+    /** Uploaded asset URL, or a Contentstack asset object — overrides the preset mark. */
+    icon_image?: string | {
+        url?: string;
+    };
+}
+export interface AuthSplitScreenBadge {
+    label?: string;
+}
+export interface AuthSplitScreenLogo {
+    logo_image?: string | {
+        url?: string;
+    };
+    logo_text?: string;
+}
+export interface AuthSplitScreenTestimonial {
+    content?: string;
+    name?: string;
+    /** Rendered after the name, e.g. "Head of Product". `company` is bolded within it if both are set. */
+    designation?: string;
+    company?: string;
+}
+export interface AuthSplitScreenSubmitData {
+    mode: 'sign_in' | 'sign_up';
+    email: string;
+    password: string;
+}
+export interface AuthSplitScreenProps {
+    mode?: 'sign_in' | 'sign_up' | string;
+    logo?: AuthSplitScreenLogo;
+    heading?: string;
+    subheading?: string;
+    email_label?: string;
+    email_placeholder?: string;
+    password_label?: string;
+    password_placeholder?: string;
+    submit_button_text?: string;
+    divider_text?: string;
+    social_providers?: AuthSplitScreenSocialProvider[];
+    /** Shown before `footer_link`, e.g. "Already have an account?" */
+    footer_prompt?: string;
+    /** The toggle link between sign-in and sign-up — title + destination URL. */
+    footer_link?: AuthSplitScreenLink;
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** Small pills over the image, e.g. "Product Company". */
+    badges?: AuthSplitScreenBadge[];
+    testimonial?: AuthSplitScreenTestimonial;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    /** Fires on submit instead of a real network call — this component has no
+     *  backend of its own. Wire it to whatever auth the host app actually uses. */
+    onSubmit?: (data: AuthSplitScreenSubmitData) => void;
+    /** Fires when a social button is clicked, with the same `provider` key set on
+     *  that entry (or `'custom'` for an `icon_image` override with none set). */
+    onSocialSignIn?: (provider: string) => void;
+    className?: string;
+}
+export declare function AuthSplitScreen({ mode, logo, heading, subheading, email_label, email_placeholder, password_label, password_placeholder, submit_button_text, divider_text, social_providers, footer_prompt, footer_link, image, image_alt, badges, testimonial, background_color, text_color, button_color, button_text_color, accent_color, onSubmit, onSocialSignIn, className, }: AuthSplitScreenProps): React.JSX.Element;
+export default AuthSplitScreen;

package/dist/components/Auth/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthSplitScreen } from './AuthSplitScreen';
+export type { AuthSplitScreenProps, AuthSplitScreenLink, AuthSplitScreenSocialProvider, AuthSplitScreenTestimonial, AuthSplitScreenBadge, AuthSplitScreenLogo, AuthSplitScreenSubmitData, } from './AuthSplitScreen';

package/dist/components/Awards/AwardsSection.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface AwardsSectionLink {
+    title?: string;
+    href?: string;
+}
+export interface AwardsSectionItem {
+    /** Small line above the award name, e.g. `Digital Marketing`. */
+    category?: string;
+    /** The award itself, e.g. `Digital Impact Award`. */
+    title?: string;
+    /**
+     * Shown in the accent colour after the name. Free text, never parsed — `2022`,
+     * `FY24` and `Q1 2025` all render as given.
+     */
+    year?: string;
+    link?: AwardsSectionLink;
+}
+export interface AwardsSectionProps {
+    eyebrow_text?: string;
+    /**
+     * Small mark beside the eyebrow. Asset URL or a Contentstack asset object.
+     * Without one, a built-in dot cluster is drawn in the accent colour.
+     */
+    eyebrow_icon?: string | {
+        url?: string;
+    };
+    heading?: string;
+    awards?: AwardsSectionItem[];
+    /**
+     * Large decorative emblem beside the list — a crest, wreath or medal. Without
+     * one, a ringed star is drawn instead.
+     */
+    emblem_image?: string | {
+        url?: string;
+    };
+    emblem_alt?: string;
+    emblem_position?: 'Left' | 'Right' | string;
+    /** Hairline between award rows. */
+    show_dividers?: boolean;
+    /** Circular arrow button on each row that has a link. */
+    show_row_arrows?: boolean;
+    /** Diagonal hatching along the top and bottom edges. */
+    show_hatch?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** The year, the eyebrow mark, and the emblem's tint. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function AwardsSection({ eyebrow_text, eyebrow_icon, heading, awards, emblem_image, emblem_alt, emblem_position, show_dividers, show_row_arrows, show_hatch, background_color, text_color, accent_color, className, }: AwardsSectionProps): React.JSX.Element;
+export default AwardsSection;

package/dist/components/Awards/index.d.ts

@@ -0,0 +1,2 @@
+export { AwardsSection } from './AwardsSection';
+export type { AwardsSectionProps, AwardsSectionItem, AwardsSectionLink } from './AwardsSection';

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface BannerReference {
+    title?: string;
+    summary?: string;
+}
+export interface BannerCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface BannerProps {
+    label?: string;
+    heading?: string;
+    description?: string;
+    cta_button?: BannerCtaButton;
+    cta_secondary?: BannerCtaButton;
+    image?: string | {
+        url?: string;
+    };
+    /** When set, image renders as full-width background with this overlay darkness */
+    overlay?: 'light' | 'medium' | 'dark' | string;
+    /** Full-width alignment of the content block — only active when overlay is set */
+    text_alignment?: 'left' | 'center' | 'right' | string;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    /** Resolved Contentstack reference entry */
+    reference?: BannerReference;
+    className?: string;
+}
+export declare function Banner({ label, heading, description, cta_button, cta_secondary, image, overlay, text_alignment, text_color, button_color, button_text_color, reference, className, }: BannerProps): React.JSX.Element;
+export default Banner;

package/dist/components/Banner/BannerCallout.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface BannerCalloutCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface BannerCalloutProps {
+    heading?: string;
+    description?: string;
+    cta_button?: BannerCalloutCtaButton;
+    dismissible?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function BannerCallout({ heading, description, cta_button, dismissible, background_color, text_color, button_color, button_text_color, className, }: BannerCalloutProps): React.JSX.Element | null;
+export default BannerCallout;

package/dist/components/Banner/BannerFullWidth.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface BannerFullWidthCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface BannerFullWidthProps {
+    label?: string;
+    heading?: string;
+    description?: string;
+    cta_primary?: BannerFullWidthCtaButton;
+    cta_secondary?: BannerFullWidthCtaButton;
+    background_image?: string | {
+        url?: string;
+    };
+    /** 'light' | 'medium' | 'dark' */
+    overlay?: 'light' | 'medium' | 'dark' | string;
+    /** 'left' | 'center' */
+    text_alignment?: 'left' | 'center' | string;
+    className?: string;
+}
+export declare function BannerFullWidth({ label, heading, description, cta_primary, cta_secondary, background_image, overlay, text_alignment, className, }: BannerFullWidthProps): React.JSX.Element;
+export default BannerFullWidth;

package/dist/components/Banner/BannerLight.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface BannerLightReference {
+    title?: string;
+    summary?: string;
+}
+export interface BannerLightCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface BannerLightProps {
+    label?: string;
+    heading?: string;
+    description?: string;
+    cta_button?: BannerLightCtaButton;
+    image?: string | {
+        url?: string;
+    };
+    /** Resolved Contentstack reference entry */
+    reference?: BannerLightReference;
+    /** Which side the image sits on */
+    image_position?: 'left' | 'right' | string;
+    /** Alignment of text within the content block */
+    text_alignment?: 'left' | 'center' | 'right' | string;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function BannerLight({ label, heading, description, cta_button, image, reference, image_position, text_alignment, text_color, button_color, button_text_color, className, }: BannerLightProps): React.JSX.Element;
+export default BannerLight;

package/dist/components/Banner/CommunityBanner.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface CommunityBannerAvatar {
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+}
+export interface CommunityBannerCtaButton {
+    title?: string;
+    url?: string;
+    open_in_new_tab?: boolean;
+}
+export interface CommunityBannerProps {
+    logo?: string | {
+        url?: string;
+    };
+    logo_text?: string;
+    avatars?: CommunityBannerAvatar[];
+    avatar_size?: 'Small' | 'Medium' | 'Large' | string;
+    heading?: string;
+    description?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    cta_button?: CommunityBannerCtaButton;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function CommunityBanner({ logo, logo_text, avatars, avatar_size, heading, description, heading_alignment, cta_button, background_color, text_color, button_color, button_text_color, className, }: CommunityBannerProps): React.JSX.Element;
+export default CommunityBanner;

package/dist/components/Banner/CookieConsentBanner.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface CookieConsentBannerLink {
+    title?: string;
+    href?: string;
+}
+export interface CookieConsentCategory {
+    /** Storage key — stable across edits, e.g. "analytics". Defaults to a slug of `category_title`. */
+    key?: string;
+    category_title?: string;
+    description?: string;
+    /** Always on, toggle locked — for strictly necessary cookies. */
+    required?: boolean;
+}
+export interface CookieConsentBannerProps {
+    heading?: string;
+    message?: string;
+    policy_link?: CookieConsentBannerLink;
+    /** Per-category opt-in toggles. Leave empty for a plain Yes/No card with no "Customise" step. */
+    categories?: CookieConsentCategory[];
+    accept_button_text?: string;
+    reject_button_text?: string;
+    customise_link_text?: string;
+    preferences_heading?: string;
+    save_button_text?: string;
+    expand_details_text?: string;
+    hide_details_text?: string;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | string;
+    /** Uploaded asset URL, or a Contentstack asset object — overrides the built-in cookie icon. */
+    icon_image?: string | {
+        url?: string;
+    };
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function CookieConsentBanner({ heading, message, policy_link, categories, accept_button_text, reject_button_text, customise_link_text, preferences_heading, save_button_text, expand_details_text, hide_details_text, position, icon_image, background_color, text_color, button_color, button_text_color, className, }: CookieConsentBannerProps): React.JSX.Element | null;
+export default CookieConsentBanner;