@geneui/components 3.0.0-next-76e593d-29072025 → 3.0.0-next-e06ec94-05082025

package/Modal.js

@@ -0,0 +1,100 @@
+import React__default, { useContext, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { c as classNames } from './index-ce02421b.js';
+import { S as SvgErrorFilled } from './ErrorFilled-f4226310.js';
+import { S as SvgInfo } from './Info-0f0741e0.js';
+import { S as SvgTriangleAlert } from './TriangleAlert-ba250f4c.js';
+import { S as SvgX } from './X-20da3b4a.js';
+import Button from './Button.js';
+import Scrollbar from './Scrollbar.js';
+import Text from './Text.js';
+import ButtonGroup from './ButtonGroup.js';
+import Tooltip from './Tooltip.js';
+import { a as GeneUIDesignSystemContext } from './index-d9a2e208.js';
+import { u as useEllipsisDetection } from './useEllipsisDetection-36ecf9df.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './ActivityRecent-b88e2ba8.js';
+import './Loader.js';
+import 'prop-types';
+import './useDebounceCallback-999deae7.js';
+import './ThreeDotsHorizontal-479c2b4b.js';
+import './Menu.js';
+import './PopoverBody-7437f3ac.js';
+import './floating-ui.react-a6c3b969.js';
+import './index-b29adba3.js';
+import './index-a2688a52.js';
+import './CheckMark-34798545.js';
+import './ChevronRight-8074ab2e.js';
+import './Divider.js';
+
+var css_248z = ".modal{background-color:var(--guit-sem-color-background-transparent-overlay-notheme-1);display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:1}.modal:not(.modal_position_top){align-items:center}.modal:not(.modal_position_top).modal_device_desktop{padding:var(--guit-ref-spacing-8xlarge)}.modal:not(.modal_position_top).modal_device_mobile:not(.modal_size_xxLarge){padding:var(--guit-ref-spacing-large)}.modal:not(.modal_position_top) .modal__wrapper{border-color:var(--guit-sem-color-border-neutral-2);border-radius:var(--guit-ref-radius-2xsmall);border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin)}.modal__header{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:var(--guit-sem-dimension-height-2xlarge);justify-content:space-between;padding:var(--guit-ref-spacing-large);width:100%}.modal__header,.modal__headerContent{align-items:center;display:flex;gap:var(--guit-ref-spacing-xsmall);min-width:1rem}.modal__icon{flex:0 0 auto}.modal__body{background-color:var(--guit-sem-color-background-neutral-1-nudge);height:100%;min-height:0;min-width:0;width:100%}.modal__content{height:100%;max-height:68.8rem;width:100%}.modal__footer{align-items:center;background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;gap:var(--guit-ref-spacing-medium);height:var(--guit-sem-dimension-height-2xlarge);padding:var(--guit-ref-spacing-medium) var(--guit-ref-spacing-large);width:100%}.modal__footer:has(.modal__buttonGroup:only-child){justify-content:flex-end}.modal__footer:not(:has(.modal__buttonGroup:only-child)){justify-content:space-between}.modal__title{text-transform:capitalize}.modal__paragraph,.modal__title{color:var(--guit-sem-color-foreground-neutral-2)}.modal__paragraph:not(:last-of-type){margin-bottom:var(--guit-sem-font-body-large-default-medium-paragraph-spacing)}.modal_device_desktop.modal_size_xxLarge .modal__wrapper{max-width:144rem}.modal_device_desktop.modal_size_xLarge .modal__wrapper{max-width:108rem}.modal_device_desktop.modal_size_large .modal__wrapper{max-width:72rem}.modal_device_desktop.modal_size_medium .modal__wrapper{max-width:48rem}.modal_device_desktop.modal_size_small .modal__wrapper{max-width:36rem}.modal_device_mobile.modal_size_xxLarge .modal__wrapper{border:none;border-radius:0;height:100%}.modal_device_mobile.modal_size_xxLarge .modal__content{max-height:100%}.modal_device_mobile.modal_size_small .modal__wrapper{max-width:32.8rem}.modal_position_top{align-items:flex-start}.modal_position_top.modal_device_desktop{padding:0 var(--guit-ref-spacing-8xlarge) var(--guit-ref-spacing-8xlarge) var(--guit-ref-spacing-8xlarge)}.modal_position_top.modal_device_mobile{padding:0 var(--guit-ref-spacing-large) var(--guit-ref-spacing-large) var(--guit-ref-spacing-large)}.modal_position_top .modal__wrapper{border-end-end-radius:var(--guit-ref-radius-2xsmall);border-end-start-radius:var(--guit-ref-radius-2xsmall);border-top-width:0}.modal_withPadding .modal__content{padding:var(--guit-ref-spacing-large)}.modal__wrapper{box-shadow:var(--guit-sem-shadow-floating-3-position-x-1) var(--guit-sem-shadow-floating-3-position-y-1) var(--guit-sem-shadow-floating-3-blur-1) var(--guit-sem-shadow-floating-3-spread-1) var(--guit-sem-color-floating-3-rgba-1),var(--guit-sem-shadow-floating-3-position-x-2) var(--guit-sem-shadow-floating-3-position-y-2) var(--guit-sem-shadow-floating-3-position-y-1) var(--guit-sem-shadow-floating-3-spread-2) var(--guit-sem-color-floating-3-rgba-2);display:grid;grid-template-columns:12fr;grid-template-rows:auto 10fr auto;max-height:100%;overflow:hidden;width:100%}.modal_status_informative{color:var(--guit-sem-color-foreground-neutral-2)}.modal_status_warning{color:var(--guit-sem-color-foreground-warning)}.modal_status_error{color:var(--guit-sem-color-foreground-error)}";
+styleInject(css_248z);
+
+const STATUS_ICONS = {
+    informative: SvgInfo,
+    warning: SvgTriangleAlert,
+    error: SvgErrorFilled
+};
+/**
+ * Modal component displays content in a layer above the main application, effectively focusing the user's attention on a specific task or information. It is often used for actions that require user input, such as confirmation dialogs, forms, or important notifications.
+ */
+const Modal = ({ className, open, title, hasCloseButton, shouldCloseOnEscapePress = false, shouldCloseOnOverlayClick = false, onClose, status, children, size = "medium", withPadding = true, position = "center", footerContent, actions, lockBodyScroll }) => {
+    const { geneUIProviderRef, breakpoint } = useContext(GeneUIDesignSystemContext);
+    const providerCurrent = geneUIProviderRef.current;
+    const titleRef = useRef(null);
+    const isMobileBreakpoint = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint;
+    const isTruncated = useEllipsisDetection(titleRef);
+    const sizeMap = {
+        xxLarge: "xxLarge",
+        xLarge: isMobileBreakpoint ? "xxLarge" : "xLarge",
+        large: isMobileBreakpoint ? "small" : "large",
+        medium: isMobileBreakpoint ? "small" : "medium",
+        small: "small"
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (shouldCloseOnEscapePress && event.key === "Escape") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        if (open) {
+            document.addEventListener("keydown", handleKeyDown);
+            if (lockBodyScroll) {
+                document.body.style.overflow = "hidden";
+            }
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            if (lockBodyScroll) {
+                document.body.style.overflow = "unset";
+            }
+        };
+    }, [open, shouldCloseOnEscapePress, onClose]);
+    const handleOverlayClick = (event) => {
+        if (shouldCloseOnOverlayClick && event.target === event.currentTarget) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    const IconComponent = status ? STATUS_ICONS[status] : null;
+    const modalContent = (React__default.createElement("div", { className: classNames(`modal modal_device_${isMobileBreakpoint ? "mobile" : "desktop"} modal_size_${sizeMap[size]} `, `modal_position_${isMobileBreakpoint && (size === "xxLarge" || size === "xLarge") ? "center" : position}`, className), onClick: handleOverlayClick, role: "presentation" },
+        React__default.createElement("div", { className: classNames("modal__wrapper", { modal_withPadding: withPadding }), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "modal-title" : undefined },
+            (hasCloseButton || title) && (React__default.createElement("div", { className: "modal__header" },
+                React__default.createElement("div", { className: "modal__headerContent" }, title && (React__default.createElement(React__default.Fragment, null,
+                    IconComponent && (React__default.createElement(IconComponent, { className: `modal_status_${status} modal__icon`, size: 20 })),
+                    React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
+                        React__default.createElement(Text, { id: "modal-title", variant: "labelLargeSemibold", className: "modal__title ellipsis-text", as: "h1", ref: titleRef }, title))))),
+                hasCloseButton && (React__default.createElement(Button, { size: "small", Icon: SvgX, type: "button", layout: "text", appearance: "secondary", onClick: onClose })))),
+            React__default.createElement("div", { className: "modal__body" },
+                React__default.createElement(Scrollbar, null,
+                    React__default.createElement("div", { className: "modal__content" }, typeof children === "string" ? (React__default.createElement(Text, { variant: "bodyLargeMedium", className: "modal__paragraph", as: "p" }, children)) : (children)))),
+            (actions || footerContent) && (React__default.createElement("div", { className: "modal__footer" },
+                footerContent && React__default.createElement("div", { className: "modal__footerContent" }, footerContent),
+                actions && actions.length > 0 && (React__default.createElement(ButtonGroup, { className: "modal__buttonGroup", size: "medium" }, actions.map((action) => {
+                    const { children: buttonChildren } = action;
+                    const key = `action-${buttonChildren}`;
+                    return buttonChildren ? (React__default.createElement(Button, Object.assign({ key: key }, action), buttonChildren)) : null;
+                }))))))));
+    return React__default.createElement(React__default.Fragment, null, providerCurrent && open ? createPortal(modalContent, providerCurrent) : null);
+};
+
+export { Modal as default };

