@sps-woodland/modal 8.0.0-rc1

package/lib/index.es.js

@@ -0,0 +1,2110 @@
+import { Metadata as Be, cl as re, combineEventHandlers as ve, I18nContext as Qe, useChildTestIdAttrBuilder as Ze, selectChildren as et, modChildren as tt, Icon as ot, contentOf as Z } from "@sps-woodland/core";
+import { Button as he } from "@sps-woodland/buttons";
+import * as d from "react";
+import y, { useState as X, useRef as $, useCallback as S, useContext as A, useEffect as T, useMemo as K } from "react";
+import rt from "react-dom";
+import { code as g } from "@spscommerce/utils";
+function nt(e, t, o) {
+  let [r, n] = X(e || t), a = $(e !== void 0), l = a.current, i = e !== void 0, s = $(r);
+  l !== i && console.warn(`WARN: A component changed from ${l ? "controlled" : "uncontrolled"} to ${i ? "controlled" : "uncontrolled"}.`), a.current = i;
+  let u = S((c, ...f) => {
+    let m = (b, ...p) => {
+      o && (Object.is(s.current, b) || o(b, ...p)), i || (s.current = b);
+    };
+    typeof c == "function" ? (console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"), n((p, ...N) => {
+      let z = c(i ? s.current : p, ...N);
+      return m(z, ...f), i ? p : z;
+    })) : (i || n(c), m(c, ...f));
+  }, [
+    i,
+    o
+  ]);
+  return i ? s.current = e : e = r, [
+    e,
+    u
+  ];
+}
+const Ce = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0,
+  isSSR: !1
+}, de = /* @__PURE__ */ y.createContext(Ce);
+let at = Boolean(typeof window < "u" && window.document && window.document.createElement), ee = /* @__PURE__ */ new WeakMap();
+function lt(e = !1) {
+  let t = A(de), o = $(null);
+  if (o.current === null && !e) {
+    var r, n;
+    let a = (r = y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || r === void 0 || (n = r.ReactCurrentOwner) === null || n === void 0 ? void 0 : n.current;
+    if (a) {
+      let l = ee.get(a);
+      l == null ? ee.set(a, {
+        id: t.current,
+        state: a.memoizedState
+      }) : a.memoizedState !== l.state && (t.current = l.id, ee.delete(a));
+    }
+    o.current = ++t.current;
+  }
+  return o.current;
+}
+function it(e) {
+  let t = A(de);
+  t === Ce && !at && console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let o = lt(!!e);
+  return e || `react-aria${t.prefix}-${o}`;
+}
+function st() {
+  return A(de).isSSR;
+}
+function Ne(e) {
+  var t, o, r = "";
+  if (typeof e == "string" || typeof e == "number")
+    r += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (o = Ne(e[t])) && (r && (r += " "), r += o);
+    else
+      for (t in e)
+        e[t] && (r && (r += " "), r += t);
+  return r;
+}
+function dt() {
+  for (var e, t, o = 0, r = ""; o < arguments.length; )
+    (e = arguments[o++]) && (t = Ne(e)) && (r && (r += " "), r += t);
+  return r;
+}
+const E = typeof window < "u" ? y.useLayoutEffect : () => {
+};
+function ut(e) {
+  let [t, o] = X(e), r = $(t), n = $(null);
+  r.current = t;
+  let a = $(null);
+  a.current = () => {
+    let i = n.current.next();
+    if (i.done) {
+      n.current = null;
+      return;
+    }
+    t === i.value ? a.current() : o(i.value);
+  }, E(() => {
+    n.current && a.current();
+  });
+  let l = S((i) => {
+    n.current = i(r.current), a.current();
+  }, [
+    n,
+    a
+  ]);
+  return [
+    t,
+    l
+  ];
+}
+let _ = /* @__PURE__ */ new Map();
+function Oe(e) {
+  let [t, o] = X(e), r = $(null), n = it(t), a = S((l) => {
+    r.current = l;
+  }, []);
+  return _.set(n, a), E(() => {
+    let l = n;
+    return () => {
+      _.delete(l);
+    };
+  }, [
+    n
+  ]), T(() => {
+    let l = r.current;
+    l && (r.current = null, o(l));
+  }), n;
+}
+function ct(e, t) {
+  if (e === t)
+    return e;
+  let o = _.get(e);
+  if (o)
+    return o(t), t;
+  let r = _.get(t);
+  return r ? (r(e), e) : t;
+}
+function mt(e = []) {
+  let t = Oe(), [o, r] = ut(t), n = S(() => {
+    r(function* () {
+      yield t, yield document.getElementById(t) ? t : void 0;
+    });
+  }, [
+    t,
+    r
+  ]);
+  return E(n, [
+    t,
+    n,
+    ...e
+  ]), o;
+}
+function j(...e) {
+  return (...t) => {
+    for (let o of e)
+      typeof o == "function" && o(...t);
+  };
+}
+function pt(...e) {
+  let t = {
+    ...e[0]
+  };
+  for (let o = 1; o < e.length; o++) {
+    let r = e[o];
+    for (let n in r) {
+      let a = t[n], l = r[n];
+      typeof a == "function" && typeof l == "function" && n[0] === "o" && n[1] === "n" && n.charCodeAt(2) >= 65 && n.charCodeAt(2) <= 90 ? t[n] = j(a, l) : (n === "className" || n === "UNSAFE_className") && typeof a == "string" && typeof l == "string" ? t[n] = dt(a, l) : n === "id" && a && l ? t.id = ct(a, l) : t[n] = l !== void 0 ? l : a;
+    }
+  }
+  return t;
+}
+const ft = /* @__PURE__ */ new Set([
+  "id"
+]), gt = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details"
+]), bt = /^(data-.*)$/;
+function vt(e, t = {}) {
+  let { labelable: o, propNames: r } = t, n = {};
+  for (const a in e)
+    Object.prototype.hasOwnProperty.call(e, a) && (ft.has(a) || o && gt.has(a) || (r == null ? void 0 : r.has(a)) || bt.test(a)) && (n[a] = e[a]);
+  return n;
+}
+function $e(e) {
+  if (ht())
+    e.focus({
+      preventScroll: !0
+    });
+  else {
+    let t = $t(e);
+    e.focus(), wt(t);
+  }
+}
+let q = null;
+function ht() {
+  if (q == null) {
+    q = !1;
+    try {
+      var e = document.createElement("div");
+      e.focus({
+        get preventScroll() {
+          return q = !0, !0;
+        }
+      });
+    } catch {
+    }
+  }
+  return q;
+}
+function $t(e) {
+  for (var t = e.parentNode, o = [], r = document.scrollingElement || document.documentElement; t instanceof HTMLElement && t !== r; )
+    (t.offsetHeight < t.scrollHeight || t.offsetWidth < t.scrollWidth) && o.push({
+      element: t,
+      scrollTop: t.scrollTop,
+      scrollLeft: t.scrollLeft
+    }), t = t.parentNode;
+  return r instanceof HTMLElement && o.push({
+    element: r,
+    scrollTop: r.scrollTop,
+    scrollLeft: r.scrollLeft
+  }), o;
+}
+function wt(e) {
+  for (let { element: t, scrollTop: o, scrollLeft: r } of e)
+    t.scrollTop = o, t.scrollLeft = r;
+}
+let C = /* @__PURE__ */ new Map(), ne = /* @__PURE__ */ new Set();
+function we() {
+  if (typeof window > "u")
+    return;
+  let e = (o) => {
+    let r = C.get(o.target);
+    r || (r = /* @__PURE__ */ new Set(), C.set(o.target, r), o.target.addEventListener("transitioncancel", t)), r.add(o.propertyName);
+  }, t = (o) => {
+    let r = C.get(o.target);
+    if (!!r && (r.delete(o.propertyName), r.size === 0 && (o.target.removeEventListener("transitioncancel", t), C.delete(o.target)), C.size === 0)) {
+      for (let n of ne)
+        n();
+      ne.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", e), document.body.addEventListener("transitionend", t);
+}
+typeof document < "u" && (document.readyState !== "loading" ? we() : document.addEventListener("DOMContentLoaded", we));
+function Et(e) {
+  requestAnimationFrame(() => {
+    C.size === 0 ? e() : ne.add(e);
+  });
+}
+function De(e) {
+  for (Ee(e) && (e = e.parentElement); e && !Ee(e); )
+    e = e.parentElement;
+  return e || document.scrollingElement || document.documentElement;
+}
+function Ee(e) {
+  let t = window.getComputedStyle(e);
+  return /(auto|scroll)/.test(t.overflow + t.overflowX + t.overflowY);
+}
+function Mt(e) {
+  var t;
+  return typeof window > "u" || window.navigator == null ? !1 : ((t = window.navigator.userAgentData) === null || t === void 0 ? void 0 : t.brands.some((o) => e.test(o.brand))) || e.test(window.navigator.userAgent);
+}
+function ue(e) {
+  var t;
+  return typeof window < "u" && window.navigator != null ? e.test(((t = window.navigator.userAgentData) === null || t === void 0 ? void 0 : t.platform) || window.navigator.platform) : !1;
+}
+function Ie() {
+  return ue(/^Mac/i);
+}
+function yt() {
+  return ue(/^iPhone/i);
+}
+function Pt() {
+  return ue(/^iPad/i) || Ie() && navigator.maxTouchPoints > 1;
+}
+function kt() {
+  return yt() || Pt();
+}
+function Tt() {
+  return Mt(/Android/i);
+}
+function xt(e) {
+  return e.mozInputSource === 0 && e.isTrusted ? !0 : Tt() && e.pointerType ? e.type === "click" && e.buttons === 1 : e.detail === 0 && !e.pointerType;
+}
+function ae(e, t, o) {
+  return t in e ? Object.defineProperty(e, t, {
+    value: o,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = o, e;
+}
+const Ft = y.createContext(null);
+Ft.displayName = "PressResponderContext";
+class St {
+  isDefaultPrevented() {
+    return this.nativeEvent.defaultPrevented;
+  }
+  preventDefault() {
+    this.defaultPrevented = !0, this.nativeEvent.preventDefault();
+  }
+  stopPropagation() {
+    this.nativeEvent.stopPropagation(), this.isPropagationStopped = () => !0;
+  }
+  isPropagationStopped() {
+    return !1;
+  }
+  persist() {
+  }
+  constructor(t, o) {
+    this.nativeEvent = o, this.target = o.target, this.currentTarget = o.currentTarget, this.relatedTarget = o.relatedTarget, this.bubbles = o.bubbles, this.cancelable = o.cancelable, this.defaultPrevented = o.defaultPrevented, this.eventPhase = o.eventPhase, this.isTrusted = o.isTrusted, this.timeStamp = o.timeStamp, this.type = t;
+  }
+}
+function Lt(e) {
+  let t = $({
+    isFocused: !1,
+    onBlur: e,
+    observer: null
+  });
+  return t.current.onBlur = e, E(() => {
+    const o = t.current;
+    return () => {
+      o.observer && (o.observer.disconnect(), o.observer = null);
+    };
+  }, []), S((o) => {
+    if (o.target instanceof HTMLButtonElement || o.target instanceof HTMLInputElement || o.target instanceof HTMLTextAreaElement || o.target instanceof HTMLSelectElement) {
+      t.current.isFocused = !0;
+      let r = o.target, n = (a) => {
+        var l, i;
+        t.current.isFocused = !1, r.disabled && ((i = (l = t.current).onBlur) === null || i === void 0 || i.call(l, new St("blur", a))), t.current.observer && (t.current.observer.disconnect(), t.current.observer = null);
+      };
+      r.addEventListener("focusout", n, {
+        once: !0
+      }), t.current.observer = new MutationObserver(() => {
+        t.current.isFocused && r.disabled && (t.current.observer.disconnect(), r.dispatchEvent(new FocusEvent("blur")), r.dispatchEvent(new FocusEvent("focusout", {
+          bubbles: !0
+        })));
+      }), t.current.observer.observe(r, {
+        attributes: !0,
+        attributeFilter: [
+          "disabled"
+        ]
+      });
+    }
+  }, []);
+}
+let W = null, Bt = /* @__PURE__ */ new Set(), Me = !1, L = !1, le = !1;
+function ce(e, t) {
+  for (let o of Bt)
+    o(e, t);
+}
+function Ct(e) {
+  return !(e.metaKey || !Ie() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function ye(e) {
+  L = !0, Ct(e) && (W = "keyboard", ce("keyboard", e));
+}
+function B(e) {
+  W = "pointer", (e.type === "mousedown" || e.type === "pointerdown") && (L = !0, ce("pointer", e));
+}
+function Nt(e) {
+  xt(e) && (L = !0, W = "virtual");
+}
+function Ot(e) {
+  e.target === window || e.target === document || (!L && !le && (W = "virtual", ce("virtual", e)), L = !1, le = !1);
+}
+function Dt() {
+  L = !1, le = !0;
+}
+function Pe() {
+  if (typeof window > "u" || Me)
+    return;
+  let e = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function() {
+    L = !0, e.apply(this, arguments);
+  }, document.addEventListener("keydown", ye, !0), document.addEventListener("keyup", ye, !0), document.addEventListener("click", Nt, !0), window.addEventListener("focus", Ot, !0), window.addEventListener("blur", Dt, !1), typeof PointerEvent < "u" ? (document.addEventListener("pointerdown", B, !0), document.addEventListener("pointermove", B, !0), document.addEventListener("pointerup", B, !0)) : (document.addEventListener("mousedown", B, !0), document.addEventListener("mousemove", B, !0), document.addEventListener("mouseup", B, !0)), Me = !0;
+}
+typeof document < "u" && (document.readyState !== "loading" ? Pe() : document.addEventListener("DOMContentLoaded", Pe));
+function It() {
+  return W;
+}
+function At(e) {
+  let { isDisabled: t, onBlurWithin: o, onFocusWithin: r, onFocusWithinChange: n } = e, a = $({
+    isFocusWithin: !1
+  }), l = S((u) => {
+    a.current.isFocusWithin && !u.currentTarget.contains(u.relatedTarget) && (a.current.isFocusWithin = !1, o && o(u), n && n(!1));
+  }, [
+    o,
+    n,
+    a
+  ]), i = Lt(l), s = S((u) => {
+    !a.current.isFocusWithin && document.activeElement === u.target && (r && r(u), n && n(!0), a.current.isFocusWithin = !0, i(u));
+  }, [
+    r,
+    n,
+    i
+  ]);
+  return t ? {
+    focusWithinProps: {
+      onFocus: null,
+      onBlur: null
+    }
+  } : {
+    focusWithinProps: {
+      onFocus: s,
+      onBlur: l
+    }
+  };
+}
+function Wt(e) {
+  let { ref: t, onInteractOutside: o, isDisabled: r, onInteractOutsideStart: n } = e, l = $({
+    isPointerDown: !1,
+    ignoreEmulatedMouseEvents: !1,
+    onInteractOutside: o,
+    onInteractOutsideStart: n
+  }).current;
+  l.onInteractOutside = o, l.onInteractOutsideStart = n, T(() => {
+    if (r)
+      return;
+    let i = (s) => {
+      R(s, t) && l.onInteractOutside && (l.onInteractOutsideStart && l.onInteractOutsideStart(s), l.isPointerDown = !0);
+    };
+    if (typeof PointerEvent < "u") {
+      let s = (u) => {
+        l.isPointerDown && l.onInteractOutside && R(u, t) && l.onInteractOutside(u), l.isPointerDown = !1;
+      };
+      return document.addEventListener("pointerdown", i, !0), document.addEventListener("pointerup", s, !0), () => {
+        document.removeEventListener("pointerdown", i, !0), document.removeEventListener("pointerup", s, !0);
+      };
+    } else {
+      let s = (c) => {
+        l.ignoreEmulatedMouseEvents ? l.ignoreEmulatedMouseEvents = !1 : l.isPointerDown && l.onInteractOutside && R(c, t) && l.onInteractOutside(c), l.isPointerDown = !1;
+      }, u = (c) => {
+        l.ignoreEmulatedMouseEvents = !0, l.onInteractOutside && l.isPointerDown && R(c, t) && l.onInteractOutside(c), l.isPointerDown = !1;
+      };
+      return document.addEventListener("mousedown", i, !0), document.addEventListener("mouseup", s, !0), document.addEventListener("touchstart", i, !0), document.addEventListener("touchend", u, !0), () => {
+        document.removeEventListener("mousedown", i, !0), document.removeEventListener("mouseup", s, !0), document.removeEventListener("touchstart", i, !0), document.removeEventListener("touchend", u, !0);
+      };
+    }
+  }, [
+    t,
+    l,
+    r
+  ]);
+}
+function R(e, t) {
+  if (e.button > 0)
+    return !1;
+  if (e.target) {
+    const o = e.target.ownerDocument;
+    if (!o || !o.documentElement.contains(e.target) || e.target.closest("[data-react-aria-top-layer]"))
+      return !1;
+  }
+  return t.current && !t.current.contains(e.target);
+}
+function ie(e) {
+  if (It() === "virtual") {
+    let t = document.activeElement;
+    Et(() => {
+      document.activeElement === t && document.contains(e) && $e(e);
+    });
+  } else
+    $e(e);
+}
+function zt(e) {
+  if (!(e instanceof HTMLElement) && !(e instanceof SVGElement))
+    return !1;
+  let { display: t, visibility: o } = e.style, r = t !== "none" && o !== "hidden" && o !== "collapse";
+  if (r) {
+    const { getComputedStyle: n } = e.ownerDocument.defaultView;
+    let { display: a, visibility: l } = n(e);
+    r = a !== "none" && l !== "hidden" && l !== "collapse";
+  }
+  return r;
+}
+function qt(e, t) {
+  return !e.hasAttribute("hidden") && (e.nodeName === "DETAILS" && t && t.nodeName !== "SUMMARY" ? e.hasAttribute("open") : !0);
+}
+function Ae(e, t) {
+  return e.nodeName !== "#comment" && zt(e) && qt(e, t) && (!e.parentElement || Ae(e.parentElement, e));
+}
+const ke = /* @__PURE__ */ y.createContext(null);
+let v = null;
+function Rt(e) {
+  let { children: t, contain: o, restoreFocus: r, autoFocus: n } = e, a = $(), l = $(), i = $([]), { parentNode: s } = A(ke) || {}, u = K(() => new se({
+    scopeRef: i
+  }), [
+    i
+  ]);
+  E(() => {
+    let m = s || h.root;
+    if (h.getTreeNode(m.scopeRef) && v && !G(v, m.scopeRef)) {
+      let b = h.getTreeNode(v);
+      b && (m = b);
+    }
+    m.addChild(u), h.addNode(u);
+  }, [
+    u,
+    s
+  ]), E(() => {
+    let m = h.getTreeNode(i);
+    m.contain = o;
+  }, [
+    o
+  ]), E(() => {
+    let m = a.current.nextSibling, b = [];
+    for (; m && m !== l.current; )
+      b.push(m), m = m.nextSibling;
+    i.current = b;
+  }, [
+    t
+  ]), Gt(i, r, o), _t(i, o), Xt(i, r, o), Ut(i, n), T(() => {
+    if (i) {
+      let m = document.activeElement, b = null;
+      if (w(m, i.current)) {
+        for (let p of h.traverse())
+          w(m, p.scopeRef.current) && (b = p);
+        b === h.getTreeNode(i) && (v = b.scopeRef);
+      }
+      return () => {
+        let p = h.getTreeNode(i).parent.scopeRef;
+        (i === v || G(i, v)) && (!p || h.getTreeNode(p)) && (v = p), h.removeTreeNode(i);
+      };
+    }
+  }, [
+    i
+  ]);
+  let c = K(() => Ht(i), []), f = K(() => ({
+    focusManager: c,
+    parentNode: u
+  }), [
+    u,
+    c
+  ]);
+  return /* @__PURE__ */ y.createElement(ke.Provider, {
+    value: f
+  }, /* @__PURE__ */ y.createElement("span", {
+    "data-focus-scope-start": !0,
+    hidden: !0,
+    ref: a
+  }), t, /* @__PURE__ */ y.createElement("span", {
+    "data-focus-scope-end": !0,
+    hidden: !0,
+    ref: l
+  }));
+}
+function Ht(e) {
+  return {
+    focusNext(t = {}) {
+      let o = e.current, { from: r, tabbable: n, wrap: a, accept: l } = t, i = r || document.activeElement, s = o[0].previousElementSibling, u = x(F(o), {
+        tabbable: n,
+        accept: l
+      }, o);
+      u.currentNode = w(i, o) ? i : s;
+      let c = u.nextNode();
+      return !c && a && (u.currentNode = s, c = u.nextNode()), c && k(c, !0), c;
+    },
+    focusPrevious(t = {}) {
+      let o = e.current, { from: r, tabbable: n, wrap: a, accept: l } = t, i = r || document.activeElement, s = o[o.length - 1].nextElementSibling, u = x(F(o), {
+        tabbable: n,
+        accept: l
+      }, o);
+      u.currentNode = w(i, o) ? i : s;
+      let c = u.previousNode();
+      return !c && a && (u.currentNode = s, c = u.previousNode()), c && k(c, !0), c;
+    },
+    focusFirst(t = {}) {
+      let o = e.current, { tabbable: r, accept: n } = t, a = x(F(o), {
+        tabbable: r,
+        accept: n
+      }, o);
+      a.currentNode = o[0].previousElementSibling;
+      let l = a.nextNode();
+      return l && k(l, !0), l;
+    },
+    focusLast(t = {}) {
+      let o = e.current, { tabbable: r, accept: n } = t, a = x(F(o), {
+        tabbable: r,
+        accept: n
+      }, o);
+      a.currentNode = o[o.length - 1].nextElementSibling;
+      let l = a.previousNode();
+      return l && k(l, !0), l;
+    }
+  };
+}
+const me = [
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  "[contenteditable]"
+], Vt = me.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+me.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const Kt = me.join(':not([hidden]):not([tabindex="-1"]),');
+function F(e) {
+  return e[0].parentElement;
+}
+function H(e) {
+  let t = h.getTreeNode(v);
+  for (; t && t.scopeRef !== e; ) {
+    if (t.contain)
+      return !1;
+    t = t.parent;
+  }
+  return !0;
+}
+function _t(e, t) {
+  let o = $(), r = $(null);
+  E(() => {
+    let n = e.current;
+    if (!t) {
+      r.current && (cancelAnimationFrame(r.current), r.current = null);
+      return;
+    }
+    let a = (s) => {
+      if (s.key !== "Tab" || s.altKey || s.ctrlKey || s.metaKey || !H(e))
+        return;
+      let u = document.activeElement, c = e.current;
+      if (!w(u, c))
+        return;
+      let f = x(F(c), {
+        tabbable: !0
+      }, c);
+      f.currentNode = u;
+      let m = s.shiftKey ? f.previousNode() : f.nextNode();
+      m || (f.currentNode = s.shiftKey ? c[c.length - 1].nextElementSibling : c[0].previousElementSibling, m = s.shiftKey ? f.previousNode() : f.nextNode()), s.preventDefault(), m && k(m, !0);
+    }, l = (s) => {
+      (!v || G(v, e)) && w(s.target, e.current) ? (v = e, o.current = s.target) : H(e) && !U(s.target, e) ? o.current ? o.current.focus() : v && Y(v.current) : H(e) && (o.current = s.target);
+    }, i = (s) => {
+      r.current && cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+        H(e) && !U(document.activeElement, e) && (v = e, document.body.contains(s.target) ? (o.current = s.target, o.current.focus()) : v && Y(v.current));
+      });
+    };
+    return document.addEventListener("keydown", a, !1), document.addEventListener("focusin", l, !1), n.forEach((s) => s.addEventListener("focusin", l, !1)), n.forEach((s) => s.addEventListener("focusout", i, !1)), () => {
+      document.removeEventListener("keydown", a, !1), document.removeEventListener("focusin", l, !1), n.forEach((s) => s.removeEventListener("focusin", l, !1)), n.forEach((s) => s.removeEventListener("focusout", i, !1));
+    };
+  }, [
+    e,
+    t
+  ]), T(() => () => {
+    r.current && cancelAnimationFrame(r.current);
+  }, [
+    r
+  ]);
+}
+function We(e) {
+  return U(e);
+}
+function w(e, t) {
+  return t.some((o) => o.contains(e));
+}
+function U(e, t = null) {
+  if (e instanceof Element && e.closest("[data-react-aria-top-layer]"))
+    return !0;
+  for (let { scopeRef: o } of h.traverse(h.getTreeNode(t)))
+    if (w(e, o.current))
+      return !0;
+  return !1;
+}
+function jt(e) {
+  return U(e, v);
+}
+function G(e, t) {
+  var o;
+  let r = (o = h.getTreeNode(t)) === null || o === void 0 ? void 0 : o.parent;
+  for (; r; ) {
+    if (r.scopeRef === e)
+      return !0;
+    r = r.parent;
+  }
+  return !1;
+}
+function k(e, t = !1) {
+  if (e != null && !t)
+    try {
+      ie(e);
+    } catch {
+    }
+  else if (e != null)
+    try {
+      e.focus();
+    } catch {
+    }
+}
+function Y(e, t = !0) {
+  let o = e[0].previousElementSibling, r = x(F(e), {
+    tabbable: t
+  }, e);
+  r.currentNode = o;
+  let n = r.nextNode();
+  t && !n && (r = x(F(e), {
+    tabbable: !1
+  }, e), r.currentNode = o, n = r.nextNode()), k(n);
+}
+function Ut(e, t) {
+  const o = y.useRef(t);
+  T(() => {
+    o.current && (v = e, w(document.activeElement, v.current) || Y(e.current)), o.current = !1;
+  }, [
+    e
+  ]);
+}
+function Gt(e, t, o) {
+  E(() => {
+    if (t || o)
+      return;
+    let r = e.current, n = (a) => {
+      let l = a.target;
+      w(l, e.current) ? v = e : We(l) || (v = null);
+    };
+    return document.addEventListener("focusin", n, !1), r.forEach((a) => a.addEventListener("focusin", n, !1)), () => {
+      document.removeEventListener("focusin", n, !1), r.forEach((a) => a.removeEventListener("focusin", n, !1));
+    };
+  }, [
+    e,
+    t,
+    o
+  ]);
+}
+function Yt(e) {
+  let t = h.getTreeNode(v);
+  for (; t && t.scopeRef !== e; ) {
+    if (t.nodeToRestore)
+      return !1;
+    t = t.parent;
+  }
+  return (t == null ? void 0 : t.scopeRef) === e;
+}
+function Xt(e, t, o) {
+  const r = $(typeof document < "u" ? document.activeElement : null);
+  E(() => {
+    let n = e.current;
+    if (!t || o)
+      return;
+    let a = () => {
+      (!v || G(v, e)) && (v = e);
+    };
+    return document.addEventListener("focusin", a, !1), n.forEach((l) => l.addEventListener("focusin", a, !1)), () => {
+      document.removeEventListener("focusin", a, !1), n.forEach((l) => l.removeEventListener("focusin", a, !1));
+    };
+  }, [
+    e,
+    o
+  ]), E(() => {
+    if (!t)
+      return;
+    h.getTreeNode(e).nodeToRestore = r.current;
+    let n = (a) => {
+      if (a.key !== "Tab" || a.altKey || a.ctrlKey || a.metaKey)
+        return;
+      let l = document.activeElement;
+      if (!w(l, e.current))
+        return;
+      let i = h.getTreeNode(e).nodeToRestore, s = x(document.body, {
+        tabbable: !0
+      });
+      s.currentNode = l;
+      let u = a.shiftKey ? s.previousNode() : s.nextNode();
+      if ((!document.body.contains(i) || i === document.body) && (i = null, h.getTreeNode(e).nodeToRestore = null), (!u || !w(u, e.current)) && i) {
+        s.currentNode = i;
+        do
+          u = a.shiftKey ? s.previousNode() : s.nextNode();
+        while (w(u, e.current));
+        a.preventDefault(), a.stopPropagation(), u ? k(u, !0) : We(i) ? k(i, !0) : l.blur();
+      }
+    };
+    return o || document.addEventListener("keydown", n, !0), () => {
+      o || document.removeEventListener("keydown", n, !0);
+      let a = h.getTreeNode(e).nodeToRestore;
+      if (t && a && (w(document.activeElement, e.current) || document.activeElement === document.body && Yt(e))) {
+        let l = h.clone();
+        requestAnimationFrame(() => {
+          if (document.activeElement === document.body) {
+            let i = l.getTreeNode(e);
+            for (; i; ) {
+              if (i.nodeToRestore && document.body.contains(i.nodeToRestore)) {
+                k(i.nodeToRestore);
+                return;
+              }
+              i = i.parent;
+            }
+            for (i = l.getTreeNode(e); i; ) {
+              if (i.scopeRef && h.getTreeNode(i.scopeRef)) {
+                Y(i.scopeRef.current, !0);
+                return;
+              }
+              i = i.parent;
+            }
+          }
+        });
+      }
+    };
+  }, [
+    e,
+    t,
+    o
+  ]);
+}
+function x(e, t, o) {
+  let r = t != null && t.tabbable ? Kt : Vt, n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(a) {
+      var l;
+      return !(t == null || (l = t.from) === null || l === void 0) && l.contains(a) ? NodeFilter.FILTER_REJECT : a.matches(r) && Ae(a) && (!o || w(a, o)) && (!(t != null && t.accept) || t.accept(a)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  return t != null && t.from && (n.currentNode = t.from), n;
+}
+class pe {
+  get size() {
+    return this.fastMap.size;
+  }
+  getTreeNode(t) {
+    return this.fastMap.get(t);
+  }
+  addTreeNode(t, o, r) {
+    let n = this.fastMap.get(o != null ? o : null), a = new se({
+      scopeRef: t
+    });
+    n.addChild(a), a.parent = n, this.fastMap.set(t, a), r && (a.nodeToRestore = r);
+  }
+  addNode(t) {
+    this.fastMap.set(t.scopeRef, t);
+  }
+  removeTreeNode(t) {
+    if (t === null)
+      return;
+    let o = this.fastMap.get(t), r = o.parent;
+    for (let a of this.traverse())
+      a !== o && o.nodeToRestore && a.nodeToRestore && o.scopeRef.current && w(a.nodeToRestore, o.scopeRef.current) && (a.nodeToRestore = o.nodeToRestore);
+    let n = o.children;
+    r.removeChild(o), n.size > 0 && n.forEach((a) => r.addChild(a)), this.fastMap.delete(o.scopeRef);
+  }
+  *traverse(t = this.root) {
+    if (t.scopeRef != null && (yield t), t.children.size > 0)
+      for (let o of t.children)
+        yield* this.traverse(o);
+  }
+  clone() {
+    let t = new pe();
+    for (let o of this.traverse())
+      t.addTreeNode(o.scopeRef, o.parent.scopeRef, o.nodeToRestore);
+    return t;
+  }
+  constructor() {
+    ae(this, "fastMap", /* @__PURE__ */ new Map()), this.root = new se({
+      scopeRef: null
+    }), this.fastMap.set(null, this.root);
+  }
+}
+class se {
+  addChild(t) {
+    this.children.add(t), t.parent = this;
+  }
+  removeChild(t) {
+    this.children.delete(t), t.parent = void 0;
+  }
+  constructor(t) {
+    ae(this, "children", /* @__PURE__ */ new Set()), ae(this, "contain", !1), this.scopeRef = t.scopeRef;
+  }
+}
+let h = new pe();
+const Jt = /* @__PURE__ */ new WeakMap(), P = [];
+function Qt(e, t) {
+  let { onClose: o, shouldCloseOnBlur: r, isOpen: n, isDismissable: a = !1, isKeyboardDismissDisabled: l = !1, shouldCloseOnInteractOutside: i } = e;
+  T(() => (n && P.push(t), () => {
+    let p = P.indexOf(t);
+    p >= 0 && P.splice(p, 1);
+  }), [
+    n,
+    t
+  ]);
+  let s = () => {
+    P[P.length - 1] === t && o && o();
+  }, u = (p) => {
+    (!i || i(p.target)) && P[P.length - 1] === t && (p.stopPropagation(), p.preventDefault());
+  }, c = (p) => {
+    (!i || i(p.target)) && (P[P.length - 1] === t && (p.stopPropagation(), p.preventDefault()), s());
+  }, f = (p) => {
+    p.key === "Escape" && !l && (p.stopPropagation(), p.preventDefault(), s());
+  };
+  Wt({
+    ref: t,
+    onInteractOutside: a ? c : null,
+    onInteractOutsideStart: u
+  });
+  let { focusWithinProps: m } = At({
+    isDisabled: !r,
+    onBlurWithin: (p) => {
+      p.relatedTarget && jt(p.relatedTarget) || (!i || i(p.relatedTarget)) && o();
+    }
+  }), b = (p) => {
+    p.target === p.currentTarget && p.preventDefault();
+  };
+  return {
+    overlayProps: {
+      onKeyDown: f,
+      ...m
+    },
+    underlayProps: {
+      onPointerDown: b
+    }
+  };
+}
+function Zt(e, t, o) {
+  let { type: r } = e, { isOpen: n } = t;
+  T(() => {
+    o && o.current && Jt.set(o.current, t.close);
+  });
+  let a;
+  r === "menu" ? a = !0 : r === "listbox" && (a = "listbox");
+  let l = Oe();
+  return {
+    triggerProps: {
+      "aria-haspopup": a,
+      "aria-expanded": n,
+      "aria-controls": n ? l : null,
+      onPress: t.toggle
+    },
+    overlayProps: {
+      id: l
+    }
+  };
+}
+const te = typeof window < "u" && window.visualViewport, eo = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+let V = 0, oe;
+function to(e = {}) {
+  let { isDisabled: t } = e;
+  E(() => {
+    if (!t)
+      return V++, V === 1 && (kt() ? oe = ro() : oe = oo()), () => {
+        V--, V === 0 && oe();
+      };
+  }, [
+    t
+  ]);
+}
+function oo() {
+  return j(I(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), I(document.documentElement, "overflow", "hidden"));
+}
+function ro() {
+  let e, t = 0, o = (f) => {
+    e = De(f.target), !(e === document.documentElement && e === document.body) && (t = f.changedTouches[0].pageY);
+  }, r = (f) => {
+    if (e === document.documentElement || e === document.body) {
+      f.preventDefault();
+      return;
+    }
+    let m = f.changedTouches[0].pageY, b = e.scrollTop, p = e.scrollHeight - e.clientHeight;
+    (b <= 0 && m > t || b >= p && m < t) && f.preventDefault(), t = m;
+  }, n = (f) => {
+    let m = f.target;
+    xe(m) && m !== document.activeElement && (f.preventDefault(), m.style.transform = "translateY(-2000px)", m.focus(), requestAnimationFrame(() => {
+      m.style.transform = "";
+    }));
+  }, a = (f) => {
+    let m = f.target;
+    xe(m) && (m.style.transform = "translateY(-2000px)", requestAnimationFrame(() => {
+      m.style.transform = "", te && (te.height < window.innerHeight ? requestAnimationFrame(() => {
+        Te(m);
+      }) : te.addEventListener("resize", () => Te(m), {
+        once: !0
+      }));
+    }));
+  }, l = () => {
+    window.scrollTo(0, 0);
+  }, i = window.pageXOffset, s = window.pageYOffset, u = j(I(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), I(document.documentElement, "overflow", "hidden"), I(document.body, "marginTop", `-${s}px`));
+  window.scrollTo(0, 0);
+  let c = j(O(document, "touchstart", o, {
+    passive: !1,
+    capture: !0
+  }), O(document, "touchmove", r, {
+    passive: !1,
+    capture: !0
+  }), O(document, "touchend", n, {
+    passive: !1,
+    capture: !0
+  }), O(document, "focus", a, !0), O(window, "scroll", l));
+  return () => {
+    u(), c(), window.scrollTo(i, s);
+  };
+}
+function I(e, t, o) {
+  let r = e.style[t];
+  return e.style[t] = o, () => {
+    e.style[t] = r;
+  };
+}
+function O(e, t, o, r) {
+  return e.addEventListener(t, o, r), () => {
+    e.removeEventListener(t, o, r);
+  };
+}
+function Te(e) {
+  let t = document.scrollingElement || document.documentElement;
+  for (; e && e !== t; ) {
+    let o = De(e);
+    if (o !== document.documentElement && o !== document.body && o !== e) {
+      let r = o.getBoundingClientRect().top, n = e.getBoundingClientRect().top;
+      n > r + e.clientHeight && (o.scrollTop += n - r);
+    }
+    e = o.parentElement;
+  }
+}
+function xe(e) {
+  return e instanceof HTMLInputElement && !eo.has(e.type) || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable;
+}
+let D = /* @__PURE__ */ new WeakMap(), M = [];
+function no(e, t = document.body) {
+  let o = new Set(e), r = /* @__PURE__ */ new Set(), n = (s) => {
+    for (let m of s.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))
+      o.add(m);
+    let u = (m) => {
+      if (o.has(m) || r.has(m.parentElement) && m.parentElement.getAttribute("role") !== "row")
+        return NodeFilter.FILTER_REJECT;
+      for (let b of o)
+        if (m.contains(b))
+          return NodeFilter.FILTER_SKIP;
+      return NodeFilter.FILTER_ACCEPT;
+    }, c = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: u
+    }), f = u(s);
+    if (f === NodeFilter.FILTER_ACCEPT && a(s), f !== NodeFilter.FILTER_REJECT) {
+      let m = c.nextNode();
+      for (; m != null; )
+        a(m), m = c.nextNode();
+    }
+  }, a = (s) => {
+    var u;
+    let c = (u = D.get(s)) !== null && u !== void 0 ? u : 0;
+    s.getAttribute("aria-hidden") === "true" && c === 0 || (c === 0 && s.setAttribute("aria-hidden", "true"), r.add(s), D.set(s, c + 1));
+  };
+  M.length && M[M.length - 1].disconnect(), n(t);
+  let l = new MutationObserver((s) => {
+    for (let u of s)
+      if (!(u.type !== "childList" || u.addedNodes.length === 0) && ![
+        ...o,
+        ...r
+      ].some((c) => c.contains(u.target))) {
+        for (let c of u.removedNodes)
+          c instanceof Element && (o.delete(c), r.delete(c));
+        for (let c of u.addedNodes)
+          (c instanceof HTMLElement || c instanceof SVGElement) && (c.dataset.liveAnnouncer === "true" || c.dataset.reactAriaTopLayer === "true") ? o.add(c) : c instanceof Element && n(c);
+      }
+  });
+  l.observe(t, {
+    childList: !0,
+    subtree: !0
+  });
+  let i = {
+    observe() {
+      l.observe(t, {
+        childList: !0,
+        subtree: !0
+      });
+    },
+    disconnect() {
+      l.disconnect();
+    }
+  };
+  return M.push(i), () => {
+    l.disconnect();
+    for (let s of r) {
+      let u = D.get(s);
+      u === 1 ? (s.removeAttribute("aria-hidden"), D.delete(s)) : D.set(s, u - 1);
+    }
+    i === M[M.length - 1] ? (M.pop(), M.length && M[M.length - 1].observe()) : M.splice(M.indexOf(i), 1);
+  };
+}
+const ze = /* @__PURE__ */ y.createContext(null);
+function ao(e) {
+  let t = st(), { portalContainer: o = t ? null : document.body } = e, [r, n] = X(!1), a = K(() => ({
+    contain: r,
+    setContain: n
+  }), [
+    r,
+    n
+  ]);
+  if (!o)
+    return null;
+  let l = /* @__PURE__ */ y.createElement(ze.Provider, {
+    value: a
+  }, /* @__PURE__ */ y.createElement(Rt, {
+    restoreFocus: !0,
+    contain: r
+  }, e.children));
+  return /* @__PURE__ */ rt.createPortal(l, o);
+}
+function qe() {
+  let e = A(ze), t = e == null ? void 0 : e.setContain;
+  E(() => {
+    t == null || t(!0);
+  }, [
+    t
+  ]);
+}
+function lo(e, t, o) {
+  let { overlayProps: r, underlayProps: n } = Qt({
+    ...e,
+    isOpen: t.isOpen,
+    onClose: t.close
+  }, o);
+  return to({
+    isDisabled: !t.isOpen
+  }), qe(), T(() => {
+    if (t.isOpen)
+      return no([
+        o.current
+      ]);
+  }, [
+    t.isOpen,
+    o
+  ]), {
+    modalProps: pt(r),
+    underlayProps: n
+  };
+}
+function io(e, t) {
+  let { role: o = "dialog" } = e, r = mt();
+  r = e["aria-label"] ? void 0 : r;
+  let n = $(!1);
+  return T(() => {
+    if (t.current && !t.current.contains(document.activeElement)) {
+      ie(t.current);
+      let a = setTimeout(() => {
+        document.activeElement === t.current && (n.current = !0, t.current.blur(), ie(t.current), n.current = !1);
+      }, 500);
+      return () => {
+        clearTimeout(a);
+      };
+    }
+  }, [
+    t
+  ]), qe(), {
+    dialogProps: {
+      ...vt(e, {
+        labelable: !0
+      }),
+      role: o,
+      tabIndex: -1,
+      "aria-labelledby": e["aria-labelledby"] || r,
+      onBlur: (a) => {
+        n.current && a.stopPropagation();
+      }
+    },
+    titleProps: {
+      id: r
+    }
+  };
+}
+function so(e, t, o) {
+  return t in e ? Object.defineProperty(e, t, {
+    value: o,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = o, e;
+}
+function Fe(e, t) {
+  var o = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    t && (r = r.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(e, n).enumerable;
+    })), o.push.apply(o, r);
+  }
+  return o;
+}
+function Se(e) {
+  for (var t = 1; t < arguments.length; t++) {
+    var o = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? Fe(Object(o), !0).forEach(function(r) {
+      so(e, r, o[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : Fe(Object(o)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(o, r));
+    });
+  }
+  return e;
+}
+var uo = (e, t, o) => {
+  for (var r of Object.keys(e)) {
+    var n;
+    if (e[r] !== ((n = t[r]) !== null && n !== void 0 ? n : o[r]))
+      return !1;
+  }
+  return !0;
+}, Re = (e) => (t) => {
+  var o = e.defaultClassName, r = Se(Se({}, e.defaultVariants), t);
+  for (var n in r) {
+    var a, l = (a = r[n]) !== null && a !== void 0 ? a : e.defaultVariants[n];
+    if (l != null) {
+      var i = l;
+      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
+      var s = e.variantClassNames[n][i];
+      s && (o += " " + s);
+    }
+  }
+  for (var [u, c] of e.compoundVariants)
+    uo(u, r, e.defaultVariants) && (o += " " + c);
+  return o;
+}, co = "_3moto2o", mo = "_3moto2q", po = "_3moto2r", He = "_3moto2p", fo = Re({ defaultClassName: "_3moto20", variantClassNames: { kind: { informational: "_3moto21", delete: "_3moto22", failure: "_3moto23", success: "_3moto24", warning: "_3moto25", successWithFailures: "_3moto26", form: "_3moto27" }, size: { sm: "_3moto28", md: "_3moto29", lg: "_3moto2a", xl: "_3moto2b" }, fullHeight: { true: "_3moto2c", false: "_3moto2d" } }, defaultVariants: {}, compoundVariants: [] }), go = "_3moto2n", bo = Re({ defaultClassName: "_3moto2e", variantClassNames: { kind: { form: "_3moto2f", delete: "_3moto2g", failure: "_3moto2h", informational: "_3moto2i", success: "_3moto2j", warning: "_3moto2k", successWithFailures: "_3moto2l" } }, defaultVariants: {}, compoundVariants: [] }), vo = "_3moto2m", ho = "_3moto2s";
+function Ve({
+  children: e,
+  className: t = "",
+  ...o
+}) {
+  return /* @__PURE__ */ d.createElement("div", {
+    className: re(He, t),
+    ...o
+  }, e);
+}
+Be.set(Ve, { name: "ModalFooter" });
+const Le = Object.freeze({
+  form: "pencil",
+  delete: "trash",
+  failure: "status-error",
+  informational: "info-circle",
+  success: "status-ok",
+  successWithFailures: "status-warning",
+  warning: "status-warning"
+});
+function $o({
+  children: e,
+  className: t,
+  "data-testid": o,
+  kind: r = "informational",
+  onBlur: n,
+  onFocus: a,
+  overlayProps: l,
+  size: i = "sm",
+  state: s,
+  title: u,
+  dismissable: c = !0,
+  onClose: f,
+  fullHeight: m = !1,
+  ...b
+}) {
+  const p = d.useRef(null), { modalProps: N, underlayProps: z } = lo(
+    {
+      isDismissable: c,
+      isKeyboardDismissDisabled: !c,
+      ...b
+    },
+    s,
+    p
+  ), { dialogProps: J, titleProps: _e } = io(b, p), je = ve(N.onFocus, J.onFocus, a), Ue = ve(N.onBlur, J.onBlur, n), { t: Ge } = d.useContext(Qe), Ye = Ze({ "data-testid": o }), [Q, Xe] = et(
+    e,
+    [{ type: Ve }]
+  );
+  function fe() {
+    f && typeof f == "function" && f(), s.close();
+  }
+  const ge = function() {
+    return c ? /* @__PURE__ */ d.createElement(he, {
+      "aria-label": "Close",
+      onClick: fe,
+      kind: "icon",
+      icon: "x",
+      className: mo
+    }) : null;
+  }, Je = tt(Xe, (be) => be.type === ge ? [{ className: re(be.props.classname, po) }] : []);
+  return /* @__PURE__ */ d.createElement(ao, null, /* @__PURE__ */ d.createElement("div", {
+    className: ho,
+    ...z,
+    ...b
+  }, /* @__PURE__ */ d.createElement("div", {
+    ...N,
+    ...J,
+    ...l,
+    onFocus: je,
+    onBlur: Ue,
+    ...Ye("dialog"),
+    ref: p,
+    className: re(fo({ kind: r, size: i, fullHeight: m }), t)
+  }, /* @__PURE__ */ d.createElement("div", {
+    ..._e,
+    className: bo({ kind: r })
+  }, r && /* @__PURE__ */ d.createElement(ot, {
+    icon: Le[r] || Le.informational,
+    className: go
+  }), /* @__PURE__ */ d.createElement("div", {
+    className: vo
+  }, Z(u, s.close)), /* @__PURE__ */ d.createElement(ge, null)), /* @__PURE__ */ d.createElement("div", {
+    className: co
+  }, Z(Je, s.close)), Q && Q.length > 0 ? /* @__PURE__ */ d.createElement(d.Fragment, null, Z(Q, s.close)) : /* @__PURE__ */ d.createElement("div", {
+    className: He
+  }, /* @__PURE__ */ d.createElement(he, {
+    kind: "key",
+    onClick: fe
+  }, Ge("design-system:modal.defaultButtonLabel"))))));
+}
+function Ke(e) {
+  return e.state.isOpen ? /* @__PURE__ */ d.createElement($o, {
+    ...e
+  }, e.children) : /* @__PURE__ */ d.createElement(d.Fragment, null);
+}
+Be.set(Ke, {
+  name: "Modal",
+  props: {
+    dismissable: { type: "boolean", default: "true" },
+    fullHeight: { type: "boolean", default: "false" },
+    kind: { type: "ModalKind", default: "informational" },
+    onBlur: { type: "() => void" },
+    onClose: { type: "() => void" },
+    onFocus: { type: "() => void" },
+    size: { type: "ModalSize", default: "sm" },
+    title: { type: "string" }
+  }
+});
+function wo(e) {
+  let [t, o] = nt(e.isOpen, e.defaultOpen || !1, e.onOpenChange);
+  return {
+    isOpen: t,
+    setOpen: o,
+    open() {
+      o(!0);
+    },
+    close() {
+      o(!1);
+    },
+    toggle() {
+      o(!t);
+    }
+  };
+}
+function xo(e = {}) {
+  const t = wo(e), o = $(null), { triggerProps: r, overlayProps: n } = Zt(
+    { type: "dialog" },
+    t,
+    o
+  ), {
+    onPress: a,
+    ...l
+  } = r;
+  return {
+    triggerProps: {
+      ...l,
+      onClick: a,
+      ref: o
+    },
+    modalState: t,
+    modalProps: { overlayProps: n, state: t }
+  };
+}
+const Eo = {
+  description: () => /* @__PURE__ */ d.createElement("p", null, "Modals are overlays on a page that focus a user\u2019s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),
+  components: [Ke],
+  examples: {
+    general: {
+      label: "Usage",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("h5", null, "Use a Modal:"), /* @__PURE__ */ d.createElement("ul", null, /* @__PURE__ */ d.createElement("li", null, "When the user needs to confirm a basic decision, such as deleting a record."), /* @__PURE__ */ d.createElement("li", null, "When important information needs to be displayed to the user before continuing."), /* @__PURE__ */ d.createElement("li", null, "When a simple selection, such as a single form input, is required before proceeding.")), /* @__PURE__ */ d.createElement("h5", null, "Avoid a Modal:"), /* @__PURE__ */ d.createElement("ul", null, /* @__PURE__ */ d.createElement("li", null, "When a complex form is required. Use a ", /* @__PURE__ */ d.createElement(e, {
+        to: "focused-task"
+      }, "Focused Task View"), " instead."), /* @__PURE__ */ d.createElement("li", null, "When sharing non-critical or tertiary information. Use a ", /* @__PURE__ */ d.createElement(e, {
+        to: "growlers"
+      }, "Growler"), " instead.")))
+    },
+    implementation: {
+      label: "Close Button",
+      description: () => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("h5", null, "Close Button and Modal dismissiability"), /* @__PURE__ */ d.createElement("p", null, "Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding."), /* @__PURE__ */ d.createElement("p", null, "The close button is included by default and omitted when the prop ", /* @__PURE__ */ d.createElement("code", null, "dismissable"), " is set to ", /* @__PURE__ */ d.createElement("strong", null, "false"), "."), /* @__PURE__ */ d.createElement("p", null, "Setting the ", /* @__PURE__ */ d.createElement("code", null, "dismissable"), " prop to false also prevents dismissing the modal by clicking outside of the modal or by using the", " ", /* @__PURE__ */ d.createElement("strong", null, "escape"), " key.")),
+      examples: {
+        basic: {
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              function secondaryAction() {
+                console.info("Secondary action invoked");
+                modalState.close();
+              }
+              function primaryAction() {
+                console.info("Primary action invoked");
+                modalState.close();
+              }
+              return (
+                <>
+                  <Button data-testid="non-dismissable-btn" kind="default" {...triggerProps}>Trigger non-dismissable modal</Button>
+                  <Modal 
+                    {...modalProps}
+                    title="Foo" 
+                    dismissable={false}
+                    data-testid="non-dismissable"
+                    >
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  <ModalFooter>
+                    <Button onClick={secondaryAction} className={sprinkles({ mr: "xs" })}>Secondary Action</Button>
+                    <Button kind="key" onClick={primaryAction}>Primary Action</Button>
+                  </ModalFooter>
+                  </Modal>
+                </>
+              )
+            }
+        `
+        }
+      }
+    },
+    sizing: {
+      label: "Sizing",
+      description: `There are 4 sizes of Modal:
+            Small (4 columns), Medium (6 columns),
+            and Large (8 columns), XLarge (12 columns).
+            Use the size that best fits the content
+            that needs to be in the Modal, erring
+            towards the smallest size whenever possible.`
+    },
+    hooks: {
+      label: "Using Hooks",
+      description: () => /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("h5", null, "Using the hook"), /* @__PURE__ */ d.createElement("p", null, "To use any modals, you must call the ", /* @__PURE__ */ d.createElement("code", null, "useModal"), " hook. Optional arguments for this hook include:"), /* @__PURE__ */ d.createElement("dl", null, /* @__PURE__ */ d.createElement("dt", null, /* @__PURE__ */ d.createElement("code", null, "isOpen"), ": boolean"), /* @__PURE__ */ d.createElement("dd", null, "Whether the overlay is open by default (controlled)"), /* @__PURE__ */ d.createElement("dt", null, /* @__PURE__ */ d.createElement("code", null, "defaultOpen"), ": boolean"), /* @__PURE__ */ d.createElement("dd", null, "Whether the overlay is open by default (uncontrolled)."), /* @__PURE__ */ d.createElement("dt", null, /* @__PURE__ */ d.createElement("code", null, "onOpenChange"), ": function"), /* @__PURE__ */ d.createElement("dd", null, "Handler that is called when the overlay's open state changes.", /* @__PURE__ */ d.createElement("code", null, "(isOpen: boolean)  => void"))), /* @__PURE__ */ d.createElement("h5", null, "Modal Props,  Modal State, and Trigger Props"), /* @__PURE__ */ d.createElement("p", null, "The ", /* @__PURE__ */ d.createElement("code", null, "useModal"), " returns an object with ", /* @__PURE__ */ d.createElement("code", null, "modalProps"), ", ", /* @__PURE__ */ d.createElement("code", null, "modalState"), " and ", /* @__PURE__ */ d.createElement("code", null, "triggerProps")), /* @__PURE__ */ d.createElement("p", null, "The ", /* @__PURE__ */ d.createElement("code", null, "triggerProps"), " need to be spread on the element that triggers the modal."), /* @__PURE__ */ d.createElement("p", null, "The ", /* @__PURE__ */ d.createElement("code", null, "modalState"), " object (which is also included in ", /* @__PURE__ */ d.createElement("code", null, "modalProps"), ") allows programmatic access to the state of the modal. This includes a read only ", /* @__PURE__ */ d.createElement("code", null, "isOpen"), " property, a ", /* @__PURE__ */ d.createElement("code", null, "setOpen(isOpen: boolean)"), " method which can be use to set whether the overlay is open, an ", /* @__PURE__ */ d.createElement("code", null, "open()"), " method which open the overlay, a ", /* @__PURE__ */ d.createElement("code", null, "close()"), " method which closes the overlay and a ", /* @__PURE__ */ d.createElement("code", null, "toggle()"), " method that toggles the overlay's visiblity."), /* @__PURE__ */ d.createElement("p", null, "The ", /* @__PURE__ */ d.createElement("code", null, "modalProps"), " should be spread on the actual ", /* @__PURE__ */ d.createElement("code", null, "Modal"), " component."), /* @__PURE__ */ d.createElement("p", null, "Please refer to the examples to see its implementation"))
+    },
+    informational: {
+      label: "Informational",
+      description: `Use Informational Modals to share impactful information with the user,
+            such as telling them when an app will be down for maintenance.`,
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+
+              return (
+                <>
+                  <Button data-testid="small-info-btn" kind="default" {...triggerProps}>Trigger small informational modal</Button>
+                  <Modal
+                    {...modalProps}
+                    title="Foo" 
+                    kind="informational" 
+                    size="sm"
+                    data-testid="small-info"
+                    >
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium informational modal</Button>
+                  <Modal 
+                    {...modalProps}  
+                    title="Foo" 
+                    kind="informational" 
+                    size="md"
+                    >
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large information modal</Button>
+                  <Modal 
+                    {...modalProps}
+                    title="Foo" 
+                    kind="informational" 
+                    size="lg"
+                    >
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large information trigger</Button>
+                  <Modal
+                    {...modalProps} 
+                    title="Foo"
+                    kind="informational"
+                    isDismissable={true}
+                    size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    delete: {
+      label: "Delete",
+      description: `Use Delete Modals to have the user confirm they want to
+            continue with a destructive action. Be clear on what will happen if they continue.`,
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger small delete modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="delete"  size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium delete modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="delete"  size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large delete modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="delete"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large delete modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="delete"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    failure: {
+      label: "Failure",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger small failure modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="failure"  size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium failure modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="failure"  size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large failure modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="failure"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large failure modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="failure"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    success: {
+      label: "Success",
+      description: "Use Success Modals to confirm that an action has been completed successfully.",
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                <Button kind="default" {...triggerProps}>Trigger small success modal</Button>
+                <Modal {...modalProps} title="Foo" kind="success"  size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium success modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="success"  size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large success modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="success"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large success modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="success"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    successWithFailtures: {
+      label: "Success with Failures",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger small success with failures modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="successWithFailures"  size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium success with failures modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="successWithFailures"  size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large success with failures modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="successWithFailures"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large success with failures modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="successWithFailures"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    warning: {
+      label: "Warning",
+      description: "Use Warning Modals to warn of problems that may occur as a result of taking an action. When writing the message, be clear about what will happen if the user continues on the path.",
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger small warning modal</Button>
+                  <Modal
+                    {...modalProps}
+                    title="Foo"
+                    kind="warning"
+                    isDismissable={true}
+                    size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium warning modal</Button>
+                  <Modal
+                    {...modalProps}
+                    title="Foo"
+                    kind="warning"
+                    size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large warning modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="warning"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra large warning modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="warning"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    form: {
+      label: "Form",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      examples: {
+        small: {
+          description: "Small",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger small form modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="form"  size="sm">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        medium: {
+          description: "Medium",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger medium form modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="form"  size="md">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        large: {
+          description: "Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger large form modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="form"  size="lg">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        },
+        xlarge: {
+          description: "Extra Large",
+          react: g`
+          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { sprinkles } from "@sps-woodland/tokens";
+          import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+
+              const { modalProps, triggerProps, modalState } = useModal();
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Trigger extra largeform modal</Button>
+                  <Modal {...modalProps} title="Foo" kind="form"  size="xl">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                  </Modal>
+                </>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, Fo = {
+  Modals: Eo
+};
+export {
+  Fo as MANIFEST,
+  Ke as Modal,
+  Ve as ModalFooter,
+  Le as ModalIcons,
+  xo as useModal
+};