@hhgtech/hhg-components 1.29.425-beta-1 → 1.29.425-beta-3

package/build/care/interfaces/types.d.ts

@@ -1,4 +1,5 @@
 import { LocaleType } from "../../interfaces/types";
+import { EMERGENCY_STATUS, ServicePrice } from "../../constants";
 type Extends<T, U extends T> = U;
 export type CareLocaleType = Extends<LocaleType, 'en-PH' | 'vi-VN' | 'id-ID' | 'zh-TW' | 'tl-PH' | 'ms-MY'>;
 export declare enum RedirectType {
@@ -7,6 +8,7 @@ export declare enum RedirectType {
     'CLINIC' = 3,
     'SERVICE' = 4
 }
+export type OpeningHourDay = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
 export type City = {
     name: string;
     country?: string;
@@ -63,10 +65,50 @@ export type Service = {
     distance: string;
     slug?: string;
 };
-export type Hospital = {
+export type OrgExtraInfo = {
+    banner: string;
+    description: string;
     id: number;
+    logo: string;
     name: string;
     slug: string;
+    widgetToken: string;
+    publishReviews: 0 | 1;
+    isActive: number;
+};
+export type BranchService = {
+    id?: string | number;
+    name: string;
+    description: string;
+    price?: number;
+    priceType: ServicePrice;
+    priceTo?: number;
+    promoPercent?: number | null;
+};
+export type ServiceCategory = {
+    name: string;
+    id: string | number;
+    services: BranchService[];
+};
+export type AcceptedPayment = {
+    id: number;
+    countryId: number;
+    name: string;
+    logo: string;
+};
+export type FAQ = {
+    id?: number;
+    question: string;
+    answer: string;
+};
+export type OpeningHour = {
+    day: OpeningHourDay;
+    start: string;
+    end: string;
+};
+export type Hospital = {
+    id: number;
+    slug: string;
     description: string;
     logo: string;
     cityId: number;
@@ -93,6 +135,26 @@ export type Hospital = {
     workingTimes: {
         [key: string]: string[];
     } | null;
+    name?: string;
+    emergencyHours?: EMERGENCY_STATUS;
+    totalDoctors?: number;
+    totalAvailableDoctors?: number;
+    totalAvailableServices?: number;
+    city?: City;
+    rating?: number;
+    totalReviews?: number;
+    organization?: OrgExtraInfo;
+    showServiceCategory?: boolean;
+    serviceCategories?: ServiceCategory[];
+    patientGuide?: string;
+    featuredDoctors?: Doctor[];
+    faqs?: FAQ[];
+    acceptedPayments?: AcceptedPayment[];
+    bookingUrl?: string | null;
+    websiteUrl?: string | null;
+    openingHours?: OpeningHour[];
+    status?: number;
+    client?: ClientApi | null;
 };
 export type Insurance = {
     id: number | string;
@@ -244,4 +306,60 @@ export type SearchCityByGeoIpApi = {
 export type SearchCityByKeywordApi = {
     cities: City[];
 };
+export type CityInfoApi = {
+    id: number;
+    name: string;
+    slug: string;
+    country?: string;
+};
+export type OrgExtraInfoApi = {
+    banner: string | null;
+    description: string | null;
+    id: number;
+    logo: string;
+    name: string;
+    slug: string;
+    widget_token: string;
+    publish_reviews: 0 | 1;
+    is_active: number;
+};
+export type AcceptedPaymentApi = {
+    id: number;
+    country_id: number;
+    name: string;
+    logo: string;
+};
+export type ClientApi = {
+    description: string;
+    id: number;
+    name: string;
+};
+export type HospitalBranchApi = {
+    address: string;
+    city: CityInfoApi;
+    id: number;
+    insurances: Array<Insurance>;
+    latitude: string;
+    logo: string;
+    longitude: string;
+    name: string;
+    rating: string;
+    slug: string;
+    total_available_doctor: number;
+    total_doctor: number;
+    total_reviews: number;
+    organization?: OrgExtraInfoApi;
+    accepted_payments?: AcceptedPaymentApi[];
+    working_times: {
+        [key: string]: {
+            day: string;
+            start_at: string;
+            end_at: string;
+        }[];
+    };
+    emergency_hours: number;
+    phone: string;
+    client: ClientApi | null;
+    short_name?: string;
+};
 export {};

package/build/care.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var careBookingSearchBar = require('./careBookingSearchBar.js');
 var careBookingSearchBarV2 = require('./careBookingSearchBarV2.js');
-var types = require('./types-55b627a3.js');
-var constants = require('./constants-79ef44a0.js');
-require('./tslib.es6-88004cab.js');
+var types = require('./types-da6315ff.js');
+var constants = require('./constants-0d892697.js');
+require('./tslib.es6-bd5d69ee.js');
 require('react');
 require('@emotion/react');
-require('./utils-f0c9bf85.js');
-require('./index-1c207e61.js');
+require('./utils-9e9a8310.js');
+require('./index-488873fd.js');
 require('date-fns/locale');
-require('./index-c77d0076.js');
-require('./Locale-e156b65e.js');
+require('./index-fef2ae7a.js');
+require('./Locale-678d3a1e.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
@@ -21,22 +21,22 @@ require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-924187a7.js');
+require('./utils-88dde2c4.js');
 require('react-loading-skeleton');
 require('string-format');
-require('./index-769840b4.js');
-require('./translationsContext-c77bf78d.js');
+require('./index-0a5c47b7.js');
+require('./translationsContext-b22795e2.js');
 require('lodash/debounce');
-require('./index-f96f91a4.js');
+require('./index-d2389105.js');
 require('@mantine/core');
-require('./index-65110c4f.js');
-require('./text-1d138b17.js');
+require('./index-a926798a.js');
+require('./text-32dba628.js');
 require('lodash/shuffle');
-require('./useOutsideClick-21ab5cca.js');
-require('./paths-2f2bf57e.js');
-require('./index-b2b081b7.js');
+require('./useOutsideClick-c0c39851.js');
+require('./paths-13f3cf34.js');
+require('./index-413265bf.js');
 require('@hhgtech/icons/core');
-require('./ChevronDown-c29ad557.js');
+require('./ChevronDown-456f6e44.js');
 
 
 

package/build/careBookingSearchBar.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-88004cab.js');
+var tslib_es6 = require('./tslib.es6-bd5d69ee.js');
 var React = require('react');
 var react = require('@emotion/react');
-var utils = require('./utils-f0c9bf85.js');
-var index$1 = require('./index-769840b4.js');
+var utils = require('./utils-9e9a8310.js');
+var index$1 = require('./index-0a5c47b7.js');
 var debounce = require('lodash/debounce');
-var constants = require('./constants-79ef44a0.js');
+var constants = require('./constants-0d892697.js');
 var styled = require('@emotion/styled');
-var index = require('./index-f96f91a4.js');
-var index$2 = require('./index-65110c4f.js');
+var index = require('./index-d2389105.js');
+var index$2 = require('./index-a926798a.js');
 var miscTheme = require('./miscTheme.js');
 var shuffle = require('lodash/shuffle');
-var useOutsideClick = require('./useOutsideClick-21ab5cca.js');
-var utils$1 = require('./utils-924187a7.js');
+var useOutsideClick = require('./useOutsideClick-c0c39851.js');
+var utils$1 = require('./utils-88dde2c4.js');
 var Skeleton = require('react-loading-skeleton');
-var paths = require('./paths-2f2bf57e.js');
-require('./index-1c207e61.js');
+var paths = require('./paths-13f3cf34.js');
+require('./index-488873fd.js');
 require('date-fns/locale');
-require('./index-c77d0076.js');
-require('./Locale-e156b65e.js');
+require('./index-fef2ae7a.js');
+require('./Locale-678d3a1e.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('string-format');
-require('./translationsContext-c77bf78d.js');
+require('./translationsContext-b22795e2.js');
 require('@mantine/core');
-require('./text-1d138b17.js');
+require('./text-32dba628.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/careBookingSearchBarV2.js

@@ -4,23 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils$1 = require('./utils-f0c9bf85.js');
-var useOutsideClick = require('./useOutsideClick-21ab5cca.js');
-var index$1 = require('./index-769840b4.js');
+var utils$1 = require('./utils-9e9a8310.js');
+var useOutsideClick = require('./useOutsideClick-c0c39851.js');
+var index$1 = require('./index-0a5c47b7.js');
 var debounce = require('lodash/debounce');
-var constants = require('./constants-79ef44a0.js');
+var constants = require('./constants-0d892697.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-924187a7.js');
-var index = require('./index-b2b081b7.js');
+var utils = require('./utils-88dde2c4.js');
+var index = require('./index-413265bf.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$2 = require('./index-65110c4f.js');
-var ChevronDown = require('./ChevronDown-c29ad557.js');
-var paths = require('./paths-2f2bf57e.js');
-require('./index-1c207e61.js');
+var index$2 = require('./index-a926798a.js');
+var ChevronDown = require('./ChevronDown-456f6e44.js');
+var paths = require('./paths-13f3cf34.js');
+require('./index-488873fd.js');
 require('date-fns/locale');
-require('./index-c77d0076.js');
-require('./Locale-e156b65e.js');
+require('./index-fef2ae7a.js');
+require('./Locale-678d3a1e.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
@@ -28,9 +28,9 @@ require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('react-loading-skeleton');
 require('string-format');
-require('./translationsContext-c77bf78d.js');
-require('./tslib.es6-88004cab.js');
-require('./text-1d138b17.js');
+require('./translationsContext-b22795e2.js');
+require('./tslib.es6-bd5d69ee.js');
+require('./text-32dba628.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/components/atoms/distanceTag/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    value: string;
+    className?: string;
+};
+declare function DistanceTag({ value }: Props): React.JSX.Element;
+export { DistanceTag };

package/build/components/atoms/distanceTag/index.styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const DistanceTagStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPin2: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/atoms/drawerBottom/styled.d.ts

@@ -6,6 +6,8 @@ export declare const StyledDrawerComponent: import("@emotion/styled").StyledComp
 }, {}, {}>;
 export declare const StyledDrawerBottomContent: import("@emotion/styled").StyledComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
+} & {
+    isDragging?: boolean;
 }, {}, {}>;
 export declare const StyledDrawerBottomOverlay: import("@emotion/styled").StyledComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;

package/build/components/atoms/drawerComponent/index.styled.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare const StyledDrawerComponentContent: import("@emotion/styled").StyledComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
+} & {
+    isDragging?: boolean;
 }, {}, {}>;
 export declare const StyledDrawerComponentOverlay: import("@emotion/styled").StyledComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;

package/build/components/atoms/iconHeading/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CSSProperties, ReactNode } from 'react';
+type Props = {
+    icon: ReactNode;
+    title: string;
+    className?: string;
+    style?: CSSProperties;
+};
+declare const IconHeading: ({ icon, title, className, style }: Props) => React.JSX.Element;
+export { IconHeading };

package/build/components/atoms/iconHeading/index.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledIconHeading: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<import("../heading").Props & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/build/components/atoms/iconWrapper/index.d.ts

@@ -0,0 +1,24 @@
+import React, { CSSProperties, DOMAttributes } from 'react';
+type Props = {
+    children: JSX.Element;
+    className?: string;
+    onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    wrapperSize?: number;
+    iconSize?: number;
+    wrapperStyle?: CSSProperties;
+    iconStyle?: CSSProperties;
+    wrapperProps?: DOMAttributes<HTMLDivElement> & {
+        [key: string]: string | number | boolean;
+    };
+    svgIcon?: {
+        fill?: string;
+        stroke?: string;
+    };
+};
+/**
+ * Wrapper for icon
+ * You can use this component to wrap your icon with custom size and style
+ * With svgIcon you can set fill and stroke color as well
+ */
+declare const IconWrapper: ({ children, className, onClick, wrapperSize, iconSize, wrapperStyle, iconStyle, svgIcon, wrapperProps, }: Props) => React.JSX.Element;
+export { IconWrapper };

package/build/components/atoms/iconWrapper/index.styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/atoms/index.d.ts

@@ -45,6 +45,9 @@ export type { Props as BookingBtnProps } from "./bookingBtn";
 export { GenderOptionControl } from "./genderOptionControl";
 export type { Props as GenderOptionControlProps } from "./genderOptionControl";
 export { Loading } from "./loading";
+export { DistanceTag } from "./distanceTag";
+export { IconHeading } from "./iconHeading";
+export { IconWrapper } from "./iconWrapper";
 export * from "./drawerComponent";
 export * from "./inputDate";
 export * from "./searchInput";

package/build/components/organisms/clinicInfo/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { HospitalBranchApi } from "../../../care/interfaces/types";
+import { LocaleType } from "../../../types";
+export type ClicknicInfoProps = {
+    hospitalInfo?: HospitalBranchApi;
+    distance?: string;
+    locale: LocaleType;
+    isLoggedIn?: boolean;
+    googleMapKey: string;
+    onPhoneHospital?: () => void;
+    dataEventCategory: string;
+    dataEventAction: string;
+    dataEventLabel: string;
+};
+declare function ClinicInfo({ hospitalInfo, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }: ClicknicInfoProps): React.JSX.Element;
+export { ClinicInfo };

package/build/components/organisms/clinicInfo/index.styled.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const StyledClinicInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMap: import("@emotion/styled").StyledComponent<import("../map").Props & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledMobileIcon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFlexBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/organisms/index.d.ts

@@ -4,4 +4,5 @@ export { Footer } from "./footer";
 export { NavigationLogoutPopup, Props as NavigationLogoutPopupProps, } from "./navigationLogoutPopup";
 export { NavigationProfileButton, Props as NavigationProfileButtonProps, } from "./navigationProfileButton";
 export { ProfileNavigation, Props as ProfileNavigationProps, } from "./profileNavigation";
+export { ClinicInfo, ClicknicInfoProps } from "./clinicInfo";
 export * from "./collectPhoneNumber";

package/build/components/organisms/map/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Hospital } from "../../../care/interfaces/types";
+import { LocaleType } from "../../../types";
+export type Props = {
+    hospital: Hospital;
+    className?: string;
+    hasNoCard?: boolean;
+    isFullWidth?: boolean;
+    isUsingEmbedMap?: boolean;
+    height?: number;
+    width?: number;
+    isCardFloating?: boolean;
+    distance?: number;
+    isLoggedIn?: boolean;
+    locale: LocaleType;
+    googleMapKey: string;
+    dataEventCategory: string;
+    dataEventAction: string;
+    dataEventLabel: string;
+    onPhoneHospital?: () => void;
+};
+declare const Map: ({ className, hospital, hasNoCard, isFullWidth, height, width, isUsingEmbedMap, isCardFloating, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }: Props) => React.JSX.Element;
+export { Map };

package/build/components/organisms/map/index.helper.d.ts

@@ -0,0 +1,3 @@
+import { Hospital, HospitalBranchApi } from "../../../care/interfaces/types";
+import { LocaleType } from "../../../types";
+export declare const getHospitalUrl: (locale: LocaleType, hospital: Hospital | HospitalBranchApi) => string;

package/build/components/organisms/map/index.styled.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+export declare const StyledOMap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledHospitalMoreInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledHospitalTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const PhoneButton: import("@emotion/styled").StyledComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    size: "lg" | "md" | "sm" | "xs";
+    children?: import("react").ReactNode;
+    color?: "primary" | "secondary" | "transparent" | "tertiary" | "ghost" | "danger" | "success";
+    theme?: "helloSites" | "marryBaby";
+    isDisabled?: boolean;
+    isBlock?: boolean;
+    title?: string;
+    className?: string;
+    icon?: JSX.Element;
+    iconPosition?: "left" | "right";
+    isLoading?: boolean;
+    loadingText?: string;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement>;
+    dataEventCategory?: string;
+    dataEventAction?: string;
+    dataEventLabel?: string;
+    dataProductChannel?: string;
+    dataProductSku?: string;
+    dataProductBrand?: string;
+    dataProductName?: string;
+    dataProductPrice?: string;
+    dataProductCategory?: string;
+    dataProductPosition?: string;
+    type?: "button" | "submit" | "reset";
+    component?: import("react").ElementType<any>;
+    href?: string;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/build/components/organisms/openingHours/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HospitalApi } from "../../../care/interfaces/types";
+type Props = {
+    workingTimes: HospitalApi['working_times'];
+};
+export declare function OpeningHours({ workingTimes }: Props): React.JSX.Element;
+export default OpeningHours;

package/build/components/organisms/openingHours/index.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledOpeningHour: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFormatDataBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;