package/Notification.js

@@ -1,4 +1,4 @@
-import React__default, { useState, useContext, useEffect } from 'react';
+import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
@@ -99,15 +99,7 @@ const STATUS_ICONS = {
  * Notification component encompasses various types of messages, including toast notifications and section messages, to provide feedback to users in a clear and structured manner. Notifications inform users about system events, updates, or the status of their actions, ensuring that important information is communicated effectively.
  */
 const Notification = ({ className, open, variant = "toast", onClose, status = "informative", title, description, primaryActionText, secondaryActionText, onPrimaryActionClick, onSecondaryActionClick, actionsButtonsSize }) => {
-    const [show, setShow] = useState(false);
     const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
-    useEffect(() => {
-        setShow(!!open);
-    }, [open]);
-    const onCloseHandler = () => {
-        setShow(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    };
     const finalStatus = variant === "toast" && status === "insight" ? "informative" : status;
     const IconComponent = STATUS_ICONS[finalStatus];
     const notificationContent = (React__default.createElement("div", { role: "alert", "aria-live": "assertive", className: classNames(`notification notification_variant_${variant} notification_status_${finalStatus}`, className) },
@@ -117,11 +109,11 @@ const Notification = ({ className, open, variant = "toast", onClose, status = "i
                 React__default.createElement("div", { className: "notification__textGroup" },
                     title && (React__default.createElement(Text, { as: "h6", variant: "labelMediumSemibold", className: "notification__title" }, title)),
                     description && (React__default.createElement(Text, { as: "p", variant: "bodyMediumMedium", className: "notification__description" }, description)))),
-            React__default.createElement(Button, { appearance: "secondary", layout: "text", size: "small", className: "notification__button", onClick: onCloseHandler, Icon: SvgX })),
+            React__default.createElement(Button, { appearance: "secondary", layout: "text", size: "small", className: "notification__button", onClick: onClose, Icon: SvgX })),
         React__default.createElement(ButtonGroup, { className: "notification__actions", size: actionsButtonsSize },
             !!secondaryActionText && (React__default.createElement(Button, { appearance: "secondary", className: "notification__button", onClick: onSecondaryActionClick, layout: "text" }, secondaryActionText)),
             !!primaryActionText && (React__default.createElement(Button, { appearance: "primary", className: "notification__button", onClick: onPrimaryActionClick }, primaryActionText)))));
-    if (!show)
+    if (!open)
         return null;
     if (variant === "toast") {
         const providerCurrent = geneUIProviderRef.current;

package/Text.js

@@ -8,13 +8,13 @@ styleInject(css_248z);
 /**
  * Text component which has predefined tokens
  */
-const Text = forwardRef(({ className, variant = "bodyMediumMedium", children, as, alignment = "start" }, ref) => {
+const Text = forwardRef(({ className, variant = "bodyMediumMedium", children, as, alignment = "start", id }, ref) => {
     const Component = as;
     const computedClassNames = classNames("text", {
         [`text_variant_${variant}`]: variant,
         [`text_alignment_${alignment}`]: alignment
     }, className);
-    return (React__default.createElement(Component, { className: computedClassNames, ref: ref }, children));
+    return (React__default.createElement(Component, { className: computedClassNames, ref: ref, id: id }, children));
 });
 
 export { Text as default };

package/Tooltip.js

@@ -6,7 +6,7 @@ import { a as GeneUIDesignSystemContext } from './index-d9a2e208.js';
 import 'react-dom';
 import './useDebounceCallback-999deae7.js';
 
-var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-shadow:var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family),sans-serif;font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{align-items:center;display:flex;height:.4rem;justify-content:center;position:absolute;width:1.2rem}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
+var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-shadow:var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family),sans-serif;font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium);z-index:1}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{align-items:center;display:flex;height:.4rem;justify-content:center;position:absolute;width:1.2rem}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
 styleInject(css_248z);
 
 const positions = [

package/components/atoms/Text/Text.d.ts

@@ -49,6 +49,11 @@ interface ITextProps {
      * Text content
      */
     children: string;
+    /**
+     * A unique identifier for the text element.
+     * Useful for accessibility purposes, like `aria-labelledby`.
+     */
+    id?: string;
 }
 /**
  * Text component which has predefined tokens

package/components/molecules/Modal/Modal.d.ts

@@ -0,0 +1,89 @@
+import { FC, ReactNode } from "react";
+import { IButtonProps } from "@components/atoms/Button";
+import "./Modal.scss";
+interface IModalProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * Controls the visibility of the modal. Set to `true` to show and `false` to hide.
+     */
+    open?: boolean;
+    /**
+     * Determines whether the close (X) button is displayed in the modal's header.
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Callback function triggered when the modal is requested to be closed (e.g., via the close button, Escape key, or overlay click).
+     */
+    onClose?: () => void;
+    /**
+     * When `true`, allows the modal to be closed by pressing the Escape key.
+     * Calls `onClose`.
+     * @default false
+     */
+    shouldCloseOnEscapePress?: boolean;
+    /**
+     * When `true`, allows the modal to be closed by clicking on the semi-transparent background overlay.
+     * Calls `onClose`.
+     * @default false
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * The title text displayed in the modal's header.
+     */
+    title?: string;
+    /**
+     * Adds a corresponding status icon next to the title.
+     */
+    status?: "informative" | "warning" | "error";
+    /**
+     * The main content of the modal, displayed between the header and footer.
+     */
+    children?: ReactNode;
+    /**
+     * Defines the width of the modal. The effective size adapts for mobile viewports:
+     * - 'large' and 'medium' sizes become 'small' on mobile.
+     * - 'xLarge' becomes 'xxLarge' on mobile.
+     * @default "medium"
+     */
+    size?: "xxLarge" | "xLarge" | "large" | "medium" | "small";
+    /**
+     * Toggles the padding around the modal's content area.
+     * @default true
+     */
+    withPadding?: boolean;
+    /**
+     * Sets the vertical alignment of the modal in the viewport.
+     * @default "center"
+     */
+    position?: "top" | "center";
+    /**
+     * Custom content or component to be displayed in the footer, typically to the left of the action buttons.
+     */
+    footerContent?: ReactNode;
+    /**
+     * An array of action button objects to display in the modal's footer.
+     * The rendered buttons are automatically wrapped in a `ButtonGroup` component to ensure proper spacing and alignment.
+     * Each object conforms to the `IButtonProps` interface, allowing full customization of each button.
+     * @example
+     * actions={[
+     * { children: 'Cancel', appearance: 'secondary', onClick: handleCancel },
+     * { children: 'Submit', appearance: 'primary', onClick: handleSubmit }
+     * ]}
+     */
+    actions?: IButtonProps[];
+    /**
+     * If `true`, disables scrolling on the `body` element when the modal is open.
+     * @default true
+     */
+    lockBodyScroll?: boolean;
+}
+/**
+ * Modal component displays content in a layer above the main application, effectively focusing the user's attention on a specific task or information. It is often used for actions that require user input, such as confirmation dialogs, forms, or important notifications.
+ */
+declare const Modal: FC<IModalProps>;
+export { IModalProps, Modal as default };

package/components/molecules/Modal/index.d.ts

@@ -0,0 +1 @@
+export { IModalProps, default } from "./Modal";

package/index.d.ts

@@ -34,6 +34,7 @@ export { default as Pagination } from "./components/molecules/Pagination";
 export { default as TextField } from "./components/molecules/TextField";
 export { default as ButtonGroup } from "./components/molecules/ButtonGroup";
 export { default as Notification } from "./components/molecules/Notification";
+export { default as Modal } from "./components/molecules/Modal";
 export { default as GlobalHeader, IGlobalHeaderProps, IAction, IProducts } from "./components/organisms/GlobalHeader";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";

package/index.js

@@ -35,6 +35,7 @@ export { default as Pagination } from './Pagination.js';
 export { default as TextField } from './TextField.js';
 export { default as ButtonGroup } from './ButtonGroup.js';
 export { default as Notification } from './Notification.js';
+export { default as Modal } from './Modal.js';
 export { default as GlobalHeader } from './GlobalHeader.js';
 export { a as GeneUIDesignSystemContext, G as GeneUIProvider, c as useBreakpoint, b as useDeviceInfo, u as useWindowSize } from './index-d9a2e208.js';
 export { u as useDebounce } from './useDebounceCallback-999deae7.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-76e593d-29072025",
+    "version": "3.0.0-next-e06ec94-05082025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {