@edifice.io/react 2.6.5 → 2.6.6-develop-b2school.20260922101258

package/dist/components/Form/FormText.js

@@ -1,16 +1,21 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import SvgIconError from "../../modules/icons/components/IconError.js";
+import SvgIconSuccessOutline from "../../modules/icons/components/IconSuccessOutline.js";
 import { useFormControl } from "./FormContext.js";
 const FormText = ({
   children
 }) => {
   const {
     status
-  } = useFormControl(), classes = clsx("form-text", {
-    "is-invalid": status === "invalid",
-    valid: status === "valid"
-  });
-  return /* @__PURE__ */ jsx("p", { className: classes, children: /* @__PURE__ */ jsx("em", { children }) });
+  } = useFormControl(), classes = clsx("input-message", {
+    "input-message--invalid": status === "invalid",
+    "input-message--valid": status === "valid"
+  }), Icon = status === "invalid" ? SvgIconError : status === "valid" ? SvgIconSuccessOutline : null;
+  return /* @__PURE__ */ jsxs("p", { className: classes, children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "input-message__icon", "aria-hidden": "true" }),
+    children
+  ] });
 };
 export {
   FormText as default

package/dist/components/Input/Input.d.ts

@@ -2,7 +2,8 @@ import { Size } from '../../types';
 export type OmitInputProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
 export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, OmitInputProps> {
     /**
-     * Control size of input
+     * Control size of input. `sm` and `md` share the same visual size
+     * ("Medium" in the design system); only `lg` ("Big") differs.
      */
     size: Size;
     /**
@@ -18,7 +19,8 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
      */
     disabled?: boolean;
     /**
-     * Remove validation icon
+     * @deprecated Validation icons no longer render inside the field —
+     * this prop has no effect and will be removed in a future major version.
      */
     noValidationIcon?: boolean;
     /**
@@ -33,6 +35,13 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
      * Browser autocomplete feature
      */
     autoComplete?: string;
+    /**
+     * Show a built-in clear (×) button while the field is focused. Opt-in:
+     * several consumers render their own clear affordance already (e.g.
+     * `SearchBar`), and a broad audit of every `Input` usage hasn't been done
+     * yet — see INPUT-MIGRATION-PLAN.md §07.
+     */
+    clearable?: boolean;
 }
 /**
  * Input Form Component

package/dist/components/Input/Input.js

@@ -1,40 +1,57 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
 import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
 import { useFormControl } from "../Form/FormContext.js";
-import Textcounter from "../TextCounter/TextCounter.js";
 const Input = /* @__PURE__ */ forwardRef(({
-  noValidationIcon,
   placeholder,
   size = "md",
   type = "text",
   className,
   showCounter = !1,
   autoComplete = "off",
+  clearable = !1,
+  noValidationIcon: _noValidationIcon,
   ...restProps
-}, ref) => {
+}, forwardedRef) => {
   var _a;
   const {
     id,
     isRequired,
     isReadOnly,
     status
-  } = useFormControl(), [currentLength, setCurrentLength] = useState(((_a = restProps.defaultValue) == null ? void 0 : _a.toString().length) || 0), classes = clsx({
-    "form-control": !isReadOnly,
-    "form-control-lg": size === "lg",
-    "form-control-sm": size === "sm",
-    "is-invalid": status === "invalid",
-    "is-valid": status === "valid",
-    "form-control-plaintext": isReadOnly,
-    "no-validation-icon": noValidationIcon,
-    "pe-64": showCounter && !status
-  }, className);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps, onChange: (e) => {
-      var _a2;
-      setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
-    }, autoComplete }),
-    showCounter && !status && /* @__PURE__ */ jsx(Textcounter, { currentLength, maxLength: restProps.maxLength ?? 0 })
+  } = useFormControl(), {
+    t
+  } = useTranslation(), inputRef = useRef(null), [currentLength, setCurrentLength] = useState(((_a = restProps.defaultValue) == null ? void 0 : _a.toString().length) || 0), setRefs = (node) => {
+    inputRef.current = node, typeof forwardedRef == "function" ? forwardedRef(node) : forwardedRef && (forwardedRef.current = node);
+  }, wrapperClasses = clsx("input", {
+    "input--lg": size === "lg",
+    "input--invalid": status === "invalid",
+    "input--valid": status === "valid",
+    "input--plaintext": isReadOnly
+  }, className), handleChange = (e) => {
+    var _a2;
+    setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
+  }, handleClear = () => {
+    var _a2;
+    const node = inputRef.current;
+    if (!node) return;
+    const nativeSetter = (_a2 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a2.set;
+    nativeSetter == null || nativeSetter.call(node, ""), node.dispatchEvent(new Event("input", {
+      bubbles: !0
+    })), node.focus();
+  }, maxLength = restProps.maxLength ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    /* @__PURE__ */ jsx("input", { ref: setRefs, id, className: "input__field", type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps, onChange: handleChange, autoComplete }),
+    clearable && !isReadOnly && /* @__PURE__ */ jsx("button", { type: "button", className: "input__clear", onClick: handleClear, "aria-label": t("clear"), children: /* @__PURE__ */ jsx(SvgIconClose, {}) }),
+    showCounter && /* @__PURE__ */ jsxs("span", { className: clsx("input__counter", {
+      "input__counter--max": currentLength === maxLength
+    }), children: [
+      currentLength,
+      " / ",
+      maxLength
+    ] })
   ] });
 });
 export {

package/dist/components/Label/Label.js

@@ -16,8 +16,8 @@ const Label = /* @__PURE__ */ forwardRef(({
     isRequired
   } = useFormControl(), {
     t
-  } = useTranslation(), classes = clsx("form-label", {
-    "has-icon": leftIcon
+  } = useTranslation(), classes = clsx("input-label", {
+    "input-label--has-icon": leftIcon
   }, className), optionalState = isOptional && !isRequired, requiredState = isRequired && !isOptional;
   return useEffect(() => {
     if (isOptional && isRequired)
@@ -25,11 +25,11 @@ const Label = /* @__PURE__ */ forwardRef(({
   }, [isOptional, isRequired]), /* @__PURE__ */ jsxs("label", { ref, htmlFor: id, className: classes, children: [
     leftIcon,
     children,
-    optionalState && /* @__PURE__ */ jsxs("em", { className: "optional", children: [
+    optionalState && /* @__PURE__ */ jsxs("em", { className: "input-label__optional", children: [
       "- ",
       optionalText ?? t("explorer.optional")
     ] }),
-    requiredState && /* @__PURE__ */ jsx("em", { className: "required", children: requiredText })
+    requiredState && /* @__PURE__ */ jsx("em", { className: "input-label__required", children: requiredText })
   ] });
 });
 export {

package/dist/components/Layout/Layout.js

@@ -4,10 +4,11 @@ import clsx from "clsx";
 import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useEdificeTheme } from "../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import { useOverlay } from "../PageLayout/hook/useOverlay.js";
 import Header from "./components/Header.js";
 import HeaderNotificationsOverlay from "./components/HeaderNotificationsOverlay.js";
-import { useOverlay } from "../PageLayout/hook/useOverlay.js";
 import useUiOverride from "../../hooks/useUiOverride/useUiOverride.js";
+import useBackground from "../../hooks/useBackground/useBackground.js";
 import useCookiesConsent from "../../hooks/useCookiesConsent/useCookiesConsent.js";
 import useZendeskGuide from "../../hooks/useZendeskGuide/useZendeskGuide.js";
 import useCantoo from "../../hooks/useCantoo/useCantoo.js";
@@ -22,7 +23,11 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
 }) => {
   const {
     theme
-  } = useEdificeTheme(), override = useUiOverride("layout.header"), isHeaderV2 = (override == null ? void 0 : override.variant) === "v2", backgroundOverride = useUiOverride("layout.background"), hasBackgroundImage = (backgroundOverride == null ? void 0 : backgroundOverride.variant) === "image", {
+  } = useEdificeTheme(), override = useUiOverride("layout.header"), isHeaderV2 = (override == null ? void 0 : override.variant) === "v2", {
+    productOverride,
+    background,
+    isBackgroundImageOverridden
+  } = useBackground(), {
     toggleOverlay
   } = useOverlay(), {
     t
@@ -40,9 +45,9 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
   }, className), renderHeader = headless ? null : isHeaderV2 ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeaderV2, { src: theme == null ? void 0 : theme.basePath, dataProduct: override == null ? void 0 : override.theme, onNotificationsClick: toggleOverlay }) }) : /* @__PURE__ */ jsx(Header, { is1d: theme == null ? void 0 : theme.is1d, src: theme == null ? void 0 : theme.basePath }), renderNotificationsOverlay = !headless && isHeaderV2 && /* @__PURE__ */ jsx(HeaderNotificationsOverlay, {}), renderCookies = showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", className: "m-12 rgpd", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(Button, { color: "tertiary", variant: "ghost", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") }), renderToaster = /* @__PURE__ */ jsx(Toaster, { containerClassName: "toaster-container", toastOptions: {
     position: "top-right"
   } });
