import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B-KhRX9B.js';
import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import './dynamic-icon.js';
import '@page-speed/icon';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * Individual team member for TeamDepartmentSections
 */
interface TeamDepartmentSectionsMember {
    name: string;
    role: string;
    avatar: string;
}
/**
 * Department group for TeamDepartmentSections
 */
interface TeamDepartmentSectionsDepartment {
    name: string;
    members: TeamDepartmentSectionsMember[];
}
/**
 * Props for TeamDepartmentSections component
 */
interface TeamDepartmentSectionsProps {
    /**
     * Section heading
     * @default "Our team"
     */
    heading?: React.ReactNode;
    /**
     * Array of departments with their members
     */
    departments?: TeamDepartmentSectionsDepartment[];
    /**
     * Custom slot for rendering departments (overrides departments array)
     */
    departmentsSlot?: React.ReactNode;
    /**
     * Background style variant for the section
     * @default "white"
     */
    background?: SectionBackground;
    /**
     * Vertical spacing/margin variant
     * @default "lg"
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for each department section
     */
    departmentClassName?: string;
    /**
     * Additional CSS classes for the department name
     */
    departmentNameClassName?: string;
    /**
     * Additional CSS classes for the members grid
     */
    membersGridClassName?: string;
    /**
     * Additional CSS classes for each member card
     */
    memberCardClassName?: string;
    /**
     * Additional CSS classes for the member avatar
     */
    memberAvatarClassName?: string;
    /**
     * Additional CSS classes for the member name
     */
    memberNameClassName?: string;
    /**
     * Additional CSS classes for the member role
     */
    memberRoleClassName?: string;
    /**
     * Optional Optix Flow configuration for image optimization
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * TeamDepartmentSections - Team organized by department with section headers
 *
 * A structured team section that organizes members by department with clear
 * section headers. Each department has its own bordered section with a 4-column
 * grid of members showing circular avatars, names, and roles. Ideal for larger
 * organizations wanting to show team structure and hierarchy.
 *
 * @example
 * ```tsx
 * <TeamDepartmentSections
 *   heading="Our Team"
 *   departments={[
 *     {
 *       name: "Engineering",
 *       members: [
 *         { name: "John Doe", role: "Lead Engineer", avatar: "/avatars/john.jpg" }
 *       ]
 *     }
 *   ]}
 * />
 * ```
 */
declare function TeamDepartmentSections({ sectionId, heading, departments, departmentsSlot, background, spacing, pattern, patternOpacity, className, headingClassName, departmentClassName, departmentNameClassName, membersGridClassName, memberCardClassName, memberAvatarClassName, memberNameClassName, memberRoleClassName, optixFlowConfig, }: TeamDepartmentSectionsProps): React.JSX.Element;

export { TeamDepartmentSections, type TeamDepartmentSectionsProps };
