@brytdesigns/web-component-modal 1.1.9 → 3.0.0

package/dist/main/index.js

@@ -1,34 +1,30 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { ModalContext, ModalTrigger, ModalBackdrop, ModalPanel } from './components/index.js';
-export { getModalContext, useModal, withModalElementContext } from './hooks/index.js';
+import { getModalContext, useModal, useModalAt } from "./hooks/useModal.js";
+import "./hooks/index.js";
+import { Component, Name } from "./components/modal-backdrop.js";
+import { Component as Component$1, Name as Name$1 } from "./components/modal-context.js";
+import { Component as Component$2, Name as Name$2 } from "./components/modal-panel.js";
+import { Component as Component$3, Name as Name$3 } from "./components/modal-trigger.js";
+import "./components/index.js";
+import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
+//#region src/index.ts
+customShadowlessElement(Name$1, {
+	isOpen: false,
+	id: "",
+	closeOnEscape: true,
+	shouldTrapFocus: true,
+	isAnimating: false,
+	openAfterDelay: false,
+	delay: 0
+}, Component$1);
+customShadowlessElement(Name$3, {
+	target: "",
+	action: "",
+	on: "click",
+	preventDefault: true
+}, Component$3);
+customShadowlessElement(Name, {}, Component);
+customShadowlessElement(Name$2, {}, Component$2);
+//#endregion
+export { getModalContext, useModal, useModalAt };
 
