@easypost/easy-ui 1.0.0-alpha.8 → 1.0.0-alpha.80

package/Modal/ModalUnderlay.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { OverlayTriggerState } from "react-stately";
+type ModalUnderlayProps = {
+    /**
+     * Modal state.
+     */
+    state: OverlayTriggerState;
+    /**
+     * Modal wrap content.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal is dismissable.
+     */
+    isDismissable?: boolean;
+};
+export declare function ModalUnderlay(props: ModalUnderlayProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ModalUnderlay.d.ts.map

package/Modal/ModalUnderlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalUnderlay.d.ts","sourceRoot":"","sources":["../../src/Modal/ModalUnderlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAIpD,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,mBAAmB,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA0BtD"}

package/Modal/context.d.ts

@@ -0,0 +1,23 @@
+import { FocusableElement } from "@react-types/shared";
+import { DOMAttributes, RefObject } from "react";
+import { OverlayTriggerState } from "react-stately";
+export type ModalContextType = {
+    dialogProps: DOMAttributes<FocusableElement>;
+    titleProps: DOMAttributes<FocusableElement>;
+    isHeaderStuck: boolean;
+    isFooterStuck: boolean;
+    bodyRef: RefObject<HTMLDivElement>;
+    headerInterceptorRef: RefObject<HTMLDivElement>;
+    footerInterceptorRef: RefObject<HTMLDivElement>;
+};
+type ModalTriggerContextType = {
+    isDismissable: boolean;
+    state: OverlayTriggerState;
+};
+export declare const ModalContext: import("react").Context<ModalContextType | null>;
+export declare const useModalContext: () => ModalContextType;
+export declare const ModalTriggerContext: import("react").Context<ModalTriggerContextType | null>;
+export declare const useModalTriggerContext: () => ModalTriggerContextType;
+export declare const useModalTrigger: () => OverlayTriggerState;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/Modal/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/Modal/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACjD,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC;AAEzE,eAAO,MAAM,eAAe,wBAM3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yDACqB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,+BAMlC,CAAC;AAEF,eAAO,MAAM,eAAe,2BAG3B,CAAC"}

package/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Modal";
+//# sourceMappingURL=index.d.ts.map

package/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/Modal/index.js

@@ -0,0 +1,292 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const utilities_useScrollbar = require("../utilities/useScrollbar.js");
+const Button = require("../__chunks__/Button-DUZZ9HoT.js");
+const Close = require("../__chunks__/Close-BQ2IlPyf.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Text = require("../__chunks__/Text-B1xglKFU.js");
+const VerticalStack = require("../__chunks__/VerticalStack-Dzpv3O67.js");
+const useModalOverlay = require("../__chunks__/useModalOverlay-E3JkPreO.js");
+const Overlay = require("../__chunks__/Overlay-88Ee_QUh.js");
+const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-DSYyww_1.js");
+const useIntersectionDetection = require("../__chunks__/useIntersectionDetection-DI5n4zwA.js");
+const useDialog = require("../__chunks__/useDialog-D_2QCyti.js");
+const ModalContext = React.createContext(null);
+const useModalContext = () => {
+  const modalContext = React.useContext(ModalContext);
+  if (!modalContext) {
+    throw new Error("useModal must be used within a Modal");
+  }
+  return modalContext;
+};
+const ModalTriggerContext = React.createContext(null);
+const useModalTriggerContext = () => {
+  const modalTriggerContext = React.useContext(ModalTriggerContext);
+  if (!modalTriggerContext) {
+    throw new Error("useModalTrigger must be used within a ModalTrigger");
+  }
+  return modalTriggerContext;
+};
+const useModalTrigger = () => {
+  const modalTriggerContext = useModalTriggerContext();
+  return modalTriggerContext.state;
+};
+const underlayBg = "_underlayBg_1hnpv_4";
+const underlayBox = "_underlayBox_1hnpv_27";
+const underlayEdge = "_underlayEdge_1hnpv_35";
+const Modal$1 = "_Modal_1hnpv_41";
+const header = "_header_1hnpv_59";
+const stuck = "_stuck_1hnpv_65";
+const body = "_body_1hnpv_69";
+const content = "_content_1hnpv_76";
+const footer = "_footer_1hnpv_93";
+const closeBtn = "_closeBtn_1hnpv_110";
+const iconAtEnd = "_iconAtEnd_1hnpv_124";
+const sizeSm = "_sizeSm_1hnpv_130";
+const sizeMd = "_sizeMd_1hnpv_134";
+const sizeLg = "_sizeLg_1hnpv_138";
+const styles = {
+  underlayBg,
+  underlayBox,
+  underlayEdge,
+  Modal: Modal$1,
+  header,
+  stuck,
+  body,
+  content,
+  footer,
+  closeBtn,
+  iconAtEnd,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+function ModalBody(props) {
+  const { children } = props;
+  const modalContext = useModalContext();
+  utilities_useScrollbar.useScrollbar(modalContext.bodyRef, "ezui-os-theme-modal");
+  return React.createElement("div", {
+    className: styles.body,
+    ref: modalContext.bodyRef
+  }, React.createElement("div", {
+    className: styles.content
+  }, React.createElement("div", {
+    "data-intercept": "header",
+    ref: modalContext.headerInterceptorRef
+  }), children, React.createElement("div", {
+    "data-intercept": "footer",
+    ref: modalContext.footerInterceptorRef
+  })));
+}
+function ModalFooter(props) {
+  const { primaryAction, secondaryAction } = props;
+  const modalContext = useModalContext();
+  const className = utilities_css.classNames(styles.footer, modalContext.isFooterStuck && styles.stuck);
+  return React.createElement("div", {
+    className
+  }, secondaryAction && React.createElement(Button.Button, {
+    onPress: secondaryAction.onAction,
+    color: secondaryAction.color ? secondaryAction.color : "neutral",
+    isDisabled: secondaryAction.isDisabled
+  }, secondaryAction.content), React.createElement(Button.Button, {
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled,
+    color: primaryAction.color ? primaryAction.color : void 0
+  }, primaryAction.content));
+}
+function ModalHeader(props) {
+  const { as = "h2", children, subtitle, iconAtStart, iconAtEnd: iconAtEnd2 } = props;
+  const modalContext = useModalContext();
+  const modalTriggerContext = useModalTriggerContext();
+  const className = utilities_css.classNames(styles.header, modalContext.isHeaderStuck && styles.stuck);
+  return React.createElement("div", {
+    className
+  }, React.createElement(VerticalStack.VerticalStack, {
+    gap: "1.5"
+  }, React.createElement(HorizontalStack.HorizontalStack, {
+    align: "space-between",
+    blockAlign: "center",
+    wrap: false
+  }, React.createElement(HorizontalStack.HorizontalStack, {
+    gap: "2",
+    wrap: false
+  }, iconAtStart && React.createElement("span", null, React.createElement(Icon.Icon, __spreadProps(__spreadValues({}, iconAtStart), {
+    size: "lg"
+  }))), React.createElement(Text.Text, __spreadValues({
+    as,
+    variant: "heading4",
+    truncate: true
+  }, modalContext.titleProps), children)), iconAtEnd2 ? React.createElement("span", {
+    className: styles.iconAtEnd,
+    "data-size": iconAtEnd2.size
+  }, React.createElement(Icon.Icon, __spreadValues({}, iconAtEnd2))) : modalTriggerContext.isDismissable ? React.createElement("button", {
+    className: styles.closeBtn,
+    onClick: () => {
+      modalTriggerContext.state.close();
+    }
+  }, React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, "Close modal"), React.createElement(Icon.Icon, {
+    symbol: Close.Close,
+    size: "sm"
+  })) : null), subtitle && React.createElement(Text.Text, {
+    variant: "subtitle1"
+  }, subtitle)));
+}
+function ModalUnderlay(props) {
+  const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
+  const { isDismissable = true } = overlayProps;
+  const ref = React.useRef(null);
+  const { modalProps, underlayProps } = useModalOverlay.$8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
+    isDismissable,
+    isKeyboardDismissDisabled: !isDismissable
+  }), state, ref);
+  return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement("div", __spreadValues({
+    className: styles.underlayBg
+  }, underlayProps), React.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
+    ref,
+    className: styles.underlayBox
+  }), React.createElement("div", {
+    className: styles.underlayEdge
+  }), children, React.createElement("div", {
+    className: styles.underlayEdge
+  }))));
+}
+function ModalTrigger(props) {
+  const _a = props, { children, isDismissable = true } = _a, inTriggerProps = __objRest(_a, ["children", "isDismissable"]);
+  const state = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(inTriggerProps);
+  const { triggerProps, overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  if (children.length !== 2) {
+    throw new Error("children must be exactly one trigger element and one modal element");
+  }
+  const [trigger, modal] = children;
+  const context = React.useMemo(() => {
+    return {
+      state,
+      isDismissable
+    };
+  }, [isDismissable, state]);
+  return React.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, React.cloneElement(trigger, triggerProps), state.isOpen && React.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
+    state
+  }), React.cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
+}
+function ModalContainer(props) {
+  const { children, isDismissable = true, onDismiss = () => {
+  } } = props;
+  const existingModalTriggerContext = React.useContext(ModalTriggerContext);
+  if (existingModalTriggerContext) {
+    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
+  }
+  const childArray = React.Children.toArray(children);
+  if (childArray.length > 1) {
+    throw new Error("Only a single child can be passed to ModalContainer.");
+  }
+  const [lastChild, setLastChild] = React.useState(null);
+  let child = null;
+  if (Array.isArray(children)) {
+    child = children.find(React.isValidElement);
+  } else if (React.isValidElement(children)) {
+    child = children;
+  }
+  if (child && child !== lastChild) {
+    setLastChild(child);
+  }
+  const state = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6({
+    isOpen: Boolean(child),
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        onDismiss();
+      }
+    }
+  });
+  const { overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  const context = React.useMemo(() => {
+    return {
+      state,
+      isDismissable
+    };
+  }, [state, isDismissable]);
+  return React.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, state.isOpen && React.createElement(ModalUnderlay, {
+    state,
+    isDismissable
+  }, lastChild ? React.cloneElement(lastChild, overlayProps) : null));
+}
+function Modal(props) {
+  const { children, size = "lg" } = props;
+  const bodyRef = React.useRef(null);
+  const headerInterceptorRef = React.useRef(null);
+  const footerInterceptorRef = React.useRef(null);
+  const isHeaderStuck = useIntersectionDetection.useIntersectionDetection(headerInterceptorRef, bodyRef);
+  const isFooterStuck = useIntersectionDetection.useIntersectionDetection(footerInterceptorRef, bodyRef);
+  const dialogRef = React.useRef(null);
+  const { dialogProps, titleProps } = useDialog.$40df3f8667284809$export$d55e7ee900f34e93({
+    role: "dialog"
+  }, dialogRef);
+  const context = React.useMemo(() => {
+    return {
+      bodyRef,
+      headerInterceptorRef,
+      footerInterceptorRef,
+      isHeaderStuck,
+      isFooterStuck,
+      dialogProps,
+      titleProps
+    };
+  }, [dialogProps, isFooterStuck, isHeaderStuck, titleProps]);
+  const className = utilities_css.classNames(styles.Modal, styles[utilities_css.variationName("size", size)]);
+  return React.createElement(ModalContext.Provider, {
+    value: context
+  }, React.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
+    className,
+    ref: dialogRef
+  }), children));
+}
+Modal.Trigger = ModalTrigger;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+exports.Modal = Modal;
+exports.ModalContainer = ModalContainer;
+exports.useModalTrigger = useModalTrigger;

