@m4l/components 8.2.3 → 9.0.0-beta-1

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -0,0 +1,159 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { useState, useEffect, useMemo } from "react";
+import { I as ICONS } from "../../icons.js";
+import { d as dragResizeWindowRNDClasses } from "../../../DragResizeWindowRND/classes/index.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { deepEqual } from "fast-equals";
+import { M as MemoizedIconButton } from "../MemoizedIconButton/MemoizedIconButton.js";
+import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, T as TitleWindowStyled, S as SubtitleContainerStyled, P as PointStyled, d as PointIconStyled, e as SubtitleWindowStyled, f as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
+const HeaderWindowBase = (props) => {
+  const {
+    title,
+    subTitle,
+    onClose,
+    iconUrl,
+    size,
+    selected,
+    version,
+    variant,
+    actions = []
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [leftActions, setLeftActions] = useState(() => actions.filter((action) => action.place === "left"));
+  const [rightActions, setRightActions] = useState(() => actions.filter((action) => action.place === "right"));
+  const [insideActions, setInsideActions] = useState(() => actions.filter((action) => action.place === "inside"));
+  useEffect(() => {
+    const groupedActions = actions.reduce(
+      (acc, action) => {
+        acc[action.place]?.push(action);
+        return acc;
+      },
+      { left: [], right: [], inside: [] }
+    );
+    setLeftActions((prev) => {
+      if (!deepEqual(prev, groupedActions.left)) {
+        return groupedActions.left;
+      }
+      return prev;
+    });
+    setRightActions((prev) => {
+      if (!deepEqual(prev, groupedActions.right)) {
+        return groupedActions.right;
+      }
+      return prev;
+    });
+    setInsideActions((prev) => {
+      if (!deepEqual(prev, groupedActions.inside)) {
+        return groupedActions.inside;
+      }
+      return prev;
+    });
+  }, [actions]);
+  const menuActions = useMemo(() => {
+    const memoizedActions = [
+      ...insideActions.map((action) => ({
+        type: "menuItem",
+        startIcon: action.iconUrl,
+        label: action.label,
+        onClick: action.onClick,
+        disabled: action.disabled
+      }))
+    ];
+    if (version) {
+      memoizedActions.push({
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.VERSION}`,
+        label: version,
+        onClick: () => {
+        },
+        disabled: true
+      });
+    }
+    return memoizedActions;
+  }, [insideActions, version, host_static_assets, environment_assets]);
+  const ownerState = {
+    selected,
+    variant,
+    size
+  };
+  const IconButtonLeftActions = useMemo(() => /* @__PURE__ */ jsx(Fragment, { children: leftActions.map((action) => /* @__PURE__ */ jsx(
+    MemoizedIconButton,
+    {
+      iconUrl: action.iconUrl,
+      label: action.label,
+      disabled: action.disabled,
+      onClick: action.onClick || (() => {
+      })
+    },
+    action.key
+  )) }), [leftActions]);
+  const IconButtonRightActions = useMemo(() => {
+    if (rightActions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: rightActions.map((action) => /* @__PURE__ */ jsx(
+      MemoizedIconButton,
+      {
+        iconUrl: action.iconUrl,
+        label: action.label,
+        disabled: action.disabled,
+        onClick: action.onClick || (() => {
+        })
+      },
+      action.key
+    )) });
+  }, [rightActions]);
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowRNDClasses.draggableHandle, ownerState, children: [
+    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
+      iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),
+      /* @__PURE__ */ jsx(TitleWindowStyled, { size, ownerState, children: title }),
+      subTitle && /* @__PURE__ */ jsxs(SubtitleContainerStyled, { size, ownerState, children: [
+        /* @__PURE__ */ jsx(PointStyled, { size, ownerState, children: /* @__PURE__ */ jsx(
+          PointIconStyled,
+          {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.POINT}`,
+            size,
+            ownerState
+          }
+        ) }),
+        /* @__PURE__ */ jsx(SubtitleWindowStyled, { size, ownerState, children: subTitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      IconsWrapperStyled,
+      {
+        className: dragResizeWindowRNDClasses.draggableCancel,
+        ownerState,
+        children: [
+          IconButtonLeftActions,
+          menuActions.length > 0 && /* @__PURE__ */ jsx(
+            MenuActionsWindowsStyled,
+            {
+              type: "menuItem",
+              ownerState,
+              icon: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.MORE_VERTICAL}`,
+              arrowType: "no-arrow",
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              transformOrigin: { vertical: "top", horizontal: "right" },
+              paperProps: { style: { marginTop: "12px" } },
+              menuActions
+            }
+          ),
+          IconButtonRightActions,
+          onClose && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/${ICONS.CLOSE}`,
+              onClick: onClose,
+              "aria-label": "close"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  HeaderWindowBase as H
+};

package/components/WindowBase/subcomponents/Header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HeaderWindowBase';
+export * from './types';

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -0,0 +1,64 @@
+import { WindowBaseAction, WindowBaseProps } from '../../types';
+/**
+ * Properties used by the `Header` component.
+ *
+ * This interface defines the expected properties for the window header,
+ * including the title, subtitle, cancel actions, icons, style classes, and color configuration.
+ *
+ * ### Properties:
+ * - `title` (string): The main title of the header.
+ * - `subTitle` (string, optional): An optional subtitle for the header.
+ * - `onClose` (VoidFunction, optional): Callback function executed when the close button is clicked.
+ * - `iconUrl` (string, optional): URL of the icon displayed in the header.
+ * - `color` ('default', optional): Component palette color, restricted to `'default'`.
+ * - `version` (string, optional): Version information to be displayed in the header.
+ * - `selected` (boolean, optional): Indicates whether the header is in a "selected" state.
+ * - `variant` ('outlined' | 'text', optional): Visual variant of the header.
+ *
+ * ### Example:
+ * ```typescript
+ * const headerProps: HeaderProps = {
+ * title: 'My Window',
+ * subTitle: 'Window Subtitle',
+ * onClickCancel: () => console.log('Close window'),
+ * iconUrl: 'https://example.com/icon.png',
+ * classes: { root: 'header-root' },
+ * color: 'default',
+ * };
+ * ```
+ *
+ * ### Notes:
+ * - `color` uses the palette colors defined in the theme, with support for restricted values.
+ * - `selected` modifies the visual appearance to indicate the selected state.
+ * @see WindowBaseProps - General properties for the window base.
+ */
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant'> & {
+    actions?: WindowBaseAction[];
+};
+/**
+ * Defines the visibility types for window actions.
+ */
+/**
+ * Define una acción de ventana basada en `MenuAction`, pero restringida solo a `menuItem`.
+ */
+/**
+ * Defines the structure of a window action, extending the `MenuAction` type.
+ * This includes additional properties for visibility, a unique key, an optional tag, and a custom class name.
+ *
+ * ### Properties:
+ * - `visibility` (WindowActionType): Defines the visibility of the action (`'main'`, `'allways'`, `'normal'`).
+ * - `key` (string): A unique key that identifies the action.
+ * - `tag` (optional, any): An optional tag or label for the action.
+ * - `className` (optional, string): An optional custom CSS class for the action.
+ *
+ * ### Example:
+ * ```typescript
+ * const windowAction: windowWindowAction = {
+ *   visibility: 'main',
+ *   key: 'action1',
+ *   tag: 'Action Tag',
+ *   className: 'action-class',
+ *   onClick: () => console.log('Action clicked'),
+ * };
+ * ```
+ */

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { MemoizedIconButtonProps } from './types';
+/**
+ * `MemoizedIconButton` Component
+ *
+ * This component renders an `IconButton` with an icon and tooltip.
+ * It is memoized to avoid unnecessary re-renders when the props do not change.
+ */
+declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default MemoizedIconButton;

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+const MemoizedIconButton = React.memo(
+  ({ iconUrl, label, disabled, onClick }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltipContent: label, icon: iconUrl, disabled, onClick })
+);
+export {
+  MemoizedIconButton as M
+};

package/components/WindowBase/subcomponents/MemoizedIconButton/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Props for the `MemoizedIconButton` component.
+ */
+export interface MemoizedIconButtonProps {
+    /**
+     * URL of the icon to display inside the button.
+     */
+    iconUrl: string;
+    /**
+     * Tooltip text to show when hovering over the button.
+     */
+    label: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function executed when the button is clicked.
+     */
+    onClick: () => void;
+}

package/components/WindowBase/subcomponents/MicroFrontend/MicroFrontend.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { MicroFrontendProps } from './types';
+/**
+ * Componente encargado de renderizar un microfrontend.
+ * @param props MicroFrontendProps
+ */
+export declare const WindowBaseMicroFrontend: (props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemonizedWindowBaseMicroFrontend: React.MemoExoticComponent<(props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element>;

package/components/WindowBase/subcomponents/MicroFrontend/MicroFrontend.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { M as MFLoader } from "../../../MFLoader/MFLoader.js";
+const WindowBaseMicroFrontend = (props) => {
+  return /* @__PURE__ */ jsx(MFLoader, { ...props });
+};
+const MemonizedWindowBaseMicroFrontend = React.memo(WindowBaseMicroFrontend);
+export {
+  MemonizedWindowBaseMicroFrontend as M
+};

package/components/WindowBase/subcomponents/MicroFrontend/types.d.ts

@@ -0,0 +1,8 @@
+import { MFBaseProps } from '../../../MFLoader/types';
+import { WindowToolsMF } from '../../contexts';
+import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
+export interface MicroFrontendProps extends MFBaseProps {
+    moduleId: string;
+    windowTools: WindowToolsMF;
+    dynamicMFStore: DynamicMFStore;
+}

package/components/WindowBase/tests/WindowBase.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/WindowBase/types.d.ts

@@ -0,0 +1,203 @@
+import { ReactNode } from 'react';
+import { WindowBaseSlots } from './slots/WindowBaseEnum';
+import { WINDOW_BASE_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material/styles';
+import { Sizes } from '@m4l/styles';
+import { MenuItemAction } from '../MenuActions/types';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+/**
+ * Opciones para la ventana.
+ */
+export type WindowOptions = {
+    /**
+     * Indica si se permitirá persistir las cookies.
+     */
+    allowPersistCookies: boolean;
+};
+export type JSX_REACT_NODE = ((props?: any) => JSX.Element) | ReactNode;
+/**
+ * Tipo que representa el tipo de ventana: microfrontend o componente.
+ */
+export type WinType = 'microfrontend' | 'component';
+/**
+ * Tipo que representa el tipo de visibilidad de la acción de ventana.
+ * main: Se muestra en el header de la ventana pero si está en mobile se muestra en el menú inside.
+ * allways: Se muestra en el header de la ventana así esté en mobile.
+ * normal: Se muestra inside del menu.
+ */
+export type WindowActionType = 'main' | 'allways' | 'normal';
+export interface ModuleAction extends Pick<MenuItemAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick'> {
+    /**
+     * Tipo de visibilidad de la acción de ventana.
+     *
+     */
+    visibility: WindowActionType;
+    /**
+     * Clave única de la acción de ventana.
+     */
+    key: string;
+    /**
+     * Etiqueta opcional para la acción de ventana.
+     */
+    tag?: any;
+    /**
+     * Clase CSS opcional para la acción de ventana.
+     */
+    className?: string;
+    /**
+     * Icono opcional para la acción de ventana.
+     */
+    iconUrl: string;
+}
+/**
+ * Type representing a single action in the `WindowBase` component.
+ */
+export interface WindowBaseAction extends Pick<ModuleAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick' | 'key' | 'iconUrl'> {
+    place: 'left' | 'right' | 'inside';
+}
+/**
+ * Interface representing the main properties of the `WindowBase` component.
+ *
+ * Defines the structure and functionality of the component, including its title, subtitle, content,
+ * icon URL, menu actions, visual configurations, and other related attributes.
+ * title (required) - The main title of the window.
+ * subTitle (optional) - Subtitle for the window.
+ * children (required) - Content to be rendered inside the window.
+ * urlIcon (optional) - URL for the icon displayed in the header.
+ * variant (optional) - Visual style of the window, with values `'outlined'` or `'text'`.
+ * size (optional) - Size of the window: `'small'` or `'medium'`.
+ * color (optional) - Theme color of the window, restricted to `'default'`.
+ * selected (optional) - Indicates if the window is selected.
+ * version (optional) - Component version (e.g., `1.0.0`).
+ * dataTestId (optional) - Identifier for automated testing.
+ * onClose (optional) - Function executed when the window is closed.
+ *
+ * ### Example:
+ * ```typescript
+ * const windowProps: WindowBaseProps = {
+ *   title: 'Main Window',
+ *   subTitle: 'Details',
+ *   children: <div>Window Content</div>,
+ *   urlIcon: 'https://example.com/icon.png',
+ *   variant: 'outlined',
+ *   menuActions: [{ label: 'Action 1', onClick: () => console.log('Action 1') }],
+ *   size: 'medium',
+ *   color: 'default',
+ *   selected: true,
+ *   version: '1.0.0',
+ *   dataTestId: 'main-window',
+ *   onClose: () => console.log('Cancel Clicked'),
+ * };
+ * ```
+ */
+export interface WindowBaseProps {
+    /**
+     * The main title of the window.
+     * This property is required and displayed prominently at the top of the window.
+     */
+    title: string;
+    /**
+     * An optional subtitle for the window.
+     * Typically displayed below the main title to provide additional context or details.
+     */
+    subTitle?: string;
+    /**
+     * The content to be rendered inside the window.
+     * This can include any valid React node or JSX.
+     */
+    children: ReactNode;
+    /**
+     * URL of the icon displayed in the header of the window.
+     * This is optional and used to provide a visual identifier for the window.
+     */
+    iconUrl?: string;
+    /**
+     * The visual style of the window.
+     * - `'outlined'`: Displays the window with an outlined border.
+     * - `'text'`: Displays the window with minimal styling, emphasizing the content.
+     * Default is `'outlined'` if not specified.
+     */
+    variant?: 'outlined' | 'text';
+    /**
+     * Size of the window.
+     * - `'small'`: A compact window size.
+     * - `'medium'`: A standard window size.
+     * Default is `'medium'` if not specified.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indicates if the window is currently selected.
+     * When `true`, the window may display a visual indicator to denote selection.
+     */
+    selected?: boolean;
+    /**
+     * The version label for the window.
+     * Useful for displaying version information (e.g., `1.0.0`) in the header or footer.
+     */
+    version?: string;
+    /**
+     * A unique identifier for automated testing.
+     * Provides a `data-testid` attribute for querying this component in tests.
+     */
+    dataTestId?: string;
+    /**
+     * Callback function executed when the window is closed.
+     * Typically triggered by a close button or similar action.
+     */
+    onClose?: VoidFunction;
+    /**
+     * List of actions to display in the window.
+     * Each action defines its placement, icon, label, and other properties.
+     */
+    actions?: WindowBaseAction[];
+    /**
+     * An optional class name to apply to the root element of the component.
+     */
+    className?: string;
+    /**
+     * Indicates if the window is in a loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * A unique identifier for the window.
+     * This is used to identify and manage multiple windows.
+     */
+    windowId?: string;
+    /**
+     * "onMouseDown" event handler for the window.
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Additional information displayed in the window.
+     */
+    editionInfo?: string;
+}
+/**
+ * Type representing the possible values of `WindowBaseSlots`.
+ *
+ * This is used to map slot identifiers for the `WindowBase` component.
+ */
+export type WindowBaseType = keyof typeof WindowBaseSlots;
+/**
+ * Owner state (`ownerState`) for the `WindowBase` component.
+ *
+ * Defines properties that influence the styles and behavior of the component.
+ * windowBaseColor (optional) - Color applied to the component.
+ * windowBaseSelected (optional) - Indicates if the component is selected.
+ * windowBaseVariant (optional) - Visual variant of the component (`'outlined'` or `'text'`).
+ * windowBaseSize (optional) - Size of the component (`'small'` or `'medium'`).
+ */
+export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
+    selected?: WindowBaseProps['selected'];
+    variant?: WindowBaseProps['variant'];
+    size?: WindowBaseProps['size'];
+};
+/**
+ * Type for defining custom styles for the `WindowBase` component.
+ *
+ * Allows overriding default styles for each slot of the `WindowBase` component using MUI's `OverridesStyleRules`.
+ * WindowBaseType - Represents the style overrides for the component slots.
+ * WINDOW_BASE_KEY_COMPONENT - Key used to register the `WindowBase` component with the theme.
+ * Theme - The theme object containing styling information.
+ */
+export type WindowBaseStyles = M4LOverridesStyleRules<WindowBaseType, typeof WINDOW_BASE_KEY_COMPONENT, Theme>;

package/components/WindowConfirm/WindowConfirm.d.ts

@@ -0,0 +1,24 @@
+import { WindowConfirmProps } from './types';
+/**
+ * WindowConfirm Component
+ *
+ * A modal component for displaying confirmation dialogs with customizable messages,
+ * titles, and action buttons. The component allows users to define behaviors for the
+ * "Confirm" and "Cancel" actions and supports multiple visual variants (e.g., warning,
+ * success, error).
+ * @param {WindowConfirmProps} props - Properties for configuring the component.
+ * [variant="warning"] - The visual variant for the modal (e.g., "warning", "error", "success", "info", "delete").
+ * [title] - The title displayed in the modal. Defaults to a label from the module dictionary.
+ * [msg] - The message displayed in the modal. Defaults to a label from the module dictionary.
+ * [onClickCancel] - Callback executed when the "Cancel" button is clicked.
+ * [onClickIntro] - Callback executed when the "Confirm" button is clicked.
+ * @example
+ * <WindowConfirm
+ *   variant="warning"
+ *   title="Confirm Deletion"
+ *   msg="Are you sure you want to delete this item?"
+ *   onClickCancel={() => console.log("Cancelled")}
+ *   onClickIntro={() => console.log("Confirmed")}
+ * />
+ */
+export declare const WindowConfirm: (props: WindowConfirmProps) => import("react/jsx-runtime").JSX.Element;

package/components/WindowConfirm/WindowConfirm.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useModal } from "../../hooks/useModal/index.js";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+import clsx from "clsx";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { W as WindowConfirmRootStyled, a as WindowConfirmContentStyled, M as MessageIllustrationStyled, A as ActionsContainerStyled, b as ActionCancelStyled, c as ActionIntroStyled } from "./slots/WindowConfirmSlots.js";
+import { W as WindowConfirmSlots } from "./slots/WindowConfirmEnum.js";
+import { W as WindowBase } from "../WindowBase/WindowBase.js";
+const WindowConfirm = (props) => {
+  const {
+    variant = "warning",
+    title,
+    onClickCancel,
+    onClickIntro,
+    msg,
+    size = "medium",
+    dataTestId
+    //titleAccept, // TODO: para que es
+  } = props;
+  const { closeModal } = useModal();
+  const { getLabel } = useModuleDictionary();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  const onClickIntroLocal = () => {
+    closeModal();
+    if (onClickIntro) {
+      onClickIntro();
+    }
+  };
+  const { currentSize } = useComponentSize(size);
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const ownerState = {
+    windowConfirmColor: "default",
+    windowConfirmSize: normalizedSize,
+    windowConfirmVariant: variant
+  };
+  const getVariantMapping = (variantType) => {
+    const mapping = {
+      warning: { color: "warning" },
+      error: { color: "error" },
+      info: { color: "info" }
+    };
+    return mapping[variantType] || { color: "warning" };
+  };
+  const { color } = getVariantMapping(variant);
+  const mappedVariant = getVariantMapping(variant).color;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const iconMap = {
+    warning: `${host_static_assets}/${environment_assets}/frontend/components/window_confirm/assets/icons/warning.svg`,
+    error: `${host_static_assets}/${environment_assets}/frontend/components/window_confirm/assets/icons/danger+svg.svg`,
+    info: `${host_static_assets}/${environment_assets}/frontend/components/window_confirm/assets/icons/Info.svg`
+  };
+  const iconUrl = iconMap[variant] || iconMap.warning;
+  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { iconUrl, variant: "text", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), children: /* @__PURE__ */ jsx(
+    WindowConfirmRootStyled,
+    {
+      className: clsx(getComponentSlotRoot(WINDOW_CONFIRM_KEY_COMPONENT)),
+      ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.wrapperWindowConfirm, dataTestId),
+      size,
+      ownerState,
+      children: /* @__PURE__ */ jsxs(
+        WindowConfirmContentStyled,
+        {
+          ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.windowConfirmContent, dataTestId),
+          ownerState,
+          size,
+          children: [
+            /* @__PURE__ */ jsx(
+              MessageIllustrationStyled,
+              {
+                ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.messageIllustration, dataTestId),
+                size,
+                ownerState,
+                variant: mappedVariant,
+                msg: msg || getLabel("modal_dialog.label_window_confirm"),
+                title: title || getLabel("modal_dialog.title_window_confirm")
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              ActionsContainerStyled,
+              {
+                ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.actionsContainer, dataTestId),
+                size,
+                ownerState,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ActionCancelStyled,
+                    {
+                      ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.actionCancel, dataTestId),
+                      size,
+                      ownerState,
+                      onClick: onCloseCancel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ActionIntroStyled,
+                    {
+                      ...getPropDataTestId(WINDOW_CONFIRM_KEY_COMPONENT, WindowConfirmSlots.actionIntro, dataTestId),
+                      size,
+                      ownerState,
+                      onClick: onClickIntroLocal,
+                      color
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) }) });
+};
+export {
+  WindowConfirm as W
+};

package/components/WindowConfirm/WindowConfirm.styles.d.ts

@@ -0,0 +1,2 @@
+import { WindowConfirmStyles } from './types';
+export declare const windowConfirmStyles: WindowConfirmStyles;