@channel.io/bezier-react 1.7.2 → 1.8.0

package/dist/esm/hooks/useIsMounted.mjs

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+
+function useIsMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
+}
+
+export { useIsMounted as default };
+//# sourceMappingURL=useIsMounted.mjs.map

package/dist/esm/hooks/useIsMounted.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.mjs","sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["import {\n  useEffect,\n  useState,\n} from 'react'\n\nexport default function useIsMounted() {\n  const [isMounted, setIsMounted] = useState(false)\n\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  return isMounted\n}\n"],"names":["useIsMounted","isMounted","setIsMounted","useState","useEffect"],"mappings":";;AAKe,SAASA,YAAYA,GAAG;EACrC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEjDC,EAAAA,SAAS,CAAC,MAAM;IACdF,YAAY,CAAC,IAAI,CAAC,CAAA;GACnB,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,OAAOD,SAAS,CAAA;AAClB;;;;"}

package/dist/esm/index.mjs

@@ -76,6 +76,7 @@ export { ModalHeader } from './components/Modals/Modal/ModalHeader.mjs';
 export { ModalBody } from './components/Modals/Modal/ModalBody.mjs';
 export { ModalFooter } from './components/Modals/Modal/ModalFooter.mjs';
 export { ModalClose, ModalTrigger } from './components/Modals/Modal/ModalHelpers.mjs';
+export { useModalContainerContext } from './components/Modals/Modal/ModalContext.mjs';
 export { ModalTitleSize } from './components/Modals/Modal/Modal.types.mjs';
 export { ConfirmModal } from './components/Modals/ConfirmModal/ConfirmModal.mjs';
 export { ConfirmModalContent } from './components/Modals/ConfirmModal/ConfirmModalContent.mjs';

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/components/Modals/Modal/Modal.types.d.ts

@@ -95,7 +95,7 @@ export interface ModalTriggerProps extends ChildrenProps<React.ReactElement> {
 }
 export interface ModalCloseProps extends ChildrenProps<React.ReactElement> {
 }
-export interface ModalContentContextValue extends Required<Pick<ModalContentOptions, 'showCloseIcon'>> {
+export interface ModalContentPropsContextValue extends Required<Pick<ModalContentOptions, 'showCloseIcon'>> {
 }
 export {};
 //# sourceMappingURL=Modal.types.d.ts.map

package/dist/types/components/Modals/Modal/Modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,sCAAkC;AAEnC,oBAAY,cAAc;IACxB,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,UAAU,YAAY;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAE9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAEpC;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;CACvC;AAED,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAAA;AAE7C,UAAU,kBAAmB,SAC3B,gBAAgB,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;CAAG;AAErE,MAAM,WAAW,UAAW,SAC1B,aAAa,EACb,YAAY;CAAG;AAEjB,MAAM,WAAW,iBAAkB,SACjC,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,mBAAmB;CAAG;AAExB,MAAM,WAAW,gBAAiB,SAChC,oBAAoB,EACpB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,kBAAkB,CAAC,EACjE,kBAAkB;CAAG;AAEvB,MAAM,WAAW,cAAe,SAC9B,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEzC,MAAM,WAAW,gBAAiB,SAChC,oBAAoB,EACpB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,kBAAkB;CAAG;AAEvB,MAAM,WAAW,iBAAkB,SACjC,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;CAAG;AAEtC,MAAM,WAAW,eAAgB,SAC/B,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;CAAG;AAEtC,MAAM,WAAW,wBAAyB,SACxC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;CAAG"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,sCAAkC;AAEnC,oBAAY,cAAc;IACxB,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,UAAU,YAAY;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAE9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAEpC;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;CACvC;AAED,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAAA;AAE7C,UAAU,kBAAmB,SAC3B,gBAAgB,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;CAAG;AAErE,MAAM,WAAW,UAAW,SAC1B,aAAa,EACb,YAAY;CAAG;AAEjB,MAAM,WAAW,iBAAkB,SACjC,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,mBAAmB;CAAG;AAExB,MAAM,WAAW,gBAAiB,SAChC,oBAAoB,EACpB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,kBAAkB,CAAC,EACjE,kBAAkB;CAAG;AAEvB,MAAM,WAAW,cAAe,SAC9B,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEzC,MAAM,WAAW,gBAAiB,SAChC,oBAAoB,EACpB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,kBAAkB;CAAG;AAEvB,MAAM,WAAW,iBAAkB,SACjC,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;CAAG;AAEtC,MAAM,WAAW,eAAgB,SAC/B,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;CAAG;AAEtC,MAAM,WAAW,6BAA8B,SAC7C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;CAAG"}