-  return /* @__PURE__ */ jsxs("div", { className: clsx("layout", {
-    "layout-has-background-image": hasBackgroundImage
-  }), "data-product": hasBackgroundImage ? backgroundOverride == null ? void 0 : backgroundOverride.theme : void 0, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-product": productOverride, "data-background": background, className: clsx("layout", {
+    "layout-has-background-image": isBackgroundImageOverridden
+  }), children: [
     renderHeader,
     renderNotificationsOverlay,
     /* @__PURE__ */ jsx("main", { className: classes, ...restProps, children }),

package/dist/components/LinkPill/LinkPill.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export type LinkPillIllustrationType = 'icon' | 'img';
+export type LinkPillIllustrationPosition = 'left' | 'right';
+export interface LinkPillProps {
+    /**
+     * URL opened in a new tab when the pill is clicked.
+     */
+    href: string;
+    /**
+     * Text displayed inside the pill (single line, ellipsis on overflow).
+     */
+    label: string;
+    /**
+     * Optional second line displayed below the label (single line, ellipsis
+     * on overflow). Does not affect the label's font size.
+     */
+    subtitle?: string;
+    /**
+     * Illustration node. Defaults to `<IconLink />` for the `icon` type.
+     * For the `img` type, the caller must provide an `<img>` element.
+     */
+    illustration?: ReactNode;
+    /**
+     * `icon` (default): illustration wrapped in a small rounded box.
+     * `img`: illustration rendered as a 36x36 rounded square (e.g. a favicon).
+     */
+    illustrationType?: LinkPillIllustrationType;
+    /**
+     * Side the illustration is displayed on.
+     */
+    illustrationPosition?: LinkPillIllustrationPosition;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * LinkPill – design system component used to display a link to an
+ * external resource as a small rounded pill.
+ */
+declare const LinkPill: {
+    ({ href, label, subtitle, illustration, illustrationType, illustrationPosition, className, }: LinkPillProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default LinkPill;

package/dist/components/LinkPill/LinkPill.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import SvgIconLink from "../../modules/icons/components/IconLink.js";
+const LinkPill = ({
+  href,
+  label,
+  subtitle,
+  illustration,
+  illustrationType = "icon",
+  illustrationPosition = "left",
+  className
+}) => {
+  const illustrationNode = illustrationType === "icon" ? /* @__PURE__ */ jsx("span", { className: "link-pill-icon", children: illustration ?? /* @__PURE__ */ jsx(SvgIconLink, {}) }) : /* @__PURE__ */ jsx("span", { className: "link-pill-image", children: illustration }), contentNode = /* @__PURE__ */ jsxs("span", { className: "link-pill-content", children: [
+    /* @__PURE__ */ jsx("span", { className: "link-pill-label", title: label, children: label }),
+    subtitle && /* @__PURE__ */ jsx("span", { className: "link-pill-subtitle", title: subtitle, children: subtitle })
+  ] });
+  return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", "data-testid": "link-pill", className: clsx("link-pill", `link-pill--illustration-${illustrationPosition}`, className), children: illustrationPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    illustrationNode,
+    contentNode
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    contentNode,
+    illustrationNode
+  ] }) });
+};
+export {
+  LinkPill as default
+};

