@abyss-project/commons-front-core 1.0.135 → 1.0.140

package/README.md

@@ -1,2 +1,30 @@
-# abyss-main
-https://abyss-project.gitbook.io/abyss/
+# Abyss Commons Front Core
+
+`@abyss-project/commons-front-core`
+
+Composants React, hooks, design system et traductions partagés par les frontends Abyss.
+
+_Shared React components, hooks, design system and translations for Abyss frontends._
+
+## Installation
+
+```bash
+npm install @abyss-project/commons-front-core
+# or
+pnpm add @abyss-project/commons-front-core
+```
+
+## Liens
+
+- **Documentation** : [https://docs.abyss-project.fr/abyss-project](https://docs.abyss-project.fr/abyss-project)
+- **NPM** : [@abyss-project/commons-front-core](https://www.npmjs.com/package/@abyss-project/commons-front-core)
+- **Application Abyss** : [app.abyss-project.fr](https://app.abyss-project.fr)
+- **Statut des services** : [status.abyss-project.fr](https://status.abyss-project.fr)
+
+## Usage
+
+Voir la [documentation produit](https://docs.abyss-project.fr/abyss-project) pour les guides d'utilisation, la configuration du Core, les exemples d'appel et la référence des permissions.
+
+## Support
+
+Pour toute demande, ouvrir un ticket depuis [l'application Abyss](https://app.abyss-project.fr/dashboard/my-account/ticket/create).

package/declaration.d.ts

@@ -1,13 +1,13 @@
-declare module '*.svg' {
-  import React from 'react';
-  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
-  export default SVG;
-}
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-declare module '*.mp3' {
-  const src: string;
-  export default src;
-}
+declare module '*.svg' {
+  import React from 'react';
+  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
+  export default SVG;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}

package/dist/assets/index.d.ts

@@ -2,6 +2,6 @@ export * from './logo';
 export { default as LogoAbyssFlat } from './logo_abyss_flat.svg';
 export { default as LogoAbyssSmall } from './logo_abyss_small.png';
 export { default as LogoAbyss } from './logo_abyss.svg';
-export { default as NewsLogoAbyss } from './new_logo_abyss.png';
 export { default as DiscordLogo } from './discord.svg';
 export { default as GoogleLogo } from './google.svg';
+export { default as SlackLogo } from './slack.svg';

package/dist/assets/logo/index.d.ts

@@ -14,3 +14,4 @@ export { default as AbyssRetro } from './AbyssRetro.svg';
 export { default as AbyssTrainingLogo } from './AbyssTraining.svg';
 export { default as AbyssHealthLogo } from './AbyssHealth.svg';
 export { default as AbyssConsoleLogo } from './AbyssConsole.svg';
+export { default as AbyssToolsLogo } from './AbyssTools.svg';

package/dist/components/Avatars/OrganizationAvatar/OrganizationAvatar.component.d.ts

@@ -0,0 +1,23 @@
+import { SxProps } from '@mui/material';
+export type OrganizationAvatarProfileInfo = {
+    createdAt?: string;
+    projectCount?: number;
+    memberCount?: number;
+    integrations?: string[];
+    extra?: React.ReactNode;
+};
+type Props = {
+    orgId: string;
+    name: string;
+    hasThumbnail: boolean;
+    hasBanner?: boolean;
+    cache?: string;
+    sx?: SxProps;
+    getLogoUrl: (orgId: string) => string;
+    getBannerUrl?: (orgId: string) => string;
+    showProfile?: boolean;
+    profileInfo?: OrganizationAvatarProfileInfo;
+    onClick?: () => void;
+};
+declare const OrganizationAvatar: React.FC<Props>;
+export default OrganizationAvatar;

package/dist/components/Avatars/OrganizationAvatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrganizationAvatar } from './OrganizationAvatar.component';
+export type { OrganizationAvatarProfileInfo } from './OrganizationAvatar.component';

package/dist/components/Avatars/ProjectAvatar/ProjectAvatar.component.d.ts

@@ -1,14 +1,25 @@
 import { SxProps } from '@mui/material';
-import { JSXElementConstructor } from 'react';
-import { StyledComponentProps } from '@mui/styles/withStyles';
+export type ProjectAvatarProfileInfo = {
+    description?: string;
+    memberCount?: number;
+    appCount?: number;
+    status?: string;
+    organization?: string;
+    createdAt?: string;
+    onGoToOrg?: () => void;
+    onGoToProject?: () => void;
+    extra?: React.ReactNode;
+};
 type Props = {
     projectId: string;
     title: string;
-    classes: Record<string, string>;
     hasThumbnail: boolean;
     cache?: string;
     sx?: SxProps;
     getProjectPictureUrl: (projectId: string) => string;
+    showProfile?: boolean;
+    profileInfo?: ProjectAvatarProfileInfo;
+    onClick?: () => void;
 };
-declare const _default: JSXElementConstructor<Omit<Props, "classes"> & StyledComponentProps<string> & object>;
-export default _default;
+declare const ProjectAvatar: React.FC<Props>;
+export default ProjectAvatar;

package/dist/components/Avatars/ProjectAvatar/index.d.ts

@@ -1 +1,2 @@
 export { default as ProjectAvatar } from './ProjectAvatar.component';
+export type { ProjectAvatarProfileInfo } from './ProjectAvatar.component';

package/dist/components/Avatars/UserAvatar/UserAvatar.component.d.ts

@@ -1,4 +1,11 @@
 import { SxProps } from '@mui/material';
+export type UserAvatarProfileInfo = {
+    email?: string;
+    role?: string;
+    status?: 'online' | 'offline' | 'away';
+    joinedAt?: string;
+    extra?: React.ReactNode;
+};
 type Props = {
     userId: string;
     alias: string;
@@ -6,6 +13,9 @@ type Props = {
     cache?: string;
     sx?: SxProps;
     getProfilePictureUrl: (userId: string) => string;
+    showProfile?: boolean;
+    profileInfo?: UserAvatarProfileInfo;
+    onClick?: () => void;
 };
 declare const UserAvatar: React.FC<Props>;
 export default UserAvatar;

package/dist/components/Avatars/UserAvatar/constant.d.ts

@@ -1,4 +1,8 @@
-import { AvatarProps, SxProps } from '@mui/material';
 export declare const AVATAR_BASE_WIDTH = 32;
 export declare const AVATAR_WIDTH_RATIO = 0.625;
-export declare const AVATAR_BASE_SX: SxProps<AvatarProps>;
+export declare const AVATAR_BASE_SX: {
+    readonly border: "1px solid";
+    readonly borderColor: "primary.main";
+    readonly transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly bgcolor: "transparent";
+};

package/dist/components/Avatars/UserAvatar/index.d.ts

@@ -1,2 +1,3 @@
 export { default as UserAvatar } from './UserAvatar.component';
+export type { UserAvatarProfileInfo } from './UserAvatar.component';
 export * from './constant';

package/dist/components/Avatars/UserAvatarList/UserAvatarList.component.d.ts

@@ -0,0 +1,18 @@
+import { SxProps } from '@mui/material';
+import { default as React } from 'react';
+export type UserAvatarListUser = {
+    id: string;
+    alias?: string | null;
+    hasThumbnail?: boolean;
+};
+type Props = {
+    users: UserAvatarListUser[] | null;
+    size?: number;
+    label?: string;
+    sx?: SxProps;
+    sxItem?: SxProps;
+    getProfilePictureUrl: (userId: string) => string;
+    maxAvatarCount?: number;
+};
+declare const UserAvatarList: React.FC<Props>;
+export default UserAvatarList;

package/dist/components/{UserAvatarList → Avatars/UserAvatarList}/index.d.ts

@@ -1 +1,2 @@
 export { default as UserAvatarList } from './UserAvatarList.component';
+export type { UserAvatarListUser } from './UserAvatarList.component';

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

@@ -1,2 +1,4 @@
+export * from './OrganizationAvatar';
 export * from './ProjectAvatar';
 export * from './UserAvatar';
+export * from './UserAvatarList';

package/dist/components/Banking/AccountTransactions/AccountTransactionsRow.component.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IBankAccount, ICategory } from '@abyss-project/banking';
-import { StyledComponentProps } from '@mui/styles/withStyles';
 export type PartialAccountTransaction = {
     id: string;
     amount: number;
@@ -24,9 +23,8 @@ type Props = {
     displayCategoryList?: boolean;
     collapseChildren?: React.ReactNode;
     categories: ICategory[];
-    classes: Record<string, string>;
     handleOpenCommentModal?: () => void;
     customActions?: React.ReactNode;
 };
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & StyledComponentProps<string> & object>;
-export default _default;
+declare const AccountTransactionsRow: React.FC<Props>;
+export default AccountTransactionsRow;

package/dist/components/Banking/Inputs/SelectAccountTransactionCategory/SelectAccountTransactionCategory.component.d.ts

@@ -1,14 +1,12 @@
 import { SelectChangeEvent } from '@mui/material';
 import { default as React } from 'react';
 import { ICategory } from '@abyss-project/banking';
-import { StyledComponentProps } from '@mui/styles/withStyles';
 type Props = {
     value?: string[];
     onChange?: (event: SelectChangeEvent<string[]>) => void;
     isDisabled?: boolean;
     error?: boolean;
     categories: ICategory[];
-    classes: Record<string, string>;
 };
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & StyledComponentProps<string> & object>;
-export default _default;
+declare const SelectAccountTransactionCategory: React.FC<Props>;
+export default SelectAccountTransactionCategory;

package/dist/components/Cards/InternalProjectCard/InternalProjectCard.component.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type InternalProjectCardData = {
+    id?: string;
+    title: string;
+    description?: string | null;
+    status?: string;
+    createdAt?: string | Date | null;
+    isPublished?: boolean;
+    category?: string;
+    tags?: string[];
+    mainLanguage?: string;
+    metrics?: {
+        views?: number;
+        posts?: number;
+        followers?: number;
+        favorites?: number;
+    };
+};
+interface InternalProjectCardProps {
+    project: InternalProjectCardData;
+    index: number;
+    onEdit?: (project: InternalProjectCardData) => void;
+    onDelete?: (project: InternalProjectCardData) => void;
+    pathToProjectDetails: string;
+    bannerUrl?: string;
+    logoUrl?: string;
+    targetViewport?: '_blank' | '_self';
+    actions?: React.ReactNode;
+    statusLabel?: (status: string) => string;
+    formatCategory?: (category: string) => string;
+    formatDate?: (date: Date) => string;
+    formatNumber?: (n: number) => string;
+    formatLanguage?: (language: string) => string;
+}
+declare const InternalProjectCard: React.FC<InternalProjectCardProps>;
+export default InternalProjectCard;

package/dist/components/Cards/InternalProjectCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InternalProjectCard } from './InternalProjectCard.component';
+export type { InternalProjectCardData } from './InternalProjectCard.component';

package/dist/components/Cards/ProjectCard/ProjectCard.component.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export type ProjectCardProject = {
+    title: string;
+    description?: string;
+    createdAt?: string;
+    tags?: string[];
+    mainLanguage?: string;
+    category?: string;
+};
+type Props = {
+    project: ProjectCardProject;
+    logoUrl: string | null;
+    bannerUrl: string | null;
+    isStarred: boolean;
+    isFollowed: boolean;
+    startCount: number;
+    viewCount: number;
+    formatCategory?: (category: string) => string;
+    formatDate?: (date: Date) => string;
+    starredTooltip?: string;
+    followingTooltip?: string;
+    formatLanguage?: (language: string) => string;
+    formatNumber?: (n: number) => string;
+    variant?: 'default' | 'compact';
+};
+declare const ProjectCard: React.FC<Props>;
+export default ProjectCard;

package/dist/components/Cards/ProjectCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProjectCard } from './ProjectCard.component';
+export type { ProjectCardProject } from './ProjectCard.component';

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

@@ -0,0 +1,2 @@
+export * from './ProjectCard';
+export * from './InternalProjectCard';

package/dist/components/Charts/AbyssBarChart/AbyssBarChart.component.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material';
+type AbyssBarChartProps = {
+    data: Record<string, any>[];
+    keys: string[];
+    indexBy: string;
+    height?: number;
+    enableZoom?: boolean;
+    horizontal?: boolean;
+    stacked?: boolean;
+    colors?: string[];
+    formatValue?: (value: any) => string;
+    hiddenKeys?: string[];
+    onKeyToggle?: (key: string) => void;
+    isInteractive?: boolean;
+    showLegend?: boolean;
+    showAxis?: boolean;
+    sx?: SxProps;
+};
+export declare const AbyssBarChart: React.FC<AbyssBarChartProps>;
+export {};

package/dist/components/Charts/AbyssBarChart/index.d.ts

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

package/dist/components/Charts/AbyssCashFlowChart/AbyssCashFlowChart.component.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface AbyssCashFlowPoint {
+    date: string;
+    balance: number;
+    in: number;
+    out: number;
+}
+interface Props {
+    data: AbyssCashFlowPoint[];
+    currency: string;
+    height?: number;
+}
+export declare const AbyssCashFlowChart: React.FC<Props>;
+export {};

package/dist/components/Charts/AbyssCashFlowChart/index.d.ts

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

package/dist/components/Charts/AbyssLineChart/AbyssLineChart.component.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material';
+type DataPoint = {
+    x: string | number;
+    y: number;
+};
+type LineSeries = {
+    id: string;
+    data: DataPoint[];
+};
+type AbyssLineChartProps = {
+    data: LineSeries[];
+    xLabel?: string;
+    yLabel?: string;
+    height?: number;
+    enableZoom?: boolean;
+    hiddenSeries?: string[];
+    onSeriesToggle?: (seriesId: string) => void;
+    formatXValue?: (value: any) => string;
+    formatYValue?: (value: any) => string;
+    sx?: SxProps;
+    colors?: string[];
+    enableArea?: boolean;
+    curve?: 'linear' | 'monotoneX' | 'cardinal' | 'step';
+};
+export declare const AbyssLineChart: React.FC<AbyssLineChartProps>;
+export {};

package/dist/components/Charts/AbyssLineChart/index.d.ts

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

package/dist/components/Charts/AbyssPieChart/AbyssPieChart.component.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material';
+type PieDataItem = {
+    id: string;
+    value: number;
+    label?: string;
+};
+type AbyssPieChartProps = {
+    data: PieDataItem[];
+    height?: number;
+    donut?: boolean;
+    colors?: string[];
+    enableLegend?: boolean;
+    formatValue?: (value: number) => string;
+    sx?: SxProps;
+};
+export declare const AbyssPieChart: React.FC<AbyssPieChartProps>;
+export {};

package/dist/components/Charts/AbyssPieChart/index.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './AbyssLineChart';
+export * from './AbyssBarChart';
+export * from './AbyssPieChart';
+export * from './AbyssCashFlowChart';

package/dist/components/Charts/useNivoTheme.d.ts

@@ -0,0 +1,65 @@
+export declare const useNivoTheme: () => {
+    text: {
+        fill: string;
+        fontSize: number;
+        fontFamily: string;
+    };
+    axis: {
+        domain: {
+            line: {
+                stroke: string;
+            };
+        };
+        ticks: {
+            line: {
+                stroke: string;
+            };
+            text: {
+                fill: string;
+                fontSize: number;
+                fontFamily: string;
+            };
+        };
+        legend: {
+            text: {
+                fill: string;
+                fontSize: number;
+                fontWeight: number;
+                fontFamily: string;
+            };
+        };
+    };
+    grid: {
+        line: {
+            stroke: string;
+            strokeDasharray: string;
+        };
+    };
+    tooltip: {
+        container: {
+            background: string;
+            backdropFilter: string;
+            border: string;
+            borderRadius: string;
+            boxShadow: string;
+            fontSize: number;
+            padding: string;
+            color: string;
+            fontFamily: string;
+        };
+    };
+    crosshair: {
+        line: {
+            stroke: string;
+            strokeOpacity: number;
+            strokeWidth: number;
+        };
+    };
+    legends: {
+        text: {
+            fill: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+};

package/dist/components/CookieConsent/AbyssCookieConsentProvider.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { UseCookieConsent } from './use-cookie-consent.hook';
+export declare const useAbyssCookieConsent: () => UseCookieConsent;
+export interface AbyssCookieConsentProviderProps {
+    children: React.ReactNode;
+    consentVersion: string;
+    isAuthenticated: boolean;
+    domain?: string;
+    privacyLinkHref?: string;
+    renderBanner?: (api: UseCookieConsent) => React.ReactNode;
+}
+export declare const AbyssCookieConsentProvider: React.FC<AbyssCookieConsentProviderProps>;

package/dist/components/CookieConsent/CookieConsentBanner.component.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { UseCookieConsent } from './use-cookie-consent.hook';
+export interface CookieConsentBannerProps {
+    api: UseCookieConsent;
+    privacyLinkHref: string;
+}
+export declare const CookieConsentBanner: React.FC<CookieConsentBannerProps>;

package/dist/components/CookieConsent/CookieConsentSettings.component.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const CookieConsentSettings: React.FC;

package/dist/components/CookieConsent/cookie-storage.util.d.ts

@@ -0,0 +1,15 @@
+export declare const COOKIE_NAME = "abyssCookieConsent";
+export declare const VALIDITY_DAYS = 365;
+export interface StoredConsent {
+    a: boolean;
+    m: boolean;
+    d: string;
+    v: string;
+}
+interface CookieOptions {
+    domain?: string;
+}
+export declare const readCookie: () => StoredConsent | null;
+export declare const writeCookie: (consent: StoredConsent, opts?: CookieOptions) => void;
+export declare const clearCookie: (opts?: CookieOptions) => void;
+export {};

package/dist/components/CookieConsent/cookie-storage.util.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+export * from './AbyssCookieConsentProvider';
+export * from './CookieConsentBanner.component';
+export * from './CookieConsentSettings.component';
+export * from './use-cookie-consent.hook';
+export * from './cookie-storage.util';
+export * from './reconcile.util';
+export * from './types';

package/dist/components/CookieConsent/reconcile.util.d.ts

@@ -0,0 +1,12 @@
+import { IUserCookieConsent } from '@abyss-project/main';
+import { ResolvedConsent } from './types';
+export declare enum ReconcileAction {
+    NOOP = "noop",
+    ADOPT_DB = "adopt-db",
+    PUSH_COOKIE = "push-cookie"
+}
+export interface ReconcileResult {
+    action: ReconcileAction;
+    value: ResolvedConsent | null;
+}
+export declare const reconcile: (cookie: ResolvedConsent | null, db: IUserCookieConsent | null) => ReconcileResult;

package/dist/components/CookieConsent/reconcile.util.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CookieConsent/types.d.ts

@@ -0,0 +1,11 @@
+export interface ResolvedConsent {
+    analytics: boolean;
+    marketing: boolean;
+    decidedAt: string;
+    consentVersion: string;
+    essentials: true;
+}
+export interface SaveConsentInput {
+    analytics: boolean;
+    marketing: boolean;
+}

package/dist/components/CookieConsent/use-cookie-consent.hook.d.ts

@@ -0,0 +1,15 @@
+import { ResolvedConsent, SaveConsentInput } from './types';
+export interface UseCookieConsentOptions {
+    isAuthenticated: boolean;
+    consentVersion: string;
+    domain?: string;
+}
+export interface UseCookieConsent {
+    consent: ResolvedConsent | null;
+    isResolved: boolean;
+    acceptAll: () => void;
+    rejectAll: () => void;
+    save: (partial: SaveConsentInput) => void;
+    reset: () => void;
+}
+export declare const useCookieConsent: (opts: UseCookieConsentOptions) => UseCookieConsent;

package/dist/components/Data/AbyssTable/AbyssTable.component.d.ts

@@ -0,0 +1,35 @@
+import { SxProps } from '@mui/material';
+import { ColumnDef } from '@tanstack/react-table';
+import { default as React, ReactNode } from 'react';
+export type AbyssTableFilterDef = {
+    columnId: string;
+    label: string;
+    render: (value: any, onChange: (value: any) => void) => ReactNode;
+};
+export type AbyssTableProps<TData extends object> = {
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
+    enableGlobalFilter?: boolean;
+    enableColumnFilters?: boolean;
+    enableSorting?: boolean;
+    enablePagination?: boolean;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    manualPagination?: boolean;
+    pageCount?: number;
+    totalItems?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    filters?: AbyssTableFilterDef[];
+    emptyMessage?: string;
+    emptyContent?: ReactNode;
+    onRowClick?: (row: TData) => void;
+    sx?: SxProps;
+    tableLabel?: string;
+    getRowSx?: (row: TData, index: number) => SxProps;
+    isLoading?: boolean;
+    renderAboveTable?: ReactNode;
+};
+declare function AbyssTable<TData extends object>({ data, columns, enableGlobalFilter, enableColumnFilters, enableSorting, enablePagination, defaultPageSize, pageSizeOptions, manualPagination, pageCount: externalPageCount, totalItems: externalTotalItems, currentPage: externalCurrentPage, onPageChange, onPageSizeChange, filters, emptyMessage, emptyContent, onRowClick, sx, tableLabel, getRowSx, isLoading, renderAboveTable, }: AbyssTableProps<TData>): React.JSX.Element;
+export default AbyssTable;

package/dist/components/Data/AbyssTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AbyssTable } from './AbyssTable.component';
+export type { AbyssTableProps, AbyssTableFilterDef } from './AbyssTable.component';

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

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

package/dist/components/InfoBox/InfoBox.component.d.ts

@@ -1,4 +1,6 @@
 import { BoxProps } from '@mui/material';
-export declare const InfoBox: React.FC<BoxProps>;
-export declare const ErrorInfoBox: React.FC<BoxProps>;
-export declare const WarnInfoBox: React.FC<BoxProps>;
+import { FC } from 'react';
+export declare const InfoBox: FC<BoxProps>;
+export declare const ErrorInfoBox: FC<BoxProps>;
+export declare const WarnInfoBox: FC<BoxProps>;
+export declare const SuccessInfoBox: FC<BoxProps>;