package/dist/types/components/Modals/Modal/ModalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAGN,MAAM,OAAO,CAAA;AAQd,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAA;AAMtB;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FA4DvB,CAAA"}
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAA;AASd,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAA;AAStB;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAuEvB,CAAA"}

package/dist/types/components/Modals/Modal/ModalContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type ModalContentPropsContextValue } from './Modal.types';
+export declare const ModalContentPropsContextProvider: import("react").Provider<ModalContentPropsContextValue>, useModalContentPropsContext: () => ModalContentPropsContextValue;
+export declare const ModalContainerContextProvider: import("react").Provider<HTMLElement | undefined>, useModalContainerContext: () => HTMLElement | undefined;
+//# sourceMappingURL=ModalContext.d.ts.map

package/dist/types/components/Modals/Modal/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/ModalContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAElE,eAAO,MACL,gCAAgC,2DAChC,2BAA2B,qCAG3B,CAAA;AAEF,eAAO,MACL,6BAA6B,qDAC7B,wBAAwB,+BAC2B,CAAA"}

package/dist/types/components/Modals/Modal/index.d.ts

@@ -4,5 +4,6 @@ export { ModalHeader } from './ModalHeader';
 export { ModalBody } from './ModalBody';
 export { ModalFooter } from './ModalFooter';
 export { ModalTrigger, ModalClose } from './ModalHelpers';
+export { useModalContainerContext } from './ModalContext';
 export { ModalTitleSize, type ModalProps, type ModalContentProps, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps, type ModalTriggerProps, type ModalCloseProps, } from './Modal.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Modals/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA"}

package/dist/types/components/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAUN,MAAM,OAAO,CAAA;AAad,OAAO,KAAK,YAAY,MAAM,iBAAiB,CAAA;AAS/C,eAAO,MAAM,iBAAiB,2BAA2B,CAAA;AACzD,eAAO,MAAM,eAAe,yBAAyB,CAAA;AACrD,eAAO,MAAM,eAAe,yBAAyB,CAAA;AACrD,eAAO,MAAM,UAAU,WAAW,CAAA;;AAwQlC,wBAAkC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAUN,MAAM,OAAO,CAAA;AAed,OAAO,KAAK,YAAY,MAAM,iBAAiB,CAAA;AAS/C,eAAO,MAAM,iBAAiB,2BAA2B,CAAA;AACzD,eAAO,MAAM,eAAe,yBAAyB,CAAA;AACrD,eAAO,MAAM,eAAe,yBAAyB,CAAA;AACrD,eAAO,MAAM,UAAU,WAAW,CAAA;;AA8QlC,wBAAkC"}

package/dist/types/components/Overlay/Overlay.types.d.ts

