@sps-woodland/modal 8.0.0-rc1

package/lib/index.cjs.js

@@ -0,0 +1,562 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("@sps-woodland/core"),pe=require("@sps-woodland/buttons"),f=require("react"),Ke=require("react-dom"),b=require("@spscommerce/utils"),Te=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function je(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const P=Te(f),d=je(f),Ue=Te(Ke);function Ge(e,t,o){let[n,r]=f.useState(e||t),a=f.useRef(e!==void 0),l=a.current,i=e!==void 0,s=f.useRef(n);l!==i&&console.warn(`WARN: A component changed from ${l?"controlled":"uncontrolled"} to ${i?"controlled":"uncontrolled"}.`),a.current=i;let u=f.useCallback((c,...g)=>{let m=(v,...p)=>{o&&(Object.is(s.current,v)||o(v,...p)),i||(s.current=v)};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"),r((p,...C)=>{let I=c(i?s.current:p,...C);return m(I,...g),i?p:I})):(i||r(c),m(c,...g))},[i,o]);return i?s.current=e:e=n,[e,u]}const xe={prefix:String(Math.round(Math.random()*1e10)),current:0,isSSR:!1},re=P.default.createContext(xe);let Ye=Boolean(typeof window<"u"&&window.document&&window.document.createElement),Y=new WeakMap;function Xe(e=!1){let t=f.useContext(re),o=f.useRef(null);if(o.current===null&&!e){var n,r;let a=(n=P.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)===null||n===void 0||(r=n.ReactCurrentOwner)===null||r===void 0?void 0:r.current;if(a){let l=Y.get(a);l==null?Y.set(a,{id:t.current,state:a.memoizedState}):a.memoizedState!==l.state&&(t.current=l.id,Y.delete(a))}o.current=++t.current}return o.current}function Je(e){let t=f.useContext(re);t===xe&&!Ye&&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=Xe(!!e);return e||`react-aria${t.prefix}-${o}`}function Qe(){return f.useContext(re).isSSR}function Fe(e){var t,o,n="";if(typeof e=="string"||typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=Fe(e[t]))&&(n&&(n+=" "),n+=o);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function Ze(){for(var e,t,o=0,n="";o<arguments.length;)(e=arguments[o++])&&(t=Fe(e))&&(n&&(n+=" "),n+=t);return n}const M=typeof window<"u"?P.default.useLayoutEffect:()=>{};function et(e){let[t,o]=f.useState(e),n=f.useRef(t),r=f.useRef(null);n.current=t;let a=f.useRef(null);a.current=()=>{let i=r.current.next();if(i.done){r.current=null;return}t===i.value?a.current():o(i.value)},M(()=>{r.current&&a.current()});let l=f.useCallback(i=>{r.current=i(n.current),a.current()},[r,a]);return[t,l]}let H=new Map;function Se(e){let[t,o]=f.useState(e),n=f.useRef(null),r=Je(t),a=f.useCallback(l=>{n.current=l},[]);return H.set(r,a),M(()=>{let l=r;return()=>{H.delete(l)}},[r]),f.useEffect(()=>{let l=n.current;l&&(n.current=null,o(l))}),r}function tt(e,t){if(e===t)return e;let o=H.get(e);if(o)return o(t),t;let n=H.get(t);return n?(n(e),e):t}function ot(e=[]){let t=Se(),[o,n]=et(t),r=f.useCallback(()=>{n(function*(){yield t,yield document.getElementById(t)?t:void 0})},[t,n]);return M(r,[t,r,...e]),o}function _(...e){return(...t)=>{for(let o of e)typeof o=="function"&&o(...t)}}function nt(...e){let t={...e[0]};for(let o=1;o<e.length;o++){let n=e[o];for(let r in n){let a=t[r],l=n[r];typeof a=="function"&&typeof l=="function"&&r[0]==="o"&&r[1]==="n"&&r.charCodeAt(2)>=65&&r.charCodeAt(2)<=90?t[r]=_(a,l):(r==="className"||r==="UNSAFE_className")&&typeof a=="string"&&typeof l=="string"?t[r]=Ze(a,l):r==="id"&&a&&l?t.id=tt(a,l):t[r]=l!==void 0?l:a}}return t}const rt=new Set(["id"]),at=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),lt=/^(data-.*)$/;function it(e,t={}){let{labelable:o,propNames:n}=t,r={};for(const a in e)Object.prototype.hasOwnProperty.call(e,a)&&(rt.has(a)||o&&at.has(a)||(n==null?void 0:n.has(a))||lt.test(a))&&(r[a]=e[a]);return r}function ge(e){if(st())e.focus({preventScroll:!0});else{let t=dt(e);e.focus(),ut(t)}}let A=null;function st(){if(A==null){A=!1;try{var e=document.createElement("div");e.focus({get preventScroll(){return A=!0,!0}})}catch{}}return A}function dt(e){for(var t=e.parentNode,o=[],n=document.scrollingElement||document.documentElement;t instanceof HTMLElement&&t!==n;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&o.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return n instanceof HTMLElement&&o.push({element:n,scrollTop:n.scrollTop,scrollLeft:n.scrollLeft}),o}function ut(e){for(let{element:t,scrollTop:o,scrollLeft:n}of e)t.scrollTop=o,t.scrollLeft=n}let B=new Map,Q=new Set;function be(){if(typeof window>"u")return;let e=o=>{let n=B.get(o.target);n||(n=new Set,B.set(o.target,n),o.target.addEventListener("transitioncancel",t)),n.add(o.propertyName)},t=o=>{let n=B.get(o.target);if(!!n&&(n.delete(o.propertyName),n.size===0&&(o.target.removeEventListener("transitioncancel",t),B.delete(o.target)),B.size===0)){for(let r of Q)r();Q.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?be():document.addEventListener("DOMContentLoaded",be));function ct(e){requestAnimationFrame(()=>{B.size===0?e():Q.add(e)})}function Le(e){for(ve(e)&&(e=e.parentElement);e&&!ve(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}function ve(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 ae(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 Be(){return ae(/^Mac/i)}function ft(){return ae(/^iPhone/i)}function pt(){return ae(/^iPad/i)||Be()&&navigator.maxTouchPoints>1}function gt(){return ft()||pt()}function bt(){return mt(/Android/i)}function vt(e){return e.mozInputSource===0&&e.isTrusted?!0:bt()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function Z(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}const ht=P.default.createContext(null);ht.displayName="PressResponderContext";class $t{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 wt(e){let t=f.useRef({isFocused:!1,onBlur:e,observer:null});return t.current.onBlur=e,M(()=>{const o=t.current;return()=>{o.observer&&(o.observer.disconnect(),o.observer=null)}},[]),f.useCallback(o=>{if(o.target instanceof HTMLButtonElement||o.target instanceof HTMLInputElement||o.target instanceof HTMLTextAreaElement||o.target instanceof HTMLSelectElement){t.current.isFocused=!0;let n=o.target,r=a=>{var l,i;t.current.isFocused=!1,n.disabled&&((i=(l=t.current).onBlur)===null||i===void 0||i.call(l,new $t("blur",a))),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};n.addEventListener("focusout",r,{once:!0}),t.current.observer=new MutationObserver(()=>{t.current.isFocused&&n.disabled&&(t.current.observer.disconnect(),n.dispatchEvent(new FocusEvent("blur")),n.dispatchEvent(new FocusEvent("focusout",{bubbles:!0})))}),t.current.observer.observe(n,{attributes:!0,attributeFilter:["disabled"]})}},[])}let R=null,Et=new Set,he=!1,S=!1,ee=!1;function le(e,t){for(let o of Et)o(e,t)}function Mt(e){return!(e.metaKey||!Be()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function $e(e){S=!0,Mt(e)&&(R="keyboard",le("keyboard",e))}function L(e){R="pointer",(e.type==="mousedown"||e.type==="pointerdown")&&(S=!0,le("pointer",e))}function yt(e){vt(e)&&(S=!0,R="virtual")}function Pt(e){e.target===window||e.target===document||(!S&&!ee&&(R="virtual",le("virtual",e)),S=!1,ee=!1)}function kt(){S=!1,ee=!0}function we(){if(typeof window>"u"||he)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){S=!0,e.apply(this,arguments)},document.addEventListener("keydown",$e,!0),document.addEventListener("keyup",$e,!0),document.addEventListener("click",yt,!0),window.addEventListener("focus",Pt,!0),window.addEventListener("blur",kt,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",L,!0),document.addEventListener("pointermove",L,!0),document.addEventListener("pointerup",L,!0)):(document.addEventListener("mousedown",L,!0),document.addEventListener("mousemove",L,!0),document.addEventListener("mouseup",L,!0)),he=!0}typeof document<"u"&&(document.readyState!=="loading"?we():document.addEventListener("DOMContentLoaded",we));function Tt(){return R}function xt(e){let{isDisabled:t,onBlurWithin:o,onFocusWithin:n,onFocusWithinChange:r}=e,a=f.useRef({isFocusWithin:!1}),l=f.useCallback(u=>{a.current.isFocusWithin&&!u.currentTarget.contains(u.relatedTarget)&&(a.current.isFocusWithin=!1,o&&o(u),r&&r(!1))},[o,r,a]),i=wt(l),s=f.useCallback(u=>{!a.current.isFocusWithin&&document.activeElement===u.target&&(n&&n(u),r&&r(!0),a.current.isFocusWithin=!0,i(u))},[n,r,i]);return t?{focusWithinProps:{onFocus:null,onBlur:null}}:{focusWithinProps:{onFocus:s,onBlur:l}}}function Ft(e){let{ref:t,onInteractOutside:o,isDisabled:n,onInteractOutsideStart:r}=e,l=f.useRef({isPointerDown:!1,ignoreEmulatedMouseEvents:!1,onInteractOutside:o,onInteractOutsideStart:r}).current;l.onInteractOutside=o,l.onInteractOutsideStart=r,f.useEffect(()=>{if(n)return;let i=s=>{W(s,t)&&l.onInteractOutside&&(l.onInteractOutsideStart&&l.onInteractOutsideStart(s),l.isPointerDown=!0)};if(typeof PointerEvent<"u"){let s=u=>{l.isPointerDown&&l.onInteractOutside&&W(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&&W(c,t)&&l.onInteractOutside(c),l.isPointerDown=!1},u=c=>{l.ignoreEmulatedMouseEvents=!0,l.onInteractOutside&&l.isPointerDown&&W(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,n])}function W(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 te(e){if(Tt()==="virtual"){let t=document.activeElement;ct(()=>{document.activeElement===t&&document.contains(e)&&ge(e)})}else ge(e)}function St(e){if(!(e instanceof HTMLElement)&&!(e instanceof SVGElement))return!1;let{display:t,visibility:o}=e.style,n=t!=="none"&&o!=="hidden"&&o!=="collapse";if(n){const{getComputedStyle:r}=e.ownerDocument.defaultView;let{display:a,visibility:l}=r(e);n=a!=="none"&&l!=="hidden"&&l!=="collapse"}return n}function Lt(e,t){return!e.hasAttribute("hidden")&&(e.nodeName==="DETAILS"&&t&&t.nodeName!=="SUMMARY"?e.hasAttribute("open"):!0)}function Ce(e,t){return e.nodeName!=="#comment"&&St(e)&&Lt(e,t)&&(!e.parentElement||Ce(e.parentElement,e))}const Ee=P.default.createContext(null);let h=null;function Bt(e){let{children:t,contain:o,restoreFocus:n,autoFocus:r}=e,a=f.useRef(),l=f.useRef(),i=f.useRef([]),{parentNode:s}=f.useContext(Ee)||{},u=f.useMemo(()=>new oe({scopeRef:i}),[i]);M(()=>{let m=s||$.root;if($.getTreeNode(m.scopeRef)&&h&&!K(h,m.scopeRef)){let v=$.getTreeNode(h);v&&(m=v)}m.addChild(u),$.addNode(u)},[u,s]),M(()=>{let m=$.getTreeNode(i);m.contain=o},[o]),M(()=>{let m=a.current.nextSibling,v=[];for(;m&&m!==l.current;)v.push(m),m=m.nextSibling;i.current=v},[t]),At(i,n,o),Dt(i,o),zt(i,n,o),It(i,r),f.useEffect(()=>{if(i){let m=document.activeElement,v=null;if(E(m,i.current)){for(let p of $.traverse())E(m,p.scopeRef.current)&&(v=p);v===$.getTreeNode(i)&&(h=v.scopeRef)}return()=>{let p=$.getTreeNode(i).parent.scopeRef;(i===h||K(i,h))&&(!p||$.getTreeNode(p))&&(h=p),$.removeTreeNode(i)}}},[i]);let c=f.useMemo(()=>Ct(i),[]),g=f.useMemo(()=>({focusManager:c,parentNode:u}),[u,c]);return P.default.createElement(Ee.Provider,{value:g},P.default.createElement("span",{"data-focus-scope-start":!0,hidden:!0,ref:a}),t,P.default.createElement("span",{"data-focus-scope-end":!0,hidden:!0,ref:l}))}function Ct(e){return{focusNext(t={}){let o=e.current,{from:n,tabbable:r,wrap:a,accept:l}=t,i=n||document.activeElement,s=o[0].previousElementSibling,u=x(F(o),{tabbable:r,accept:l},o);u.currentNode=E(i,o)?i:s;let c=u.nextNode();return!c&&a&&(u.currentNode=s,c=u.nextNode()),c&&T(c,!0),c},focusPrevious(t={}){let o=e.current,{from:n,tabbable:r,wrap:a,accept:l}=t,i=n||document.activeElement,s=o[o.length-1].nextElementSibling,u=x(F(o),{tabbable:r,accept:l},o);u.currentNode=E(i,o)?i:s;let c=u.previousNode();return!c&&a&&(u.currentNode=s,c=u.previousNode()),c&&T(c,!0),c},focusFirst(t={}){let o=e.current,{tabbable:n,accept:r}=t,a=x(F(o),{tabbable:n,accept:r},o);a.currentNode=o[0].previousElementSibling;let l=a.nextNode();return l&&T(l,!0),l},focusLast(t={}){let o=e.current,{tabbable:n,accept:r}=t,a=x(F(o),{tabbable:n,accept:r},o);a.currentNode=o[o.length-1].nextElementSibling;let l=a.previousNode();return l&&T(l,!0),l}}}const ie=["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]"],Nt=ie.join(":not([hidden]),")+",[tabindex]:not([disabled]):not([hidden])";ie.push('[tabindex]:not([tabindex="-1"]):not([disabled])');const Ot=ie.join(':not([hidden]):not([tabindex="-1"]),');function F(e){return e[0].parentElement}function z(e){let t=$.getTreeNode(h);for(;t&&t.scopeRef!==e;){if(t.contain)return!1;t=t.parent}return!0}function Dt(e,t){let o=f.useRef(),n=f.useRef(null);M(()=>{let r=e.current;if(!t){n.current&&(cancelAnimationFrame(n.current),n.current=null);return}let a=s=>{if(s.key!=="Tab"||s.altKey||s.ctrlKey||s.metaKey||!z(e))return;let u=document.activeElement,c=e.current;if(!E(u,c))return;let g=x(F(c),{tabbable:!0},c);g.currentNode=u;let m=s.shiftKey?g.previousNode():g.nextNode();m||(g.currentNode=s.shiftKey?c[c.length-1].nextElementSibling:c[0].previousElementSibling,m=s.shiftKey?g.previousNode():g.nextNode()),s.preventDefault(),m&&T(m,!0)},l=s=>{(!h||K(h,e))&&E(s.target,e.current)?(h=e,o.current=s.target):z(e)&&!V(s.target,e)?o.current?o.current.focus():h&&j(h.current):z(e)&&(o.current=s.target)},i=s=>{n.current&&cancelAnimationFrame(n.current),n.current=requestAnimationFrame(()=>{z(e)&&!V(document.activeElement,e)&&(h=e,document.body.contains(s.target)?(o.current=s.target,o.current.focus()):h&&j(h.current))})};return document.addEventListener("keydown",a,!1),document.addEventListener("focusin",l,!1),r.forEach(s=>s.addEventListener("focusin",l,!1)),r.forEach(s=>s.addEventListener("focusout",i,!1)),()=>{document.removeEventListener("keydown",a,!1),document.removeEventListener("focusin",l,!1),r.forEach(s=>s.removeEventListener("focusin",l,!1)),r.forEach(s=>s.removeEventListener("focusout",i,!1))}},[e,t]),f.useEffect(()=>()=>{n.current&&cancelAnimationFrame(n.current)},[n])}function Ne(e){return V(e)}function E(e,t){return t.some(o=>o.contains(e))}function V(e,t=null){if(e instanceof Element&&e.closest("[data-react-aria-top-layer]"))return!0;for(let{scopeRef:o}of $.traverse($.getTreeNode(t)))if(E(e,o.current))return!0;return!1}function Rt(e){return V(e,h)}function K(e,t){var o;let n=(o=$.getTreeNode(t))===null||o===void 0?void 0:o.parent;for(;n;){if(n.scopeRef===e)return!0;n=n.parent}return!1}function T(e,t=!1){if(e!=null&&!t)try{te(e)}catch{}else if(e!=null)try{e.focus()}catch{}}function j(e,t=!0){let o=e[0].previousElementSibling,n=x(F(e),{tabbable:t},e);n.currentNode=o;let r=n.nextNode();t&&!r&&(n=x(F(e),{tabbable:!1},e),n.currentNode=o,r=n.nextNode()),T(r)}function It(e,t){const o=P.default.useRef(t);f.useEffect(()=>{o.current&&(h=e,E(document.activeElement,h.current)||j(e.current)),o.current=!1},[e])}function At(e,t,o){M(()=>{if(t||o)return;let n=e.current,r=a=>{let l=a.target;E(l,e.current)?h=e:Ne(l)||(h=null)};return document.addEventListener("focusin",r,!1),n.forEach(a=>a.addEventListener("focusin",r,!1)),()=>{document.removeEventListener("focusin",r,!1),n.forEach(a=>a.removeEventListener("focusin",r,!1))}},[e,t,o])}function Wt(e){let t=$.getTreeNode(h);for(;t&&t.scopeRef!==e;){if(t.nodeToRestore)return!1;t=t.parent}return(t==null?void 0:t.scopeRef)===e}function zt(e,t,o){const n=f.useRef(typeof document<"u"?document.activeElement:null);M(()=>{let r=e.current;if(!t||o)return;let a=()=>{(!h||K(h,e))&&(h=e)};return document.addEventListener("focusin",a,!1),r.forEach(l=>l.addEventListener("focusin",a,!1)),()=>{document.removeEventListener("focusin",a,!1),r.forEach(l=>l.removeEventListener("focusin",a,!1))}},[e,o]),M(()=>{if(!t)return;$.getTreeNode(e).nodeToRestore=n.current;let r=a=>{if(a.key!=="Tab"||a.altKey||a.ctrlKey||a.metaKey)return;let l=document.activeElement;if(!E(l,e.current))return;let i=$.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,$.getTreeNode(e).nodeToRestore=null),(!u||!E(u,e.current))&&i){s.currentNode=i;do u=a.shiftKey?s.previousNode():s.nextNode();while(E(u,e.current));a.preventDefault(),a.stopPropagation(),u?T(u,!0):Ne(i)?T(i,!0):l.blur()}};return o||document.addEventListener("keydown",r,!0),()=>{o||document.removeEventListener("keydown",r,!0);let a=$.getTreeNode(e).nodeToRestore;if(t&&a&&(E(document.activeElement,e.current)||document.activeElement===document.body&&Wt(e))){let l=$.clone();requestAnimationFrame(()=>{if(document.activeElement===document.body){let i=l.getTreeNode(e);for(;i;){if(i.nodeToRestore&&document.body.contains(i.nodeToRestore)){T(i.nodeToRestore);return}i=i.parent}for(i=l.getTreeNode(e);i;){if(i.scopeRef&&$.getTreeNode(i.scopeRef)){j(i.scopeRef.current,!0);return}i=i.parent}}})}}},[e,t,o])}function x(e,t,o){let n=t!=null&&t.tabbable?Ot:Nt,r=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(n)&&Ce(a)&&(!o||E(a,o))&&(!(t!=null&&t.accept)||t.accept(a))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});return t!=null&&t.from&&(r.currentNode=t.from),r}class se{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,o,n){let r=this.fastMap.get(o!=null?o:null),a=new oe({scopeRef:t});r.addChild(a),a.parent=r,this.fastMap.set(t,a),n&&(a.nodeToRestore=n)}addNode(t){this.fastMap.set(t.scopeRef,t)}removeTreeNode(t){if(t===null)return;let o=this.fastMap.get(t),n=o.parent;for(let a of this.traverse())a!==o&&o.nodeToRestore&&a.nodeToRestore&&o.scopeRef.current&&E(a.nodeToRestore,o.scopeRef.current)&&(a.nodeToRestore=o.nodeToRestore);let r=o.children;n.removeChild(o),r.size>0&&r.forEach(a=>n.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 se;for(let o of this.traverse())t.addTreeNode(o.scopeRef,o.parent.scopeRef,o.nodeToRestore);return t}constructor(){Z(this,"fastMap",new Map),this.root=new oe({scopeRef:null}),this.fastMap.set(null,this.root)}}class oe{addChild(t){this.children.add(t),t.parent=this}removeChild(t){this.children.delete(t),t.parent=void 0}constructor(t){Z(this,"children",new Set),Z(this,"contain",!1),this.scopeRef=t.scopeRef}}let $=new se;const qt=new WeakMap,k=[];function Ht(e,t){let{onClose:o,shouldCloseOnBlur:n,isOpen:r,isDismissable:a=!1,isKeyboardDismissDisabled:l=!1,shouldCloseOnInteractOutside:i}=e;f.useEffect(()=>(r&&k.push(t),()=>{let p=k.indexOf(t);p>=0&&k.splice(p,1)}),[r,t]);let s=()=>{k[k.length-1]===t&&o&&o()},u=p=>{(!i||i(p.target))&&k[k.length-1]===t&&(p.stopPropagation(),p.preventDefault())},c=p=>{(!i||i(p.target))&&(k[k.length-1]===t&&(p.stopPropagation(),p.preventDefault()),s())},g=p=>{p.key==="Escape"&&!l&&(p.stopPropagation(),p.preventDefault(),s())};Ft({ref:t,onInteractOutside:a?c:null,onInteractOutsideStart:u});let{focusWithinProps:m}=xt({isDisabled:!n,onBlurWithin:p=>{p.relatedTarget&&Rt(p.relatedTarget)||(!i||i(p.relatedTarget))&&o()}}),v=p=>{p.target===p.currentTarget&&p.preventDefault()};return{overlayProps:{onKeyDown:g,...m},underlayProps:{onPointerDown:v}}}function _t(e,t,o){let{type:n}=e,{isOpen:r}=t;f.useEffect(()=>{o&&o.current&&qt.set(o.current,t.close)});let a;n==="menu"?a=!0:n==="listbox"&&(a="listbox");let l=Se();return{triggerProps:{"aria-haspopup":a,"aria-expanded":r,"aria-controls":r?l:null,onPress:t.toggle},overlayProps:{id:l}}}const X=typeof window<"u"&&window.visualViewport,Vt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);let q=0,J;function Kt(e={}){let{isDisabled:t}=e;M(()=>{if(!t)return q++,q===1&&(gt()?J=Ut():J=jt()),()=>{q--,q===0&&J()}},[t])}function jt(){return _(D(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),D(document.documentElement,"overflow","hidden"))}function Ut(){let e,t=0,o=g=>{e=Le(g.target),!(e===document.documentElement&&e===document.body)&&(t=g.changedTouches[0].pageY)},n=g=>{if(e===document.documentElement||e===document.body){g.preventDefault();return}let m=g.changedTouches[0].pageY,v=e.scrollTop,p=e.scrollHeight-e.clientHeight;(v<=0&&m>t||v>=p&&m<t)&&g.preventDefault(),t=m},r=g=>{let m=g.target;ye(m)&&m!==document.activeElement&&(g.preventDefault(),m.style.transform="translateY(-2000px)",m.focus(),requestAnimationFrame(()=>{m.style.transform=""}))},a=g=>{let m=g.target;ye(m)&&(m.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{m.style.transform="",X&&(X.height<window.innerHeight?requestAnimationFrame(()=>{Me(m)}):X.addEventListener("resize",()=>Me(m),{once:!0}))}))},l=()=>{window.scrollTo(0,0)},i=window.pageXOffset,s=window.pageYOffset,u=_(D(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),D(document.documentElement,"overflow","hidden"),D(document.body,"marginTop",`-${s}px`));window.scrollTo(0,0);let c=_(N(document,"touchstart",o,{passive:!1,capture:!0}),N(document,"touchmove",n,{passive:!1,capture:!0}),N(document,"touchend",r,{passive:!1,capture:!0}),N(document,"focus",a,!0),N(window,"scroll",l));return()=>{u(),c(),window.scrollTo(i,s)}}function D(e,t,o){let n=e.style[t];return e.style[t]=o,()=>{e.style[t]=n}}function N(e,t,o,n){return e.addEventListener(t,o,n),()=>{e.removeEventListener(t,o,n)}}function Me(e){let t=document.scrollingElement||document.documentElement;for(;e&&e!==t;){let o=Le(e);if(o!==document.documentElement&&o!==document.body&&o!==e){let n=o.getBoundingClientRect().top,r=e.getBoundingClientRect().top;r>n+e.clientHeight&&(o.scrollTop+=r-n)}e=o.parentElement}}function ye(e){return e instanceof HTMLInputElement&&!Vt.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}let O=new WeakMap,y=[];function Gt(e,t=document.body){let o=new Set(e),n=new Set,r=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)||n.has(m.parentElement)&&m.parentElement.getAttribute("role")!=="row")return NodeFilter.FILTER_REJECT;for(let v of o)if(m.contains(v))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},c=document.createTreeWalker(s,NodeFilter.SHOW_ELEMENT,{acceptNode:u}),g=u(s);if(g===NodeFilter.FILTER_ACCEPT&&a(s),g!==NodeFilter.FILTER_REJECT){let m=c.nextNode();for(;m!=null;)a(m),m=c.nextNode()}},a=s=>{var u;let c=(u=O.get(s))!==null&&u!==void 0?u:0;s.getAttribute("aria-hidden")==="true"&&c===0||(c===0&&s.setAttribute("aria-hidden","true"),n.add(s),O.set(s,c+1))};y.length&&y[y.length-1].disconnect(),r(t);let l=new MutationObserver(s=>{for(let u of s)if(!(u.type!=="childList"||u.addedNodes.length===0)&&![...o,...n].some(c=>c.contains(u.target))){for(let c of u.removedNodes)c instanceof Element&&(o.delete(c),n.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&&r(c)}});l.observe(t,{childList:!0,subtree:!0});let i={observe(){l.observe(t,{childList:!0,subtree:!0})},disconnect(){l.disconnect()}};return y.push(i),()=>{l.disconnect();for(let s of n){let u=O.get(s);u===1?(s.removeAttribute("aria-hidden"),O.delete(s)):O.set(s,u-1)}i===y[y.length-1]?(y.pop(),y.length&&y[y.length-1].observe()):y.splice(y.indexOf(i),1)}}const Oe=P.default.createContext(null);function Yt(e){let t=Qe(),{portalContainer:o=t?null:document.body}=e,[n,r]=f.useState(!1),a=f.useMemo(()=>({contain:n,setContain:r}),[n,r]);if(!o)return null;let l=P.default.createElement(Oe.Provider,{value:a},P.default.createElement(Bt,{restoreFocus:!0,contain:n},e.children));return Ue.default.createPortal(l,o)}function De(){let e=f.useContext(Oe),t=e==null?void 0:e.setContain;M(()=>{t==null||t(!0)},[t])}function Xt(e,t,o){let{overlayProps:n,underlayProps:r}=Ht({...e,isOpen:t.isOpen,onClose:t.close},o);return Kt({isDisabled:!t.isOpen}),De(),f.useEffect(()=>{if(t.isOpen)return Gt([o.current])},[t.isOpen,o]),{modalProps:nt(n),underlayProps:r}}function Jt(e,t){let{role:o="dialog"}=e,n=ot();n=e["aria-label"]?void 0:n;let r=f.useRef(!1);return f.useEffect(()=>{if(t.current&&!t.current.contains(document.activeElement)){te(t.current);let a=setTimeout(()=>{document.activeElement===t.current&&(r.current=!0,t.current.blur(),te(t.current),r.current=!1)},500);return()=>{clearTimeout(a)}}},[t]),De(),{dialogProps:{...it(e,{labelable:!0}),role:o,tabIndex:-1,"aria-labelledby":e["aria-labelledby"]||n,onBlur:a=>{r.current&&a.stopPropagation()}},titleProps:{id:n}}}function Qt(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function Pe(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function ke(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?Pe(Object(o),!0).forEach(function(n){Qt(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):Pe(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var Zt=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},Re=e=>t=>{var o=e.defaultClassName,n=ke(ke({},e.defaultVariants),t);for(var r in n){var a,l=(a=n[r])!==null&&a!==void 0?a:e.defaultVariants[r];if(l!=null){var i=l;typeof i=="boolean"&&(i=i===!0?"true":"false");var s=e.variantClassNames[r][i];s&&(o+=" "+s)}}for(var[u,c]of e.compoundVariants)Zt(u,n,e.defaultVariants)&&(o+=" "+c);return o},eo="_3moto2o",to="_3moto2q",oo="_3moto2r",Ie="_3moto2p",no=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:[]}),ro="_3moto2n",ao=Re({defaultClassName:"_3moto2e",variantClassNames:{kind:{form:"_3moto2f",delete:"_3moto2g",failure:"_3moto2h",informational:"_3moto2i",success:"_3moto2j",warning:"_3moto2k",successWithFailures:"_3moto2l"}},defaultVariants:{},compoundVariants:[]}),lo="_3moto2m",io="_3moto2s";function de({children:e,className:t="",...o}){return d.createElement("div",{className:w.cl(Ie,t),...o},e)}w.Metadata.set(de,{name:"ModalFooter"});const ne=Object.freeze({form:"pencil",delete:"trash",failure:"status-error",informational:"info-circle",success:"status-ok",successWithFailures:"status-warning",warning:"status-warning"});function so({children:e,className:t,"data-testid":o,kind:n="informational",onBlur:r,onFocus:a,overlayProps:l,size:i="sm",state:s,title:u,dismissable:c=!0,onClose:g,fullHeight:m=!1,...v}){const p=d.useRef(null),{modalProps:C,underlayProps:I}=Xt({isDismissable:c,isKeyboardDismissDisabled:!c,...v},s,p),{dialogProps:U,titleProps:Ae}=Jt(v,p),We=w.combineEventHandlers(C.onFocus,U.onFocus,a),ze=w.combineEventHandlers(C.onBlur,U.onBlur,r),{t:qe}=d.useContext(w.I18nContext),He=w.useChildTestIdAttrBuilder({"data-testid":o}),[G,_e]=w.selectChildren(e,[{type:de}]);function ce(){g&&typeof g=="function"&&g(),s.close()}const me=function(){return c?d.createElement(pe.Button,{"aria-label":"Close",onClick:ce,kind:"icon",icon:"x",className:to}):null},Ve=w.modChildren(_e,fe=>fe.type===me?[{className:w.cl(fe.props.classname,oo)}]:[]);return d.createElement(Yt,null,d.createElement("div",{className:io,...I,...v},d.createElement("div",{...C,...U,...l,onFocus:We,onBlur:ze,...He("dialog"),ref:p,className:w.cl(no({kind:n,size:i,fullHeight:m}),t)},d.createElement("div",{...Ae,className:ao({kind:n})},n&&d.createElement(w.Icon,{icon:ne[n]||ne.informational,className:ro}),d.createElement("div",{className:lo},w.contentOf(u,s.close)),d.createElement(me,null)),d.createElement("div",{className:eo},w.contentOf(Ve,s.close)),G&&G.length>0?d.createElement(d.Fragment,null,w.contentOf(G,s.close)):d.createElement("div",{className:Ie},d.createElement(pe.Button,{kind:"key",onClick:ce},qe("design-system:modal.defaultButtonLabel"))))))}function ue(e){return e.state.isOpen?d.createElement(so,{...e},e.children):d.createElement(d.Fragment,null)}w.Metadata.set(ue,{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 uo(e){let[t,o]=Ge(e.isOpen,e.defaultOpen||!1,e.onOpenChange);return{isOpen:t,setOpen:o,open(){o(!0)},close(){o(!1)},toggle(){o(!t)}}}function co(e={}){const t=uo(e),o=f.useRef(null),{triggerProps:n,overlayProps:r}=_t({type:"dialog"},t,o),{onPress:a,...l}=n;return{triggerProps:{...l,onClick:a,ref:o},modalState:t,modalProps:{overlayProps:r,state:t}}}const mo={description:()=>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:[ue],examples:{general:{label:"Usage",description:({NavigateTo:e})=>d.createElement(d.Fragment,null,d.createElement("h5",null,"Use a Modal:"),d.createElement("ul",null,d.createElement("li",null,"When the user needs to confirm a basic decision, such as deleting a record."),d.createElement("li",null,"When important information needs to be displayed to the user before continuing."),d.createElement("li",null,"When a simple selection, such as a single form input, is required before proceeding.")),d.createElement("h5",null,"Avoid a Modal:"),d.createElement("ul",null,d.createElement("li",null,"When a complex form is required. Use a ",d.createElement(e,{to:"focused-task"},"Focused Task View")," instead."),d.createElement("li",null,"When sharing non-critical or tertiary information. Use a ",d.createElement(e,{to:"growlers"},"Growler")," instead.")))},implementation:{label:"Close Button",description:()=>d.createElement(d.Fragment,null,d.createElement("h5",null,"Close Button and Modal dismissiability"),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."),d.createElement("p",null,"The close button is included by default and omitted when the prop ",d.createElement("code",null,"dismissable")," is set to ",d.createElement("strong",null,"false"),"."),d.createElement("p",null,"Setting the ",d.createElement("code",null,"dismissable")," prop to false also prevents dismissing the modal by clicking outside of the modal or by using the"," ",d.createElement("strong",null,"escape")," key.")),examples:{basic:{react:b.code`
+          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:()=>d.createElement(d.Fragment,null,d.createElement("h5",null,"Using the hook"),d.createElement("p",null,"To use any modals, you must call the ",d.createElement("code",null,"useModal")," hook. Optional arguments for this hook include:"),d.createElement("dl",null,d.createElement("dt",null,d.createElement("code",null,"isOpen"),": boolean"),d.createElement("dd",null,"Whether the overlay is open by default (controlled)"),d.createElement("dt",null,d.createElement("code",null,"defaultOpen"),": boolean"),d.createElement("dd",null,"Whether the overlay is open by default (uncontrolled)."),d.createElement("dt",null,d.createElement("code",null,"onOpenChange"),": function"),d.createElement("dd",null,"Handler that is called when the overlay's open state changes.",d.createElement("code",null,"(isOpen: boolean)  => void"))),d.createElement("h5",null,"Modal Props,  Modal State, and Trigger Props"),d.createElement("p",null,"The ",d.createElement("code",null,"useModal")," returns an object with ",d.createElement("code",null,"modalProps"),", ",d.createElement("code",null,"modalState")," and ",d.createElement("code",null,"triggerProps")),d.createElement("p",null,"The ",d.createElement("code",null,"triggerProps")," need to be spread on the element that triggers the modal."),d.createElement("p",null,"The ",d.createElement("code",null,"modalState")," object (which is also included in ",d.createElement("code",null,"modalProps"),") allows programmatic access to the state of the modal. This includes a read only ",d.createElement("code",null,"isOpen")," property, a ",d.createElement("code",null,"setOpen(isOpen: boolean)")," method which can be use to set whether the overlay is open, an ",d.createElement("code",null,"open()")," method which open the overlay, a ",d.createElement("code",null,"close()")," method which closes the overlay and a ",d.createElement("code",null,"toggle()")," method that toggles the overlay's visiblity."),d.createElement("p",null,"The ",d.createElement("code",null,"modalProps")," should be spread on the actual ",d.createElement("code",null,"Modal")," component."),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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:b.code`
+          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:mo};exports.MANIFEST=fo;exports.Modal=ue;exports.ModalFooter=de;exports.ModalIcons=ne;exports.useModal=co;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./modal/Modal";
+export * from "./modal-footer/ModalFooter";
+export * from "./modal/useModal";
+export * from "./manifest";