package/Modal/index.mjs

@@ -0,0 +1,292 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React__default, { createContext, useContext, useMemo, cloneElement, useState, useRef } from "react";
+import { classNames, variationName } from "../utilities/css.mjs";
+import { useScrollbar } from "../utilities/useScrollbar.mjs";
+import { B as Button } from "../__chunks__/Button-BE3zVhME.mjs";
+import { C as Close } from "../__chunks__/Close-Cq6Q6MN6.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-C2yDQVHD.mjs";
+import { $ as $8ac8429251c45e4b$export$dbc0f175b25fb0fb } from "../__chunks__/useModalOverlay-1zoyqSAR.mjs";
+import { d as $337b884510726a0d$export$c6fdb837b070b4ff, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../__chunks__/Overlay-Cj4W5w8m.mjs";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/useOverlayTrigger-DTO7VB3r.mjs";
+import { u as useIntersectionDetection } from "../__chunks__/useIntersectionDetection-BvUmtDgl.mjs";
+import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "../__chunks__/useDialog-BhvpnpTk.mjs";
+const ModalContext = createContext(null);
+const useModalContext = () => {
+  const modalContext = useContext(ModalContext);
+  if (!modalContext) {
+    throw new Error("useModal must be used within a Modal");
+  }
+  return modalContext;
+};
+const ModalTriggerContext = createContext(null);
+const useModalTriggerContext = () => {
+  const modalTriggerContext = useContext(ModalTriggerContext);
+  if (!modalTriggerContext) {
+    throw new Error("useModalTrigger must be used within a ModalTrigger");
+  }
+  return modalTriggerContext;
+};
+const useModalTrigger = () => {
+  const modalTriggerContext = useModalTriggerContext();
+  return modalTriggerContext.state;
+};
+const underlayBg = "_underlayBg_1hnpv_4";
+const underlayBox = "_underlayBox_1hnpv_27";
+const underlayEdge = "_underlayEdge_1hnpv_35";
+const Modal$1 = "_Modal_1hnpv_41";
+const header = "_header_1hnpv_59";
+const stuck = "_stuck_1hnpv_65";
+const body = "_body_1hnpv_69";
+const content = "_content_1hnpv_76";
+const footer = "_footer_1hnpv_93";
+const closeBtn = "_closeBtn_1hnpv_110";
+const iconAtEnd = "_iconAtEnd_1hnpv_124";
+const sizeSm = "_sizeSm_1hnpv_130";
+const sizeMd = "_sizeMd_1hnpv_134";
+const sizeLg = "_sizeLg_1hnpv_138";
+const styles = {
+  underlayBg,
+  underlayBox,
+  underlayEdge,
+  Modal: Modal$1,
+  header,
+  stuck,
+  body,
+  content,
+  footer,
+  closeBtn,
+  iconAtEnd,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+function ModalBody(props) {
+  const { children } = props;
+  const modalContext = useModalContext();
+  useScrollbar(modalContext.bodyRef, "ezui-os-theme-modal");
+  return React__default.createElement("div", {
+    className: styles.body,
+    ref: modalContext.bodyRef
+  }, React__default.createElement("div", {
+    className: styles.content
+  }, React__default.createElement("div", {
+    "data-intercept": "header",
+    ref: modalContext.headerInterceptorRef
+  }), children, React__default.createElement("div", {
+    "data-intercept": "footer",
+    ref: modalContext.footerInterceptorRef
+  })));
+}
+function ModalFooter(props) {
+  const { primaryAction, secondaryAction } = props;
+  const modalContext = useModalContext();
+  const className = classNames(styles.footer, modalContext.isFooterStuck && styles.stuck);
+  return React__default.createElement("div", {
+    className
+  }, secondaryAction && React__default.createElement(Button, {
+    onPress: secondaryAction.onAction,
+    color: secondaryAction.color ? secondaryAction.color : "neutral",
+    isDisabled: secondaryAction.isDisabled
+  }, secondaryAction.content), React__default.createElement(Button, {
+    onPress: primaryAction.onAction,
+    isDisabled: primaryAction.isDisabled,
+    color: primaryAction.color ? primaryAction.color : void 0
+  }, primaryAction.content));
+}
+function ModalHeader(props) {
+  const { as = "h2", children, subtitle, iconAtStart, iconAtEnd: iconAtEnd2 } = props;
+  const modalContext = useModalContext();
+  const modalTriggerContext = useModalTriggerContext();
+  const className = classNames(styles.header, modalContext.isHeaderStuck && styles.stuck);
+  return React__default.createElement("div", {
+    className
+  }, React__default.createElement(VerticalStack, {
+    gap: "1.5"
+  }, React__default.createElement(HorizontalStack, {
+    align: "space-between",
+    blockAlign: "center",
+    wrap: false
+  }, React__default.createElement(HorizontalStack, {
+    gap: "2",
+    wrap: false
+  }, iconAtStart && React__default.createElement("span", null, React__default.createElement(Icon, __spreadProps(__spreadValues({}, iconAtStart), {
+    size: "lg"
+  }))), React__default.createElement(Text, __spreadValues({
+    as,
+    variant: "heading4",
+    truncate: true
+  }, modalContext.titleProps), children)), iconAtEnd2 ? React__default.createElement("span", {
+    className: styles.iconAtEnd,
+    "data-size": iconAtEnd2.size
+  }, React__default.createElement(Icon, __spreadValues({}, iconAtEnd2))) : modalTriggerContext.isDismissable ? React__default.createElement("button", {
+    className: styles.closeBtn,
+    onClick: () => {
+      modalTriggerContext.state.close();
+    }
+  }, React__default.createElement(Text, {
+    visuallyHidden: true
+  }, "Close modal"), React__default.createElement(Icon, {
+    symbol: Close,
+    size: "sm"
+  })) : null), subtitle && React__default.createElement(Text, {
+    variant: "subtitle1"
+  }, subtitle)));
+}
+function ModalUnderlay(props) {
+  const _a = props, { state, children } = _a, overlayProps = __objRest(_a, ["state", "children"]);
+  const { isDismissable = true } = overlayProps;
+  const ref = React__default.useRef(null);
+  const { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(__spreadProps(__spreadValues({}, overlayProps), {
+    isDismissable,
+    isKeyboardDismissDisabled: !isDismissable
+  }), state, ref);
+  return React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, null, React__default.createElement("div", __spreadValues({
+    className: styles.underlayBg
+  }, underlayProps), React__default.createElement("div", __spreadProps(__spreadValues({}, modalProps), {
+    ref,
+    className: styles.underlayBox
+  }), React__default.createElement("div", {
+    className: styles.underlayEdge
+  }), children, React__default.createElement("div", {
+    className: styles.underlayEdge
+  }))));
+}
+function ModalTrigger(props) {
+  const _a = props, { children, isDismissable = true } = _a, inTriggerProps = __objRest(_a, ["children", "isDismissable"]);
+  const state = $fc909762b330b746$export$61c6a8c84e605fb6(inTriggerProps);
+  const { triggerProps, overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  if (children.length !== 2) {
+    throw new Error("children must be exactly one trigger element and one modal element");
+  }
+  const [trigger, modal] = children;
+  const context = useMemo(() => {
+    return {
+      state,
+      isDismissable
+    };
+  }, [isDismissable, state]);
+  return React__default.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, cloneElement(trigger, triggerProps), state.isOpen && React__default.createElement(ModalUnderlay, __spreadProps(__spreadValues({}, props), {
+    state
+  }), cloneElement(typeof modal === "function" ? modal(state.close) : modal, overlayProps)));
+}
+function ModalContainer(props) {
+  const { children, isDismissable = true, onDismiss = () => {
+  } } = props;
+  const existingModalTriggerContext = useContext(ModalTriggerContext);
+  if (existingModalTriggerContext) {
+    throw new Error("Modal.Container must be used outside of a Modal.Trigger");
+  }
+  const childArray = React__default.Children.toArray(children);
+  if (childArray.length > 1) {
+    throw new Error("Only a single child can be passed to ModalContainer.");
+  }
+  const [lastChild, setLastChild] = useState(null);
+  let child = null;
+  if (Array.isArray(children)) {
+    child = children.find(React__default.isValidElement);
+  } else if (React__default.isValidElement(children)) {
+    child = children;
+  }
+  if (child && child !== lastChild) {
+    setLastChild(child);
+  }
+  const state = $fc909762b330b746$export$61c6a8c84e605fb6({
+    isOpen: Boolean(child),
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        onDismiss();
+      }
+    }
+  });
+  const { overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state);
+  const context = useMemo(() => {
+    return {
+      state,
+      isDismissable
+    };
+  }, [state, isDismissable]);
+  return React__default.createElement(ModalTriggerContext.Provider, {
+    value: context
+  }, state.isOpen && React__default.createElement(ModalUnderlay, {
+    state,
+    isDismissable
+  }, lastChild ? cloneElement(lastChild, overlayProps) : null));
+}
+function Modal(props) {
+  const { children, size = "lg" } = props;
+  const bodyRef = useRef(null);
+  const headerInterceptorRef = useRef(null);
+  const footerInterceptorRef = useRef(null);
+  const isHeaderStuck = useIntersectionDetection(headerInterceptorRef, bodyRef);
+  const isFooterStuck = useIntersectionDetection(footerInterceptorRef, bodyRef);
+  const dialogRef = React__default.useRef(null);
+  const { dialogProps, titleProps } = $40df3f8667284809$export$d55e7ee900f34e93({
+    role: "dialog"
+  }, dialogRef);
+  const context = useMemo(() => {
+    return {
+      bodyRef,
+      headerInterceptorRef,
+      footerInterceptorRef,
+      isHeaderStuck,
+      isFooterStuck,
+      dialogProps,
+      titleProps
+    };
+  }, [dialogProps, isFooterStuck, isHeaderStuck, titleProps]);
+  const className = classNames(styles.Modal, styles[variationName("size", size)]);
+  return React__default.createElement(ModalContext.Provider, {
+    value: context
+  }, React__default.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
+    className,
+    ref: dialogRef
+  }), children));
+}
+Modal.Trigger = ModalTrigger;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+export {
+  Modal,
+  ModalContainer,
+  useModalTrigger
+};

package/Modal/useIntersectionDetection.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+/**
+ * Detects when an element is intersecting with a scroll root.
+ *
+ * @param targetRef The target element to observe
+ * @param scrollRef The scroll root to check against
+ * @returns when element is intersecting
+ */
+export declare function useIntersectionDetection(targetRef: RefObject<HTMLDivElement>, scrollRef: RefObject<HTMLDivElement>): boolean;
+//# sourceMappingURL=useIntersectionDetection.d.ts.map

package/Modal/useIntersectionDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionDetection.d.ts","sourceRoot":"","sources":["../../src/Modal/useIntersectionDetection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,WAwBrC"}