package/dist/components/LinkPill/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LinkPill } from './LinkPill';
+export * from './LinkPill';

package/dist/components/ModalBeta/ModalBeta.d.ts

@@ -0,0 +1,47 @@
+export type ModalBetaElement = HTMLDivElement;
+export type ModalBetaSize = 's' | 'm' | 'l' | 'xl';
+export interface ModalBetaProps {
+    /**
+     * Modal id (useful when multiple modal on the same page)
+     */
+    id: string;
+    /**
+     * Modal testid
+     */
+    ['data-testid']?: string;
+    /**
+     * Is Modal Open
+     */
+    isOpen: boolean;
+    /**
+     * Function to call when closing modal
+     */
+    onModalClose: () => void;
+    /**
+     * Size of the modal (width, padding and corner radius)
+     */
+    size?: ModalBetaSize;
+    /**
+     * ID of the HTML element to receive focus when modal is active.
+     */
+    focusId?: string;
+    /**
+     * Children
+     */
+    children: React.ReactNode;
+}
+declare const ModalBeta: import('react').ForwardRefExoticComponent<ModalBetaProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: {
+        ({ onModalClose, children, subtitle, }: import('./ModalBetaHeader').ModalBetaHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className }: import('./ModalBetaBody').ModalBetaBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children }: import('./ModalBetaFooter').ModalBetaFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default ModalBeta;

