@drivy/cobalt 0.51.1 → 1.0.0-beta.2

package/styles/components/Modal/index.scss

@@ -1,115 +1,134 @@
-@import "@reach/dialog/styles.css";
+.cobalt-modal {
+  --dialog-margin-top: 10vh;
 
-$reach-ui-dialog-margin-top: 10vh;
+  @apply c-p-none c-z-modal;
+  position: fixed;
+  left: 0;
+  top: var(--dialog-margin-top);
 
-.cobalt-modal {
   display: flex;
-  flex-direction: column;
-  padding: spacing(none);
+  justify-content: center;
 
-  &__overlay[data-reach-dialog-overlay] {
-    z-index: zx(modal);
+  width: 100%;
+
+  &__overlay {
+    @apply c-z-modal-below;
+    position: fixed;
 
     overflow: hidden;
 
-    background-color: fade-out(black, 0.2);
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
 
+    inset: 0;
     will-change: opacity;
-  }
-
-  &[data-reach-dialog-content] {
-    @include bg-color(secondary);
-    max-height: calc(100% - 2 * #{$reach-ui-dialog-margin-top});
-
-    box-shadow: 0 6px 36px fade-out(black, 0.8);
-  }
-
-  &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
-    max-width: 38rem;
-    width: 80vw;
-  }
 
-  &--fullHeight {
-    &[data-reach-dialog-content] {
-      height: 100%;
+    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
+      animation: c-fade-in 300ms ease-out;
     }
-  }
 
-  &--fullWidth {
-    &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
-      max-width: unset;
+    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
+      animation: c-fade-out 200ms ease-in;
     }
   }
 
-  &--desktop {
-    position: relative;
-
-    border-radius: border-radius(xl);
-  }
+  .cobalt-modal__content {
+    @apply c-bg-secondary;
+    max-height: calc(100% - 2 * var(--dialog-margin-top));
+    width: 80vw;
 
-  &--mobile {
-    position: fixed;
+    box-shadow: 0 6px 36px fade-out(black, 0.8);
 
-    margin-bottom: spacing(none);
-    width: 100%;
+    @include breakpoint($from: "md") {
+      @apply c-rounded-xl;
+      max-width: 38rem;
+    }
 
-    &[data-reach-dialog-content] {
+    @include breakpoint($until: "md") {
+      position: fixed;
       bottom: 0;
 
-      max-height: calc(100% - #{spacing(xl)});
+      width: 100%;
+      max-height: calc(100% - theme("spacing.xl"));
 
       border-radius: 16px 16px 0 0;
     }
-  }
 
-  &--overflowHidden {
-    overflow: hidden;
+    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
+      animation: c-slide-in-from-bottom 300ms ease-out;
+      @include breakpoint($from: "md") {
+        animation: c-slide-in 300ms ease-out;
+      }
+    }
+
+    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
+      animation: c-slide-out-to-bottom 200ms ease-in;
+      @include breakpoint($from: "md") {
+        animation: c-slide-out 200ms ease-in;
+      }
+    }
   }
 
-  &-body {
+  &--fullHeight {
     height: 100%;
 
-    overflow-y: auto;
-    overscroll-behavior: contain;
-
-    &--bodySpacing {
-      padding: spacing(lg) spacing(md);
+    .cobalt-modal__content {
+      height: 100%;
+    }
+  }
 
-      &.cobalt-modal-body--hasHeader {
-        padding-top: spacing(sm);
-      }
+  &--fullWidth {
+    .cobalt-modal__content {
+      max-width: unset;
+    }
+  }
 
-      &.cobalt-modal-body--hasFooter {
-        padding-bottom: spacing(sm);
-      }
+  &--overflowHidden {
+    .cobalt-modal__content {
+      overflow: hidden;
     }
   }
 
   &-footer {
-    @include border-top(base);
-    padding: spacing(sm);
+    @apply c-border-t c-border-t-base c-p-sm;
   }
 
   &-header {
-    @include border-bottom(base);
+    @apply c-border-b c-border-b-base c-p-md;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: spacing(md);
 
     &__title {
-      @include c-text-title-md;
-      @include text-color(base);
-      margin: spacing(none);
+      @apply c-text-title-md c-text-base c-m-none;
     }
 
     &__close-button {
+      @apply c-p-none c-cursor-pointer;
       flex: none;
       border: 0;
-      padding: spacing(none);
 
-      cursor: cursor(pointer);
       background-color: transparent;
     }
+
+    + .cobalt-modal-body__wrapper
+      .cobalt-modal-body.cobalt-modal-body--bodySpacing {
+      @apply c-pt-sm;
+    }
+  }
+
+  &-body {
+    height: 100%;
+
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    &--bodySpacing {
+      @apply c-py-lg c-px-md;
+
+      &.cobalt-modal-body--hasFooter {
+        @apply c-pb-sm;
+      }
+    }
   }
 }

package/styles/components/PhotoDropzone/index.scss

@@ -102,6 +102,10 @@
   pointer-events: initial;
 }
 
+.cobalt-photo-dropzone__hidden-input {
+  @apply c-sr-only;
+}
+
 @keyframes pop {
   50% {
     transform: scale(1.1);

package/styles/components/Tabs/index.scss

@@ -1,114 +1,25 @@
-@import "@reach/tabs/styles.css";
-
-$scrollButtonWidth: 2rem;
-
 .cobalt-tabs {
-  @include bg-color(secondary);
+  @apply c-bg-secondary;
   position: relative;
 }
 
-.cobalt-tabs__nav-prev,
-.cobalt-tabs__nav-next {
-  position: absolute;
-  top: 0;
-
-  width: $scrollButtonWidth;
-  // Tab height
-  height: calc(1rem + #{spacing(md) * 2});
-  padding: 0;
-  border: 0;
-
-  cursor: pointer;
-  background: none;
-
-  .cobalt-tabs__nav-icon {
-    margin-left: 0;
-
-    transition: margin-left 0.2s;
-  }
-
-  &[disabled] {
-    opacity: 0.2;
-    cursor: not-allowed;
-
-    &:hover .cobalt-tabs__nav-icon,
-    &:focus .cobalt-tabs__nav-icon {
-      margin-left: 0;
-    }
-  }
-}
-
-.cobalt-tabs__nav-prev {
-  background: linear-gradient(
-    270deg,
-    transparent,
-    var(--c-background-secondary) 30%
-  );
-
-  &:hover .cobalt-tabs__nav-icon,
-  &:focus .cobalt-tabs__nav-icon {
-    margin-left: -0.4rem;
-  }
-}
-
-.cobalt-tabs__nav-next {
-  right: 0;
-
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--c-background-secondary) 30%
-  );
-
-  &:hover .cobalt-tabs__nav-icon,
-  &:focus .cobalt-tabs__nav-icon {
-    margin-left: 0.4rem;
-  }
-}
-
 .cobalt-tabs__labels {
   position: relative;
 
+  display: flex;
   width: 100%;
+  overflow-y: auto;
 
   background: none;
-
-  &.cobalt-tabs__labels--scrollable {
-    padding: 0 $scrollButtonWidth;
-
-    overflow-x: scroll;
-    overflow-y: hidden;
-
-    // Hide horizontal scrolling bar
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    // trick to force a padding-right in the scrollable tab list
-    &:after {
-      right: 0;
-
-      min-width: 2rem;
-      max-width: 2rem;
-      display: block;
-
-      content: "";
-    }
-  }
 }
 
 .cobalt-tabs__label {
-  @include c-text-section-heading;
-  @include bg-color(secondaryInteractive);
+  @apply c-text-section-heading c-bg-secondaryInteractive;
   position: relative;
 
   display: flex;
-  flex: 1 0 auto;
   justify-content: center;
+  flex: 1 0 auto;
   align-items: center;
   padding: spacing(md);
   border: 0;
@@ -125,32 +36,19 @@ $scrollButtonWidth: 2rem;
 
   transition: 0.2s color;
 
-  &:after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    display: block;
-    height: 3px;
-
-    content: "";
-
-    background: transparent;
-
-    transform: scaleX(0);
-    transition: transform ease-out 0.15s;
+  &[data-selected] {
+    @apply c-text-base;
   }
+}
 
-  &.cobalt-tabs__label--selected {
-    @include text-color(base);
-
-    &:after {
-      @include fill-bg-color(accent);
+.cobalt-tabs__indicator {
+  @apply c-bg-accent;
+  top: calc(100% - 3px);
 
-      transform: scaleX(1);
-    }
-  }
+  width: var(--width);
+  height: 3px;
+  --transition-duration: 0.15s;
+  --transition-timing-function: ease-in-out;
 }
 
 .cobalt-tabs__labels--subLevel {
@@ -158,9 +56,9 @@ $scrollButtonWidth: 2rem;
     flex: 0 0 auto;
 
     text-transform: none;
+  }
 
-    &:after {
-      background: transparent;
-    }
+  .cobalt-tabs__indicator {
+    @apply c-bg-transparent;
   }
 }

package/styles/core/z-index.scss

@@ -1,4 +1,5 @@
 $z-index-data: (
+  "autocomplete-popover": 2147483647,
   "below": -1,
   "base": 0,
   "above": 1,

package/tokens/zIndexes.js

@@ -28,7 +28,8 @@ var _zIndexes = {
 	"modal-above": 91,
 	"alert-below": 99,
 	alert: alert,
-	"alert-above": 101
+	"alert-above": 101,
+	"autocomplete-popover": 2147483647
 };
 
 export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav, sidepanel };

package/tokens/zIndexes.js.map

@@ -1 +1 @@
-{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { AccordionProps as ReachAccordionProps, AccordionItemProps as ReachAccordionItemProps, AccordionButtonProps as ReachAccordionButtonProps, AccordionPanelProps as ReachAccordionPanelProps } from "@reach/accordion";
-export { useAccordionItemContext } from "@reach/accordion";
+import { AccordionItemProps as ArkAccordionItemProps, AccordionItemTriggerProps as ArkAccordionItemTriggerProps, AccordionRootProps as ArkAccordionRootProps, AccordionItemContentProps as ArkAccordionItemContentProps, AccordionValueChangeDetails } from "@ark-ui/react";
+export { useAccordionItemContext } from "@ark-ui/react";
 type HeadingLevelMapType = {
     h2: 2;
     h3: 3;
@@ -14,80 +14,29 @@ export type AccordionItemHeaderPropsType = {
      * To improve the semantics of the markup further, the ARIA guidelines dictate
      * that each accordion item's button should be wrapped in an element with
      * role="heading", or more simply, an HTML heading tag.
-     * https://reach.tech/accordion/#accordion-headings
      */
     headingLevel?: HeadingLevelMapType[HeadingTag];
     className?: string;
     leftToggleIcon?: boolean;
     useChevron?: boolean;
-} & ReachAccordionButtonProps;
-export type AccordionItemPanelPropsType = {
-    className?: string;
-} & ReachAccordionPanelProps;
-export type AccordionItemPropsType = {
-    className?: string;
-} & ReachAccordionItemProps;
-export type AccordionPropsType = {
-    className?: string;
-    collapsible?: ReachAccordionProps["collapsible"];
-    defaultIndex?: ReachAccordionProps["defaultIndex"];
-    index?: ReachAccordionProps["index"];
-    multiple?: ReachAccordionProps["multiple"];
-    onChange?: ReachAccordionProps["onChange"];
-} & ReachAccordionProps;
-export declare const AccordionItemHeader: React.ForwardRefExoticComponent<{
-    /**
-     * To improve the semantics of the markup further, the ARIA guidelines dictate
-     * that each accordion item's button should be wrapped in an element with
-     * role="heading", or more simply, an HTML heading tag.
-     * https://reach.tech/accordion/#accordion-headings
-     */
-    headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-    className?: string | undefined;
-    leftToggleIcon?: boolean | undefined;
-    useChevron?: boolean | undefined;
-} & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const AccordionItemPanel: {
-    ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
-    displayName: string;
+} & ArkAccordionItemTriggerProps;
+export type AccordionItemPanelPropsType = ArkAccordionItemContentProps;
+export type AccordionItemPropsType = Omit<ArkAccordionItemProps, "value"> & {
+    value?: ArkAccordionItemProps["value"];
 };
-export declare const AccordionItem: {
-    ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
-    displayName: string;
-    Header: React.ForwardRefExoticComponent<{
-        /**
-         * To improve the semantics of the markup further, the ARIA guidelines dictate
-         * that each accordion item's button should be wrapped in an element with
-         * role="heading", or more simply, an HTML heading tag.
-         * https://reach.tech/accordion/#accordion-headings
-         */
-        headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-        className?: string | undefined;
-        leftToggleIcon?: boolean | undefined;
-        useChevron?: boolean | undefined;
-    } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    Panel: {
-        ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
-        displayName: string;
-    };
+export type AccordionPropsType = Omit<ArkAccordionRootProps, "onValueChange"> & {
+    onValueChange?: (value: AccordionValueChangeDetails["value"]) => void;
 };
 declare const Accordion: {
-    ({ className, children, index, collapsible, multiple, ...props }: AccordionPropsType): React.JSX.Element;
+    ({ className, children, collapsible, onValueChange, ...props }: AccordionPropsType): React.JSX.Element;
+    displayName: string;
     Item: {
-        ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
+        ({ children, className, value, ...props }: AccordionItemPropsType): React.JSX.Element;
         displayName: string;
-        Header: React.ForwardRefExoticComponent<{
-            /**
-             * To improve the semantics of the markup further, the ARIA guidelines dictate
-             * that each accordion item's button should be wrapped in an element with
-             * role="heading", or more simply, an HTML heading tag.
-             * https://reach.tech/accordion/#accordion-headings
-             */
-            headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-            className?: string | undefined;
-            leftToggleIcon?: boolean | undefined;
-            useChevron?: boolean | undefined;
-        } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+        Header: {
+            ({ children, className, headingLevel, leftToggleIcon, useChevron, ...props }: AccordionItemHeaderPropsType): React.JSX.Element;
+            displayName: string;
+        };
         Panel: {
             ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
             displayName: string;

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/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 & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<unknown>>;
+export { Autocomplete };