-customShadowlessElement(
-  ModalContext.Name,
-  {
-    isOpen: false,
-    id: "",
-    closeOnEscape: false,
-    shouldTrapFocus: false,
-    isAnimating: false,
-    openAfterDelay: false,
-    delay: 0
-  },
-  correctElementType(ModalContext.Component)
-);
-customShadowlessElement(
-  ModalTrigger.Name,
-  { target: "", action: "", on: "click", preventDefault: true },
-  correctElementType(ModalTrigger.Component)
-);
-customShadowlessElement(
-  ModalBackdrop.Name,
-  {},
-  correctElementType(ModalBackdrop.Component)
-);
-customShadowlessElement(
-  ModalPanel.Name,
-  {},
-  correctElementType(ModalPanel.Component)
-);
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAiBA,uBAAA;AAAA,EACE,YAAa,CAAA,IAAA;AAAA,EACb;AAAA,IACE,MAAQ,EAAA,KAAA;AAAA,IACR,EAAI,EAAA,EAAA;AAAA,IACJ,aAAe,EAAA,KAAA;AAAA,IACf,eAAiB,EAAA,KAAA;AAAA,IACjB,WAAa,EAAA,KAAA;AAAA,IACb,cAAgB,EAAA,KAAA;AAAA,IAChB,KAAO,EAAA;AAAA,GACT;AAAA,EACA,kBAAA,CAAmB,aAAa,SAAS;AAC3C,CAAA;AAEA,uBAAA;AAAA,EACE,YAAa,CAAA,IAAA;AAAA,EACb,EAAE,QAAQ,EAAI,EAAA,MAAA,EAAQ,IAAI,EAAI,EAAA,OAAA,EAAS,gBAAgB,IAAK,EAAA;AAAA,EAC5D,kBAAA,CAAmB,aAAa,SAAS;AAC3C,CAAA;AAEA,uBAAA;AAAA,EACE,aAAc,CAAA,IAAA;AAAA,EACd,EAAC;AAAA,EACD,kBAAA,CAAmB,cAAc,SAAS;AAC5C,CAAA;AAEA,uBAAA;AAAA,EACE,UAAW,CAAA,IAAA;AAAA,EACX,EAAC;AAAA,EACD,kBAAA,CAAmB,WAAW,SAAS;AACzC,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n  ModalTrigger,\n  ModalContext,\n  ModalBackdrop,\n  ModalPanel,\n} from \"./components/index.js\";\n\nexport type ModalTriggerProps = ModalTrigger.Props;\nexport type ModalBackdropProps = ModalBackdrop.Props;\nexport type ModalPanelProps = ModalPanel.Props;\nexport type ModalContextProps = ModalContext.Props;\n\ncustomShadowlessElement(\n  ModalContext.Name,\n  {\n    isOpen: false,\n    id: \"\",\n    closeOnEscape: false,\n    shouldTrapFocus: false,\n    isAnimating: false,\n    openAfterDelay: false,\n    delay: 0,\n  },\n  correctElementType(ModalContext.Component),\n);\n\ncustomShadowlessElement(\n  ModalTrigger.Name,\n  { target: \"\", action: \"\", on: \"click\", preventDefault: true },\n  correctElementType(ModalTrigger.Component),\n);\n\ncustomShadowlessElement(\n  ModalBackdrop.Name,\n  {},\n  correctElementType(ModalBackdrop.Component),\n);\n\ncustomShadowlessElement(\n  ModalPanel.Name,\n  {},\n  correctElementType(ModalPanel.Component),\n);\n\nexport {\n  useModal,\n  getModalContext,\n  withModalElementContext,\n} from \"./hooks/index.js\";\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tModalBackdrop,\n\tModalContext,\n\tModalPanel,\n\tModalTrigger,\n} from \"./components/index.js\";\n\nexport type ModalTriggerProps = ModalTrigger.Props;\nexport type ModalBackdropProps = ModalBackdrop.Props;\nexport type ModalPanelProps = ModalPanel.Props;\nexport type ModalContextProps = ModalContext.Props;\n\ncustomShadowlessElement(\n\tModalContext.Name,\n\t{\n\t\tisOpen: false,\n\t\tid: \"\",\n\t\t// On by default: an overlay that traps nothing and closes on no key is\n\t\t// not a dialog. Set close-on-escape=\"false\" / should-trap-focus=\"false\"\n\t\t// in markup to opt out.\n\t\tcloseOnEscape: true,\n\t\tshouldTrapFocus: true,\n\t\tisAnimating: false,\n\t\topenAfterDelay: false,\n\t\tdelay: 0,\n\t},\n\tModalContext.Component,\n);\n\ncustomShadowlessElement(\n\tModalTrigger.Name,\n\t{ target: \"\", action: \"\", on: \"click\", preventDefault: true },\n\tModalTrigger.Component,\n);\n\ncustomShadowlessElement(ModalBackdrop.Name, {}, ModalBackdrop.Component);\n\ncustomShadowlessElement(ModalPanel.Name, {}, ModalPanel.Component);\n\nexport {\n\tgetModalContext,\n\tuseModal,\n\tuseModalAt,\n} from \"./hooks/index.js\";\n"],"mappings":";;;;;;;;;AAcA,wBACC,QACA;CACC,QAAQ;CACR,IAAI;CAIJ,eAAe;CACf,iBAAiB;CACjB,aAAa;CACb,gBAAgB;CAChB,OAAO;AACR,GACA,WACD;AAEA,wBACC,QACA;CAAE,QAAQ;CAAI,QAAQ;CAAI,IAAI;CAAS,gBAAgB;AAAK,GAC5D,WACD;AAEA,wBAAwB,MAAoB,CAAC,GAAG,SAAuB;AAEvE,wBAAwB,QAAiB,CAAC,GAAG,WAAoB"}

package/dist/main/utils.js

@@ -1,10 +1,11 @@
+//#region src/utils.ts
 function hideElement(element) {
-  element.style.display = "none";
+	element.style.display = "none";
 }
 function showElement(element) {
-  element.style.display = "block";
+	element.style.display = "block";
 }
-
+//#endregion
 export { hideElement, showElement };
-//# sourceMappingURL=utils.js.map
+
 //# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAAO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,MAAA;AAC1B;AAEO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,OAAA;AAC1B","file":"utils.js","sourcesContent":["export function hideElement<T extends HTMLElement>(element: T) {\n  element.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n  element.style.display = \"block\";\n}\n"]}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["export function hideElement<T extends HTMLElement>(element: T) {\n\telement.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n\telement.style.display = \"block\";\n}\n"],"mappings":";AAAA,SAAgB,YAAmC,SAAY;CAC9D,QAAQ,MAAM,UAAU;AACzB;AAEA,SAAgB,YAAmC,SAAY;CAC9D,QAAQ,MAAM,UAAU;AACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-modal",
-  "version": "1.1.9",
+  "version": "3.0.0",
   "description": "Headless modal web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -9,7 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/main/index.d.ts",
