@redsift/popovers 7.7.0 → 7.8.1

package/index.js

@@ -1,8 +1,8 @@
-import React, { useContext, useState, useLayoutEffect, useMemo, useEffect, forwardRef, useRef, useId, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef, useContext, useRef, useId, useCallback } from 'react';
+import { useLocalizedStringFormatter, useButton } from 'react-aria';
 import { FloatingOverlay, useMergeRefs, useTransitionStyles, FloatingPortal, FloatingFocusManager, useFloating, useDismiss, useRole, useInteractions, autoUpdate, offset, flip, shift, arrow, useHover, useFocus } from '@floating-ui/react';
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation } from '@redsift/icons';
-import { useButton } from '@react-aria/button';
 import styled, { css } from 'styled-components';
 import { ToastContainer as ToastContainer$1, Slide, toast } from 'react-toastify';
 
@@ -21,6 +21,27 @@ const DialogSize = {
   large: 'large'
 };
 
+/**
+ * Color palette.
+ */
+const ColorPalette = {
+  default: 'default',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  question: 'question',
+  'no-data': 'no-data'
+};
+const ProductColorPalette = {
+  website: 'website',
+  ondmarc: 'ondmarc',
+  oninbox: 'oninbox',
+  ondomain: 'ondomain',
+  hardenize: 'hardenize',
+  tools: 'tools'
+};
+
 /**
  * Create a predicate function that checks if a ReactNode is a react element from the given component.
  *
@@ -74,6 +95,19 @@ const warnIfNoAccessibleLabelFound = (props, additionalKeysToCheck) => {
   }
 };
 
+/**
+ * Get the bounding rect of a component.
+ */
+const useBoundingClientRect = (ref, deps) => {
+  const [boundingRect, setBoundingRect] = useState({});
+  useEffect(() => {
+    if (ref.current) {
+      setBoundingRect(ref.current.getBoundingClientRect());
+    }
+  }, deps);
+  return boundingRect;
+};
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -165,360 +199,6 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ /*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ // We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is
-// guarded by a check that it only runs on the client side.
-// eslint-disable-next-line rulesdir/useLayoutEffectRule
-
-// Default context value to use in case there is no SSRProvider. This is fine for
-// client-only apps. In order to support multiple copies of React Aria potentially
-// being on the page at once, the prefix is set to a random number. SSRProvider
-// will reset this to zero for consistency between server and client, so in the
-// SSR case multiple copies of React Aria is not supported.
-const $704cf1d3b684cc5c$var$defaultContext = {
-    prefix: String(Math.round(Math.random() * 10000000000)),
-    current: 0
-};
-const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (React).createContext($704cf1d3b684cc5c$var$defaultContext);
-function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
-    let cur = (useContext)($704cf1d3b684cc5c$var$SSRContext);
-    let isInSSRContext = cur !== $704cf1d3b684cc5c$var$defaultContext;
-    let [isSSR, setIsSSR] = (useState)(isInSSRContext);
-    // If on the client, and the component was initially server rendered,
-    // then schedule a layout effect to update the component after hydration.
-    if (typeof window !== "undefined" && isInSSRContext) // This if statement technically breaks the rules of hooks, but is safe
-    // because the condition never changes after mounting.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (useLayoutEffect)(()=>{
-        setIsSSR(false);
-    }, []);
-    return isSSR;
-}
-
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ /*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ class $5b160d28a433310d$export$c17fa47878dc55b6 {
-    /** Returns a localized string for the given key and locale. */ getStringForLocale(key, locale) {
-        let strings = this.strings[locale];
-        if (!strings) {
-            strings = $5b160d28a433310d$var$getStringsForLocale(locale, this.strings, this.defaultLocale);
-            this.strings[locale] = strings;
-        }
-        let string = strings[key];
-        if (!string) throw new Error(`Could not find intl message ${key} in ${locale} locale`);
-        return string;
-    }
-    constructor(messages, defaultLocale = "en-US"){
-        // Clone messages so we don't modify the original object.
-        this.strings = {
-            ...messages
-        };
-        this.defaultLocale = defaultLocale;
-    }
-}
-function $5b160d28a433310d$var$getStringsForLocale(locale, strings, defaultLocale = "en-US") {
-    // If there is an exact match, use it.
-    if (strings[locale]) return strings[locale];
-    // Attempt to find the closest match by language.
-    // For example, if the locale is fr-CA (French Canadian), but there is only
-    // an fr-FR (France) set of strings, use that.
-    // This could be replaced with Intl.LocaleMatcher once it is supported.
-    // https://github.com/tc39/proposal-intl-localematcher
-    let language = $5b160d28a433310d$var$getLanguage(locale);
-    if (strings[language]) return strings[language];
-    for(let key in strings){
-        if (key.startsWith(language + "-")) return strings[key];
-    }
-    // Nothing close, use english.
-    return strings[defaultLocale];
-}
-function $5b160d28a433310d$var$getLanguage(locale) {
-    // @ts-ignore
-    if (Intl.Locale) // @ts-ignore
-    return new Intl.Locale(locale).language;
-    return locale.split("-")[0];
-}
-
-
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ const $6db58dc88e78b024$var$pluralRulesCache = new Map();
-const $6db58dc88e78b024$var$numberFormatCache = new Map();
-class $6db58dc88e78b024$export$2f817fcdc4b89ae0 {
-    /** Formats a localized string for the given key with the provided variables. */ format(key, variables) {
-        let message = this.strings.getStringForLocale(key, this.locale);
-        return typeof message === "function" ? message(variables, this) : message;
-    }
-    plural(count, options, type = "cardinal") {
-        let opt = options["=" + count];
-        if (opt) return typeof opt === "function" ? opt() : opt;
-        let key = this.locale + ":" + type;
-        let pluralRules = $6db58dc88e78b024$var$pluralRulesCache.get(key);
-        if (!pluralRules) {
-            pluralRules = new Intl.PluralRules(this.locale, {
-                type: type
-            });
-            $6db58dc88e78b024$var$pluralRulesCache.set(key, pluralRules);
-        }
-        let selected = pluralRules.select(count);
-        opt = options[selected] || options.other;
-        return typeof opt === "function" ? opt() : opt;
-    }
-    number(value) {
-        let numberFormat = $6db58dc88e78b024$var$numberFormatCache.get(this.locale);
-        if (!numberFormat) {
-            numberFormat = new Intl.NumberFormat(this.locale);
-            $6db58dc88e78b024$var$numberFormatCache.set(this.locale, numberFormat);
-        }
-        return numberFormat.format(value);
-    }
-    select(options, value) {
-        let opt = options[value] || options.other;
-        return typeof opt === "function" ? opt() : opt;
-    }
-    constructor(locale, strings){
-        this.locale = locale;
-        this.strings = strings;
-    }
-}
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ /*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ /*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ // https://en.wikipedia.org/wiki/Right-to-left
-const $148a7a147e38ea7f$var$RTL_SCRIPTS = new Set([
-    "Arab",
-    "Syrc",
-    "Samr",
-    "Mand",
-    "Thaa",
-    "Mend",
-    "Nkoo",
-    "Adlm",
-    "Rohg",
-    "Hebr"
-]);
-const $148a7a147e38ea7f$var$RTL_LANGS = new Set([
-    "ae",
-    "ar",
-    "arc",
-    "bcc",
-    "bqi",
-    "ckb",
-    "dv",
-    "fa",
-    "glk",
-    "he",
-    "ku",
-    "mzn",
-    "nqo",
-    "pnb",
-    "ps",
-    "sd",
-    "ug",
-    "ur",
-    "yi"
-]);
-function $148a7a147e38ea7f$export$702d680b21cbd764(locale) {
-    // If the Intl.Locale API is available, use it to get the script for the locale.
-    // This is more accurate than guessing by language, since languages can be written in multiple scripts.
-    // @ts-ignore
-    if (Intl.Locale) {
-        // @ts-ignore
-        let script = new Intl.Locale(locale).maximize().script;
-        return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(script);
-    }
-    // If not, just guess by the language (first part of the locale)
-    let lang = locale.split("-")[0];
-    return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
-}
-
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
-    // @ts-ignore
-    let locale = typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
-    try {
-        // @ts-ignore
-        Intl.DateTimeFormat.supportedLocalesOf([
-            locale
-        ]);
-    } catch (_err) {
-        locale = "en-US";
-    }
-    return {
-        locale: locale,
-        direction: ($148a7a147e38ea7f$export$702d680b21cbd764)(locale) ? "rtl" : "ltr"
-    };
-}
-let $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
-let $1e5a04cdaf7d1af8$var$listeners = new Set();
-function $1e5a04cdaf7d1af8$var$updateLocale() {
-    $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
-    for (let listener of $1e5a04cdaf7d1af8$var$listeners)listener($1e5a04cdaf7d1af8$var$currentLocale);
-}
-function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
-    let isSSR = ($704cf1d3b684cc5c$export$535bd6ca7f90a273)();
-    let [defaultLocale, setDefaultLocale] = (useState)($1e5a04cdaf7d1af8$var$currentLocale);
-    (useEffect)(()=>{
-        if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
-        $1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
-        return ()=>{
-            $1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
-            if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
-        };
-    }, []);
-    // We cannot determine the browser's language on the server, so default to
-    // en-US. This will be updated after hydration on the client to the correct value.
-    if (isSSR) return {
-        locale: "en-US",
-        direction: "ltr"
-    };
-    return defaultLocale;
-}
-
-
-
-const $18f2051aff69b9bf$var$I18nContext = /*#__PURE__*/ (React).createContext(null);
-function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
-    let defaultLocale = ($1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a)();
-    let context = (useContext)($18f2051aff69b9bf$var$I18nContext);
-    return context || defaultLocale;
-}
-
-
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-const $fca6afa0e843324b$var$cache = new WeakMap();
-function $fca6afa0e843324b$var$getCachedDictionary(strings) {
-    let dictionary = $fca6afa0e843324b$var$cache.get(strings);
-    if (!dictionary) {
-        dictionary = new ($5b160d28a433310d$export$c17fa47878dc55b6)(strings);
-        $fca6afa0e843324b$var$cache.set(strings, dictionary);
-    }
-    return dictionary;
-}
-function $fca6afa0e843324b$export$f12b703ca79dfbb1(strings) {
-    let { locale: locale  } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
-    let dictionary = (useMemo)(()=>$fca6afa0e843324b$var$getCachedDictionary(strings), [
-        strings
-    ]);
-    return (useMemo)(()=>new ($6db58dc88e78b024$export$2f817fcdc4b89ae0)(locale, dictionary), [
-        locale,
-        dictionary
-    ]);
-}
-
-var close$3 = "Close";
-var enUS$2 = {
-	close: close$3
-};
-
-var close$2 = "Fermer";
-var frFR$2 = {
-	close: close$2
-};
-
-var intlMessages$2 = {
-  'en-US': enUS$2,
-  'fr-FR': frFR$2
-};
-
 /**
  * Component variant.
  */