@@ -36,6 +36,11 @@ export declare enum OverlayPosition {
 }
 interface OverlayOptions {
     show?: boolean;
+    /**
+     * Specify a container element to portal the content into.
+     * @note When placed inside a `Modal`, default value is the container element of `Modal`.
+     * @default document.body
+     */
     container?: HTMLElement | null;
     target?: HTMLElement | null;
     position?: OverlayPosition;

package/dist/types/components/Overlay/Overlay.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,mCAAkC;AAEnC,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;CACtC;AAED,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC9B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,CAAC,OAAO,WAAW,YAAa,SACpC,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,uBAAuB,CAAC,WAAW,CAAC,EACpC,qBAAqB,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAC/C,cAAc;CAAG"}
+{"version":3,"file":"Overlay.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,mCAAkC;AAEnC,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;CACtC;AAED,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC9B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,CAAC,OAAO,WAAW,YAAa,SACpC,oBAAoB,EACpB,aAAa,EACb,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,uBAAuB,CAAC,WAAW,CAAC,EACpC,qBAAqB,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAC/C,cAAc;CAAG"}

package/dist/types/components/Toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAW1C,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAA;AAOtB,iBAAS,aAAa,CAAC,EACrB,kBAAyB,EACzB,QAAa,GACd,EAAE,kBAAkB,qBA+DpB;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAY1C,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAA;AAOtB,iBAAS,aAAa,CAAC,EACrB,kBAAyB,EACzB,QAAa,GACd,EAAE,kBAAkB,qBAiEpB;AAED,eAAe,aAAa,CAAA"}

package/dist/types/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AAQd,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAA;AAqFxB;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAkB,EAClB,SAAe,EACf,SAAa,EACb,aAAmB,GACpB,EAAE,oBAAoB,qBAgBtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO,qFAmHlB,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AAUd,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAA;AAqFxB;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAkB,EAClB,SAAe,EACf,SAAa,EACb,aAAmB,GACpB,EAAE,oBAAoB,qBAgBtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO,qFAuHlB,CAAA"}

package/dist/types/components/Tooltip/Tooltip.types.d.ts

@@ -65,6 +65,7 @@ interface TooltipOptions {
     offset?: number;
     /**
      * Specify a container element to portal the content into.
+     * @note When placed inside a `Modal`, default value is the container element of `Modal`.
      * @default document.body
      */
     container?: HTMLElement | null;

package/dist/types/components/Tooltip/Tooltip.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,mCAAkC;AAEnC;;GAEG;AACH,oBAAY,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,UAAU,sBAAsB;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,aAAa,EAAE,YAAY,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;CACrF;AAED,MAAM,WAAW,oBAAqB,SACpC,aAAa,EACb,sBAAsB;CAAG;AAE3B,MAAM,WAAW,YAAa,SAC5B,oBAAoB,EACpB,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC,EACjC,YAAY,EACZ,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,YAAY,GAAG,MAAM,aAAa,CAAC,EACpF,cAAc;CAAG"}
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,mCAAkC;AAEnC;;GAEG;AACH,oBAAY,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,UAAU,sBAAsB;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,aAAa,EAAE,YAAY,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;CACrF;AAED,MAAM,WAAW,oBAAqB,SACpC,aAAa,EACb,sBAAsB;CAAG;AAE3B,MAAM,WAAW,YAAa,SAC5B,oBAAoB,EACpB,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC,EACjC,YAAY,EACZ,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,YAAY,GAAG,MAAM,aAAa,CAAC,EACpF,cAAc;CAAG"}

package/dist/types/hooks/useIsMounted.d.ts

@@ -0,0 +1,2 @@
+export default function useIsMounted(): boolean;
+//# sourceMappingURL=useIsMounted.d.ts.map

package/dist/types/hooks/useIsMounted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsMounted.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,YAAY,YAQnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -213,6 +213,21 @@ exports[`Button Test > Disabled Test > Button can have disabled attribute 1`] =
 `;
 
 exports[`Button Test > Loading Test > Active prop change Button to hover style 1`] = `
+.c5 {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: transparent;
+  border-right-color: inherit;
+  border-bottom-color: inherit;
+  border-left-color: inherit;
+  border-radius: 50%;
+  -webkit-animation: epmXAj 1s infinite linear;
+  animation: epmXAj 1s infinite linear;
+}
+
 .c2 {
   font-size: 1.4rem;
   line-height: 1.8rem;
@@ -230,21 +245,6 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1
   transition-property: color;
 }
 
-.c5 {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-style: solid;
-  border-width: 2px;
-  border-top-color: transparent;
-  border-right-color: inherit;
-  border-bottom-color: inherit;
-  border-left-color: inherit;
-  border-radius: 50%;
-  -webkit-animation: epmXAj 1s infinite linear;
-  animation: epmXAj 1s infinite linear;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;

package/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -1,25 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormControl > Snapshot > With multiple field 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
-  -ms-flex-direction: var(--bezier-alpha-stack-direction);
-  flex-direction: var(--bezier-alpha-stack-direction);
-  gap: var(--bezier-alpha-stack-spacing);
-  -webkit-align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-align: var(--bezier-alpha-stack-align);
-  -ms-flex-align: var(--bezier-alpha-stack-align);
-  align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-pack: var(--bezier-alpha-stack-justify);
-  -webkit-justify-content: var(--bezier-alpha-stack-justify);
-  -ms-flex-pack: var(--bezier-alpha-stack-justify);
-  justify-content: var(--bezier-alpha-stack-justify);
-}
-
 .c3 {
   font-size: 1.3rem;
   line-height: 1.8rem;
@@ -54,6 +35,25 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   transition-property: color;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
+  -ms-flex-direction: var(--bezier-alpha-stack-direction);
+  flex-direction: var(--bezier-alpha-stack-direction);
+  gap: var(--bezier-alpha-stack-spacing);
+  -webkit-align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-align: var(--bezier-alpha-stack-align);
+  -ms-flex-align: var(--bezier-alpha-stack-align);
+  align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-pack: var(--bezier-alpha-stack-justify);
+  -webkit-justify-content: var(--bezier-alpha-stack-justify);
+  -ms-flex-pack: var(--bezier-alpha-stack-justify);
+  justify-content: var(--bezier-alpha-stack-justify);
+}
+
 .c1 {
   position: relative;
 }
@@ -301,25 +301,6 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
 `;
 
 exports[`FormControl > Snapshot > With multiple field and left label position 1`] = `
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
-  -ms-flex-direction: var(--bezier-alpha-stack-direction);
-  flex-direction: var(--bezier-alpha-stack-direction);
-  gap: var(--bezier-alpha-stack-spacing);
-  -webkit-align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-align: var(--bezier-alpha-stack-align);
-  -ms-flex-align: var(--bezier-alpha-stack-align);
-  align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-pack: var(--bezier-alpha-stack-justify);
-  -webkit-justify-content: var(--bezier-alpha-stack-justify);
-  -ms-flex-pack: var(--bezier-alpha-stack-justify);
-  justify-content: var(--bezier-alpha-stack-justify);
-}
-
 .c3 {
   font-size: 1.4rem;
   line-height: 1.8rem;
@@ -371,6 +352,25 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   transition-property: color;
 }
 
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
+  -ms-flex-direction: var(--bezier-alpha-stack-direction);
+  flex-direction: var(--bezier-alpha-stack-direction);
+  gap: var(--bezier-alpha-stack-spacing);
+  -webkit-align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-align: var(--bezier-alpha-stack-align);
+  -ms-flex-align: var(--bezier-alpha-stack-align);
+  align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-pack: var(--bezier-alpha-stack-justify);
+  -webkit-justify-content: var(--bezier-alpha-stack-justify);
+  -ms-flex-pack: var(--bezier-alpha-stack-justify);
+  justify-content: var(--bezier-alpha-stack-justify);
+}
+
 .c0 {
   position: relative;
 }
