ublo-lib 1.15.1 → 1.16.1

package/es/common/components/carousel.js

@@ -4,99 +4,10 @@ import { useUbloContext } from "ublo/with-ublo";
 import * as Icons from "dt-design-system/es/icons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const TARGETS = "section[data-class]";
 const UNDRAGGABLE_TAGS = "img, a, button";
-const euclideanModulo = (a, b) => {
-  const m = a % b;
-  return m < 0 ? b < 0 ? m - b : m + b : m;
-};
-const preventDrag = element => element.setAttribute("draggable", false);
-const enableDrag = element => element.removeAttribute("draggable");
-const show = section => {
-  const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
-  propertiesToRemove.forEach(property => section.style.removeProperty(property));
-};
-function useInterval(callback, delay, current, dragging) {
-  const savedCallback = React.useRef();
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-  React.useEffect(() => {
-    function tick() {
-      savedCallback.current();
-    }
-    if (!dragging && delay !== null && delay !== 0) {
-      const interval = setInterval(tick, delay);
-      return () => clearInterval(interval);
-    }
-  }, [current, delay, dragging]);
-}
-const Dots = ({
-  count,
-  current,
-  setCurrent
-}) => {
-  const length = [...new Array(count)];
-  return _jsx("div", {
-    className: "carousel__dots",
-    children: length.map((_, i) => {
-      const updateCurrent = e => {
-        e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__dot", {
-        "carousel__dot--current": i === current
-      });
-      return _jsx("button", {
-        className: classes,
-        onClick: updateCurrent,
-        "aria-label": i
-      }, i);
-    })
-  });
-};
-const Thumbnails = ({
-  carouselRef,
-  count,
-  current,
-  setCurrent,
-  targets
-}) => {
-  const [thumbnails, setThumbnails] = React.useState([]);
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    if (carousel) {
-      const sections = carousel.querySelectorAll(targets);
-      if (sections.length) {
-        const images = Array.from(sections).reduce((acc, section) => {
-          const image = section.querySelector("img");
-          if (!image?.src) return acc;
-          return [...acc, image.src];
-        }, []);
-        setThumbnails(images);
-      }
-    }
-  }, [carouselRef, count, targets]);
-  if (!count || !thumbnails.length) return null;
-  return _jsx("div", {
-    className: "carousel__thumbnails",
-    children: thumbnails.map((thumbnail, i) => {
-      const updateCurrent = e => {
-        e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__thumbnail", {
-        "carousel__thumbnail--current": i === current
-      });
-      return _jsx("input", {
-        type: "image",
-        className: classes,
-        src: thumbnail,
-        onClick: updateCurrent
-      }, i);
-    })
-  });
-};
-const Carousel = ({
+export default React.memo(Carousel);
+function Carousel({
   delay = 4000,
   fade = false,
   controls,
@@ -106,18 +17,18 @@ const Carousel = ({
   allowDragOnDesktop,
   children,
   onChange
-}) => {
+}) {
   const carouselRef = React.useRef();
   const {
     cmsMode
   } = useUbloContext();
-  const [count, setCount] = React.useState(0);
+  const [sections, setSections] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
   const [touchStartPosition, setTouchStartPosition] = React.useState();
   const [dragging, setDragging] = React.useState(0);
   const editing = cmsMode === "editing";
   const draggingAllowed = !editing && allowDragOnDesktop;
-  const targets = "section[data-class]";
+  const count = sections.length;
   const showNextArrow = current < count - 1;
   const showPrevArrow = current !== 0;
   const next = React.useCallback(e => {
@@ -219,30 +130,37 @@ const Carousel = ({
     if (startX > endX && current < count - 1) next();
     setTouchStartPosition(undefined);
   };
-  const updateSectionCount = React.useCallback(() => {
+  const getSections = React.useCallback(() => {
     const carousel = carouselRef.current;
-    const sections = carousel.querySelectorAll(targets);
-    setCount(sections?.length || 0);
-  }, [targets]);
+    const sections = carousel.querySelectorAll(TARGETS);
+    const visibleSections = Array.from(sections).filter(section => {
+      return window.getComputedStyle(section).display !== "none";
+    });
+    return visibleSections;
+  }, []);
+  const updateSections = React.useCallback(() => {
+    const sections = getSections();
+    setSections(sections);
+  }, [getSections]);
   React.useEffect(() => {
     const zone = carouselRef.current?.querySelector(".cms");
     if (zone) {
-      zone.addEventListener("ublo-section-created", updateSectionCount);
-      zone.addEventListener("ublo-section-pasted", updateSectionCount);
-      zone.addEventListener("ublo-section-removed", updateSectionCount);
+      zone.addEventListener("ublo-section-created", updateSections);
+      zone.addEventListener("ublo-section-pasted", updateSections);
+      zone.addEventListener("ublo-section-removed", updateSections);
       return () => {
-        zone.removeEventListener("ublo-section-removed", updateSectionCount);
-        zone.removeEventListener("ublo-section-pasted", updateSectionCount);
-        zone.removeEventListener("ublo-section-created", updateSectionCount);
+        zone.removeEventListener("ublo-section-removed", updateSections);
+        zone.removeEventListener("ublo-section-pasted", updateSections);
+        zone.removeEventListener("ublo-section-created", updateSections);
       };
     }
-  }, [updateSectionCount]);
+  }, [updateSections]);
   React.useEffect(() => {
     const carousel = carouselRef.current;
     const inner = carousel.firstElementChild;
-    const sections = Array.from(carousel.querySelectorAll(targets));
+    const sections = getSections();
     const undraggableElements = Array.from(carousel.querySelectorAll(UNDRAGGABLE_TAGS));
-    setCount(sections.length);
+    setSections(sections);
     if (!editing) {
       sections.forEach((section, index) => {
         const anchors = Array.from(section.querySelectorAll("a"));
@@ -280,7 +198,7 @@ const Carousel = ({
       });
       if (fade) inner.style.removeProperty("transform");
     }
-  }, [count, current, editing, fade, targets]);
+  }, [current, editing, fade, getSections]);
   const onUndraggableElementClick = React.useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -339,14 +257,107 @@ const Carousel = ({
     }), dots && _jsx(Dots, {
       count: count,
       current: current,
-      setCurrent: setCurrent
+      setCurrent: setCurrent,
+      sections: sections
     }), thumbnails && count > 1 && _jsx(Thumbnails, {
       carouselRef: carouselRef,
       count: count,
       current: current,
       setCurrent: setCurrent,
-      targets: targets
+      sections: sections
     })]
   });
-};
-export default React.memo(Carousel);
+}
+function Dots({
+  count,
+  current,
+  setCurrent
+}) {
+  const length = [...new Array(count)];
+  return _jsx("div", {
+    className: "carousel__dots",
+    children: length.map((_, i) => {
+      const updateCurrent = e => {
+        e.stopPropagation();
+        setCurrent(i);
+      };
+      const classes = classNames("carousel__dot", {
+        "carousel__dot--current": i === current
+      });
+      return _jsx("button", {
+        className: classes,
+        onClick: updateCurrent,
+        "aria-label": i
+      }, i);
+    })
+  });
+}
+function Thumbnails({
+  carouselRef,
+  current,
+  setCurrent,
+  sections
+}) {
+  const [thumbnails, setThumbnails] = React.useState([]);
+  React.useEffect(() => {
+    const carousel = carouselRef.current;
+    if (carousel) {
+      if (sections.length) {
+        const images = Array.from(sections).reduce((acc, section) => {
+          const image = section.querySelector("img");
+          if (!image?.src) return acc;
+          return [...acc, image.src];
+        }, []);
+        setThumbnails(images);
+      }
+    }
+  }, [carouselRef, sections]);
+  if (!thumbnails.length) return null;
+  return _jsx("div", {
+    className: "carousel__thumbnails",
+    children: thumbnails.map((thumbnail, i) => {
+      const updateCurrent = e => {
+        e.stopPropagation();
+        setCurrent(i);
+      };
+      const classes = classNames("carousel__thumbnail", {
+        "carousel__thumbnail--current": i === current
+      });
+      return _jsx("input", {
+        type: "image",
+        className: classes,
+        src: thumbnail,
+        onClick: updateCurrent
+      }, i);
+    })
+  });
+}
+function euclideanModulo(a, b) {
+  const m = a % b;
+  return m < 0 ? b < 0 ? m - b : m + b : m;
+}
+function preventDrag(element) {
+  element.setAttribute("draggable", false);
+}
+function enableDrag(element) {
+  element.removeAttribute("draggable");
+}
+function show(section) {
+  const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
+  propertiesToRemove.forEach(property => section.style.removeProperty(property));
+}
+function useInterval(callback, delay, current, dragging) {
+  const savedCallback = React.useRef();
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (!dragging && delay !== null && delay !== 0) {
+      const interval = setInterval(tick, delay);
+      return () => clearInterval(interval);
+    }
+  }, [current, delay, dragging]);
+}