@@ -528,27 +208,6 @@ const IconButtonVariant = {
   unstyled: 'unstyled'
 };
 
-/**
- * Color palette.
- */
-const ColorPalette = {
-  default: 'default',
-  success: 'success',
-  error: 'error',
-  warning: 'warning',
-  info: 'info',
-  question: 'question',
-  'no-data': 'no-data'
-};
-const ProductColorPalette = {
-  website: 'website',
-  ondmarc: 'ondmarc',
-  oninbox: 'oninbox',
-  ondomain: 'ondomain',
-  hardenize: 'hardenize',
-  tools: 'tools'
-};
-
 /**
  * Component size.
  */
@@ -1055,18 +714,18 @@ const StyledButton = styled.button`
 `;
 
 var loading$1 = "Loading...";
-var enUS$1 = {
+var enUS$2 = {
 	loading: loading$1
 };
 
 var loading = "Chargement...";
-var frFR$1 = {
+var frFR$2 = {
 	loading: loading
 };
 
-var intlMessages$1 = {
-  'en-US': enUS$1,
-  'fr-FR': frFR$1
+var intlMessages$2 = {
+  'en-US': enUS$2,
+  'fr-FR': frFR$2
 };
 
 /**
@@ -1169,7 +828,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
   } = sizeToDimension(size);
   const appContainerState = useContext(AppContainerContext);
   const color = propsColor === ColorPalette.default && appContainerState && appContainerState.productTheme ? appContainerState.productTheme : propsColor;
-  const stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1(intlMessages$1);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages$2);
   return /*#__PURE__*/React.createElement(StyledSpinner, _extends({
     alt: stringFormatter.format('loading')
   }, forwardedProps, {
@@ -1197,7 +856,7 @@ const StyledIconButton = styled(StyledButton)`
     $variant
   } = _ref;
   return css`
-    padding: ${$variant === IconButtonVariant.secondary ? '7px' : '8px'};
+    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};
   `;
 }};
 `;
@@ -1257,6 +916,163 @@ IconButton.className = CLASSNAME$g;
 IconButton.defaultProps = DEFAULT_PROPS$g;
 IconButton.displayName = COMPONENT_NAME$g;
 
+/**
+ * Component style.
+ */
+const StyledHeading = styled.span`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $variant
+  } = _ref;
+  return $variant === 'h1' ? css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-h1-font-family);
+          font-size: var(--redsift-typography-h1-font-size);
+          font-weight: var(--redsift-typography-h1-font-weight);
+          line-height: var(--redsift-typography-h1-line-height);
+          text-transform: var(--redsift-typography-h1-text-transform);
+        ` : $variant === 'h2' ? css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-h2-font-family);
+          font-size: var(--redsift-typography-h2-font-size);
+          font-weight: var(--redsift-typography-h2-font-weight);
+          line-height: var(--redsift-typography-h2-line-height);
+        ` : $variant === 'h3' ? css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-h3-font-family);
+          font-size: var(--redsift-typography-h3-font-size);
+          font-weight: var(--redsift-typography-h3-font-weight);
+          line-height: var(--redsift-typography-h3-line-height);
+        ` : $variant === 'h4' ? css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-h4-font-family);
+          font-size: var(--redsift-typography-h4-font-size);
+          font-weight: var(--redsift-typography-h4-font-weight);
+          line-height: var(--redsift-typography-h4-line-height);
+        ` : $variant === 'h5' ? css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-h5-font-family);
+          font-size: var(--redsift-typography-h5-font-size);
+          font-weight: var(--redsift-typography-h5-font-weight);
+          line-height: var(--redsift-typography-h5-line-height);
+        ` : css`
+          color: var(--redsift-color-neutral-black);
+          font-family: var(--redsift-typography-body-font-family);
+          font-size: var(--redsift-typography-body-font-size);
+          font-weight: var(--redsift-typography-body-font-weight);
+          line-height: var(--redsift-typography-body-line-height);
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $noWrap
+  } = _ref2;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
+}}
+`;
+
+const _excluded$8 = ["as", "children", "className", "noWrap", "variant"];
+const COMPONENT_NAME$f = 'Heading';
+const CLASSNAME$f = 'redsift-heading';
+const DEFAULT_PROPS$f = {};
+
+/**
+ * The Heading component.
+ */
+const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      noWrap,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+  return /*#__PURE__*/React.createElement(StyledHeading, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Heading.className, className),
+    ref: ref,
+    $noWrap: noWrap,
+    $variant: variant ? variant : as === 'span' ? 'body' : as
+  }), children);
+});
+Heading.className = CLASSNAME$f;
+Heading.defaultProps = DEFAULT_PROPS$f;
+Heading.displayName = COMPONENT_NAME$f;
+
+/**
+ * Component style.
+ */
+const StyledFlexbox = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseFlexbox}
+`;
+
+const _excluded$7 = ["children", "className"];
+const COMPONENT_NAME$e = 'Flexbox';
+const CLASSNAME$e = 'redsift-flex-box';
+const DEFAULT_PROPS$e = {
+  gap: '16px'
+};
+
+/**
+ * The Flexbox component.
+ */
+const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+  return /*#__PURE__*/React.createElement(StyledFlexbox, _extends({}, forwardedProps, {
+    className: classNames(Flexbox.className, className),
+    ref: ref
+  }), children);
+});
+Flexbox.className = CLASSNAME$e;
+Flexbox.defaultProps = DEFAULT_PROPS$e;
+Flexbox.displayName = COMPONENT_NAME$e;
+
+var close$3 = "Close";
+var enUS$1 = {
+	close: close$3
+};
+
+var close$2 = "Fermer";
+var frFR$1 = {
+	close: close$2
+};
+
+var intlMessages$1 = {
+  'en-US': enUS$1,
+  'fr-FR': frFR$1
+};
+
 /**
  * Component style.
  */
@@ -1342,10 +1158,10 @@ const StyledDialogContentActions = styled.div`
   }
 `;
 
-const _excluded$8 = ["children", "className"];
-const COMPONENT_NAME$f = 'DialogContentActions';
-const CLASSNAME$f = 'redsift-dialog-content-actions';
-const DEFAULT_PROPS$f = {
+const _excluded$6 = ["children", "className"];
+const COMPONENT_NAME$d = 'DialogContentActions';
+const CLASSNAME$d = 'redsift-dialog-content-actions';
+const DEFAULT_PROPS$d = {
   flexDirection: 'row'
 };
 
@@ -1357,7 +1173,7 @@ const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
   const {
     actionsRef,
     initialFocus
@@ -1368,9 +1184,9 @@ const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: initialFocus === 'actions' ? -1 : undefined
   }), children);
 });
-DialogContentActions.className = CLASSNAME$f;
-DialogContentActions.defaultProps = DEFAULT_PROPS$f;
-DialogContentActions.displayName = COMPONENT_NAME$f;
+DialogContentActions.className = CLASSNAME$d;
+DialogContentActions.defaultProps = DEFAULT_PROPS$d;
+DialogContentActions.displayName = COMPONENT_NAME$d;
 
 /**
  * Component style.
@@ -1433,23 +1249,10 @@ const StyledDialogContentBody = styled.div`
   }
 `;
 
-/**
- * Get the bounding rect of a component.
- */
-const useBoundingClientRect = (ref, deps) => {
-  const [boundingRect, setBoundingRect] = useState({});
-  useEffect(() => {
-    if (ref.current) {
-      setBoundingRect(ref.current.getBoundingClientRect());
-    }
-  }, deps);
-  return boundingRect;
-};
-
-const _excluded$7 = ["children", "className"];
-const COMPONENT_NAME$e = 'DialogContentBody';
-const CLASSNAME$e = 'redsift-dialog-content-body';
-const DEFAULT_PROPS$e = {};
+const _excluded$5 = ["children", "className"];
+const COMPONENT_NAME$c = 'DialogContentBody';
+const CLASSNAME$c = 'redsift-dialog-content-body';
+const DEFAULT_PROPS$c = {};
 
 /**
  * The DialogContentBody component.
@@ -1459,7 +1262,7 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
   const {
     actionsRef,
     bodyRef,
@@ -1483,110 +1286,9 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
     $marginBottom: (actionsHeight === 0 ? 0 : actionsHeight + 16) + 80
   }), children);
 });
-DialogContentBody.className = CLASSNAME$e;
-DialogContentBody.defaultProps = DEFAULT_PROPS$e;
-DialogContentBody.displayName = COMPONENT_NAME$e;
-
-/**
- * Component style.
- */
-const StyledHeading = styled.span`
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-
-  ${baseStyling}
-
-  ${_ref => {
-  let {
-    $variant
-  } = _ref;
-  return $variant === 'h1' ? css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-h1-font-family);
-          font-size: var(--redsift-typography-h1-font-size);
-          font-weight: var(--redsift-typography-h1-font-weight);
-          line-height: var(--redsift-typography-h1-line-height);
-          text-transform: var(--redsift-typography-h1-text-transform);
-        ` : $variant === 'h2' ? css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-h2-font-family);
-          font-size: var(--redsift-typography-h2-font-size);
-          font-weight: var(--redsift-typography-h2-font-weight);
-          line-height: var(--redsift-typography-h2-line-height);
-        ` : $variant === 'h3' ? css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-h3-font-family);
-          font-size: var(--redsift-typography-h3-font-size);
-          font-weight: var(--redsift-typography-h3-font-weight);
-          line-height: var(--redsift-typography-h3-line-height);
-        ` : $variant === 'h4' ? css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-h4-font-family);
-          font-size: var(--redsift-typography-h4-font-size);
-          font-weight: var(--redsift-typography-h4-font-weight);
-          line-height: var(--redsift-typography-h4-line-height);
-        ` : $variant === 'h5' ? css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-h5-font-family);
-          font-size: var(--redsift-typography-h5-font-size);
-          font-weight: var(--redsift-typography-h5-font-weight);
-          line-height: var(--redsift-typography-h5-line-height);
-        ` : css`
-          color: var(--redsift-color-neutral-black);
-          font-family: var(--redsift-typography-body-font-family);
-          font-size: var(--redsift-typography-body-font-size);
-          font-weight: var(--redsift-typography-body-font-weight);
-          line-height: var(--redsift-typography-body-line-height);
-        `;
-}}
-
-  ${_ref2 => {
-  let {
-    $noWrap
-  } = _ref2;
-  return $noWrap ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        ` : css`
-          word-break: break-word;
-        `;
-}}
-`;
-
-const _excluded$6 = ["as", "children", "className", "noWrap", "variant"];
-const COMPONENT_NAME$d = 'Heading';
-const CLASSNAME$d = 'redsift-heading';
-const DEFAULT_PROPS$d = {};
-
-/**
- * The Heading component.
- */
-const Heading = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      as,
-      children,
-      className,
-      noWrap,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
-  return /*#__PURE__*/React.createElement(StyledHeading, _extends({
-    as: as
-  }, forwardedProps, {
-    className: classNames(Heading.className, className),
-    ref: ref,
-    $noWrap: noWrap,
-    $variant: variant ? variant : as === 'span' ? 'body' : as
-  }), children);
-});
-Heading.className = CLASSNAME$d;
-Heading.defaultProps = DEFAULT_PROPS$d;
-Heading.displayName = COMPONENT_NAME$d;
+DialogContentBody.className = CLASSNAME$c;
+DialogContentBody.defaultProps = DEFAULT_PROPS$c;
+DialogContentBody.displayName = COMPONENT_NAME$c;
 
 /**
  * Component style.
@@ -1622,10 +1324,10 @@ const StyledDialogContentHeader = styled.div`
   }
 `;
 
-const _excluded$5 = ["children", "className", "header", "headingProps", "icon", "subheader"];
-const COMPONENT_NAME$c = 'DialogContentHeader';
-const CLASSNAME$c = 'redsift-dialog-content-header';
-const DEFAULT_PROPS$c = {};
+const _excluded$4 = ["children", "className", "header", "headingProps", "icon", "subheader"];
+const COMPONENT_NAME$b = 'DialogContentHeader';
+const CLASSNAME$b = 'redsift-dialog-content-header';
+const DEFAULT_PROPS$b = {};
 
 /**
  * The DialogContentHeader component.
@@ -1639,7 +1341,7 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
       icon,
       subheader
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const {
     setLabelId,
     setDescriptionId,
@@ -1681,14 +1383,14 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
     id: descriptionId
   }, children) : null);
 });
-DialogContentHeader.className = CLASSNAME$c;
-DialogContentHeader.defaultProps = DEFAULT_PROPS$c;
-DialogContentHeader.displayName = COMPONENT_NAME$c;
+DialogContentHeader.className = CLASSNAME$b;
+DialogContentHeader.defaultProps = DEFAULT_PROPS$b;
+DialogContentHeader.displayName = COMPONENT_NAME$b;
 
-const _excluded$4 = ["children", "className"];
-const COMPONENT_NAME$b = 'DialogContent';
-const CLASSNAME$b = 'redsift-dialog-content';
-const DEFAULT_PROPS$b = {};
+const _excluded$3 = ["children", "className"];
+const COMPONENT_NAME$a = 'DialogContent';
+const CLASSNAME$a = 'redsift-dialog-content';
+const DEFAULT_PROPS$a = {};
 
 /**
  * The DialogContent component.
@@ -1698,7 +1400,7 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
   const {
     context: floatingContext,
     getFloatingProps,
@@ -1718,10 +1420,12 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     styles
   } = useTransitionStyles(floatingContext);
   const dialogRef = useMergeRefs([refs.setFloating, ref]);
-  const stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1(intlMessages$2);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
   const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [isComponent('DialogContentHeader'), isComponent('DialogContentBody'), isComponent('DialogContentActions')]);
   const initialFocus = propsInitialFocus === 'header' ? headerRef : propsInitialFocus === 'body' ? bodyRef : propsInitialFocus === 'actions' ? actionsRef : propsInitialFocus ? propsInitialFocus : undefined;
-  return /*#__PURE__*/React.createElement(FloatingPortal, null, isMounted && /*#__PURE__*/React.createElement(StyledFloatingOverlay, {
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    id: "redsift-app-container"
+  }, isMounted && /*#__PURE__*/React.createElement(StyledFloatingOverlay, {
     lockScroll: true,
     style: styles
   }, /*#__PURE__*/React.createElement(FloatingFocusManager, {
@@ -1748,18 +1452,18 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${BaseDialogContent.className}__content`
   }, body, actions) : null))));
 });
