@drivy/cobalt 0.51.0 → 1.0.0-beta.1

package/types/src/components/Alerter/index.d.ts

@@ -1,22 +1,11 @@
-import React from "react";
-import { AlertType } from "./Alert";
-export { type AlertStatus } from "./Alert";
-type AlertPropsType = Parameters<AlertType>[0];
-export type AlertReducerActionData = {
-    id: string;
-    status: AlertPropsType["status"];
-    message: AlertPropsType["children"];
-    dismiss?: AlertPropsType["dismiss"];
-};
-type SendAlertParameters = Omit<AlertReducerActionData, "dismiss" | "id">;
-type AlertsQueue = (Omit<AlertReducerActionData, "dismiss"> & {
-    dismiss: NonNullable<AlertReducerActionData["dismiss"]>;
-})[];
+import React, { type PropsWithChildren } from "react";
+export type AlertStatus = "info" | "success" | "error";
 export declare const useAlerts: () => {
-    queue: AlertsQueue;
-    sendAlert: React.Dispatch<SendAlertParameters>;
+    sendAlert: ({ message, status, duration, }: {
+        message: React.ReactNode;
+        status: AlertStatus;
+        duration?: number;
+    }) => string | undefined;
 };
-declare const Alerter: (props: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
+declare const Alerter: ({ children }: PropsWithChildren) => React.JSX.Element;
 export default Alerter;

package/types/src/components/ContainedIcon/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconColorsType } from "../Icon";
 type Extends<T, U extends T> = U;