package/es/common/components/instant-search/hooks/use-constant.d.ts

@@ -0,0 +1,2 @@
+export default function useConstant(fn: any): any;
+//# sourceMappingURL=use-constant.d.ts.map

package/es/common/components/instant-search/hooks/use-constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-constant.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-constant.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,EAAE,GAAG,OAQ1C"}

package/es/common/components/instant-search/hooks/use-constant.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+export default function useConstant(fn) {
+    const ref = React.useRef();
+    if (!ref.current) {
+        ref.current = { v: fn() };
+    }
+    return ref.current.v;
+}

package/es/common/components/instant-search/hooks/use-debounced-search.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export default function useDebouncedSearch(searchFunction: any): {
+    text: string;
+    setText: React.Dispatch<React.SetStateAction<string>>;
+    search: import("react-async-hook").UseAsyncReturn<any, any[]>;
+};
+//# sourceMappingURL=use-debounced-search.d.ts.map

package/es/common/components/instant-search/hooks/use-debounced-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-search.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-debounced-search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,cAAc,KAAA;;;;EAWxD"}

package/es/common/components/instant-search/hooks/use-debounced-search.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import debouncePromise from "awesome-debounce-promise";
+import { useAsync } from "react-async-hook";
+import useConstant from "./use-constant";
+const DEBOUNCE_AMOUNT = 400;
+export default function useDebouncedSearch(searchFunction) {
+    const [text, setText] = React.useState("");
+    const debouncedSearchFunction = useConstant(() => debouncePromise(searchFunction, DEBOUNCE_AMOUNT));
+    const search = useAsync(async () => (text.length === 0 ? undefined : debouncedSearchFunction(text)), [debouncedSearchFunction, text], { setLoading: (state) => ({ ...state, loading: true }) });
+    return { text, setText, search };
+}

package/es/common/components/instant-search/hooks/use-search.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type SearchOptions = {
+    groupLimit?: number;
+    page?: number;
+    perPage?: number;
+    queryBy?: string;
+    queryByWeights?: string;
+    filterBy?: string;
+    sortBy?: string;
+};
+export default function useSearch(lang: string, options?: SearchOptions): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    search: import("react-async-hook").UseAsyncReturn<any, any[]>;
+};
+//# sourceMappingURL=use-search.d.ts.map

package/es/common/components/instant-search/hooks/use-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-search.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-search.ts"],"names":[],"mappings":";AAOA,oBAAY,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;;;;EAW1E"}

package/es/common/components/instant-search/hooks/use-search.js

@@ -0,0 +1,10 @@
+import getConfig from "next/config";
+import useDebouncedSearch from "./use-debounced-search";
+import * as API from "../services/api";
+const { publicRuntimeConfig } = getConfig();
+const { site } = publicRuntimeConfig;
+export default function useSearch(lang, options = {}) {
+    return useDebouncedSearch(async (query) => {
+        return API.fetchResults(site, lang, query, options.groupLimit, options.queryBy, options.queryByWeights);
+    });
+}

package/es/common/components/instant-search/i18n.json

@@ -0,0 +1,76 @@
+{
+  "fr": {
+    "try": "Essayez",
+    "pages": "Pages",
+    "faqs": "Questions fréquentes",
+    "information": "Informations",
+    "instructors": "Moniteurs",
+    "noProducts": "Pas de produit correspondant",
+    "productTitleWithWeek": "Les offres pour la période du ",
+    "productTitleWithoutWeek": "Choisissez votre période pour afficher les tarifs et affiner les résultats",
+    "chooseWeek": "Choisir ma période",
+    "updateWeek": "Modifier ma période",
+    "showOtherResults": "Afficher les autres résultats"
+  },
+  "en": {
+    "try": "Try",
+    "pages": "Pages",
+    "faqs": "FAQs",
+    "information": "Information",
+    "instructors": "Instructors",
+    "noProducts": "No matching product",
+    "productTitleWithWeek": "Offers for the period from ",
+    "productTitleWithoutWeek": "Choose your period to view rates and refine results below",
+    "chooseWeek": "Choose my period",
+    "updateWeek": "Change my period",
+    "showOtherResults": "Show other results"
+  },
+  "es": {
+    "pages": "Paginas",
+    "faqs": "Preguntas frecuentes",
+    "information": "Informaciones",
+    "instructors": "Instructores",
+    "noProducts": "Ningún producto coincidente",
+    "productTitleWithWeek": "Ofertas para el período de ",
+    "productTitleWithoutWeek": "Elija su período para ver las tarifas y refinar los resultados a continuación",
+    "chooseWeek": "Elige mi periodo",
+    "updateWeek": "Cambiar mi periodo",
+    "showOtherResults": "Mostrar otros resultados"
+  },
+  "it": {
+    "pages": "Pagine",
+    "faqs": "Domande frequenti",
+    "information": "Informazioni",
+    "instructors": "Insegnanti",
+    "noProducts": "Nessun prodotto corrispondente",
+    "productTitleWithWeek": "Offerte per il periodo dal ",
+    "productTitleWithoutWeek": "Scegli il tuo periodo per visualizzare le tariffe e perfezionare i risultati di seguito",
+    "chooseWeek": "Scegli il mio periodo",
+    "updateWeek": "Cambia il mio ciclo",
+    "showOtherResults": "Mostra altri risultati"
+  },
+  "nl": {
+    "pages": "Pagina's",
+    "faqs": "Veel Gestelde Vragen",
+    "information": "Informatie",
+    "instructors": "Instructeurs",
+    "noProducts": "Geen bijpassend product",
+    "productTitleWithWeek": "Aanbiedingen voor de periode van ",
+    "productTitleWithoutWeek": "Kies hieronder uw periode om tarieven te bekijken en resultaten te verfijnen",
+    "chooseWeek": "Kies mijn periode",
+    "updateWeek": "Wijzig mijn menstruatie",
+    "showOtherResults": "Toon andere resultaten"
+  },
+  "ru": {
+    "pages": "Страницы",
+    "faqs": "Часто задаваемые вопросы",
+    "information": "Информация",
+    "instructors": "Преподаватели",
+    "noProducts": "Нет подходящего продукта",
+    "productTitleWithWeek": "Предложения на период с ",
+    "productTitleWithoutWeek": "Выберите период, чтобы просмотреть цены и уточнить результаты ниже",
+    "chooseWeek": "Выберите мой период",
+    "updateWeek": "Изменить мой период",
+    "showOtherResults": "Показать другие результаты"
+  }
+}