-BaseDialogContent.className = CLASSNAME$b;
-BaseDialogContent.defaultProps = DEFAULT_PROPS$b;
-BaseDialogContent.displayName = COMPONENT_NAME$b;
+BaseDialogContent.className = CLASSNAME$a;
+BaseDialogContent.defaultProps = DEFAULT_PROPS$a;
+BaseDialogContent.displayName = COMPONENT_NAME$a;
 const DialogContent = Object.assign(BaseDialogContent, {
   Header: DialogContentHeader,
   Body: DialogContentBody,
   Actions: DialogContentActions
 });
 
-const COMPONENT_NAME$a = 'DialogTrigger';
-const CLASSNAME$a = 'redsift-dialog-trigger';
-const DEFAULT_PROPS$a = {};
+const COMPONENT_NAME$9 = 'DialogTrigger';
+const CLASSNAME$9 = 'redsift-dialog-trigger';
+const DEFAULT_PROPS$9 = {};
 
 /**
  * The DialogTrigger component.
@@ -1786,9 +1490,9 @@ const DialogTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
-DialogTrigger.className = CLASSNAME$a;
-DialogTrigger.defaultProps = DEFAULT_PROPS$a;
-DialogTrigger.displayName = COMPONENT_NAME$a;
+DialogTrigger.className = CLASSNAME$9;
+DialogTrigger.defaultProps = DEFAULT_PROPS$9;
+DialogTrigger.displayName = COMPONENT_NAME$9;
 
 function useDialog(_ref) {
   let {
@@ -1843,9 +1547,9 @@ function useDialog(_ref) {
   }), [isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, size, headerRef, bodyRef, actionsRef]);
 }
 
-const COMPONENT_NAME$9 = 'Dialog';
-const CLASSNAME$9 = 'redsift-dialog';
-const DEFAULT_PROPS$9 = {
+const COMPONENT_NAME$8 = 'Dialog';
+const CLASSNAME$8 = 'redsift-dialog';
+const DEFAULT_PROPS$8 = {
   hasCloseButton: true,
   size: DialogSize.medium
 };
@@ -1857,7 +1561,7 @@ const BaseDialog = props => {
   const {
     children,
     defaultOpen,
-    hasCloseButton,
+    hasCloseButton = DEFAULT_PROPS$8.hasCloseButton,
     initialFocus,
     isOpen,
     onOpen,
@@ -1876,9 +1580,9 @@ const BaseDialog = props => {
     value: dialog
   }, trigger, content);
 };
-BaseDialog.className = CLASSNAME$9;
-BaseDialog.defaultProps = DEFAULT_PROPS$9;
-BaseDialog.displayName = COMPONENT_NAME$9;
+BaseDialog.className = CLASSNAME$8;
+BaseDialog.defaultProps = DEFAULT_PROPS$8;
+BaseDialog.displayName = COMPONENT_NAME$8;
 const Dialog = Object.assign(BaseDialog, {
   Trigger: DialogTrigger,
   Content: DialogContent
@@ -1940,9 +1644,9 @@ const StyledPopoverContent = styled.div`
   }
 `;
 
-const COMPONENT_NAME$8 = 'PopoverContent';
-const CLASSNAME$8 = 'redsift-popover-content';
-const DEFAULT_PROPS$8 = {};
+const COMPONENT_NAME$7 = 'PopoverContent';
+const CLASSNAME$7 = 'redsift-popover-content';
+const DEFAULT_PROPS$7 = {};
 
 /**
  * The PopoverContent component.
@@ -1964,7 +1668,9 @@ const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
     y
   } = usePopoverContext();
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
-  return /*#__PURE__*/React.createElement(FloatingPortal, null, isOpen && /*#__PURE__*/React.createElement(FloatingFocusManager, {
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    id: "redsift-app-container"
+  }, isOpen && /*#__PURE__*/React.createElement(FloatingFocusManager, {
     context: floatingContext,
     modal: isModal
   }, /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
@@ -1978,13 +1684,13 @@ const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
     }, style)
   }, getFloatingProps(props)), children)));
 });