package/dist/components/ModalBeta/ModalBeta.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect } from "react";
+import { useTransition, animated } from "@react-spring/web";
+import clsx from "clsx";
+import ModalBetaBody from "./ModalBetaBody.js";
+import { ModalBetaContext } from "./ModalBetaContext.js";
+import ModalBetaFooter from "./ModalBetaFooter.js";
+import ModalBetaHeader from "./ModalBetaHeader.js";
+import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
+import useTrapFocus from "../../hooks/useTrapFocus/useTrapFocus.js";
+import useKeyPress from "../../hooks/useKeyPress/useKeyPress.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  id,
+  isOpen,
+  onModalClose,
+  size = "m",
+  focusId,
+  children,
+  ...otherDivProps
+}, ref) => {
+  const ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose, void 0, void 0, isOpen), trapRef = useTrapFocus(isOpen), setDialogRef = useCallback((node) => {
+    modalRef.current = node, trapRef.current = node;
+  }, [modalRef, trapRef]);
+  useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
+    if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
+      const elem = document.getElementById(focusId);
+      elem == null || elem.focus();
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [focusId, isOpen]);
+  const modalClasses = clsx("modal-beta", `modal-beta--${size}`), modalContextValue = {
+    ariaLabelId,
+    ariaDescriptionId,
+    focusId
+  }, transition = useTransition(isOpen, {
+    from: {
+      y: -20,
+      opacity: 0
+    },
+    enter: {
+      y: 0,
+      opacity: 1
+    },
+    leave: {
+      y: 20,
+      opacity: 0
+    }
+  });
+  return /* @__PURE__ */ jsx(ModalBetaContext.Provider, { value: modalContextValue, children: transition((style, isOpen2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, ...otherDivProps, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: setDialogRef, className: "modal-beta-dialog", children: /* @__PURE__ */ jsx("div", { className: "modal-beta-content", children }) }) }),
+    isOpen2 && /* @__PURE__ */ jsx("div", { className: "modal-beta-backdrop" })
+  ] })) });
+}), ModalBeta = Object.assign(Root, {
+  Header: ModalBetaHeader,
+  Body: ModalBetaBody,
+  Footer: ModalBetaFooter
+});
+export {
+  ModalBeta as default
+};

