@geowiki/design-system 0.16.0-dev.1 → 0.16.0-dev.3

package/README.md

@@ -0,0 +1,254 @@
+# @geowiki/design-system
+
+The foundational UI component library for the GeoWiki platform. This package provides accessible, themeable components built on [Radix UI](https://www.radix-ui.com/) primitives, a comprehensive icon set, design tokens, and shared utilities — all styled with [Tailwind CSS](https://tailwindcss.com/).
+
+## Installation
+
+```bash
+pnpm add @geowiki/design-system
+```
+
+**Peer dependencies:** `react >= 18.2.0` and `react-dom >= 18.2.0`
+
+## Setup
+
+### 1. Import styles
+
+Import the package stylesheet in your application entry point:
+
+```tsx
+import "@geowiki/design-system/styles.css";
+```
+
+### 2. Extend Tailwind config
+
+To use the design system's Tailwind theme (colors, typography, animations) in your own components:
+
+```js
+// tailwind.config.js
+const designSystemConfig = require("@geowiki/design-system/tailwind-config");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [designSystemConfig],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // Include design-system components in Tailwind's content scan
+    "./node_modules/@geowiki/design-system/dist/**/*.{js,mjs}",
+  ],
+};
+```
+
+### 3. Import components
+
+```tsx
+import { Button, Dialog, DialogContent, DialogTrigger, cn } from "@geowiki/design-system";
+```
+
+## Package Exports
+
+| Export Path                        | Description                                |
+| ---------------------------------- | ------------------------------------------ |
+| `@geowiki/design-system`          | All components, icons, hooks, and utilities |
+| `@geowiki/design-system/styles.css` | Compiled CSS (Tailwind + design tokens)   |
+| `@geowiki/design-system/tailwind-config` | Tailwind configuration preset        |
+
+## Component Catalog
+
+### UI Primitives
+
+41 accessible, unstyled-by-default components built on Radix UI, styled with Tailwind and `class-variance-authority`:
+
+| Component | Component | Component | Component |
+| --------- | --------- | --------- | --------- |
+| Accordion | Alert | AlertDialog | AspectRatio |
+| Avatar | Badge | Button | Calendar |
+| Card | Checkbox | Collapsible | Command |
+| ContextMenu | Dialog | DropdownMenu | Form |
+| HoverCard | Input | Label | Menubar |
+| NavigationMenu | Popover | Progress | RadioGroup |
+| ScrollArea | Select | Separator | Sheet |
+| Skeleton | Slider | Switch | Table |
+| Tabs | Tag | TagList | Textarea |
+| Toast | Toaster | Toggle | Tooltip |
+| useToast | | | |
+
+### Icons
+
+28 custom SVG icon components for application UI:
+
+`AccountIcon` `AtomIcon` `BookTextIcon` `CalendarIcon` `CameraIcon` `ChartLineDotsIcon` `ChatsIcons` `ClipboardIcon` `CpuIcon` `DesktopCodeIcon` `FarmerClustersIcon` `GridDividersIcon` `HardDriveIcon` `HeadphonesIcon` `ImageIcon` `LayerGroupIcon` `LegendIcon` `MapLayersIcon` `MicroscopeIcon` `MinusIcon` `PlusIcon` `ResourcesIcon` `SettingsIcon` `StopWatchCheckIcon` `UserGroupIcon` `VideoPlayIcon` `XIcon`
+
+A polymorphic `Icon` component is also available for dynamic icon rendering.
+
+### Map Icons
+
+11 specialized icons for GIS and map visualization:
+
+`Download` `FarmerClusterPin` `Hexagon` `IconPaths` `Legend` `LocationIcon` `MapIcon` `Microscope` `ObservationPin` `Overlay` `UsersGroup`
+
+### Design Elements
+
+22 higher-level, application-specific components:
+
+`AboutInfoItem` `Breadcrumb` `DesignButton` `Carousel` `DesignCheckbox` `Cookies` `Country` `Infobox` `DesignInput` `KeyInfoItem` `LastUpdatedTag` `NoResults` `DesignRadioGroup` `DesignSelect` `SimpleTag` `DesignSwitch` `DesignTag` `TagsGroup` `TestWeight` `ThreeColumn` `Typography` `VersionDisplay`
+
+### Elements
+
+15 utility and presentation components:
+
+`ElementButton` `ButtonLink` `Error` `FeatureDisabled` `IframeViewer` `Loader` `LocalLoader` `MediaEmbedItem` `PermissionDisabled` `ShowLargeText` `ShowShortText` `SizedImage` `UnderConstruction` `DisplayItem`
+
+### Shared Components
+
+Reusable composite components and hooks:
+
+| Component | Description |
+| --------- | ----------- |
+| `CustomTable` | Data table built on `@tanstack/react-table` |
+| `FullPageLoader` | Full-screen loading overlay |
+| `CustomImage` | Enhanced image component |
+| `Loader` | Inline loading spinner |
+| `Pagination` | Page navigation controls |
+| `Search` | Search input with debounce |
+| `ThemeSwitcher` | Light/dark theme toggle |
+| `useDebounce` | Debounce hook for values |
+
+### Buttons & Inputs
+
+| Component | Description |
+| --------- | ----------- |
+| `DeleteButton` | Destructive action button |
+| `PrimaryButton` | Primary CTA button |
+| `OldCustomInput` | Legacy styled input |
+| `MultiSelect` | Multi-value select (react-select) |
+| `TextArea` | Styled textarea |
+
+### Other
+
+| Component | Description |
+| --------- | ----------- |
+| `UmamiAnalytics` | Umami analytics script injection |
+| `HeroImage` | Hero section image component |
+| `Horizontal` | Horizontal panel layout |
+
+## Utilities
+
+| Export | Description |
+| ------ | ----------- |
+| `cn(...inputs)` | Merges class names using `clsx` + `tailwind-merge`. Use this instead of raw string concatenation to avoid Tailwind class conflicts. |
+| `getPages(totalItems, pageSize)` | Calculates pagination metadata (total pages, offsets). |
+
+## Models
+
+| Export | Description |
+| ------ | ----------- |
+| `LinkButtonItem` | TypeScript interface for link button configuration objects. |
+
+## Design Tokens
+
+The package ships a comprehensive set of CSS custom properties defined in `src/styles/tokens.css`. These tokens drive the Tailwind theme and can be overridden for theming.
+
+### Color System
+
+- **Primary scale:** `--primary-50` through `--primary-950` (11 steps)
+- **Semantic colors:** `--background`, `--foreground`, `--card`, `--popover`, `--muted`, `--secondary`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`
+- **Tag palette:** 11 named tag colors — blue, dark-blue, light-green, dark-green, orange, light-purple, purple, dark-purple, pink, turquoise, yellow
+- **Legacy colors:** `--primary-black`, `--primary-green`, `--primary-white`, `--system-error`
+
+### Typography
+
+Fonts: **Montserrat** (primary), **Open Sans**, **Hanken Grotesk**
+
+| Scale | Sizes |
+| ----- | ----- |
+| Headings | `h1`–`h9` (with accent/italic variants for `h1`, `h2`) |
+| Body | `body-12`, `body-14`, `body-15`, `body-16`, `body-18`, `body-20` (with medium/semibold/bold variants) |
+| Landing | `landing-title` (80px, with accent italic variant) |
+| Caption | `caption` (16px, tracked) |
+
+## Architecture
+
+```
+@geowiki/design-system
+├── src/
+│   ├── components/
+│   │   ├── ui/              # Radix UI primitives (41)
+│   │   ├── Icons/           # Custom SVG icons (28)
+│   │   │   └── MapIcons/    # GIS-specific icons (11)
+│   │   ├── DesignElements/  # Application components (22)
+│   │   ├── Elements/        # Utility components (15)
+│   │   ├── Shared/          # Composite components (8) + hooks
+│   │   ├── Button/          # Specialized buttons (2)
+│   │   ├── Input/           # Input variants (3)
+│   │   ├── Analytics/       # Analytics integration
+│   │   ├── Hero/            # Hero section
+│   │   └── Panel/           # Panel layouts
+│   ├── lib/
+│   │   ├── utils.ts         # cn(), getPages()
+│   │   ├── models/          # TypeScript interfaces
+│   │   └── styles/
+│   │       └── tokens.css   # CSS custom properties
+│   └── index.tsx            # Barrel export
+├── tailwind.config.js       # Tailwind theme (importable as preset)
+├── styles.css               # Entry point for CSS build
+└── tsup.config.ts           # Build configuration
+```
+
+### How it fits in the monorepo
+
+```
+geowiki app  →  @geowiki/ui  →  @geowiki/design-system
+                (business UI)    (primitives & tokens)
+```
+
+`@geowiki/design-system` contains only standalone, dependency-free UI components. It has no knowledge of APIs, state management, or application logic. The `@geowiki/ui` package imports from design-system and adds business-specific behavior (API integration, store bindings, etc.).
+
+## Development
+
+### Scripts
+
+```bash
+pnpm build        # Build with tsup + Tailwind CSS
+pnpm lint         # ESLint
+pnpm type-check   # TypeScript validation
+pnpm clean        # Remove dist, node_modules, .turbo
+```
+
+### Build output
+
+The build produces three artifacts in `dist/`:
+
+| File | Format | Description |
+| ---- | ------ | ----------- |
+| `index.js` | CommonJS | Node.js / bundler import |
+| `index.mjs` | ESM | Modern bundler import |
+| `index.d.ts` | TypeScript | Type declarations |
+| `styles.css` | CSS | Minified Tailwind + tokens |
+
+### Adding a new component
+
+1. Create the component in the appropriate `src/components/` subdirectory.
+2. Export it from `src/index.tsx`.
+3. If the component uses new design tokens, add the CSS custom properties to `src/styles/tokens.css` and map them in `tailwind.config.js`.
+4. Run `pnpm build` to verify the build succeeds.
+
+## Tech Stack
+
+| Concern | Library |
+| ------- | ------- |
+| Component primitives | [Radix UI](https://www.radix-ui.com/) |
+| Styling | [Tailwind CSS 3.3](https://tailwindcss.com/) |
+| Variant API | [class-variance-authority](https://cva.style/) |
+| Class merging | [clsx](https://github.com/lukeed/clsx) + [tailwind-merge](https://github.com/dcastil/tailwind-merge) |
+| Icons | Custom SVG + [Lucide React](https://lucide.dev/) + [Heroicons](https://heroicons.com/) |
+| Data tables | [@tanstack/react-table](https://tanstack.com/table) |
+| Multi-select | [react-select](https://react-select.com/) |
+| Calendar | [react-day-picker](https://react-day-picker.js.org/) |
+| Carousel | [Embla Carousel](https://www.embla-carousel.com/) |
+| Command palette | [cmdk](https://cmdk.paco.me/) |
+| Build tool | [tsup](https://tsup.egoist.dev/) |
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -359,11 +359,11 @@ interface TagProps {
 }
 declare const Tag: ({ tag, className }: TagProps) => react_jsx_runtime.JSX.Element;
 
-interface Props$g {
+interface Props$i {
     tags?: string[];
     tagColor?: string;
 }
-declare const TagList: (props: Props$g) => react_jsx_runtime.JSX.Element;
+declare const TagList: (props: Props$i) => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
 }
@@ -605,14 +605,14 @@ interface FullPageLoaderProps {
 }
 declare const FullPageLoader: ({ show }: FullPageLoaderProps) => react_jsx_runtime.JSX.Element | null;
 
-interface Props$f {
+interface Props$h {
     src: string;
     className?: string;
     alternativeText?: string;
     width?: number | string;
     height?: number | string;
 }
-declare const CustomImage: (props: Props$f) => react_jsx_runtime.JSX.Element;
+declare const CustomImage: (props: Props$h) => react_jsx_runtime.JSX.Element;
 
 declare const Loader: () => react_jsx_runtime.JSX.Element;
 
@@ -632,7 +632,7 @@ declare const ThemeSwitcher: () => react_jsx_runtime.JSX.Element;
 
 declare const useDebounce: <V extends unknown>(value: V, delay?: number) => V;
 
-interface Props$e {
+interface Props$g {
     register?: any;
     value?: any;
     defaultValue?: any;
@@ -648,9 +648,9 @@ interface Props$e {
     noDisplayTextAsLabel?: boolean;
     cssClass?: string;
 }
-declare const OldCustomInput: (props: Props$e) => react_jsx_runtime.JSX.Element;
+declare const OldCustomInput: (props: Props$g) => react_jsx_runtime.JSX.Element;
 
-type Props$d = {
+type Props$f = {
     name: string;
     displayText: string;
     register: any;
@@ -666,9 +666,9 @@ type Props$d = {
     Placeholder?: string;
     showLabel?: boolean;
 };
-declare const MultiSelect: (props: Props$d) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: (props: Props$f) => react_jsx_runtime.JSX.Element;
 
-interface Props$c {
+interface Props$e {
     register: any;
     value: any;
     defaultValue?: any;
@@ -682,7 +682,7 @@ interface Props$c {
     isLabelBold?: boolean;
     isPlaceholderItalic?: boolean;
 }
-declare const TextArea: (props: Props$c) => react_jsx_runtime.JSX.Element;
+declare const TextArea: (props: Props$e) => react_jsx_runtime.JSX.Element;
 
 interface UmamiAnalyticsProps {
     scriptUrl?: string;
@@ -698,18 +698,18 @@ interface UmamiAnalyticsProps {
  */
 declare const UmamiAnalytics: React__default.FC<UmamiAnalyticsProps>;
 
-type Props$b = {
+type Props$d = {
     onClick: any;
 };
-declare const DeleteButton: (props: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DeleteButton: (props: Props$d) => react_jsx_runtime.JSX.Element;
 
-type Props$a = {
+type Props$c = {
     onClick?: () => void;
     label: string;
     type: "button" | "submit";
     style: "primary" | "secondary" | "danger";
 };
-declare const PrimaryButton: (props: Props$a) => react_jsx_runtime.JSX.Element;
+declare const PrimaryButton: (props: Props$c) => react_jsx_runtime.JSX.Element;
 
 interface AboutInfoItemProps {
     title: string;
@@ -773,10 +773,10 @@ interface CookiesProps {
 }
 declare const Cookies: ({ handleAccept, handleDecline }: CookiesProps) => react_jsx_runtime.JSX.Element | null;
 
-interface Props$9 {
+interface Props$b {
     country: string;
 }
-declare const CountryItem: ({ country }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const CountryItem: ({ country }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface InfoBoxProps {
     title: string;
@@ -797,10 +797,10 @@ interface KeyInfoItemProps$1 {
 }
 declare const KeyInfoItem: ({ label, value }: KeyInfoItemProps$1) => react_jsx_runtime.JSX.Element;
 
-interface Props$8 {
+interface Props$a {
     date: string | number | Date;
 }
-declare const LastUpdatedTag: ({ date }: Props$8) => react_jsx_runtime.JSX.Element;
+declare const LastUpdatedTag: ({ date }: Props$a) => react_jsx_runtime.JSX.Element;
 
 declare const NoResults: () => react_jsx_runtime.JSX.Element;
 
@@ -818,14 +818,14 @@ declare const DesignSelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPr
 declare const DesignSelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DesignSelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$7 {
+interface Props$9 {
     tag: string;
 }
 declare const designSimpleTagVariants: (props?: ({
     variant?: "blue" | "orange" | "purple" | "turquoise" | "yellow" | "darkGreen" | "darkBlue" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type TagType$1 = VariantProps<typeof designSimpleTagVariants> & ComponentProps<"span">;
-declare const DesignSimpleTag: ({ tag, variant, className, }: Props$7 & TagType$1) => react_jsx_runtime.JSX.Element;
+declare const DesignSimpleTag: ({ tag, variant, className, }: Props$9 & TagType$1) => react_jsx_runtime.JSX.Element;
 
 declare const DesignSwitch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -842,24 +842,26 @@ interface KeyInfoItemProps {
 }
 declare const TagsGroup: ({ label, tags, variant }: KeyInfoItemProps) => react_jsx_runtime.JSX.Element;
 
-interface Props$6 {
+interface Props$8 {
     text: string;
 }
 declare const weightVariants: (props?: ({
     variant?: "weight100" | "weight200" | "weight300" | "weight400" | "weight500" | "weight600" | "weight700" | "weight800" | "weight900" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type TagType = VariantProps<typeof weightVariants> & ComponentProps<"div">;
-declare const TestWeight: ({ text, variant, className }: Props$6 & TagType) => react_jsx_runtime.JSX.Element;
+declare const TestWeight: ({ text, variant, className }: Props$8 & TagType) => react_jsx_runtime.JSX.Element;
 
-interface Props$5 {
+interface Props$7 {
     tag: string;
     content: React.ReactNode;
     TagClassName?: string;
 }
-declare const ThreeColumn: ({ tag, content, TagClassName }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const ThreeColumn: ({ tag, content, TagClassName }: Props$7) => react_jsx_runtime.JSX.Element;
 
 declare const LandingTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
 declare const LandingTitleAccent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
+declare const BigLandingTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
+declare const BigLandingTitleAccent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
 declare const H1Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
 declare const H1AccentDesign: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
 declare const H2Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>;
@@ -871,7 +873,7 @@ declare const H6Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAtt
 declare const H7Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
 declare const H8Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
 declare const H9Design: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
-declare const Caption: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
+declare const Caption: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const Body20sb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
 declare const Body20m: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
 declare const Body20: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">>;
@@ -895,14 +897,141 @@ declare const Body12: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttri
 
 declare const VersionDisplay: () => react_jsx_runtime.JSX.Element | null;
 
+interface DesignHeaderProps {
+    branding: {
+        logo: string;
+        title: string;
+    };
+    mainMenu: {
+        link: string;
+        text: string;
+        isNewTab?: boolean;
+        subMenu?: {
+            link: string;
+            text: string;
+            isNewTab?: boolean;
+        }[];
+    }[];
+    sessionStatus: "authenticated" | "unauthenticated" | "loading";
+    canLogin: boolean;
+    canSignUp: boolean;
+    isAdmin: boolean;
+    hasStickyNavBar?: boolean;
+    isFeatureEnabled?: boolean;
+    rootUrl?: string;
+    signIn?: any;
+    signOut?: any;
+}
+declare const DesignHeader: ({ branding, mainMenu, sessionStatus, canLogin, canSignUp: canSignup, isAdmin, hasStickyNavBar, signIn, signOut, isFeatureEnabled, rootUrl, }: DesignHeaderProps) => react_jsx_runtime.JSX.Element;
+
+interface ResourcesQuickFindProps {
+    id: string;
+    background_color: string;
+    background_opacity: string;
+    title: string;
+    shouldParseTitle: boolean;
+    description: string;
+    resource_finder_text?: string;
+    resource_finder_url?: string;
+    parent_list_title: string;
+    parent_list: {
+        key: string;
+        value: string;
+        link?: string;
+    }[];
+    child_list?: {
+        key: string;
+        value: string;
+    }[];
+    child_list_title?: string;
+    download_resource: boolean;
+}
+declare const ResourcesQuickFind: (props: ResourcesQuickFindProps) => react_jsx_runtime.JSX.Element;
+
+interface FAQProps {
+    faqs: {
+        question: string;
+        answer: React.ReactNode;
+        hint?: string;
+    }[];
+    backgroundColor?: string;
+}
+
+interface Props$6 {
+    id: string;
+    title: string;
+    subtitle: string;
+    description?: string;
+    faqs?: FAQProps["faqs"];
+    backgroundColor?: string;
+}
+declare const FaqComponent: (props: Props$6) => react_jsx_runtime.JSX.Element;
+
+interface ItemProps {
+    name: string;
+    href: string;
+}
+interface FooterProps {
+    branding: {
+        logo: string;
+        title: string;
+    };
+    navigation: {
+        category: string;
+        items: ItemProps[];
+    }[];
+    bottomMenu: {
+        name: string;
+        href: string;
+        iconPath?: string;
+    }[];
+    footerLogoPath: string | undefined;
+    footerText: string;
+    imagesPaths: string[] | undefined;
+    copyrights?: string | undefined;
+    socialLinks?: {
+        name: string;
+        href: string;
+        isNewTab?: boolean;
+    }[];
+}
+declare const DesignFooter: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+
+interface AppItemProps {
+    item: {
+        id: string;
+        name: string;
+        logoUrl: string;
+        locationType: string;
+        dataDownloadLinks?: string[];
+        externalWebsiteLink?: string;
+    };
+}
+declare const AppItem: (props: AppItemProps) => react_jsx_runtime.JSX.Element;
+
+interface AppItemListProps {
+    id: string;
+    name: string;
+    title: string;
+    allItems: {
+        id: string;
+        name: string;
+        logoUrl: string;
+        locationType: string;
+        dataDownloadLinks?: string[];
+        externalWebsiteLink?: string;
+    }[];
+}
+declare const AppItemsList: (props: AppItemListProps) => react_jsx_runtime.JSX.Element;
+
 declare const OldButton: ({ label, appearance, compact, handleClick, loading, type, }: any) => react_jsx_runtime.JSX.Element;
 
-interface Props$4 {
+interface Props$5 {
     button: any;
     appearance: any;
     compact: any;
 }
-declare const ButtonContent: ({ button, appearance, compact }: Props$4) => react_jsx_runtime.JSX.Element;
+declare const ButtonContent: ({ button, appearance, compact }: Props$5) => react_jsx_runtime.JSX.Element;
 interface ButtonLinkProps {
     button: any;
     appearance: any;
@@ -910,10 +1039,10 @@ interface ButtonLinkProps {
 }
 declare const ButtonLink: ({ button, appearance, compact, }: ButtonLinkProps) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 {
+interface Props$4 {
     message?: string;
 }
-declare const ErrorMessage: (props: Props$3) => react_jsx_runtime.JSX.Element;
+declare const ErrorMessage: (props: Props$4) => react_jsx_runtime.JSX.Element;
 
 declare const FeatureDisabled: () => react_jsx_runtime.JSX.Element;
 
@@ -939,27 +1068,27 @@ declare const MediaEmbedItem: ({ alt, src }: MediaEmbedItemProps) => react_jsx_r
 
 declare const PermissionDisabled: () => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$3 {
     label: string;
     value?: string;
     colSpan?: number;
 }
-declare const ShowLargeText: (props: Props$2) => react_jsx_runtime.JSX.Element;
+declare const ShowLargeText: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$2 {
     label: string;
     value?: string;
 }
-declare const ShowShortText: (props: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ShowShortText: (props: Props$2) => react_jsx_runtime.JSX.Element;
 
-type Props = {
+type Props$1 = {
     src: string;
     width: number;
     height: number;
     alt?: string;
     className?: string;
 };
-declare const SizedImage: (props: Props) => react_jsx_runtime.JSX.Element;
+declare const SizedImage: (props: Props$1) => react_jsx_runtime.JSX.Element;
 
 declare const UnderConstruction: () => react_jsx_runtime.JSX.Element;
 
@@ -968,12 +1097,36 @@ type DisplayItem = {
     label: any;
 };
 
+interface FeaturedItemProps {
+    featuredItem: {
+        name: string;
+        bannerImageUrl: string;
+        landscapeBannerUrl: string;
+        portraitBannerUrl?: string;
+    }[];
+    itemDetails: {
+        id: string;
+        name: string;
+        externalWebsiteLink?: string;
+    };
+}
+declare const FeaturedItemWithBannerImage: (props: FeaturedItemProps) => react_jsx_runtime.JSX.Element;
+
 interface HeroImageProps {
     path: string | undefined;
     cmsUrl: string;
 }
 declare const HeroImage: ({ path, cmsUrl }: HeroImageProps) => react_jsx_runtime.JSX.Element;
 
+interface HeroProps {
+    path: string | undefined;
+    title: string | null | undefined;
+    description: string | null | undefined;
+    google_marketplace_app?: string;
+    apple_store_app?: string;
+}
+declare const HeroImageRightWithAppButtons: (props: HeroProps) => react_jsx_runtime.JSX.Element;
+
 interface IPanelHorizontalProps {
     children: React.ReactNode;
 }
@@ -985,4 +1138,14 @@ interface LinkButtonItem {
     link?: string;
 }
 
-export { AboutInfoItem, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AtomIcon, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Body12, Body12m, Body12sb, Body14, Body14m, Body14sb, Body15, Body15it, Body15m, Body15sb, Body16, Body16it, Body16m, Body16sb, Body18, Body18m, Body18sb, Body20, Body20m, Body20sb, BookTextIcon, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonContent, ButtonLink, type ButtonProps$1 as ButtonProps, Calendar, CalendarIcon, type CalendarProps, CameraIcon, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartLineDotsIcon, ChatsIcons, Checkbox$1 as Checkbox, ClipboardIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Cookies, CountryItem, CpuIcon, CustomImage, CustomTable, DeleteButton, DesignButton, Checkbox as DesignCheckbox, DesignInput, type DesignInputProps, DesignRadioGroup, DesignRadioGroupItem, DesignResultTag, DesignSelect, DesignSelectContent, DesignSelectGroup, DesignSelectItem, DesignSelectLabel, DesignSelectSeparator, DesignSelectTrigger, DesignSelectValue, DesignSimpleTag, DesignSwitch, DesktopCodeIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DisplayItem, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorMessage, FarmerClusterPin, FarmerClustersIcon, FeatureDisabled, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullPageLoader, GridDividersIcon, H1AccentDesign, H1Design, H2AccentDesign, H2Design, H3Design, H4Design, H5Design, H6Design, H7Design, H8Design, H9Design, HardDriveIcon, HeadphonesIcon, HeroImage, Hexagon, HoverCard, HoverCardContent, HoverCardTrigger, type IPanelHorizontalProps, Icon, IconPaths, IframeViewer, ImageIcon, InfoBox, Input, type InputProps, KeyInfoItem, Label, LandingTitle, LandingTitleAccent, LastUpdatedTag, LayerGroupIcon, LegendIcon, type LinkButtonItem, Loader, LoaderFull, LocalLoader, LocationIcon, MapIcon, MapLayersIcon, MapLegendIcon, MediaEmbedItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Microscope, MicroscopeIcon, MinusIcon, MultiSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoResults, ObservationPin, OldButton, OldCustomInput, OverlayIcon, Pagination, PanelHorizontal, PermissionDisabled, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrimaryButton, Progress, RadioGroup, RadioGroupItem, ResourcesIcon, ScrollArea, ScrollBar, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowLargeText, ShowShortText, SizedImage, Skeleton, Slider, StopWatchCheckIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableViewProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagList, TagsGroup, TestWeight, TextArea, Textarea, type TextareaProps, ThemeSwitcher, ThreeColumn, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UmamiAnalytics, UnderConstruction, UserGroupIcon, UsersGroup, VersionDisplay, VideoPlayIcon, XIcon, badgeVariants, buttonVariants, cn, designButtonVariants, getPages, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useDebounce, useFormField, useToast };
+interface Props {
+    id: string;
+    title: string;
+    textBody: string;
+    tag: string;
+    button?: LinkButtonItem;
+    bottomPadding?: string;
+}
+declare const H2BodyButton: (props: Props) => react_jsx_runtime.JSX.Element;
+
+export { AboutInfoItem, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppItem, AppItemsList, AspectRatio, AtomIcon, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, BigLandingTitle, BigLandingTitleAccent, Body12, Body12m, Body12sb, Body14, Body14m, Body14sb, Body15, Body15it, Body15m, Body15sb, Body16, Body16it, Body16m, Body16sb, Body18, Body18m, Body18sb, Body20, Body20m, Body20sb, BookTextIcon, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonContent, ButtonLink, ButtonProps$1 as ButtonProps, Calendar, CalendarIcon, CalendarProps, CameraIcon, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartLineDotsIcon, ChatsIcons, Checkbox$1 as Checkbox, ClipboardIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Cookies, CountryItem, CpuIcon, CustomImage, CustomTable, DeleteButton, DesignButton, Checkbox as DesignCheckbox, DesignFooter, DesignHeader, DesignHeaderProps, DesignInput, DesignInputProps, DesignRadioGroup, DesignRadioGroupItem, DesignResultTag, DesignSelect, DesignSelectContent, DesignSelectGroup, DesignSelectItem, DesignSelectLabel, DesignSelectSeparator, DesignSelectTrigger, DesignSelectValue, DesignSimpleTag, DesignSwitch, DesktopCodeIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayItem, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorMessage, FaqComponent, FarmerClusterPin, FarmerClustersIcon, FeatureDisabled, FeaturedItemWithBannerImage, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullPageLoader, GridDividersIcon, H1AccentDesign, H1Design, H2AccentDesign, H2BodyButton, H2Design, H3Design, H4Design, H5Design, H6Design, H7Design, H8Design, H9Design, HardDriveIcon, HeadphonesIcon, HeroImage, HeroImageRightWithAppButtons, Hexagon, HoverCard, HoverCardContent, HoverCardTrigger, IPanelHorizontalProps, Icon, IconPaths, IframeViewer, ImageIcon, InfoBox, Input, InputProps, KeyInfoItem, Label, LandingTitle, LandingTitleAccent, LastUpdatedTag, LayerGroupIcon, LegendIcon, LinkButtonItem, Loader, LoaderFull, LocalLoader, LocationIcon, MapIcon, MapLayersIcon, MapLegendIcon, MediaEmbedItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Microscope, MicroscopeIcon, MinusIcon, MultiSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoResults, ObservationPin, OldButton, OldCustomInput, OverlayIcon, Pagination, PanelHorizontal, PermissionDisabled, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrimaryButton, Progress, RadioGroup, RadioGroupItem, ResourcesIcon, ResourcesQuickFind, ScrollArea, ScrollBar, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowLargeText, ShowShortText, SizedImage, Skeleton, Slider, StopWatchCheckIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableViewProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagList, TagsGroup, TestWeight, TextArea, Textarea, TextareaProps, ThemeSwitcher, ThreeColumn, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UmamiAnalytics, UnderConstruction, UserGroupIcon, UsersGroup, VersionDisplay, VideoPlayIcon, XIcon, badgeVariants, buttonVariants, cn, designButtonVariants, getPages, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useDebounce, useFormField, useToast };