-PopoverContent.className = CLASSNAME$8;
-PopoverContent.defaultProps = DEFAULT_PROPS$8;
-PopoverContent.displayName = COMPONENT_NAME$8;
+PopoverContent.className = CLASSNAME$7;
+PopoverContent.defaultProps = DEFAULT_PROPS$7;
+PopoverContent.displayName = COMPONENT_NAME$7;
 
-const COMPONENT_NAME$7 = 'PopoverTrigger';
-const CLASSNAME$7 = 'redsift-popover-trigger';
-const DEFAULT_PROPS$7 = {};
+const COMPONENT_NAME$6 = 'PopoverTrigger';
+const CLASSNAME$6 = 'redsift-popover-trigger';
+const DEFAULT_PROPS$6 = {};
 
 /**
  * The PopoverTrigger component.
@@ -2011,9 +1717,9 @@ const PopoverTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
-PopoverTrigger.className = CLASSNAME$7;
-PopoverTrigger.defaultProps = DEFAULT_PROPS$7;
-PopoverTrigger.displayName = COMPONENT_NAME$7;
+PopoverTrigger.className = CLASSNAME$6;
+PopoverTrigger.defaultProps = DEFAULT_PROPS$6;
+PopoverTrigger.displayName = COMPONENT_NAME$6;
 
 function usePopover(_ref) {
   let {
@@ -2058,9 +1764,9 @@ function usePopover(_ref) {
   }), [isOpen, handleOpen, interactions, data, isModal]);
 }
 
-const COMPONENT_NAME$6 = 'Popover';
-const CLASSNAME$6 = 'redsift-popover';
-const DEFAULT_PROPS$6 = {
+const COMPONENT_NAME$5 = 'Popover';
+const CLASSNAME$5 = 'redsift-popover';
+const DEFAULT_PROPS$5 = {
   isModal: false,
   placement: PopoverPlacement.bottom
 };
@@ -2089,9 +1795,9 @@ const BasePopover = props => {
     value: popover
   }, trigger, content);
 };
-BasePopover.className = CLASSNAME$6;
-BasePopover.defaultProps = DEFAULT_PROPS$6;
-BasePopover.displayName = COMPONENT_NAME$6;
+BasePopover.className = CLASSNAME$5;
+BasePopover.defaultProps = DEFAULT_PROPS$5;
+BasePopover.displayName = COMPONENT_NAME$5;
 const Popover = Object.assign(BasePopover, {
   Trigger: PopoverTrigger,
   Content: PopoverContent
@@ -2183,47 +1889,6 @@ const StyledToast = styled.div`
 }}
 `;
 
-/**
- * Component style.
- */
-const StyledFlexbox = styled.div`
-  display: ${_ref => {
-  let {
-    inline
-  } = _ref;
-  return inline ? 'inline-flex' : 'flex';
-}};
-
-  ${baseStyling}
-  ${baseInternalSpacing}
-  ${baseFlexbox}
-`;
-
-const _excluded$3 = ["children", "className"];
-const COMPONENT_NAME$5 = 'Flexbox';
-const CLASSNAME$5 = 'redsift-flex-box';
-const DEFAULT_PROPS$5 = {
-  gap: '16px'
-};
-
-/**
- * The Flexbox component.
- */
-const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children,
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React.createElement(StyledFlexbox, _extends({}, forwardedProps, {
-    className: classNames(Flexbox.className, className),
-    ref: ref
-  }), children);
-});
-Flexbox.className = CLASSNAME$5;
-Flexbox.defaultProps = DEFAULT_PROPS$5;
-Flexbox.displayName = COMPONENT_NAME$5;
-
 const _excluded$2 = ["children", "className", "closeToast", "closeButton", "title", "variant"];
 const COMPONENT_NAME$4 = 'Toast';
 const CLASSNAME$4 = 'redsift-toast';
@@ -2274,7 +1939,7 @@ const Toast = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
-  const stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1(intlMessages);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const icon = getVariant(variant);
   return /*#__PURE__*/React.createElement(StyledToast, _extends({}, forwardedProps, {
     className: classNames(Toast.className, className),
@@ -3365,7 +3030,6 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     placement,
     refs,
     strategy,
-    tooltipId,
     x,
     y,
     middlewareData: {
@@ -3386,7 +3050,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     left: 'right'
   }[placement.split('-')[0]];
   return /*#__PURE__*/React.createElement(FloatingPortal, {
-    id: tooltipId
+    id: "redsift-app-container"
   }, isOpen && /*#__PURE__*/React.createElement(StyledTooltipContent, _extends({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,