-      "module": "./dist/main/index.js"
+      "default": "./dist/main/index.js"
     }
   },
   "files": [
@@ -19,20 +19,19 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
+    "@brytdesigns/web-component-core": "3.0.0",
     "body-scroll-lock-upgrade": "^1.1.0",
     "component-register": "0.8.7",
-    "motion": "^12.40.0",
+    "motion": "^12.43.0",
     "observe-element-in-viewport": "^0.0.15",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.7"
+    "solid-js": "2.0.0-rc.14"
   },
   "devDependencies": {
-    "dts-bundle-generator": "^9.5.1",
-    "tsup": "^8.4.0"
+    "@repo/vite-config": "0.0.0",
+    "vite": "^8.2.2"
   },
   "scripts": {
-    "build": "tsup --clean",
+    "build": "vite build",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/esm/index.js

@@ -1,493 +0,0 @@
-import { createWithElementContext, customShadowlessElement, correctElementType, toHyphenated, getContextFromProvider, disableBodyScroll, enableBodyScroll } from '@brytdesigns/web-component-core/utils';
-import { splitProps, createEffect, on, batch, onCleanup, untrack, mergeProps, onMount } from 'solid-js';
-import { animate } from 'motion';
-import { awaitAllAnimations, getTransitionConfig } from '@brytdesigns/web-component-core/animation';
-import { createContext, consume, provide } from 'component-register';
-import { createStore } from 'solid-js/store';
-import { abortablePromise } from '@brytdesigns/web-component-core/promise';
-import { observeElementInViewport } from 'observe-element-in-viewport';
-import { createFocusTrap } from '@brytdesigns/web-component-core/focusTrap';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/components/modal-panel.ts
-var modal_panel_exports = {};
-__export(modal_panel_exports, {
-  Component: () => Component,
-  Name: () => Name
-});
-function initializeModalContext(props) {
-  const [element, stateProps] = splitProps(props, ["root"]);
-  const [store, setStore] = createStore({ animationQueue: [] });
-  createEffect(
-    on(
-      () => store.animationQueue,
-      (animationQueue) => {
-        if (!animationQueue.length) return;
-        const controller = new AbortController();
-        const animations = awaitAllAnimations(animationQueue);
-        const abortableAnimations = abortablePromise(
-          animations,
-          controller.signal
-        );
-        setElementState("isAnimating", true);
-        abortableAnimations.finally(() => {
-          batch(() => {
-            setElementState("isAnimating", false);
-            setStore("animationQueue", []);
-          });
-        });
-        return onCleanup(() => {
-          controller.abort("Aborting modal animations");
-        });
-      }
-    )
-  );
-  function setElementState(key, value) {
-    const currentValue = untrack(() => props[key]);
-    if (typeof value === "function") {
-      const currentValue2 = untrack(() => props[key]);
-      const result = value(currentValue2 || false);
-      if (`${currentValue2}` === `${value}`) return;
-      element.root.setAttribute(toHyphenated(key), `${result}`);
-      return;
-    }
-    if (`${currentValue}` === `${value}`) return;
-    return element.root.setAttribute(toHyphenated(key), `${value}`);
-  }
-  return [
-    mergeProps(store, stateProps),
-    { setElementState, setStore }
-  ];
-}
-var ModalContextState = createContext(initializeModalContext);
-var provideModalContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ModalContextState, props, element);
-};
-var useModalContext = (context) => {
-  const [state, { setElementState, setStore: setState }] = context;
-  function updateAnimationQueue(animation) {
-    setState("animationQueue", (state2) => [...state2, animation]);
-  }
-  function close() {
-    setElementState("isOpen", false);
-  }
-  function open() {
-    setElementState("isOpen", true);
-  }
-  function toggle() {
-    setElementState("isOpen", (open2) => !open2);
-  }
-  return [state, { updateAnimationQueue, close, open, toggle }];
-};
-var useModal = (element) => {
-  const context = consume(ModalContextState, element);
-  if (!context) {
-    throw console.error(
-      "ModalContext not found! Please ensure to wrap your custom element with modal-context element."
-    );
-  }
-  return useModalContext(context);
-};
-var withModalElementContext = createWithElementContext(ModalContextState);
-var getModalContext = (element) => {
-  const context = getContextFromProvider(
-    ModalContextState,
-    element
-  );
-  return useModalContext(context);
-};
-
-// src/components/modal-panel.ts
-var Name = "modal-panel";
-var Component = (_, { element }) => {
-  const [state, { updateAnimationQueue }] = useModal(element);
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        x: [`var(--${Name}--slide-x-from)`, `var(--${Name}--slide-x-to)`],
-        y: [`var(--${Name}--slide-y-from)`, `var(--${Name}--slide-y-to)`],
-        scaleY: [`var(--${Name}--scale-y-from)`, `var(--${Name}--scale-y-to)`],
-        scaleX: [`var(--${Name}--scale-x-from)`, `var(--${Name}--scale-x-to)`],
-        opacity: [`var(--${Name}--opacity-from)`, `var(--${Name}--opacity-to)`]
-      },
-      transition
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        x: [`var(--${Name}--slide-x-to)`, `var(--${Name}--slide-x-from)`],
-        y: [`var(--${Name}--slide-y-to)`, `var(--${Name}--slide-y-from)`],
-        scaleY: [`var(--${Name}--scale-y-to)`, `var(--${Name}--scale-y-from)`],
-        scaleX: [`var(--${Name}--scale-x-to)`, `var(--${Name}--scale-x-from)`],
-        opacity: [`var(--${Name}--opacity-to)`, `var(--${Name}--opacity-from)`]
-      },
-      transition
-    );
-  }
-};
-
-// src/components/modal-trigger.ts
-var modal_trigger_exports = {};
-__export(modal_trigger_exports, {
-  Component: () => Component2,
-  Name: () => Name2
-});
-var Name2 = "modal-trigger";
-var Component2 = (props, { element }) => {
-  withModalElementContext(
-    () => props.target || "",
-    () => ({
-      on: props.on,
-      action: props.action,
-      preventDefault: props.preventDefault
-    }),
-    (context, { on: on5, action, preventDefault }) => {
-      const controller = new AbortController();
-      const [state, { open, close, toggle }] = useModalContext(context);
-      switch (on5) {
-        case "enter": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, open, close);
-          }
-          if (unsubscribe)
-            controller.signal.addEventListener("abort", unsubscribe, {
-              once: true
-            });
-          break;
-        }
-        case "exit": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, close, open);
-          }
-          if (unsubscribe)
-            controller.signal.addEventListener("abort", unsubscribe, {
-              once: true
-            });
-          break;
-        }
-        default: {
-          element.addEventListener(
-            //@ts-ignore
-            on5,
-            (event) => {
-              if (preventDefault) event.preventDefault();
-              if (state.isAnimating) return;
-              switch (action) {
-                case "close":
-                  close();
-                  break;
-                case "open":
-                  open();
-                  break;
-                case "toggle":
-                  toggle();
-                  break;
-              }
-            },
-            { signal: controller.signal }
-          );
-          break;
-        }
-      }
-      createEffect(() => {
-        element.setAttribute("is-open", `${state.isOpen}`);
-        element.setAttribute("is-animating", `${state.isAnimating}`);
-      });
-      onCleanup(() => {
-        controller.abort();
-      });
-    }
-  );
-};
-
-// src/components/modal-backdrop.ts
-var modal_backdrop_exports = {};
-__export(modal_backdrop_exports, {
-  Component: () => Component3,
-  Name: () => Name3
-});
-var Name3 = "modal-backdrop";
-var Component3 = (_, { element }) => {
-  const [state, { updateAnimationQueue, close }] = useModal(element);
-  const controller = new AbortController();
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--${Name3}--opacity-from)`, `var(--${Name3}--opacity-to)`]
-      },
-      options
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--${Name3}--opacity-to)`, `var(--${Name3}--opacity-from)`]
-      },
-      options
-    );
-  }
-  element.addEventListener(
-    "click",
-    () => {
-      if (state.isAnimating) return;
-      close();
-    },
-    {
-      signal: controller.signal
-    }
-  );
-  onCleanup(() => {
-    controller.abort();
-  });
-};
-
-// src/components/modal-context.ts
-var modal_context_exports = {};
-__export(modal_context_exports, {
-  Component: () => Component4,
-  Name: () => Name4
-});
-
-// src/utils.ts
-function hideElement(element) {
-  element.style.display = "none";
-}
-function showElement(element) {
-  element.style.display = "block";
-}
-
-// src/components/modal-context.ts
-var Name4 = "modal-context";
-var Component4 = (props, { element }) => {
-  const [contextProps, restProps] = splitProps(props, [
-    "isOpen",
-    "isAnimating"
-  ]);
-  const context = provideModalContext(contextProps, element);
-  const [state, { setElementState }] = context;
-  const [_, { updateAnimationQueue, ...events }] = useModalContext(context);
-  element.actions = events;
-  const focusTrap = createFocusTrap(element, () => ({
-    allowOutsideClick: true,
-    escapeDeactivates: restProps.closeOnEscape,
-    onDeactivate: () => {
-      setElementState("isOpen", false);
-    }
-  }));
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        const eventName = isOpen ? "modal:open" : "modal:close";
-        element.dispatchEvent(
-          new CustomEvent(eventName, {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-        element.dispatchEvent(
-          new CustomEvent("drawer:toggle", {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        focusTrap: focusTrap(),
-        shouldTrapFocus: restProps.shouldTrapFocus
-      }),
-      ({ isOpen, focusTrap: focusTrap2, shouldTrapFocus }) => {
-        if (!isOpen) return;
-        showElement(element);
-        if (!shouldTrapFocus) return;
-        focusTrap2.activate();
-        onCleanup(focusTrap2.deactivate);
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        isAnimating: state.isAnimating,
-        shouldTrapFocus: restProps.shouldTrapFocus
-      }),
-      ({ isOpen, isAnimating, shouldTrapFocus }) => {
-        if (isOpen && !isAnimating && shouldTrapFocus)
-          return disableBodyScroll(element, {
-            allowTouchMove: (el) => {
-              if (el instanceof HTMLElement) {
-                let element2 = el;
-                while (element2 && element2 !== document.body) {
-                  if (element2.tagName === "MODAL-PANEL") {
-                    return true;
-                  }
-                  element2 = element2.parentElement;
-                }
-              }
-              return false;
-            }
-          });
-        onCleanup(() => {
-          enableBodyScroll(element);
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),
-      ({ isOpen, animationQueue }) => {
-        if (isOpen) return;
-        return Promise.all(animationQueue).then(() => hideElement(element));
-      }
-    )
-  );
-  let openAfterDelayTimeoutId = null;
-  onMount(() => {
-    if (!restProps.delay || contextProps.isOpen) return;
-    openAfterDelayTimeoutId = setTimeout(() => {
-      setElementState("isOpen", true);
-    }, props.delay);
-    return onCleanup(() => {
-      clearTimeout(openAfterDelayTimeoutId);
-    });
-  });
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        openAfterDelay: restProps.delay > 0
-      }),
-      ({ isOpen, openAfterDelay }) => {
-        if (!openAfterDelay && openAfterDelayTimeoutId)
-          clearTimeout(openAfterDelayTimeoutId);
-        if (isOpen && openAfterDelayTimeoutId)
-          clearTimeout(openAfterDelayTimeoutId);
-      }
-    )
-  );
-  onCleanup(() => {
-    enableBodyScroll(element);
-  });
-};
-
-// src/index.ts
-customShadowlessElement(
-  modal_context_exports.Name,
-  {
-    isOpen: false,
-    id: "",
-    closeOnEscape: false,
-    shouldTrapFocus: false,
-    isAnimating: false,
-    openAfterDelay: false,
-    delay: 0
-  },
-  correctElementType(modal_context_exports.Component)
-);
-customShadowlessElement(
-  modal_trigger_exports.Name,
-  { target: "", action: "", on: "click", preventDefault: true },
-  correctElementType(modal_trigger_exports.Component)
-);
-customShadowlessElement(
-  modal_backdrop_exports.Name,
-  {},
-  correctElementType(modal_backdrop_exports.Component)
-);
-customShadowlessElement(
-  modal_panel_exports.Name,
-  {},
-  correctElementType(modal_panel_exports.Component)
-);
-
-export { getModalContext, useModal, withModalElementContext };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map