@telia/teddy 0.3.2 → 0.3.4

package/dist/components/drawer/drawer-close.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 require("../../assets/sprite.1321fab0-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");

package/dist/components/drawer/drawer-close.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 import "../../assets/sprite.1321fab0-teddy.svg";
 import { Icon } from "../icon/icon.js";

package/dist/components/drawer/drawer-content.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_drawer_drawerOverlay = require("./drawer-overlay.cjs");
 const components_flex_flex = require("../flex/flex.cjs");

package/dist/components/drawer/drawer-content.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 import { OverlayContext, Overlay } from "./drawer-overlay.js";
 import { Flex } from "../flex/flex.js";

package/dist/components/drawer/drawer-description.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_text_text = require("../text/text.cjs");
 function _interopNamespaceDefault(e) {

package/dist/components/drawer/drawer-description.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 import { Text } from "../text/text.js";
 const DescriptionContext = React__default.createContext(false);

package/dist/components/drawer/drawer-footer.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_flex_flex = require("../flex/flex.cjs");
 const Footer = React.forwardRef(

package/dist/components/drawer/drawer-footer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 import { Flex } from "../flex/flex.js";
 const Footer = React__default.forwardRef(

package/dist/components/drawer/drawer-overlay.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/components/drawer/drawer-overlay.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 const OverlayContext = React__default.createContext(false);
 const Overlay = React__default.forwardRef(

package/dist/components/drawer/drawer-title.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const DrawerPrimitive = require("@radix-ui/react-dialog");
-const drawer_module = require("../../drawer.module-CoqKvqzl.cjs");
+const drawer_module = require("../../drawer.module-C4NZoZUc.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_heading_heading = require("../heading/heading.cjs");
 function _interopNamespaceDefault(e) {

package/dist/components/drawer/drawer-title.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
-import { s as styles } from "../../drawer.module-Am9xxZYU.js";
+import { s as styles } from "../../drawer.module-jxIDBwQn.js";
 import { rootClassName } from "./drawer-root.js";
 import { Heading } from "../heading/heading.js";
 const Title = React__default.forwardRef(

package/dist/components/modal/index.cjs

@@ -1,4 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./modal-root.cjs");
+require("./modal-trigger.cjs");
+require("./modal-content.cjs");
+require("./modal-title.cjs");
+require("./modal-description.cjs");
+require("./modal-overlay.cjs");
+require("./modal-group.cjs");
 const components_radioCardGroup_radioCardGroupItemTitle = require("../radio-card-group/radio-card-group-item-title.cjs");
+require("./modal-image.cjs");
 exports.Modal = components_radioCardGroup_radioCardGroupItemTitle.Modal;

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

@@ -1,2 +1,185 @@
-export { Modal } from './modal';
-export type { ModalProps } from './modal';
+import { RootProps } from './modal-root';
+import { Trigger, TriggerProps } from './modal-trigger';
+import { Content, ContentProps } from './modal-content';
+import { Title, TitleProps } from './modal-title';
+import { Description, DescriptionProps } from './modal-description';
+import { Overlay, OverlayProps } from './modal-overlay';
+import { Group, GroupProps } from './modal-group';
+import { Close, CloseProps } from './modal-close';
+import { Image, ImageProps } from './modal-image';
+
+type ModalProps = {
+    Root: RootProps;
+    Trigger: TriggerProps;
+    Content: ContentProps;
+    Title: TitleProps;
+    Description: DescriptionProps;
+    Overlay: OverlayProps;
+    Group: GroupProps;
+    Close: CloseProps;
+    Image: ImageProps;
+};
+/**
+ * Modal is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction.
+ * It's commonly used for important information that requires immediate attention, or to gather user input without leaving the current page.
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage
+ * <Modal>
+ *   <Modal.Trigger>
+ *     <Button variant="primary">Open Modal</Button>
+ *   </Modal.Trigger>
+ *   <Modal.Content>
+ *     <Modal.Title as="h3">Modal Title</Modal.Title>
+ *     <Modal.Close slot="floating" aria-label="close" />
+ *     <Modal.Description>Modal content goes here.</Modal.Description>
+ *   </Modal.Content>
+ * </Modal>
+ *
+ * @example
+ * // Advanced usage with action buttons and groups
+ * <Modal>
+ *   <Modal.Trigger>
+ *     <Button variant="primary">Open Modal</Button>
+ *   </Modal.Trigger>
+ *   <Modal.Content>
+ *     <Modal.Title as="h3">Confirm Action</Modal.Title>
+ *     <Modal.Close slot="floating" aria-label="close" />
+ *     <Modal.Description>
+ *       Are you sure you want to proceed with this action?
+ *     </Modal.Description>
+ *     <Modal.Group variant="action">
+ *       <Button variant="tertiary-purple">Cancel</Button>
+ *       <Modal.Close slot="content">
+ *         <Button variant="primary">Confirm</Button>
+ *       </Modal.Close>
+ *     </Modal.Group>
+ *   </Modal.Content>
+ * </Modal>
+ */
+declare const Modal: import('react').FC<RootProps> & {
+    /**
+     * Trigger component that opens the modal when clicked.
+     * Must be passed a single child component that will be used as the trigger.
+     *
+     * @component
+     *
+     * @example
+     * <Modal.Trigger>
+     *   <Button variant="primary">Open Modal</Button>
+     * </Modal.Trigger>
+     */
+    Trigger: typeof Trigger;
+    /**
+     * Content component that contains the modal's content.
+     * Handles the positioning and scrolling behavior of the modal content.
+     *
+     * @component
+     *
+     * @example
+     * <Modal.Content>
+     *   <Modal.Title>Title</Modal.Title>
+     *   <Modal.Description>Content</Modal.Description>
+     * </Modal.Content>
+     */
+    Content: typeof Content;
+    /**
+     * An accessible title to be announced when the dialog is opened.
+     * It will render the internal Heading component
+     * If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.
+     *
+     * @component
+     *
+     * @example
+     * <Modal.Title as="h3">Modal Title</Modal.Title>
+     */
+    Title: typeof Title;
+    /**
+     * An optional accessible description to be announced when the dialog is opened.
+     * This will render the internal Text component with an default p tag
+     *
+     * If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>
+     *
+     * @component
+     *
+     * @example
+     * <Modal.Description>
+     *   This is the main content of the modal.
+     *   It can contain multiple paragraphs and other components.
+     * </Modal.Description>
+     */
+    Description: typeof Description;
+    /**
+     * Overlay component provides the backdrop for the modal.
+     * Handles the background dimming and click-outside behavior.
+     *
+     * @component
+     *
+     * @example
+     * <Modal.Overlay>
+     *   <Modal.Content>
+     *     {/* Content will be centered in the overlay *\/}
+     *   </Modal.Content>
+     * </Modal.Overlay>
+     */
+    Overlay: typeof Overlay;
+    /**
+     * Group component for organizing content or actions within the modal.
+     * Provides layout and styling for grouped content, especially useful for action buttons.
+     *
+     * @component
+     *
+     * @example
+     * // Action buttons group
+     * <Modal.Group variant="action">
+     *   <Button variant="tertiary-purple">Cancel</Button>
+     *   <Button variant="primary">Confirm</Button>
+     * </Modal.Group>
+     *
+     * @example
+     * // Content group
+     * <Modal.Group>
+     *   <Modal.Description>First section</Modal.Description>
+     *   <div>Second section</div>
+     * </Modal.Group>
+     */
+    Group: typeof Group;
+    /**
+     * Close component provides a button to close the modal.
+     * Can be used either as a floating close button or within content.
+     *
+     * @component
+     *
+     * @example
+     * // Floating close button
+     * <Modal.Close slot="floating" aria-label="Lukk" />
+     *
+     * @example
+     * // Close button within content
+     * <Modal.Close slot="content">
+     *   <Button variant="primary">Done</Button>
+     * </Modal.Close>
+     */
+    Close: typeof Close;
+    /**
+     * Image component displays an image in the modal.
+     * Handles proper sizing and positioning of images within the modal.
+     *
+     * @component
+     *
+     * @example
+     * // Basic image
+     * <Modal.Image src="/path/to/image.jpg" alt="Description" />
+     *
+     * @example
+     * // Custom image component
+     * <Modal.Image asChild>
+     *   <img src="/path/to/image.jpg" alt="Description" />
+     * </Modal.Image>
+     */
+    Image: typeof Image;
+};
+export { Modal };
+export type { ModalProps };

package/dist/components/modal/index.js

@@ -1,4 +1,12 @@
+import "./modal-root.js";
+import "./modal-trigger.js";
+import "./modal-content.js";
+import "./modal-title.js";
+import "./modal-description.js";
+import "./modal-overlay.js";
+import "./modal-group.js";
 import { M } from "../radio-card-group/radio-card-group-item-title.js";
+import "./modal-image.js";
 export {
   M as Modal
 };

package/dist/components/modal/{modal.cjs → modal-close.cjs}

@@ -54,6 +54,6 @@ require("../text-spacing/text-spacing.cjs");
 require("../container/container.cjs");
 require("../carousel/carousel-root.cjs");
 require("../slider/slider.cjs");
-require("@radix-ui/react-slot");
-require("../../utils/composeRefs.cjs");
-exports.Modal = components_radioCardGroup_radioCardGroupItemTitle.Modal;
+require("../../modal.module-BfeNqXoN.cjs");
+require("./modal-root.cjs");
+exports.Close = components_radioCardGroup_radioCardGroupItemTitle.Close;

package/dist/components/modal/modal-close.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>, 'asChild' | 'children'> & ({
+    children: React.ReactElement;
+    slot: 'content';
+} | {
+    /**
+     * Accessibility purposes, providing a label for screen readers
+     *
+     * @default 'Lukk'
+     */
+    ['aria-label']?: string;
+    slot: 'floating';
+    children?: never;
+});
+declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
+export { Close };
+export type { CloseProps };

package/dist/components/modal/{modal.js → modal-close.js}

@@ -10,7 +10,7 @@ import "../toast/toast-root.js";
 import "sonner";
 import "../toggletip/index.js";
 import "../breadcrumbs/index.js";
-import { M } from "../radio-card-group/radio-card-group-item-title.js";
+import { b } from "../radio-card-group/radio-card-group-item-title.js";
 import "../ribbon/index.js";
 import "../expandable-card/index.js";
 import "../color-dot/color-dot-root.js";
@@ -52,8 +52,8 @@ import "../text-spacing/text-spacing.js";
 import "../container/container.js";
 import "../carousel/carousel-root.js";
 import "../slider/slider.js";
-import "@radix-ui/react-slot";
-import "../../utils/composeRefs.js";
+import "../../modal.module-DuP4in7f.js";
+import "./modal-root.js";
 export {
-  M as Modal
+  b as Close
 };

package/dist/components/modal/modal-content.cjs

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DrawerPrimitive = require("@radix-ui/react-dialog");
+const components_flex_flex = require("../flex/flex.cjs");
+const clsx = require("clsx");
+const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const components_modal_modalRoot = require("./modal-root.cjs");
+const components_modal_modalOverlay = require("./modal-overlay.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
+const InnerContent = React.forwardRef(
+  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
+    const classes = clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__scroll`]], className);
+    const context = React.useContext(components_modal_modalRoot.RootContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DrawerPrimitive__namespace.Content,
+      {
+        ...props,
+        ref: forwardedRef,
+        className: clsx([modal_module.styles[`${components_modal_modalRoot.rootClassName}__content`]]),
+        asChild: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          components_flex_flex.Flex,
+          {
+            ...asChild ? { as: void 0, asChild } : {},
+            direction: "column",
+            align: "start",
+            maxWidth: { md: "600px" },
+            className: classes,
+            ref: context.scrollRef,
+            children
+          }
+        ) })
+      }
+    );
+  }
+);
+InnerContent.displayName = "InnerContent";
+const Content = React.forwardRef(
+  ({ forceMount, ...contentProps }, forwardedRef) => {
+    const hasOverlay = React.useContext(components_modal_modalOverlay.OverlayContext);
+    if (!hasOverlay)
+      return /* @__PURE__ */ jsxRuntime.jsx(components_modal_modalOverlay.Overlay, { forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(InnerContent, { ref: forwardedRef, ...contentProps });
+  }
+);
+Content.displayName = "Content";
+exports.Content = Content;

package/dist/components/modal/modal-content.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Content };
+export type { ContentProps };

package/dist/components/modal/modal-content.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { Flex } from "../flex/flex.js";
+import clsx from "clsx";
+import { s as styles } from "../../modal.module-DuP4in7f.js";
+import { rootClassName, RootContext } from "./modal-root.js";
+import { OverlayContext, Overlay } from "./modal-overlay.js";
+const InnerContent = React__default.forwardRef(
+  function InnerContent2({ asChild, children, className, ...props }, forwardedRef) {
+    const classes = clsx([styles[`${rootClassName}__scroll`]], className);
+    const context = React__default.useContext(RootContext);
+    return /* @__PURE__ */ jsx(
+      DrawerPrimitive.Content,
+      {
+        ...props,
+        ref: forwardedRef,
+        className: clsx([styles[`${rootClassName}__content`]]),
+        asChild: true,
+        children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            ...asChild ? { as: void 0, asChild } : {},
+            direction: "column",
+            align: "start",
+            maxWidth: { md: "600px" },
+            className: classes,
+            ref: context.scrollRef,
+            children
+          }
+        ) })
+      }
+    );
+  }
+);
+InnerContent.displayName = "InnerContent";
+const Content = React__default.forwardRef(
+  ({ forceMount, ...contentProps }, forwardedRef) => {
+    const hasOverlay = React__default.useContext(OverlayContext);
+    if (!hasOverlay)
+      return /* @__PURE__ */ jsx(Overlay, { forceMount, children: /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps }) });
+    return /* @__PURE__ */ jsx(InnerContent, { ref: forwardedRef, ...contentProps });
+  }
+);
+Content.displayName = "Content";
+export {
+  Content
+};

package/dist/components/modal/modal-description.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DrawerPrimitive = require("@radix-ui/react-dialog");
+const components_text_text = require("../text/text.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const DrawerPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DrawerPrimitive);
+const Description = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { as: "p", variant: "paragraph-100", ...props, asChild: false, ref: forwardedRef }) }));
+Description.displayName = "Description";
+exports.Description = Description;

package/dist/components/modal/modal-description.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Text } from '../text';
+import { ComponentPropsAs } from '../../utils/component-props-as';
+
+type DescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
+declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export { Description };
+export type { DescriptionProps };

package/dist/components/modal/modal-description.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { Text } from "../text/text.js";
+const Description = React__default.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(DrawerPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "paragraph-100", ...props, asChild: false, ref: forwardedRef }) }));
+Description.displayName = "Description";
+export {
+  Description
+};

package/dist/components/modal/modal-group.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_flex_flex = require("../flex/flex.cjs");
+const clsx = require("clsx");
+const modal_module = require("../../modal.module-BfeNqXoN.cjs");
+const components_modal_modalRoot = require("./modal-root.cjs");
+const GroupContext = React.createContext(false);
+const Group = React.forwardRef(
+  ({ className, variant, ...props }, forwardedRef) => {
+    const strollerRef = React.useContext(components_modal_modalRoot.RootContext).scrollRef;
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    React.useEffect(() => {
+      if (strollerRef == null ? void 0 : strollerRef.current) {
+        const hasOverflow = strollerRef.current.scrollHeight > strollerRef.current.clientHeight;
+        setIsOverflowing(hasOverflow);
+      }
+    }, [strollerRef]);
+    const classes = clsx(
+      [modal_module.styles[`${components_modal_modalRoot.rootClassName}__group`]],
+      {
+        [modal_module.styles[`${components_modal_modalRoot.rootClassName}__group--action`]]: variant === "action",
+        [modal_module.styles[`${components_modal_modalRoot.rootClassName}__group--title`]]: variant === "title",
+        [modal_module.styles[`${components_modal_modalRoot.rootClassName}__group--scroll`]]: isOverflowing
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        ...variant === "action" ? {
+          gap: "200",
+          justify: { md: "end" },
+          align: { sm: "stretch", md: "end" },
+          direction: { sm: "column-reverse", md: "row" }
+        } : { direction: "column" },
+        ref: forwardedRef,
+        ...props,
+        className: classes
+      }
+    ) });
+  }
+);
+Group.displayName = "Group";
+exports.Group = Group;
+exports.GroupContext = GroupContext;

package/dist/components/modal/modal-group.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+export declare const GroupContext: React.Context<boolean>;
+type GroupProps = React.ComponentPropsWithoutRef<typeof Flex> & {
+    variant?: 'title' | 'action';
+};
+declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
+export { Group };
+export type { GroupProps };