-type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect">;
+type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success" | "connect" | "keyExchange" | "rideshare" | "accentAlt" | "disabledAlt" | "errorAlt" | "infoAlt" | "successAlt" | "connectAlt"> | "baseAlt";
 export type ContainedIconPropsType = {
     icon: React.JSX.Element;
     color?: ContainedIconColorType;

package/types/src/components/Form/Autocomplete/index.d.ts

@@ -1,51 +1,52 @@
 import React from "react";
 import { IconSources } from "../../Icon";
 import { FormElement } from "../form";
-export interface AutocompleteItem {
+export type AutocompleteItemInput = string | {
     [x: string]: any;
-}
-type Props = {
     icon?: IconSources;
-    items: (AutocompleteItem | string)[];
-    minQueryLength?: number;
-    autoFilter?: boolean;
-    selectedItem?: AutocompleteItem;
-    focusOnInit?: boolean;
-    autocomplete?: boolean;
-    valueKey?: string;
-    inputRef?: React.RefObject<HTMLInputElement>;
-    autocompleteRef?: React.RefObject<HTMLDivElement>;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onQueryChange?: (term: string) => void;
-    onSelectItem?: (item: AutocompleteItem, term: string) => boolean;
-    renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode;
-} & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
-declare const wrappedComponent: React.ComponentClass<{
-    icon?: "map" | "search" | "video" | "filter" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
-    items: (AutocompleteItem | string)[];
+    label?: string;
+    value: string;
+    disabled?: boolean;
+};
+export type AutocompleteItem = {
+    [x: string]: any;
+    icon?: IconSources;
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type AutocompleteRefType = {
+    query: string;
+    input: HTMLInputElement;
+    open: () => void;
+    focus: () => void;
+    clearValue: () => void;
+    setSelectedItem: (item: AutocompleteItemInput) => void;
+};
+type AutocompleteMatchHighlightPropsType = {
+    label: string;
+    query: string;
+    matchClassName?: string;
+};
+export declare const AutocompleteMatchHighlight: ({ label, query, matchClassName, }: AutocompleteMatchHighlightPropsType) => string | React.JSX.Element;
+declare const Autocomplete: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+    fullWidth?: boolean | undefined;
+    icon?: "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    items: AutocompleteItemInput[];
+    popoverClassName?: string | undefined;
     minQueryLength?: number | undefined;
     autoFilter?: boolean | undefined;
-    selectedItem?: AutocompleteItem | undefined;
     focusOnInit?: boolean | undefined;
     autocomplete?: boolean | undefined;
-    valueKey?: string | undefined;
-    inputRef?: React.RefObject<HTMLInputElement> | undefined;
     autocompleteRef?: React.RefObject<HTMLDivElement> | undefined;
+    onClearValue?: (() => void) | undefined;
     onKeyDown?: ((event: React.KeyboardEvent<HTMLElement>) => void) | undefined;
-    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
-    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
     onQueryChange?: ((term: string) => void) | undefined;
     onSelectItem?: ((item: AutocompleteItem, term: string) => boolean) | undefined;
     renderItem?: ((item: AutocompleteItem, term: string) => React.ReactNode) | undefined;
-} & FormElement & React.InputHTMLAttributes<HTMLInputElement> & {
-    id?: string | undefined;
-    label?: string | undefined;
-    hint?: string | undefined;
-    fieldClassName?: string | undefined;
-    fullWidth?: boolean | undefined;
-}, any> & {
-    Raw: React.ComponentType<Props>;
-};
-export { wrappedComponent as Autocomplete };
+    allowCustomValue?: boolean | undefined;
+} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> & React.RefAttributes<unknown>>;
+export { Autocomplete };

package/types/src/components/Form/Slider.d.ts

@@ -1,22 +1,13 @@
-import React from "react";
-import { FormElement } from "./form";
-import { SliderProps as ReachSliderProps } from "@reach/slider";
-type NativeEventType = "onPointerDown" | "onPointerUp" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onTouchStart" | "onTouchMove" | "onTouchEnd";
-export type SliderPropsType = {
+import React, { PropsWithChildren } from "react";
+import { SliderRootProps } from "@ark-ui/react";
+import { FieldWrapperProps } from "./field";
+export type SliderPropsType<T extends number | number[]> = {
     /**
      * mandatory for A11y
      */
+    value?: T;
+    defaultValue?: T;
     ariaLabel: string;
-    value?: number;
-    defaultValue?: number;
-    /**
-     * minimum selectable value (default is 0)
-     */
-    min?: number;
-    /**
-     * maximum selectable value (default is 100)
-     */
-    max?: number;
     /**
      * values interval
      */
@@ -25,69 +16,13 @@ export type SliderPropsType = {
     /**
      * Listener called when the value is changed
      */
-    onChange?: (newValue: number) => void;
+    onValueChange?: (newValue: T) => void;
     /**
      * Function used to visually display the slider value
      */
-    renderValue?: (value: number, status: FormElement["status"]) => React.ReactElement;
-    onPointerDown?: ReachSliderProps["onPointerDown"];
-    onPointerUp?: ReachSliderProps["onPointerUp"];
-    onMouseDown?: ReachSliderProps["onMouseDown"];
-    onMouseMove?: ReachSliderProps["onMouseMove"];
-    onMouseUp?: ReachSliderProps["onMouseUp"];
-    onTouchStart?: ReachSliderProps["onTouchStart"];
-    onTouchMove?: ReachSliderProps["onTouchMove"];
-    onTouchEnd?: ReachSliderProps["onTouchEnd"];
+    renderValue?: (value: T, status: FieldWrapperProps["status"]) => React.ReactElement;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint" | "onChange">;
-declare const wrappedComponent: React.ComponentClass<{
-    /**
-     * mandatory for A11y
-     */
-    ariaLabel: string;
-    value?: number | undefined;
-    defaultValue?: number | undefined;
-    /**
-     * minimum selectable value (default is 0)
-     */
-    min?: number | undefined;
-    /**
-     * maximum selectable value (default is 100)
-     */
-    max?: number | undefined;
-    /**
-     * values interval
-     */
-    step?: number | undefined;
-    disabled?: boolean | undefined;
-    /**
-     * Listener called when the value is changed
-     */
-    onChange?: ((newValue: number) => void) | undefined;
-    /**
-     * Function used to visually display the slider value
-     */
-    renderValue?: ((value: number, status: FormElement["status"]) => React.ReactElement) | undefined;
-    onPointerDown?: ReachSliderProps["onPointerDown"];
-    onPointerUp?: ReachSliderProps["onPointerUp"];
-    onMouseDown?: ReachSliderProps["onMouseDown"];
-    onMouseMove?: ReachSliderProps["onMouseMove"];
-    onMouseUp?: ReachSliderProps["onMouseUp"];
-    onTouchStart?: ReachSliderProps["onTouchStart"];
-    onTouchMove?: ReachSliderProps["onTouchMove"];
-    onTouchEnd?: ReachSliderProps["onTouchEnd"];
-    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
-} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint" | "onChange"> & {
-    id?: string | undefined;
-    label?: string | undefined;
-    hint?: string | undefined;
-    fieldClassName?: string | undefined;
-    fullWidth?: boolean | undefined;
-}, any> & {
-    Raw: React.ComponentType<SliderPropsType>;
-};
-export default wrappedComponent;
-type SliderValueMetaProps = {
-    children: React.ReactNode;
-};
-export declare const SliderValueMeta: ({ children }: SliderValueMetaProps) => React.JSX.Element;
+} & FieldWrapperProps & Omit<SliderRootProps, "value" | "defaultValue" | "onValueChange">;
+declare const Slider: <T extends number | number[]>({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, ...restProps }: SliderPropsType<T>) => React.JSX.Element;
+export default Slider;
+export declare const SliderValueMeta: ({ children }: PropsWithChildren) => React.JSX.Element;

package/types/src/components/Form/field.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { FormElement } from "./form";
 type InjectedProps = {
     id?: string;
@@ -10,4 +10,19 @@ type InjectedProps = {
 export declare const withFieldLabelAndHint: <OriginalProps>(WrappedComponent: React.ComponentType<OriginalProps>) => React.ComponentClass<OriginalProps & InjectedProps> & {
     Raw: React.ComponentType<OriginalProps>;
 };
+export type FieldWrapperProps = {
+    label?: string;
+    hint?: string;
+    fullWidth?: boolean;
+    status?: FormElement["status"];
+};
+export declare const FieldWrapper: {
+    ({ label, hint, fullWidth, status, children, }: PropsWithChildren<{
+        label?: string;
+        fullWidth?: boolean;
+        status?: FormElement["status"];
+        hint?: string;
+    }>): React.JSX.Element;
+    labelClassName: string;
+};
 export {};

package/types/src/components/Modal/ModalHeader.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 declare const ModalHeader: ({ title, close, }: {
     title?: string;
     close?: () => void;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;
 export default ModalHeader;

package/types/src/components/Modal/index.d.ts

@@ -67,7 +67,7 @@ export type ModalPropsType = {
 };
 export declare const ModalFooterAPI: (_props: ModalFooterPropsType) => null;
 export declare const isModalFooterAPIComponent: (component: React.ReactNode) => component is React.ReactElement<ModalFooterPropsType, string | React.JSXElementConstructor<any>>;
-declare const Modal: React.ForwardRefExoticComponent<ModalPropsType & React.RefAttributes<HTMLDivElement>> & {
+declare const _default: React.ForwardRefExoticComponent<ModalPropsType & React.RefAttributes<HTMLDivElement>> & {
     Footer: (_props: ModalFooterPropsType) => null;
 };
-export default Modal;
+export default _default;

package/types/src/components/Tabs/index.d.ts

@@ -4,11 +4,11 @@ export type TabsPropsType = {
     /**
      * Index of the initial actived tab (first tab by default)
      */
-    defaultTabIndex?: number;
+    defaultTabId?: string;
     /**
      * Method to be run on tab change
      */
-    onChange?: (index: number) => void;
+    onChange?: (id: string) => void;
     /**
      * Left aligned tabs with no uppercased labels
      */
@@ -16,10 +16,14 @@ export type TabsPropsType = {
 };
 type TabPropsType = {
     children?: React.ReactNode;
+    /**
+     * Unique id of the tab
+     */
+    id: string;
     /**
      * Label/title of the tab
      */
-    label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode);
+    label: string | React.ReactNode;
     /**
      * Hypertext link. If provided, the tab will be an anchor
      */
@@ -29,12 +33,11 @@ export declare const Tab: {
     (_props: TabPropsType): null;
     displayName: string;
 };
-export declare const Tabs: {
-    ({ children, defaultTabIndex, onChange, subLevel, }: TabsPropsType): React.JSX.Element;
+declare const Tabs: {
+    ({ defaultTabId, subLevel, children, onChange, }: TabsPropsType): React.JSX.Element;
     Tab: {
         (_props: TabPropsType): null;
         displayName: string;
     };
-    displayName: string;
 };
 export default Tabs;

package/types/src/index.d.ts

@@ -28,7 +28,7 @@ export { ProgressBar } from "./components/ProgressBar";
 export { ProgressCircular } from "./components/ProgressCircular";
 export { ProgressBanner } from "./components/ProgressBanner";
 export { Sidepanel } from "./components/Sidepanel";
-export { Tabs, Tab } from "./components/Tabs";
+export { default as Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export { Chip } from "./components/Chip";
 export { Autocomplete, AutocompleteItem } from "./components/Form/Autocomplete";

package/types/src/tokens/index.d.ts

@@ -380,6 +380,7 @@ export declare const zIndexes: {
     "alert-below": number;
     alert: number;
     "alert-above": number;
+    "autocomplete-popover": number;
 };
 export declare const palette: {
     white: string;

package/utilities.css

@@ -3,3 +3,62 @@
 
 @tailwind base;
 @tailwind utilities;
+
+@layer base {
+  @keyframes c-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes c-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes c-slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-32px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes c-slide-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-32px);
+    }
+  }
+  @keyframes c-slide-in-from-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes c-slide-out-to-bottom {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+}

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}

package/components/Alerter/Alert.js

@@ -1,47 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import ReachAlert from '@reach/alert';
-import cx from 'classnames';
-import { Icon } from '../Icon/index.js';
-import 'lodash.throttle';
-import Timer from '../utils/Timer.js';
-
-const ALERT_TIMEOUT = 3000;
-const STATUS_ICONS_MAP = {
-    info: "infoFilled",
-    success: "checkCircle",
-    error: "contextualWarningCircleFilled",
-};
-const STATUS_ICON_COLOR_MAP = {
-    info: "infoAlt",
-    success: "success",
-    error: "error",
-};
-const STATUS_ICON_CLASS_MAP = {
-    info: "cobalt-alert--info",
-    success: "cobalt-alert--success",
-    error: "cobalt-alert--error",
-};
-const Alert = ({ children, status = "info", dismiss }) => {
-    const icon = STATUS_ICONS_MAP[status]
-        ? STATUS_ICONS_MAP[status]
-        : "infoFilled";
-    const iconColor = STATUS_ICON_COLOR_MAP[status]
-        ? STATUS_ICON_COLOR_MAP[status]
-        : "infoAlt";
-    const className = STATUS_ICON_CLASS_MAP[status]
-        ? STATUS_ICON_CLASS_MAP[status]
-        : "cobalt-alert--info";
-    const alertTimer = useMemo(() => new Timer(dismiss, ALERT_TIMEOUT), []);
-    useEffect(() => {
-        alertTimer.run();
-    }, []);
-    const onMouseEnter = () => alertTimer.pause();
-    const onMouseLeave = () => alertTimer.run();
-    return (React.createElement(ReachAlert, { className: cx("cobalt-alert", className), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        React.createElement("div", { className: "cobalt-alert__wrapper" },
-            React.createElement(Icon, { source: icon, size: 20, color: iconColor, className: "cobalt-alert__icon" }),
-            React.createElement("span", { className: "cobalt-alert__content" }, children))));
-};
-
-export { Alert as default };
-//# sourceMappingURL=Alert.js.map

package/components/Alerter/Alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alerter/Alert.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\"\nimport ReachAlert from \"@reach/alert\"\nimport cx from \"classnames\"\n\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\nimport { Timer } from \"../utils\"\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nexport type AlertType = (props: {\n  children?: React.ReactNode\n  status?: AlertStatus\n  dismiss: () => void\n}) => React.ReactElement\n\nconst ALERT_TIMEOUT = 3000\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst STATUS_ICON_CLASS_MAP: { [k in AlertStatus]: string } = {\n  info: \"cobalt-alert--info\",\n  success: \"cobalt-alert--success\",\n  error: \"cobalt-alert--error\",\n}\n\nconst Alert: AlertType = ({ children, status = \"info\", dismiss }) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"infoAlt\"\n\n  const className = STATUS_ICON_CLASS_MAP[status]\n    ? STATUS_ICON_CLASS_MAP[status]\n    : \"cobalt-alert--info\"\n\n  const alertTimer = useMemo(() => new Timer(dismiss, ALERT_TIMEOUT), [])\n\n  useEffect(() => {\n    alertTimer.run()\n  }, [])\n\n  const onMouseEnter = () => alertTimer.pause()\n  const onMouseLeave = () => alertTimer.run()\n\n  return (\n    <ReachAlert\n      className={cx(\"cobalt-alert\", className)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"cobalt-alert__wrapper\">\n        <Icon\n          source={icon}\n          size={20}\n          color={iconColor}\n          className=\"cobalt-alert__icon\"\n        />\n        <span className=\"cobalt-alert__content\">{children}</span>\n      </div>\n    </ReachAlert>\n  )\n}\n\nexport default Alert\n"],"names":[],"mappings":";;;;;;;AAeA,MAAM,aAAa,GAAG,IAAI,CAAA;AAE1B,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,qBAAqB,GAAmC;AAC5D,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,qBAAqB;CAC7B,CAAA;AAED,MAAM,KAAK,GAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,KAAI;AAClE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,SAAS,CAAA;AAEb,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAC7C,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,oBAAoB,CAAA;AAExB,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAA;IAEvE,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,GAAG,EAAE,CAAA;KACjB,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,KAAK,EAAE,CAAA;IAC7C,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,GAAG,EAAE,CAAA;AAE3C,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,EACxC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAA;QAE1B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,oBAAoB,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACK,EACd;AACH;;;;"}

package/components/Modal/ModalBody.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-const ModalBody = ({ children, bodySpacing = true, hasHeader, hasFooter, }) => (React.createElement("div", { className: cx("cobalt-modal-body", {
-        "cobalt-modal-body--bodySpacing": bodySpacing,
-        "cobalt-modal-body--hasHeader": hasHeader,
-        "cobalt-modal-body--hasFooter": hasFooter,
-    }) }, children));
-
-export { ModalBody as default };
-//# sourceMappingURL=ModalBody.js.map

package/components/Modal/ModalBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalBody.js","sources":["../../../src/components/Modal/ModalBody.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst ModalBody = ({\n  children,\n  bodySpacing = true,\n  hasHeader,\n  hasFooter,\n}: {\n  children?: React.ReactNode\n  bodySpacing?: boolean\n  hasHeader: boolean\n  hasFooter: boolean\n}) => (\n  <div\n    className={cx(\"cobalt-modal-body\", {\n      \"cobalt-modal-body--bodySpacing\": bodySpacing,\n      \"cobalt-modal-body--hasHeader\": hasHeader,\n      \"cobalt-modal-body--hasFooter\": hasFooter,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default ModalBody\n"],"names":[],"mappings":";;;AAGM,MAAA,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,SAAS,GAMV,MACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE;AACjC,QAAA,gCAAgC,EAAE,WAAW;AAC7C,QAAA,8BAA8B,EAAE,SAAS;AACzC,QAAA,8BAA8B,EAAE,SAAS;AAC1C,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}

package/components/utils/Timer.js

@@ -1,24 +0,0 @@
-/**
- * Timer object enhancing setTimeout with start, pause, resume features *
- */
-class Timer {
-    constructor(callback, delay) {
-        this.pause = () => {
-            if (this.start) {
-                window.clearTimeout(this.timerID);
-                this.remaining -= Number(new Date()) - this.start;
-            }
-        };
-        this.run = () => {
-            this.start = Number(new Date());
-            if (this.timerID)
-                window.clearTimeout(this.timerID);
-            this.timerID = window.setTimeout(this.callback, this.remaining);
-        };
-        this.remaining = delay;
-        this.callback = callback;
-    }
-}
-
-export { Timer as default };
-//# sourceMappingURL=Timer.js.map

package/components/utils/Timer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sources":["../../../src/components/utils/Timer.ts"],"sourcesContent":["/**\n * Timer object enhancing setTimeout with start, pause, resume features *\n */\nclass Timer {\n  private timerID?: number\n  private start?: number\n  private remaining: number\n  private callback: (...args: any) => any\n\n  constructor(callback: (...args: any) => any, delay: number) {\n    this.remaining = delay\n    this.callback = callback\n  }\n\n  pause = () => {\n    if (this.start) {\n      window.clearTimeout(this.timerID)\n      this.remaining -= Number(new Date()) - this.start\n    }\n  }\n\n  run = () => {\n    this.start = Number(new Date())\n    if (this.timerID) window.clearTimeout(this.timerID)\n    this.timerID = window.setTimeout(this.callback, this.remaining)\n  }\n}\n\nexport default Timer\n"],"names":[],"mappings":"AAAA;;AAEG;AACH,MAAM,KAAK,CAAA;IAMT,WAAY,CAAA,QAA+B,EAAE,KAAa,EAAA;QAK1D,IAAK,CAAA,KAAA,GAAG,MAAK;AACX,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACjC,gBAAA,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;aAClD;AACH,SAAC,CAAA;QAED,IAAG,CAAA,GAAA,GAAG,MAAK;YACT,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;YAC/B,IAAI,IAAI,CAAC,OAAO;AAAE,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACnD,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;AACjE,SAAC,CAAA;AAfC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;KACzB;AAcF;;;;"}

package/components/utils/dom.js

@@ -1,8 +0,0 @@
-function getScrollbarWidth() {
-    const documentWidth = document.documentElement.clientWidth;
-    const windowWidth = window.innerWidth;
-    return windowWidth - documentWidth;
-}
-
-export { getScrollbarWidth };
-//# sourceMappingURL=dom.js.map

package/components/utils/dom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.js","sources":["../../../src/components/utils/dom.ts"],"sourcesContent":["export function getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth\n  const windowWidth = window.innerWidth\n  return windowWidth - documentWidth\n}\n"],"names":[],"mappings":"SAAgB,iBAAiB,GAAA;AAC/B,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAA;AAC1D,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAA;IACrC,OAAO,WAAW,GAAG,aAAa,CAAA;AACpC;;;;"}

package/components/utils/px.js

@@ -1,5 +0,0 @@
-const DEFAULT_FONT_SIZE = 16;
-const remToPx = (rem) => rem * DEFAULT_FONT_SIZE;
-
-export { remToPx };
-//# sourceMappingURL=px.js.map

package/components/utils/px.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"px.js","sources":["../../../src/components/utils/px.ts"],"sourcesContent":["const DEFAULT_FONT_SIZE = 16\n\nexport const remToPx = (rem: number) => rem * DEFAULT_FONT_SIZE\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAErB,MAAM,OAAO,GAAG,CAAC,GAAW,KAAK,GAAG,GAAG;;;;"}

package/hooks/useElementHeight.js

@@ -1,34 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
-
-// https://caniuse.com/resizeobserver
-const ResizeObserver = window
-    .ResizeObserver || ResizeObserver$1;
-/**
- * Hook to listen the giving element resize events (using ResizeObserver)
- * and returning the updated height of that element according to those events
- *
- * Useful to animated using react-spring an element that we can't know the
- * actual size since it's computed from the child elements
- */
-const useElementHeight = () => {
-    const ref = useRef(null);
-    const [height, setHeight] = useState(0);
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver(([entry]) => {
-            requestAnimationFrame(() => {
-                if (!entry)
-                    return;
-                setHeight(entry.target.getBoundingClientRect().height);
-            });
-        });
-        if (ref.current) {
-            resizeObserver.observe(ref.current);
-        }
-        return () => resizeObserver.disconnect();
-    }, []);
-    return { ref, height };
-};
-
-export { useElementHeight as default };
-//# sourceMappingURL=useElementHeight.js.map

package/hooks/useElementHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementHeight.js","sources":["../../src/hooks/useElementHeight.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\"\nimport { ResizeObserver as ROPolyfill } from \"@juggle/resize-observer\"\n\n// https://caniuse.com/resizeobserver\nconst ResizeObserver =\n  (window as { ResizeObserver: typeof ROPolyfill } & typeof window)\n    .ResizeObserver || ROPolyfill\n\n/**\n * Hook to listen the giving element resize events (using ResizeObserver)\n * and returning the updated height of that element according to those events\n *\n * Useful to animated using react-spring an element that we can't know the\n * actual size since it's computed from the child elements\n */\nconst useElementHeight = <ElementType extends HTMLElement>() => {\n  const ref = useRef<ElementType>(null)\n  const [height, setHeight] = useState(0)\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      requestAnimationFrame(() => {\n        if (!entry) return\n        setHeight(entry.target.getBoundingClientRect().height)\n      })\n    })\n\n    if (ref.current) {\n      resizeObserver.observe(ref.current)\n    }\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return { ref, height }\n}\n\nexport default useElementHeight\n"],"names":["ROPolyfill"],"mappings":";;;AAGA;AACA,MAAM,cAAc,GACjB,MAAgE;KAC9D,cAAc,IAAIA,gBAAU,CAAA;AAEjC;;;;;;AAMG;AACG,MAAA,gBAAgB,GAAG,MAAsC;AAC7D,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,SAAS,CAAC,MAAK;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;YACpD,qBAAqB,CAAC,MAAK;AACzB,gBAAA,IAAI,CAAC,KAAK;oBAAE,OAAM;gBAClB,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAA;AACxD,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF,QAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,YAAA,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;SACpC;AAED,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE,CAAA;KACzC,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;AACxB;;;;"}

package/types/src/components/Alerter/Alert.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export type AlertStatus = "info" | "success" | "error";
-export type AlertType = (props: {
-    children?: React.ReactNode;
-    status?: AlertStatus;
-    dismiss: () => void;
-}) => React.ReactElement;
-declare const Alert: AlertType;
-export default Alert;

package/types/src/components/Modal/ModalBody.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-declare const ModalBody: ({ children, bodySpacing, hasHeader, hasFooter, }: {
-    children?: React.ReactNode;
-    bodySpacing?: boolean;
-    hasHeader: boolean;
-    hasFooter: boolean;
-}) => React.JSX.Element;
-export default ModalBody;