@sps-woodland/modal 8.0.8 → 8.1.1

package/lib/index.cjs.js

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

package/lib/index.es.js

@@ -1454,7 +1454,7 @@ const Bo = {
       examples: {
         basic: {
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1502,7 +1502,7 @@ const Bo = {
     },
     hooks: {
       label: "Using Hooks",
-      description: () => /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("h5", null, "Using the hook"), /* @__PURE__ */ u.createElement("p", null, "To use any modals, you must call the ", /* @__PURE__ */ u.createElement("code", null, "useModal"), " hook. Optional arguments for this hook include:"), /* @__PURE__ */ u.createElement("dl", null, /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "isOpen"), ": boolean"), /* @__PURE__ */ u.createElement("dd", null, "Whether the overlay is open by default (controlled)"), /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "defaultOpen"), ": boolean"), /* @__PURE__ */ u.createElement("dd", null, "Whether the overlay is open by default (uncontrolled)."), /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "onOpenChange"), ": function"), /* @__PURE__ */ u.createElement("dd", null, "Handler that is called when the overlay's open state changes.", /* @__PURE__ */ u.createElement("code", null, "(isOpen: boolean)  => void"))), /* @__PURE__ */ u.createElement("h5", null, "Modal Props,  Modal State, and Trigger Props"), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "useModal"), " returns an object with ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), ", ", /* @__PURE__ */ u.createElement("code", null, "modalState"), " and ", /* @__PURE__ */ u.createElement("code", null, "triggerProps")), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "triggerProps"), " need to be spread on the element that triggers the modal."), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "modalState"), " object (which is also included in ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), ") allows programmatic access to the state of the modal. This includes a read only ", /* @__PURE__ */ u.createElement("code", null, "isOpen"), " property, a ", /* @__PURE__ */ u.createElement("code", null, "setOpen(isOpen: boolean)"), " method which can be use to set whether the overlay is open, an ", /* @__PURE__ */ u.createElement("code", null, "open()"), " method which open the overlay, a ", /* @__PURE__ */ u.createElement("code", null, "close()"), " method which closes the overlay and a ", /* @__PURE__ */ u.createElement("code", null, "toggle()"), " method that toggles the overlay's visiblity."), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), " should be spread on the actual ", /* @__PURE__ */ u.createElement("code", null, "Modal"), " component."), /* @__PURE__ */ u.createElement("p", null, "Please refer to the examples to see its implementation"))
+      description: () => /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("h5", null, "Using the hook"), /* @__PURE__ */ u.createElement("p", null, "To use any modals, you must call the ", /* @__PURE__ */ u.createElement("code", null, "useModal"), " hook. Optional arguments for this hook include:"), /* @__PURE__ */ u.createElement("dl", null, /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "isOpen"), ": boolean"), /* @__PURE__ */ u.createElement("dd", null, "Whether the overlay is open by default (controlled)"), /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "defaultOpen"), ": boolean"), /* @__PURE__ */ u.createElement("dd", null, "Whether the overlay is open by default (uncontrolled)."), /* @__PURE__ */ u.createElement("dt", null, /* @__PURE__ */ u.createElement("code", null, "onOpenChange"), ": function"), /* @__PURE__ */ u.createElement("dd", null, "Handler that is called when the overlay's open state changes.", /* @__PURE__ */ u.createElement("code", null, "(isOpen: boolean)  => void"))), /* @__PURE__ */ u.createElement("h5", null, "Modal Props,  Modal State, and Trigger Props"), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "useModal"), " returns an object with ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), ", ", /* @__PURE__ */ u.createElement("code", null, "modalState"), " and ", /* @__PURE__ */ u.createElement("code", null, "triggerProps")), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "triggerProps"), " need to be spread on the element that triggers the modal."), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "modalState"), " object (which is also included in ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), ") allows programmatic access to the state of the modal. This includes a read only ", /* @__PURE__ */ u.createElement("code", null, "isOpen"), " property, a ", /* @__PURE__ */ u.createElement("code", null, "setOpen(isOpen: boolean)"), " method which can be use to set whether the overlay is open, an ", /* @__PURE__ */ u.createElement("code", null, "open()"), " method which opens the overlay, a ", /* @__PURE__ */ u.createElement("code", null, "close()"), " method which closes the overlay and a ", /* @__PURE__ */ u.createElement("code", null, "toggle()"), " method that toggles the overlay's visiblity."), /* @__PURE__ */ u.createElement("p", null, "The ", /* @__PURE__ */ u.createElement("code", null, "modalProps"), " should be spread on the actual ", /* @__PURE__ */ u.createElement("code", null, "Modal"), " component."), /* @__PURE__ */ u.createElement("p", null, "Please refer to the examples to see its implementation"))
     },
     informational: {
       label: "Informational",
@@ -1512,7 +1512,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1541,7 +1541,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1567,7 +1567,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1593,7 +1593,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1626,7 +1626,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1648,7 +1648,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1669,7 +1669,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1691,7 +1691,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1718,7 +1718,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1740,7 +1740,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1761,7 +1761,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1783,7 +1783,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1810,7 +1810,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1832,7 +1832,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1853,7 +1853,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1875,7 +1875,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1902,7 +1902,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1924,7 +1924,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1945,7 +1945,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1967,7 +1967,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -1994,7 +1994,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2021,7 +2021,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2046,7 +2046,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2068,7 +2068,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2095,7 +2095,7 @@ const Bo = {
         small: {
           description: "Small",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2117,7 +2117,7 @@ const Bo = {
         medium: {
           description: "Medium",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2138,7 +2138,7 @@ const Bo = {
         large: {
           description: "Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 
@@ -2160,7 +2160,7 @@ const Bo = {
         xlarge: {
           description: "Extra Large",
           react: b`
-          import { Modal, ModalFooter } from "@sps-woodland/modal";
+          import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/modal",
   "description": "SPS Woodland Design System modal component",
-  "version": "8.0.8",
+  "version": "8.1.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/modal",
@@ -29,9 +29,9 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.0.8",
-    "@sps-woodland/tokens": "8.0.8",
-    "@sps-woodland/buttons": "8.0.8"
+    "@sps-woodland/core": "8.1.1",
+    "@sps-woodland/tokens": "8.1.1",
+    "@sps-woodland/buttons": "8.1.1"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -43,9 +43,9 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "vite": "^3.1.4",
-    "@sps-woodland/core": "8.0.8",
-    "@sps-woodland/buttons": "8.0.8",
-    "@sps-woodland/tokens": "8.0.8"
+    "@sps-woodland/core": "8.1.1",
+    "@sps-woodland/buttons": "8.1.1",
+    "@sps-woodland/tokens": "8.1.1"
   },
   "dependencies": {
     "react-aria": "^3.21.0",