package/es/common/components/instant-search/index.d.ts

@@ -0,0 +1,3 @@
+import InstantSearch from "./instant-search";
+export default InstantSearch;
+//# sourceMappingURL=index.d.ts.map

package/es/common/components/instant-search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,eAAe,aAAa,CAAC"}

package/es/common/components/instant-search/index.js

@@ -0,0 +1,2 @@
+import InstantSearch from "./instant-search";
+export default InstantSearch;

package/es/common/components/instant-search/input.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare type Suggestions = {
+    fr?: string[];
+    en?: string[];
+};
+declare type Props = {
+    lang: string;
+    text: string;
+    setText: (value: string) => void;
+    loading: boolean;
+    closeSearch: () => void;
+    suggestions?: Suggestions;
+};
+export default function SearchInput({ lang, text, setText, closeSearch, loading, suggestions, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=input.d.ts.map

package/es/common/components/instant-search/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/input.tsx"],"names":[],"mappings":";AASA,aAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;CACf,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,WAAW,GACZ,EAAE,KAAK,eA8EP"}

package/es/common/components/instant-search/input.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import Input from "dt-design-system/es/input";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import * as Ripple from "dt-design-system/es/ripple";
+import message from "./services/messages";
+import css from "./input.module.css";
+const TRANSITION_DURATION = 1800;
+export default function SearchInput({ lang, text, setText, closeSearch, loading, suggestions, }) {
+    const [currentSuggestion, setCurrentSuggestion] = React.useState(0);
+    const updateText = (value) => () => {
+        setText(value);
+    };
+    const classes = classNames(css.input, {
+        [css.inputLoading]: loading,
+    });
+    const inputIcon = loading ? "Loader2" : "Search";
+    const suggestionsSet = getSuggestions(suggestions)[lang];
+    const enableSuggestion = Boolean(suggestionsSet);
+    const createRipple = (e) => {
+        Ripple.create(e);
+    };
+    React.useEffect(() => {
+        if (enableSuggestion && !text) {
+            const interval = setInterval(() => {
+                setCurrentSuggestion((current) => {
+                    const nextSuggestion = current >= suggestionsSet.length - 1 ? 0 : current + 1;
+                    return nextSuggestion;
+                });
+            }, TRANSITION_DURATION);
+            return () => {
+                clearInterval(interval);
+            };
+        }
+    }, [enableSuggestion, suggestionsSet, text]);
+    return (_jsxs("div", { className: css.container, children: [_jsx(Input, { value: text, onValueChange: setText, icon: inputIcon, className: classes }), enableSuggestion && !text && (_jsxs("div", { className: css.suggestion, children: [message(lang, "try"), _jsx("div", { className: css.buttons, children: suggestionsSet.map((suggestion, i) => {
+                            const isCurrent = i === currentSuggestion;
+                            const isPrev = currentSuggestion === 0
+                                ? i === suggestionsSet.length - 1
+                                : i === currentSuggestion - 1;
+                            const classes = classNames(css.button, {
+                                [css.buttonCurrent]: isCurrent,
+                                [css.buttonPrev]: isPrev,
+                            });
+                            return (_jsxs("button", { className: classes, onClick: updateText(suggestion), onMouseDown: createRipple, children: ["\u00AB ", suggestion, " \u00BB"] }, suggestion));
+                        }) })] })), _jsx(Button, { variant: "transparent", className: css.close, onClick: closeSearch, children: _jsx(Icons.Cross, {}) })] }));
+}
+function getSuggestions(suggestions = {}) {
+    return {
+        fr: ["cours de ski", "cours privés", "compétition", "cours débutants"],
+        en: ["ski lessons", "private lessons", "competition"],
+        ...suggestions,
+    };
+}

package/es/common/components/instant-search/input.module.css

@@ -0,0 +1,87 @@
+.container {
+  position: relative;
+  padding: 10px;
+}
+
+.input {
+  --ds-input-padding: 14px;
+  --ds-input-background: var(--ds-grey-000, #fff);
+
+  width: 100%;
+  border-radius: var(--ds-radius-200, 10px);
+  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+}
+
+.inputLoading svg {
+  animation: search-loader-spinning 1280ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)) infinite;
+}
+
+@keyframes search-loader-spinning {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.suggestion {
+  position: absolute;
+  top: 50%;
+  left: 54px;
+  height: 21px;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  color: var(--ds-grey-500, #484848);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.buttons {
+  position: relative;
+  height: inherit;
+  color: inherit;
+}
+
+.button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  height: 100%;
+  padding: 2px 5px 4px 5px;
+  color: inherit;
+  line-height: 1;
+  font-weight: 700;
+  cursor: pointer;
+  pointer-events: auto;
+  border-radius: var(--ds-radius-100, 6px);
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    opacity 320ms var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    transform 320ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.buttonPrev {
+  transform: translateY(-100%);
+}
+
+.buttonCurrent {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.button:is(:hover, :focus) {
+  background-color: var(--ds-grey-100, #f5f5f5);
+}
+
+.close {
+  position: absolute;
+  top: 17px;
+  right: 14px;
+  color: inherit;
+}

package/es/common/components/instant-search/instant-search.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SearchOptions } from "./hooks/use-search";
+declare type Props = {
+    lang: string;
+    className?: string;
+    ubloContext: any;
+    suggestions?: {
+        fr?: string[];
+        en?: string[];
+    };
+    options?: SearchOptions;
+};
+export default function InstantSearch({ lang, suggestions, className, ubloContext, options, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=instant-search.d.ts.map

package/es/common/components/instant-search/instant-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instant-search.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/instant-search.tsx"],"names":[],"mappings":";AAUA,OAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAK9D,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE;QACZ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAY,GACb,EAAE,KAAK,eAsIP"}