package/dist/components/ModalBeta/ModalBetaBody.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface ModalBetaBodyProps {
+    /**
+     * Children
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * ModalBeta Body
+ */
+declare const ModalBetaBody: {
+    ({ children, className }: ModalBetaBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ModalBetaBody;

package/dist/components/ModalBeta/ModalBetaBody.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useModalBetaContext } from "./ModalBetaContext.js";
+const ModalBetaBody = ({
+  children,
+  className
+}) => {
+  const {
+    ariaDescriptionId
+  } = useModalBetaContext();
+  return /* @__PURE__ */ jsx("div", { id: ariaDescriptionId, className: clsx("modal-beta-body", className), children });
+};
+export {
+  ModalBetaBody as default
+};

package/dist/components/ModalBeta/ModalBetaContext.d.ts

@@ -0,0 +1,7 @@
+export interface ModalBetaContextProps {
+    ariaLabelId: string;
+    ariaDescriptionId: string;
+    focusId: string | undefined;
+}
+export declare const ModalBetaContext: import('react').Context<ModalBetaContextProps>;
+export declare const useModalBetaContext: () => ModalBetaContextProps;

package/dist/components/ModalBeta/ModalBetaContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+const ModalBetaContext = /* @__PURE__ */ createContext({
+  ariaLabelId: "",
+  ariaDescriptionId: "",
+  focusId: ""
+}), useModalBetaContext = () => {
+  const context = useContext(ModalBetaContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside the ModalBeta component");
+  return context;
+};
+export {
+  ModalBetaContext,
+  useModalBetaContext
+};

package/dist/components/ModalBeta/ModalBetaFooter.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface ModalBetaFooterProps {
+    children: ReactNode;
+}
+/**
+ * ModalBeta Footer — right-aligns its children, typically two ButtonBeta
+ * (a ghost/tertiary action followed by the primary filled action).
+ */
+declare const ModalBetaFooter: {
+    ({ children }: ModalBetaFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ModalBetaFooter;

package/dist/components/ModalBeta/ModalBetaFooter.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const ModalBetaFooter = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: "modal-beta-footer", children });
+export {
+  ModalBetaFooter as default
+};

package/dist/components/ModalBeta/ModalBetaHeader.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface ModalBetaHeaderProps {
+    /**
+     * Method called on modal close
+     */
+    onModalClose: () => void;
+    /**
+     * Modal title
+     */
+    children: ReactNode;
+    /**
+     * Optional text displayed below the title
+     */
+    subtitle?: ReactNode;
+}
+/**
+ * ModalBeta Header
+ */
+declare const ModalBetaHeader: {
+    ({ onModalClose, children, subtitle, }: ModalBetaHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ModalBetaHeader;

package/dist/components/ModalBeta/ModalBetaHeader.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
+import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
+import { useModalBetaContext } from "./ModalBetaContext.js";
+const ModalBetaHeader = ({
+  onModalClose,
+  children,
+  subtitle
+}) => {
+  const {
+    ariaLabelId,
+    focusId
+  } = useModalBetaContext(), closeButtonRef = useRef(null), {
+    t
+  } = useTranslation();
+  return useEffect(() => {
+    var _a;
+    focusId || (_a = closeButtonRef.current) == null || _a.focus();
+  }, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-beta-header", children: [
+    /* @__PURE__ */ jsxs("div", { className: "modal-beta-title-row", children: [
+      /* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-beta-title", tabIndex: -1, children }),
+      /* @__PURE__ */ jsx(ButtonBeta, { ref: closeButtonRef, "aria-label": t("close"), title: t("close"), type: "button", variant: "ghost", color: "tertiary", leftIcon: /* @__PURE__ */ jsx(SvgIconClose, {}), onClick: onModalClose })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "modal-beta-subtitle", children: subtitle })
+  ] });
+};
+export {
+  ModalBetaHeader as default
+};

package/dist/components/ModalBeta/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModalBeta } from './ModalBeta';
+export * from './ModalBeta';

package/dist/components/PageLayout/PageLayout.d.ts

@@ -41,5 +41,9 @@ declare const PageLayout: {
         ({ children, onClose, closeButton, backdrop, className, ...props }: import('./components/PageLayoutOverlay').PageLayoutOverlayProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    HelpZone: {
+        (): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export default PageLayout;

package/dist/components/PageLayout/PageLayout.js

@@ -1,15 +1,16 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
 import clsx from "clsx";
 import PageLayoutBreadcrumb from "./components/PageLayoutBreadcrumb.js";
 import PageLayoutContent from "./components/PageLayoutContent.js";
 import PageLayoutHeader from "./components/PageLayoutHeader.js";
+import PageLayoutHelpZone from "./components/PageLayoutHelpZone.js";
 import PageLayoutOverlay from "./components/PageLayoutOverlay.js";
 import PageLayoutSidebarLeft from "./components/PageLayoutSidebarLeft.js";
 import PageLayoutSidebarRight from "./components/PageLayoutSidebarRight.js";
 import { PageLayoutContext } from "./PageLayoutContext.js";
 function analyzeChildren(children) {
-  let hasLeftSidebar = !1, hasRightSidebar = !1, breadcrumb = null, overlay = null;
+  let hasLeftSidebar = !1, hasRightSidebar = !1, breadcrumb = null, overlay = null, helpZone = null;
   const headerChildren = [], mainChildren = [];
   return Children.toArray(children).forEach((child) => {
     if (/* @__PURE__ */ isValidElement(child))
@@ -23,6 +24,9 @@ function analyzeChildren(children) {
         case PageLayoutOverlay:
           overlay = child;
           break;
+        case PageLayoutHelpZone:
+          helpZone = child;
+          break;
         case PageLayoutSidebarLeft:
           hasLeftSidebar = !0, mainChildren.push(child);
           break;
@@ -41,6 +45,7 @@ function analyzeChildren(children) {
     hasRightSidebar,
     breadcrumb,
     overlay,
+    helpZone,
     headerChildren,
     mainChildren
   };
@@ -63,6 +68,7 @@ const Root = ({
     hasRightSidebar,
     breadcrumb,
     overlay,
+    helpZone,
     headerChildren,
     mainChildren
   } = analyzeChildren(children), mainAreaClasses = clsx("pagelayout-mainarea", {
@@ -71,23 +77,27 @@ const Root = ({
     "has-right-sidebar-only": !hasLeftSidebar && hasRightSidebar,
     "has-gap": withGap
   }), isFullpage = variant === "fullpage";
-  return /* @__PURE__ */ jsx(PageLayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: clsx("pagelayout", `pagelayout-${variant}`, scrollMode && `pagelayout-scroll-${scrollMode}`, className), ...props, children: [
-    headerChildren,
-    headerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "pagelayout-headerspacer" }),
-    !isFullpage && breadcrumb,
-    /* @__PURE__ */ jsxs("div", { className: mainAreaClasses, children: [
-      isFullpage && breadcrumb,
-      mainChildren
+  return /* @__PURE__ */ jsxs(PageLayoutContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("pagelayout", `pagelayout-${variant}`, scrollMode && `pagelayout-scroll-${scrollMode}`, className), ...props, children: [
+      headerChildren,
+      headerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "pagelayout-headerspacer" }),
+      !isFullpage && breadcrumb,
+      /* @__PURE__ */ jsxs("div", { className: mainAreaClasses, children: [
+        isFullpage && breadcrumb,
+        mainChildren
+      ] }),
+      overlay
     ] }),
-    overlay
-  ] }) });
+    helpZone
+  ] });
 }, PageLayout = Object.assign(Root, {
   Header: PageLayoutHeader,
   Breadcrumb: PageLayoutBreadcrumb,
   SidebarLeft: PageLayoutSidebarLeft,
   Content: PageLayoutContent,
   SidebarRight: PageLayoutSidebarRight,
-  Overlay: PageLayoutOverlay
+  Overlay: PageLayoutOverlay,
+  HelpZone: PageLayoutHelpZone
 });
 export {
   PageLayout as default