@@ -651,25 +651,6 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
 `;
 
 exports[`FormControl > Snapshot > With single field 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
-  -ms-flex-direction: var(--bezier-alpha-stack-direction);
-  flex-direction: var(--bezier-alpha-stack-direction);
-  gap: var(--bezier-alpha-stack-spacing);
-  -webkit-align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-align: var(--bezier-alpha-stack-align);
-  -ms-flex-align: var(--bezier-alpha-stack-align);
-  align-items: var(--bezier-alpha-stack-align);
-  -webkit-box-pack: var(--bezier-alpha-stack-justify);
-  -webkit-justify-content: var(--bezier-alpha-stack-justify);
-  -ms-flex-pack: var(--bezier-alpha-stack-justify);
-  justify-content: var(--bezier-alpha-stack-justify);
-}
-
 .c3 {
   font-size: 1.3rem;
   line-height: 1.8rem;
@@ -704,6 +685,25 @@ exports[`FormControl > Snapshot > With single field 1`] = `
   transition-property: color;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: var(--bezier-alpha-stack-direction);
+  -ms-flex-direction: var(--bezier-alpha-stack-direction);
+  flex-direction: var(--bezier-alpha-stack-direction);
+  gap: var(--bezier-alpha-stack-spacing);
+  -webkit-align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-align: var(--bezier-alpha-stack-align);
+  -ms-flex-align: var(--bezier-alpha-stack-align);
+  align-items: var(--bezier-alpha-stack-align);
+  -webkit-box-pack: var(--bezier-alpha-stack-justify);
+  -webkit-justify-content: var(--bezier-alpha-stack-justify);
+  -ms-flex-pack: var(--bezier-alpha-stack-justify);
+  justify-content: var(--bezier-alpha-stack-justify);
+}
+
 .c1 {
   position: relative;
 }

package/src/components/Modals/Modal/Modal.types.ts

@@ -133,5 +133,5 @@ export interface ModalTriggerProps extends
 export interface ModalCloseProps extends
   ChildrenProps<React.ReactElement> {}
 
-export interface ModalContentContextValue extends
+export interface ModalContentPropsContextValue extends
   Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}

package/src/components/Modals/Modal/ModalContent.tsx

@@ -1,19 +1,25 @@
 import React, {
   forwardRef,
+  useCallback,
   useMemo,
+  useState,
 } from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
 import { ZIndex } from '~/src/constants/ZIndex'
-import { document } from '~/src/utils/domUtils'
+import useMergeRefs from '~/src/hooks/useMergeRefs'
+import { getRootElement } from '~/src/utils/domUtils'
 import { isNumber } from '~/src/utils/typeUtils'
 
 import {
-  type ModalContentContextValue,
   type ModalContentProps,
+  type ModalContentPropsContextValue,
 } from './Modal.types'
-import { ModalContentContextProvider } from './ModalContentContext'
+import {
+  ModalContainerContextProvider,
+  ModalContentPropsContextProvider,
+} from './ModalContext'
 import { ModalClose } from './ModalHelpers'
 
 import * as Styled from './Modal.styled'
@@ -26,13 +32,22 @@ import * as Styled from './Modal.styled'
 export const ModalContent = forwardRef(function ModalContent({
   children,
   style,
-  container = document.body,
+  container = getRootElement(),
   showCloseIcon = false,
   width = 'max-content',
   height = 'fit-content',
   zIndex = ZIndex.Modal,
   ...rest
 }: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {
+  const [contentContainer, setContentContainer] = useState<HTMLElement>()
+
+  const contentRef = useMergeRefs(
+    forwardedRef,
+    useCallback((node: HTMLElement | null) => {
+      setContentContainer(node ?? undefined)
+    }, []),
+  )
+
   const overlayStyle = useMemo((): React.CSSProperties & {
     '--bezier-modal-z-index': ModalContentProps['zIndex']
   } => ({
@@ -52,7 +67,7 @@ export const ModalContent = forwardRef(function ModalContent({
     height,
   ])
 
-  const contextValue = useMemo((): ModalContentContextValue => ({
+  const propsContextValue = useMemo((): ModalContentPropsContextValue => ({
     showCloseIcon,
   }), [showCloseIcon])
 
@@ -62,14 +77,16 @@ export const ModalContent = forwardRef(function ModalContent({
         <DialogPrimitive.Content asChild>
           <Styled.Content
             aria-modal
-            ref={forwardedRef}
+            ref={contentRef}
             style={contentStyle}
             {...rest}
           >
             <Styled.Section>
-              <ModalContentContextProvider value={contextValue}>
-                { children }
-              </ModalContentContextProvider>
+              <ModalContainerContextProvider value={contentContainer}>
+                <ModalContentPropsContextProvider value={propsContextValue}>
+                  { children }
+                </ModalContentPropsContextProvider>
+              </ModalContainerContextProvider>
 
               { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }
               { showCloseIcon && (

package/src/components/Modals/Modal/ModalContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from '~/src/utils/reactUtils'
+
+import { type ModalContentPropsContextValue } from './Modal.types'
+
+export const [
+  ModalContentPropsContextProvider,
+  useModalContentPropsContext,
+] = createContext<ModalContentPropsContextValue>({
+  showCloseIcon: false,
+})
+
+export const [
+  ModalContainerContextProvider,
+  useModalContainerContext,
+] = createContext<HTMLElement | undefined>(undefined)

package/src/components/Modals/Modal/ModalHeader.tsx

@@ -11,7 +11,7 @@ import {
   type ModalHeaderProps,
   ModalTitleSize,
 } from './Modal.types'
-import { useModalContentContext } from './ModalContentContext'
+import { useModalContentPropsContext } from './ModalContext'
 
 import * as Styled from './Modal.styled'
 
@@ -79,7 +79,7 @@ export const ModalHeader = forwardRef(function ModalHeader({
   hidden = false,
   ...rest
 }: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {
-  const { showCloseIcon } = useModalContentContext()
+  const { showCloseIcon } = useModalContentPropsContext()
   const hasTitleArea = title || showCloseIcon
   const Hidden = hidden ? VisuallyHidden : React.Fragment
 

package/src/components/Modals/Modal/index.ts

@@ -5,6 +5,8 @@ export { ModalBody } from './ModalBody'
 export { ModalFooter } from './ModalFooter'
 export { ModalTrigger, ModalClose } from './ModalHelpers'
 
+export { useModalContainerContext } from './ModalContext'
+
 export {
   ModalTitleSize,
   type ModalProps,

package/src/components/Overlay/Overlay.tsx

@@ -21,6 +21,8 @@ import {
 } from '~/src/utils/domUtils'
 import { noop } from '~/src/utils/functionUtils'
 
+import { useModalContainerContext } from '~/src/components/Modals'
+
 import type OverlayProps from './Overlay.types'
 import {
   type ContainerRectAttr,
@@ -46,7 +48,7 @@ function Overlay(
     style,
     containerClassName = '',
     containerStyle,
-    container,
+    container: givenContainer,
     target,
     position = OverlayPosition.LeftCenter,
     marginX = 0,
@@ -61,10 +63,9 @@ function Overlay(
   }: OverlayProps,
   forwardedRef: Ref<HTMLDivElement>,
 ) {
-  // NOTE: DOM render 가 필요한지 여부를 결정하는 state
   const [shouldRender, setShouldRender] = useState(false)
-  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state
   const [shouldShow, setShouldShow] = useState(false)
+
   const containerRect = useRef<ContainerRectAttr | null>(null)
   const targetRect = useRef<TargetRectAttr | null>(null)
 
@@ -74,29 +75,36 @@ function Overlay(
   const overlayRef = useRef<HTMLDivElement>(null)
   const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)
 
+  const defaultContainer = getRootElement()
+  const modalContainer = useModalContainerContext()
+
+  const hasContainer = Boolean(givenContainer || modalContainer)
+  const container = givenContainer ?? modalContainer ?? defaultContainer
+
   const handleOverlayForceUpdate = useCallback(() => {
     forceUpdate()
   }, [])
 
   const handleContainerRect = useCallback(() => {
-    const containerElement = container || getRootElement()
-
     const {
       width: containerWidth,
       height: containerHeight,
       top: containerTop,
       left: containerLeft,
-    } = containerElement.getBoundingClientRect()
+    } = container.getBoundingClientRect()
 
     containerRect.current = {
       containerWidth,
       containerHeight,
       containerTop,
       containerLeft,
-      scrollTop: container ? container.scrollTop : 0,
-      scrollLeft: container ? container.scrollLeft : 0,
+      scrollTop: hasContainer ? container.scrollTop : 0,
+      scrollLeft: hasContainer ? container.scrollLeft : 0,
     }
-  }, [container])
+  }, [
+    container,
+    hasContainer,
+  ])
 
   useLayoutEffect(function initContainerRect() {
     if (show) {
@@ -217,7 +225,7 @@ function Overlay(
   ])
 
   const overlay = useMemo(() => {
-    if (container) {
+    if (hasContainer) {
       return Content
     }
 
@@ -235,7 +243,7 @@ function Overlay(
       </Styled.DefaultContainer>
     )
   }, [
-    container,
+    hasContainer,
     containerClassName,
     show,
     containerStyle,
@@ -293,7 +301,7 @@ function Overlay(
 
   return ReactDOM.createPortal(
     overlay,
-    container || getRootElement(),
+    container,
   )
 }
 

package/src/components/Overlay/Overlay.types.ts

@@ -46,6 +46,11 @@ export enum OverlayPosition {
 
 interface OverlayOptions {
   show?: boolean
+  /**
+   * Specify a container element to portal the content into.
+   * @note When placed inside a `Modal`, default value is the container element of `Modal`.
+   * @default document.body
+   */
   container?: HTMLElement | null
   target?: HTMLElement | null
   position?: OverlayPosition

package/src/components/Toast/ToastProvider.tsx

@@ -7,6 +7,7 @@ import {
   css,
 } from '~/src/foundation'
 
+import useIsMounted from '~/src/hooks/useIsMounted'
 import { getRootElement } from '~/src/utils/domUtils'
 
 import {
@@ -24,6 +25,8 @@ function ToastProvider({
   autoDismissTimeout = 3000,
   children = [],
 }: ToastProviderProps) {
+  const isMounted = useIsMounted()
+
   const toastContextValue = useToastProviderValues()
   const {
     leftToasts,
@@ -77,7 +80,7 @@ function ToastProvider({
   return (
     <ToastContextProvider value={toastContextValue}>
       { children }
-      { createPortal(
+      { isMounted && createPortal(
         [
           createContainer(ToastPlacement.BottomLeft, leftToasts),
           createContainer(ToastPlacement.BottomRight, rightToasts),