@internetarchive/bookreader 5.0.0-12-fixsorting-8 → 5.0.0-121

package/BookReader/hypothesis/build/scripts/ui-playground.bundle.js

@@ -0,0 +1,437 @@
+var e,n,t,i,l,o,r,c,a,d,s,h,u,p={},m=[],f=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,g=Array.isArray;function b(e,n){for(var t in n)e[t]=n[t];return e}function v(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function w(n,t,i){var l,o,r,c={};for(r in t)"key"==r?l=t[r]:"ref"==r?o=t[r]:c[r]=t[r];if(arguments.length>2&&(c.children=arguments.length>3?e.call(arguments,2):i),"function"==typeof n&&null!=n.defaultProps)for(r in n.defaultProps)void 0===c[r]&&(c[r]=n.defaultProps[r]);return I(n,c,l,o,null)}function I(e,i,l,o,r){var c={type:e,props:i,key:l,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==r?++t:r,__i:-1,__u:0};return null==r&&null!=n.vnode&&n.vnode(c),c}function y(e){return e.children}function x(e,n){this.props=e,this.context=n}function S(e,n){if(null==n)return e.__?S(e.__,e.__i+1):null;for(var t;n<e.__k.length;n++)if(null!=(t=e.__k[n])&&null!=t.__e)return t.__e;return"function"==typeof e.type?S(e):null}function C(e){var n,t
+;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,n=0;n<e.__k.length;n++)if(null!=(t=e.__k[n])&&null!=t.__e){e.__e=e.__c.base=t.__e;break}return C(e)}}function k(e){(!e.__d&&(e.__d=!0)&&l.push(e)&&!_.__r++||o!=n.debounceRendering)&&((o=n.debounceRendering)||r)(_)}function _(){for(var e,t,i,o,r,a,d,s=1;l.length;)l.length>s&&l.sort(c),e=l.shift(),s=l.length,e.__d&&(i=void 0,o=void 0,r=(o=(t=e).__v).__e,a=[],d=[],t.__P&&((i=b({},o)).__v=o.__v+1,n.vnode&&n.vnode(i),H(t.__P,i,o,t.__n,t.__P.namespaceURI,32&o.__u?[r]:null,a,null==r?S(o):r,!!(32&o.__u),d),i.__v=o.__v,i.__.__k[i.__i]=i,P(a,i,d),o.__e=o.__=null,i.__e!=r&&C(i)));_.__r=0}function L(e,n,t,i,l,o,r,c,a,d,s){var h,u,f,b,v,w,x,C=i&&i.__k||m,k=n.length;for(a=function(e,n,t,i,l){var o,r,c,a,d,s=t.length,h=s,u=0;for(e.__k=new Array(l),o=0;o<l;o++)null!=(r=n[o])&&"boolean"!=typeof r&&"function"!=typeof r?("string"==typeof r||"number"==typeof r||"bigint"==typeof r||r.constructor==String?r=e.__k[o]=I(null,r,null,null,null):g(r)?r=e.__k[o]=I(y,{children:r
+},null,null,null):null==r.constructor&&r.__b>0?r=e.__k[o]=I(r.type,r.props,r.key,r.ref?r.ref:null,r.__v):e.__k[o]=r,a=o+u,r.__=e,r.__b=e.__b+1,-1!=(d=r.__i=M(r,t,a,h))&&(h--,(c=t[d])&&(c.__u|=2)),null==c||null==c.__v?(-1==d&&(l>s?u--:l<s&&u++),"function"!=typeof r.type&&(r.__u|=4)):d!=a&&(d==a-1?u--:d==a+1?u++:(d>a?u--:u++,r.__u|=4))):e.__k[o]=null;if(h)for(o=0;o<s;o++)null!=(c=t[o])&&0==(2&c.__u)&&(c.__e==i&&(i=S(c)),F(c,c));return i}(t,n,C,a,k),h=0;h<k;h++)null!=(f=t.__k[h])&&(u=-1==f.__i?p:C[f.__i]||p,f.__i=h,w=H(e,f,u,l,o,r,c,a,d,s),b=f.__e,f.ref&&u.ref!=f.ref&&(u.ref&&O(u.ref,null,f),s.push(f.ref,f.__c||b,f)),null==v&&null!=b&&(v=b),(x=!!(4&f.__u))||u.__k===f.__k?a=A(f,a,e,x):"function"==typeof f.type&&void 0!==w?a=w:b&&(a=b.nextSibling),f.__u&=-7);return t.__e=v,a}function A(e,n,t,i){var l,o;if("function"==typeof e.type){for(l=e.__k,o=0;l&&o<l.length;o++)l[o]&&(l[o].__=e,n=A(l[o],n,t,i));return n}e.__e!=n&&(i&&(n&&e.type&&!n.parentNode&&(n=S(e)),t.insertBefore(e.__e,n||null)),n=e.__e);do{
+n=n&&n.nextSibling}while(null!=n&&8==n.nodeType);return n}function N(e,n){return n=n||[],null==e||"boolean"==typeof e||(g(e)?e.some((function(e){N(e,n)})):n.push(e)),n}function M(e,n,t,i){var l,o,r,c=e.key,a=e.type,d=n[t],s=null!=d&&0==(2&d.__u);if(null===d&&null==c||s&&c==d.key&&a==d.type)return t;if(i>(s?1:0))for(l=t-1,o=t+1;l>=0||o<n.length;)if(null!=(d=n[r=l>=0?l--:o++])&&0==(2&d.__u)&&c==d.key&&a==d.type)return r;return-1}function T(e,n,t){"-"==n[0]?e.setProperty(n,null==t?"":t):e[n]=null==t?"":"number"!=typeof t||f.test(n)?t:t+"px"}function z(e,n,t,i,l){var o,r;e:if("style"==n)if("string"==typeof t)e.style.cssText=t;else{if("string"==typeof i&&(e.style.cssText=i=""),i)for(n in i)t&&n in t||T(e.style,n,"");if(t)for(n in t)i&&t[n]==i[n]||T(e.style,n,t[n])}else if("o"==n[0]&&"n"==n[1])o=n!=(n=n.replace(a,"$1")),r=n.toLowerCase(),n=r in e||"onFocusOut"==n||"onFocusIn"==n?r.slice(2):n.slice(2),e.l||(e.l={}),e.l[n+o]=t,t?i?t.u=i.u:(t.u=d,e.addEventListener(n,o?h:s,o)):e.removeEventListener(n,o?h:s,o);else{
+if("http://www.w3.org/2000/svg"==l)n=n.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=n&&"height"!=n&&"href"!=n&&"list"!=n&&"form"!=n&&"tabIndex"!=n&&"download"!=n&&"rowSpan"!=n&&"colSpan"!=n&&"role"!=n&&"popover"!=n&&n in e)try{e[n]=null==t?"":t;break e}catch(e){}"function"==typeof t||(null==t||!1===t&&"-"!=n[4]?e.removeAttribute(n):e.setAttribute(n,"popover"==n&&1==t?"":t))}}function D(e){return function(t){if(this.l){var i=this.l[t.type+e];if(null==t.t)t.t=d++;else if(t.t<i.u)return;return i(n.event?n.event(t):t)}}}function H(e,t,i,l,o,r,c,a,d,s){var h,u,p,m,f,w,I,S,C,k,_,A,N,M,T,z,D,H=t.type;if(null!=t.constructor)return null;128&i.__u&&(d=!!(32&i.__u),r=[a=t.__e=i.__e]),(h=n.__b)&&h(t);e:if("function"==typeof H)try{if(S=t.props,C="prototype"in H&&H.prototype.render,k=(h=H.contextType)&&l[h.__c],_=h?k?k.props.value:h.__:l,i.__c?I=(u=t.__c=i.__c).__=u.__E:(C?t.__c=u=new H(S,_):(t.__c=u=new x(S,_),u.constructor=H,u.render=q),k&&k.sub(u),u.state||(u.state={}),u.__n=l,p=u.__d=!0,u.__h=[],
+u._sb=[]),C&&null==u.__s&&(u.__s=u.state),C&&null!=H.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=b({},u.__s)),b(u.__s,H.getDerivedStateFromProps(S,u.__s))),m=u.props,f=u.state,u.__v=t,p)C&&null==H.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),C&&null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(C&&null==H.getDerivedStateFromProps&&S!==m&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(S,_),t.__v==i.__v||!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(S,u.__s,_)){for(t.__v!=i.__v&&(u.props=S,u.state=u.__s,u.__d=!1),t.__e=i.__e,t.__k=i.__k,t.__k.some((function(e){e&&(e.__=t)})),A=0;A<u._sb.length;A++)u.__h.push(u._sb[A]);u._sb=[],u.__h.length&&c.push(u);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(S,u.__s,_),C&&null!=u.componentDidUpdate&&u.__h.push((function(){u.componentDidUpdate(m,f,w)}))}if(u.context=_,u.props=S,u.__P=e,u.__e=!1,N=n.__r,M=0,C){for(u.state=u.__s,u.__d=!1,N&&N(t),
+h=u.render(u.props,u.state,u.context),T=0;T<u._sb.length;T++)u.__h.push(u._sb[T]);u._sb=[]}else do{u.__d=!1,N&&N(t),h=u.render(u.props,u.state,u.context),u.state=u.__s}while(u.__d&&++M<25);u.state=u.__s,null!=u.getChildContext&&(l=b(b({},l),u.getChildContext())),C&&!p&&null!=u.getSnapshotBeforeUpdate&&(w=u.getSnapshotBeforeUpdate(m,f)),z=h,null!=h&&h.type===y&&null==h.key&&(z=B(h.props.children)),a=L(e,g(z)?z:[z],t,i,l,o,r,c,a,d,s),u.base=t.__e,t.__u&=-161,u.__h.length&&c.push(u),I&&(u.__E=u.__=null)}catch(e){if(t.__v=null,d||null!=r)if(e.then){for(t.__u|=d?160:128;a&&8==a.nodeType&&a.nextSibling;)a=a.nextSibling;r[r.indexOf(a)]=null,t.__e=a}else{for(D=r.length;D--;)v(r[D]);E(t)}else t.__e=i.__e,t.__k=i.__k,e.then||E(t);n.__e(e,t,i)}else null==r&&t.__v==i.__v?(t.__k=i.__k,t.__e=i.__e):a=t.__e=R(i.__e,t,i,l,o,r,c,d,s);return(h=n.diffed)&&h(t),128&t.__u?void 0:a}function E(e){e&&e.__c&&(e.__c.__e=!0),e&&e.__k&&e.__k.forEach(E)}function P(e,t,i){for(var l=0;l<i.length;l++)O(i[l],i[++l],i[++l]);n.__c&&n.__c(t,e),
+e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){n.__e(e,t.__v)}}))}function B(e){return"object"!=typeof e||null==e||e.__b&&e.__b>0?e:g(e)?e.map(B):b({},e)}function R(t,i,l,o,r,c,a,d,s){var h,u,m,f,b,w,I,y=l.props||p,x=i.props,C=i.type;if("svg"==C?r="http://www.w3.org/2000/svg":"math"==C?r="http://www.w3.org/1998/Math/MathML":r||(r="http://www.w3.org/1999/xhtml"),null!=c)for(h=0;h<c.length;h++)if((b=c[h])&&"setAttribute"in b==!!C&&(C?b.localName==C:3==b.nodeType)){t=b,c[h]=null;break}if(null==t){if(null==C)return document.createTextNode(x);t=document.createElementNS(r,C,x.is&&x),d&&(n.__m&&n.__m(i,c),d=!1),c=null}if(null==C)y===x||d&&t.data==x||(t.data=x);else{if(c=c&&e.call(t.childNodes),!d&&null!=c)for(y={},h=0;h<t.attributes.length;h++)y[(b=t.attributes[h]).name]=b.value;for(h in y)if(b=y[h],"children"==h);else if("dangerouslySetInnerHTML"==h)m=b;else if(!(h in x)){if("value"==h&&"defaultValue"in x||"checked"==h&&"defaultChecked"in x)continue;z(t,h,null,b,r)}
+for(h in x)b=x[h],"children"==h?f=b:"dangerouslySetInnerHTML"==h?u=b:"value"==h?w=b:"checked"==h?I=b:d&&"function"!=typeof b||y[h]===b||z(t,h,b,y[h],r);if(u)d||m&&(u.__html==m.__html||u.__html==t.innerHTML)||(t.innerHTML=u.__html),i.__k=[];else if(m&&(t.innerHTML=""),L("template"==i.type?t.content:t,g(f)?f:[f],i,l,o,"foreignObject"==C?"http://www.w3.org/1999/xhtml":r,c,a,c?c[0]:l.__k&&S(l,0),d,s),null!=c)for(h=c.length;h--;)v(c[h]);d||(h="value","progress"==C&&null==w?t.removeAttribute("value"):null!=w&&(w!==t[h]||"progress"==C&&!w||"option"==C&&w!=y[h])&&z(t,h,w,y[h],r),h="checked",null!=I&&I!=t[h]&&z(t,h,I,y[h],r))}return t}function O(e,t,i){try{if("function"==typeof e){var l="function"==typeof e.__u;l&&e.__u(),l&&null==t||(e.__u=e(t))}else e.current=t}catch(e){n.__e(e,i)}}function F(e,t,i){var l,o;if(n.unmount&&n.unmount(e),(l=e.ref)&&(l.current&&l.current!=e.__e||O(l,null,t)),null!=(l=e.__c)){if(l.componentWillUnmount)try{l.componentWillUnmount()}catch(e){n.__e(e,t)}l.base=l.__P=null}
+if(l=e.__k)for(o=0;o<l.length;o++)l[o]&&F(l[o],t,i||"function"!=typeof e.type);i||v(e.__e),e.__c=e.__=e.__e=void 0}function q(e,n,t){return this.constructor(e,t)}function j(t,i,l){var o,r,c;i==document&&(i=document.documentElement),n.__&&n.__(t,i),o=!1?null:i.__k,r=[],c=[],H(i,t=i.__k=w(y,null,[t]),o||p,p,i.namespaceURI,o?null:i.firstChild?e.call(i.childNodes):null,r,o?o.__e:i.firstChild,false,c),P(r,t,c)}function U(n,t,i){var l,o,r,c,a=b({},n.props);for(r in n.type&&n.type.defaultProps&&(c=n.type.defaultProps),t)"key"==r?l=t[r]:"ref"==r?o=t[r]:a[r]=void 0===t[r]&&null!=c?c[r]:t[r];return arguments.length>2&&(a.children=arguments.length>3?e.call(arguments,2):i),I(n.type,a,l||n.key,o||n.ref,null)}function V(e){function n(e){var t,i;return this.getChildContext||(t=new Set,(i={})[n.__c]=this,this.getChildContext=function(){return i},this.componentWillUnmount=function(){t=null},this.shouldComponentUpdate=function(e){this.props.value!=e.value&&t.forEach((function(e){e.__e=!0,k(e)}))},this.sub=function(e){t.add(e)
+;var n=e.componentWillUnmount;e.componentWillUnmount=function(){t&&t.delete(e),n&&n.call(e)}}),e.children}return n.__c="__cC"+u++,n.__=e,n.Provider=n.__l=(n.Consumer=function(e,n){return e.children(n)}).contextType=n,n}function W(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}e=m.slice,n={__e:function(e,n,t,i){for(var l,o,r;n=n.__;)if((l=n.__c)&&!l.__)try{if((o=l.constructor)&&null!=o.getDerivedStateFromError&&(l.setState(o.getDerivedStateFromError(e)),r=l.__d),null!=l.componentDidCatch&&(l.componentDidCatch(e,i||{}),r=l.__d),r)return l.__E=l}catch(n){e=n}throw e}},t=0,i=function(e){return null!=e&&null==e.constructor},x.prototype.setState=function(e,n){var t;t=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=b({},this.state),"function"==typeof e&&(e=e(b({},t),this.props)),e&&b(t,e),null!=e&&this.__v&&(n&&this._sb.push(n),k(this))},x.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),k(this))},x.prototype.render=y,l=[],
+r="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,c=function(e,n){return e.__v.__b-n.__v.__b},_.__r=0,a=/(PointerCapture)$|Capture$/i,d=0,s=D(!1),h=D(!0),u=0;var $,G={exports:{}};var X,K,J,Q,Z,Y=($||($=1,X=G,function(){var e={}.hasOwnProperty;function n(){for(var e="",n=0;n<arguments.length;n++){var l=arguments[n];l&&(e=i(e,t(l)))}return e}function t(t){if("string"==typeof t||"number"==typeof t)return t;if("object"!=typeof t)return"";if(Array.isArray(t))return n.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var l="";for(var o in t)e.call(t,o)&&t[o]&&(l=i(l,o));return l}function i(e,n){return n?e?e+" "+n:e+n:e}X.exports?(n.default=n,X.exports=n):window.classNames=n}()),G.exports),ee=W(Y),ne=0,te=[],ie=n,le=ie.__b,oe=ie.__r,re=ie.diffed,ce=ie.__c,ae=ie.unmount,de=ie.__;function se(e,n){ie.__h&&ie.__h(J,e,ne||n),ne=0;var t=J.__H||(J.__H={__:[],__h:[]});return e>=t.__.length&&t.__.push({}),t.__[e]}
+function he(e){return ne=1,function(e,n,t){var i=se(K++,2);if(i.t=e,!i.__c&&(i.__=[ke(void 0,n),function(e){var n=i.__N?i.__N[0]:i.__[0],t=i.t(n,e);n!==t&&(i.__N=[t,i.__[1]],i.__c.setState({}))}],i.__c=J,!J.__f)){var l=function(e,n,t){if(!i.__c.__H)return!0;var l=i.__c.__H.__.filter((function(e){return!!e.__c}));if(l.every((function(e){return!e.__N})))return!o||o.call(this,e,n,t);var r=i.__c.props!==e;return l.forEach((function(e){if(e.__N){var n=e.__[0];e.__=e.__N,e.__N=void 0,n!==e.__[0]&&(r=!0)}})),o&&o.call(this,e,n,t)||r};J.__f=!0;var o=J.shouldComponentUpdate,r=J.componentWillUpdate;J.componentWillUpdate=function(e,n,t){if(this.__e){var i=o;o=void 0,l(e,n,t),o=i}r&&r.call(this,e,n,t)},J.shouldComponentUpdate=l}return i.__N||i.__}(ke,e)}function ue(e,n){var t=se(K++,3);!ie.__s&&Ce(t.__H,n)&&(t.__=e,t.u=n,J.__H.__h.push(t))}function pe(e,n){var t=se(K++,4);!ie.__s&&Ce(t.__H,n)&&(t.__=e,t.u=n,J.__h.push(t))}function me(e){return ne=5,fe((function(){return{current:e}}),[])}function fe(e,n){var t=se(K++,7)
+;return Ce(t.__H,n)&&(t.__=e(),t.__H=n,t.__h=e),t.__}function ge(e,n){return ne=8,fe((function(){return e}),n)}function be(e){var n=J.context[e.__c],t=se(K++,9);return t.c=e,n?(null==t.__&&(t.__=!0,n.sub(J)),n.props.value):e.__}function ve(){var e=se(K++,11);if(!e.__){for(var n=J.__v;null!==n&&!n.__m&&null!==n.__;)n=n.__;var t=n.__m||(n.__m=[0,0]);e.__="P"+t[0]+"-"+t[1]++}return e.__}function we(){for(var e;e=te.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(xe),e.__H.__h.forEach(Se),e.__H.__h=[]}catch(n){e.__H.__h=[],ie.__e(n,e.__v)}}ie.__b=function(e){J=null,le&&le(e)},ie.__=function(e,n){e&&n.__k&&n.__k.__m&&(e.__m=n.__k.__m),de&&de(e,n)},ie.__r=function(e){oe&&oe(e),K=0;var n=(J=e.__c).__H;n&&(Q===J?(n.__h=[],J.__h=[],n.__.forEach((function(e){e.__N&&(e.__=e.__N),e.u=e.__N=void 0}))):(n.__h.forEach(xe),n.__h.forEach(Se),n.__h=[],K=0)),Q=J},ie.diffed=function(e){re&&re(e);var n=e.__c;n&&n.__H&&(n.__H.__h.length&&(1!==te.push(n)&&Z===ie.requestAnimationFrame||((Z=ie.requestAnimationFrame)||ye)(we)),
+n.__H.__.forEach((function(e){e.u&&(e.__H=e.u),e.u=void 0}))),Q=J=null},ie.__c=function(e,n){n.some((function(e){try{e.__h.forEach(xe),e.__h=e.__h.filter((function(e){return!e.__||Se(e)}))}catch(t){n.some((function(e){e.__h&&(e.__h=[])})),n=[],ie.__e(t,e.__v)}})),ce&&ce(e,n)},ie.unmount=function(e){ae&&ae(e);var n,t=e.__c;t&&t.__H&&(t.__H.__.forEach((function(e){try{xe(e)}catch(e){n=e}})),t.__H=void 0,n&&ie.__e(n,t.__v))};var Ie="function"==typeof requestAnimationFrame;function ye(e){var n,t=function(){clearTimeout(i),Ie&&cancelAnimationFrame(n),setTimeout(e)},i=setTimeout(t,35);Ie&&(n=requestAnimationFrame(t))}function xe(e){var n=J,t=e.__c;"function"==typeof t&&(e.__c=void 0,t()),J=n}function Se(e){var n=J;e.__c=e.__(),J=n}function Ce(e,n){return!e||e.length!==n.length||n.some((function(n,t){return n!==e[t]}))}function ke(e,n){return"function"==typeof n?n(e):n}const _e=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement);function Le(e,n){
+return e===n&&(0!==e||1/e==1/n)||e!=e&&n!=n}const Ae=e=>{const n=me([e,(...e)=>n[0](...e)]).current;return pe((()=>{n[0]=e})),n[1]},Ne="pushState",Me="replaceState",Te=["popstate",Ne,Me,"hashchange"],ze=e=>{for(const n of Te)addEventListener(n,e);return()=>{for(const n of Te)removeEventListener(n,e)}},De=(e,n)=>function(e,n,t){t&&!_e&&(n=t);const i=n(),[{_instance:l},o]=he({_instance:{_value:i,_getSnapshot:n}});return pe((()=>{l._value=i,l._getSnapshot=n,Le(l._value,n())||o({_instance:l})}),[e,i,n]),ue((()=>(Le(l._value,l._getSnapshot())||o({_instance:l}),e((()=>{Le(l._value,l._getSnapshot())||o({_instance:l})})))),[e]),i}(ze,e,n),He=()=>location.search,Ee=()=>location.pathname,Pe=({ssrPath:e}={})=>De(Ee,e?()=>e:Ee),Be=(e,{replace:n=!1,state:t=null}={})=>history[n?Me:Ne](t,"",e),Re=Symbol.for("wouter_v3");if("undefined"!=typeof history&&void 0===window[Re]){for(const e of[Ne,Me]){const n=history[e];history[e]=function(){const t=n.apply(this,arguments),i=new Event(e);return i.arguments=arguments,
+dispatchEvent(i),t}}Object.defineProperty(window,Re,{value:!0})}const Oe=(e="",n)=>n.toLowerCase().indexOf(e.toLowerCase())?"~"+n:n.slice(e.length)||"/",Fe=e=>{try{return decodeURI(e)}catch(n){return e}},qe={hook:(e={})=>[Pe(e),Be],searchHook:({ssrSearch:e=""}={})=>De(He,(()=>e)),parser:function(e,n){if(e instanceof RegExp)return{keys:!1,pattern:e};var t,i,l,o,r=[],c="",a=e.split("/");for(a[0]||a.shift();l=a.shift();)"*"===(t=l[0])?(r.push(t),c+="?"===l[1]?"(?:/(.*))?":"/(.*)"):":"===t?(i=l.indexOf("?",1),o=l.indexOf(".",1),r.push(l.substring(1,~i?i:~o?o:l.length)),c+=~i&&!~o?"(?:/([^/]+?))?":"/([^/]+?)",~o&&(c+=(~i?"?":"")+"\\"+l.substring(o))):c+="/"+l;return{keys:r,pattern:new RegExp("^"+c+(n?"(?=$|/)":"/?$"),"i")}},base:"",ssrPath:void 0,ssrSearch:void 0},je=V(qe),Ue=()=>be(je),Ve=V({}),We=e=>{const[n,t]=e.hook(e);return[Fe(Oe(e.base,n)),Ae(((n,i)=>t(((e,n="")=>"~"===e[0]?e.slice(1):n+e)(n,e.base),i)))]},$e=()=>We(Ue()),Ge=(e,n,t,i)=>{const{pattern:l,keys:o}=e(n||"*",i),[r,...c]=l.exec(t)||[]
+;return void 0!==r?[!0,Object.fromEntries(o.map(((e,n)=>[e,c[n]]))),...i?[r]:[]]:[!1,null]},Xe=e=>Ge(Ue().parser,e,$e()[0]),Ke=({children:e,...n})=>{const t=Ue(),i=n.hook?qe:t;let l=i,o=me({}),r=o.current,c=r;for(let e in i){const t="base"===e?i[e]+(n[e]||""):n[e]||i[e];r===c&&t!==c[e]&&(o.current=c={...c}),c[e]=t,t!==i[e]&&(l=c)}return w(je.Provider,{value:l,children:e})},Je=({children:e,component:n},t)=>n?w(n,{params:t}):"function"==typeof e?e(t):e,Qe=({path:e,nest:n,match:t,...i})=>{const l=Ue(),[o]=We(l),[r,c,a]=t??Ge(l.parser,e,o,n);if(!r)return null;const d=a?w(Ke,{base:a},Je(i,c)):Je(i,c);return w(Ve.Provider,{value:c,children:d})},Ze=(e,n)=>{const t=Ue(),[,l]=We(t),{to:o,href:r=o,onClick:c,asChild:a,children:d,replace:s,state:h,...u}=e,p=Ae((n=>{n.ctrlKey||n.metaKey||n.altKey||n.shiftKey||0!==n.button||(c&&c(n),n.defaultPrevented||(n.preventDefault(),l(r,e)))})),m="~"===r[0]?r.slice(1):t.base+r;return a&&i(d)?U(d,{href:m,onClick:p}):w("a",{...u,href:m,onClick:p,children:d,ref:n})
+},Ye=e=>Array.isArray(e)?[].concat(...e.map((e=>e&&e.type===y?Ye(e.props.children):Ye(e)))):[e],en=({children:e,location:n})=>{const t=Ue(),[l]=We(t);for(const o of Ye(e)){let e=0;if(i(o)&&(e=Ge(t.parser,o.props.path,n||l,o.props.nest))[0])return U(o,{match:e})}return null};function nn(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}class tn{constructor(){nn(this,"_listeners",void 0),this._listeners=new Map}add(e,n,t,i){e.addEventListener(n,t,i);const l=Symbol();return this._listeners.set(l,{eventTarget:e,eventType:n,listener:t,options:i}),l}remove(e){const n=this._listeners.get(e);if(n){
+const{eventTarget:t,eventType:i,listener:l,options:o}=n;t.removeEventListener(i,l,o),this._listeners.delete(e)}}removeAll(){this._listeners.forEach((({eventTarget:e,eventType:n,listener:t,options:i})=>{e.removeEventListener(n,t,i)})),this._listeners.clear()}}function ln(e){const n=me({callback:e,call:(...e)=>n.current.callback(...e)});return n.current.callback=e,n.current.call}function on(e){e.focus()}function rn(e,{autofocus:n=!1,loop:t=!0,horizontal:i=!0,vertical:l=!0,selector:o="a,button",containerVisible:r=!0,focusElement:c=on}={}){const a=me(null),d=ln(c);ue((()=>{if(!r)return()=>{};if(!e.current)throw new Error("Container ref not set");const c=e.current,s=()=>{const e=Array.from(c.querySelectorAll(o)).filter((e=>null!==e.offsetParent&&!function(e){return"boolean"==typeof e.disabled&&e.disabled}(e)));return document.activeElement===c&&e.unshift(c),e},h=(e=s(),n=-1,t=!1,i)=>{n<0&&(n=e.findIndex((e=>0===e.tabIndex)))<0&&(n=0);for(const[l,o]of e.entries())o.tabIndex=l===n?0:-1,l===n&&t&&(a.current=o,d(o,i))
+},u=s(),p=a.current?u.indexOf(a.current):0;h(u,p,n);const m=new tn;m.add(c,"focusin",(e=>{if(e.target===c&&a.current)return void d(a.current);const t=s(),i=t.indexOf(e.target);i>=0&&h(t,i,n)})),m.add(c,"keydown",(e=>{const n=s();let o=n.findIndex((e=>0===e.tabIndex)),r=!1;i&&"ArrowLeft"===e.key||l&&"ArrowUp"===e.key?(0===o?o=t?n.length-1:o:--o,r=!0):i&&"ArrowRight"===e.key||l&&"ArrowDown"===e.key?(o===n.length-1?o=t?0:o:++o,r=!0):"Home"===e.key?(o=0,r=!0):"End"===e.key&&(o=n.length-1,r=!0),r&&(h(n,o,!0,e),e.preventDefault(),e.stopPropagation())}));const f=new MutationObserver((()=>{h()}));return f.observe(c,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0}),()=>{m.removeAll(),f.disconnect()}}),[n,e,d,i,t,o,l,r])}function cn(e,n,{enabled:t=!0}={}){ue((()=>{if(!t)return()=>{};const i=document.body,l=new tn,o=t=>{e.current&&!t.composedPath().includes(e.current)&&n(t)};return l.add(i,"mousedown",o),l.add(i,"click",o),()=>{l.removeAll()}}),[e,t,n])}function an(e,n,{enabled:t=!0}={}){ue((()=>{
+if(!t||!e.current)return()=>{};const i=new tn;return i.add(e.current,"focusout",(t=>{const i=t;e.current&&!e.current.contains(i.relatedTarget)&&n(i)})),()=>{i.removeAll()}}),[e,t,n])}function dn(e,n,{enabled:t=!0}={}){ue((()=>{if(!t)return()=>{};const i=document.body,l=new tn;return l.add(i,"keydown",(t=>{e.includes(t.key)&&n(t)})),()=>{l.removeAll()}}),[t,n,e])}const sn=new Intl.Collator(void 0,{sensitivity:"case"});function hn(e,n){return fe((()=>{if(!n)return e;const{nullsLast:t=!0}=n;return[...e].sort((({[n.field]:e},{[n.field]:i})=>{const[l,o]="ascending"===n.direction?[e,i]:[i,e];return"string"==typeof l&&"string"==typeof o?sn.compare(l,o):l===o?0:null==e?t?1:-1:null==i?t?-1:1:l>o?1:-1}))}),[n,e])}function un(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string")
+;return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}class pn{constructor(e){un(this,"_target",void 0),un(this,"_value",void 0),this._target=e,this._value=null}get current(){return this._value}set current(e){this._value=e,this._updateTarget()}get target(){return this._target}set target(e){e!==this._target&&(this._target=e,this._updateTarget())}_updateTarget(){const e=this._value;"function"==typeof this._target?this._target(e):this._target&&(this._target.current=e)}}function mn(e){const n=me(new pn(e));return n.current.target=e,n.current}var fn=0;function gn(e,t,i,l,o,r){t||(t={});var c,a,d=t;if("ref"in d)for(a in d={},t)"ref"==a?c=t[a]:d[a]=t[a];var s={type:e,props:d,key:i,ref:c,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--fn,__i:-1,__u:0,__source:o,__self:r};if("function"==typeof e&&(c=e.defaultProps))for(a in c)void 0===d[a]&&(d[a]=c[a]);return n.vnode&&n.vnode(s),s}
+const bn='a,button:not([role="tab"]),input,select,textarea,[role="grid"],[role="tablist"]';function vn({children:e,classes:n,elementRef:t,open:i=!0,variant:l="dark",...o}){return i?gn("div",{"data-component":"Overlay",...o,ref:t,className:ee("fixed top-0 left-0 w-full h-full z-10 flex items-center justify-center",{"bg-black/50":"dark"===l,"bg-white/50":"light"===l},n),children:e}):null}const wn=V({}),In=V({});function yn({children:e,classes:n,elementRef:t,variant:i="raised",...l}){const o=mn(t),r=fe((()=>({scrollRef:o})),[o]);return gn(In.Provider,{value:r,children:gn("div",{"data-component":"Scroll",...l,ref:o,className:ee("min-h-0","h-full w-full overflow-auto",{"scroll-shadows":"raised"===i},n),children:e})})}function xn({children:e,classes:n,elementRef:t,active:i=!1,variant:l="raised",width:o="full",...r}){return gn("div",{"data-component":"Card",...r,ref:t,className:ee("rounded-lg border bg-white",{"shadow hover:shadow-md":"raised"===l,"shadow-md":i&&"raised"===l},{"w-full":"full"===o,"w-auto":"auto"===o
+},n),children:e})}function Sn({children:e,classes:n,elementRef:t,...i}){return gn("div",{"data-component":"CardActions",...i,className:ee("flex items-center justify-end space-x-3",n),ref:t,children:e})}function Cn({children:e,classes:n,elementRef:t,size:i="md",...l}){return gn("div",{"data-component":"CardContent",...l,ref:t,className:ee({"p-3 space-y-4":"md"===i,"p-2 space-y-3":"sm"===i,"p-4 space-y-6":"lg"===i},n),children:e})}function kn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ArrowDownIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 2a1 1 0 0 1 .993.883L9 3v7.585l2.293-2.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 .083 1.32l-.083.094-4 4a1 1 0 0 1-1.32.083l-.094-.083-4-4a1 1 0 0 1 1.32-1.497l.094.083L7 10.585V3a1 1 0 0 1 1-1"})]})})}function _n(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",
+"aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ArrowLeftIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.707 3.293a1 1 0 0 1 .083 1.32l-.083.094L5.415 7H13a1 1 0 0 1 .117 1.993L13 9H5.415l2.292 2.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4a1 1 0 0 1 1.414 0"})]})})}function Ln(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ArrowRightIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m9.613 3.21.094.083 4 4a1 1 0 0 1 .083 1.32l-.083.094-4 4a1 1 0 0 1-1.497-1.32l.083-.094L10.585 9H3a1 1 0 0 1-.117-1.993L3 7h7.585L8.293 4.707a1 1 0 0 1-.083-1.32l.083-.094a1 1 0 0 1 1.32-.083"})]})})}function An(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",
+"aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ArrowUpIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m8.613 2.21.094.083 4 4a1 1 0 0 1-1.32 1.497l-.094-.083L9 5.415V13a1 1 0 0 1-1.993.117L7 13V5.415L4.707 7.707a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1-.083-1.32l.083-.094 4-4a1 1 0 0 1 1.32-.083"})]})})}function Nn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CancelIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m12.322 5.085-.08.087-2.828 2.827 2.829 2.83a1 1 0 0 1-1.32 1.497l-.095-.083L8 9.414l-2.828 2.829c-.915.914-2.272-.388-1.494-1.328l.08-.087L6.584 8 3.757 5.172a1 1 0 0 1 1.32-1.498l.095.083L8 6.585l2.828-2.828c.886-.885 2.188.309 1.56 1.239z"})]})})}function Mn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",
+width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CautionIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 0c.767 0 1.432.455 1.794 1.148l5.917 11.326c.386.738.36 1.573.071 2.23-.286.651-.926 1.296-1.864 1.296H2.082c-.938 0-1.578-.645-1.864-1.295a2.6 2.6 0 0 1 .07-2.23L6.207 1.147C6.568.455 7.233 0 8 0m0 2.038-.021.036L2.06 13.4a.6.6 0 0 0-.012.5.3.3 0 0 0 .062.1H13.89a.3.3 0 0 0 .061-.1.6.6 0 0 0-.012-.5L8.02 2.074zm5.874 11.972q0 0 .01-.006-.01.007-.01.006m-11.748 0q0 .002-.01-.006z"}),gn("path",{fill:"currentColor",d:"M8 5a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1M9 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0"})]})})}function Tn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CheckIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{
+fill:"currentColor",d:"M12.18 2.427a1 1 0 0 1 1.705 1.04l-.066.106-7 10a1 1 0 0 1-1.606.045l-.07-.104-3-5A1 1 0 0 1 3.792 7.39l.065.097 2.207 3.677z"})]})})}function zn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CheckboxIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M0 2.5A2.5 2.5 0 0 1 2.5 0h11A2.5 2.5 0 0 1 16 2.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 13.5zM2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 13.5 1z","clip-rule":"evenodd"})]})})}function Dn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CheckboxCheckedFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm10.18 3.636a.75.75 0 0 0-1.044.184l-4.588 6.552-1.655-2.758-.05-.072a.75.75 0 0 0-1.236.844l2.25 3.75.053.078a.75.75 0 0 0 1.204-.034l5.25-7.5.05-.08a.75.75 0 0 0-.234-.964","clip-rule":"evenodd"})]})})}function Hn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CodeIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M12.707 4.293a1 1 0 1 0-1.414 1.414L13.586 8l-2.293 2.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414zm-9.414 0a1 1 0 0 1 1.414 1.414L2.414 8l2.293 2.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414z","clip-rule":"evenodd"})]})})}function En(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CopyIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{
+fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15 0a1 1 0 0 1 .993.883L16 1v10a1 1 0 0 1-.883.993L15 12H7a1 1 0 0 1-.993-.883L6 11V1a1 1 0 0 1 .883-.993L7 0zM4 4a1 1 0 0 1 .117 1.993L4 6H2v8h7a1 1 0 0 1 .993.883L10 15a1 1 0 0 1-.883.993L9 16H1a1 1 0 0 1-.993-.883L0 15V5a1 1 0 0 1 .883-.993L1 4zm4-2h6v8H8z"})]})})}function Pn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EditIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M14.613.21a1 1 0 0 0-1.32.083l-1 1-.083.094a1 1 0 0 0 .083 1.32l1 1 .094.083a1 1 0 0 0 1.32-.083l1-1 .083-.094a1 1 0 0 0-.083-1.32l-1-1zm-3 3a1 1 0 0 0-1.32.083l-9 9-.072.08a1 1 0 0 0-.115.18l-1 2-.044.1c-.316.827.559 1.655 1.385 1.241l2-1 .093-.053a1 1 0 0 0 .167-.134l9-9 .083-.094a1 1 0 0 0-.083-1.32l-1-1z"})]})})}function Bn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",
+height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EllipsisIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M2 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m8 2a2 2 0 1 0-4 0 2 2 0 0 0 4 0"})]})})}function Rn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EmailIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 12a2 2 0 0 1-1.85 1.995L14 14H2a2 2 0 0 1-1.995-1.85L0 12V4a2 2 0 0 1 1.85-1.995L2 2h12a2 2 0 0 1 1.995 1.85l.005.138zm-2-6.058L8.581 9.814a1 1 0 0 1-1.055.067l-.107-.067L2 5.943V12h12zM2.721 4h10.558L8 7.771z"})]})})}function On(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileImageIcon",...e,children:gn("g",{
+"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M12.685.144A.5.5 0 0 0 12.333 0H1.5a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V2.643a.5.5 0 0 0-.148-.356zM2 1h9v2.5a.5.5 0 0 0 .5.5H14v11H2zm7.541 4.122.055.069 3.333 5.143a.432.432 0 0 1-.266.658l-.08.008H9.23a.93.93 0 0 0-.076-.98l-1.79-2.456 1.54-2.373a.41.41 0 0 1 .637-.069m-3.29 1.764-.062-.068a.41.41 0 0 0-.605.068l-2.5 3.428-.04.067c-.135.275.056.619.373.619h5l.076-.007a.432.432 0 0 0 .257-.679z"})]})})}function Fn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"HideIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"m1.613.21.094.083 14 14a1 1 0 0 1-1.32 1.497l-.094-.083-14-14A1 1 0 0 1 1.613.21m.583 4.845a1 1 0 0 1 .292 1.384C2.165 6.935 2 7.46 2 8c0 2.123 2.628 4 6 4q.33 0 .657-.024a1 1 0 0 1 .147 1.994Q8.405 14 8 14c-4.36 0-8-2.6-8-6 0-.937.283-1.84.812-2.653a1 1 0 0 1 1.384-.292M16 8c0-3.4-3.64-6-8-6q-.405 0-.804.03a1 1 0 1 0 .147 1.994Q7.668 4 8 4c3.372 0 6 1.877 6 4 0 .539-.165 1.065-.488 1.561a1 1 0 1 0 1.676 1.092C15.718 9.84 16 8.937 16 8"})]})})}function qn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ImageIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M15.995 1.85A2 2 0 0 0 14 0H2l-.15.005A2 2 0 0 0 0 2v12l.005.15A2 2 0 0 0 2 16h12l.15-.005A2 2 0 0 0 16 14V2zM2 2h12v12H2zm7.541 3.122.055.069 3.333 5.143a.432.432 0 0 1-.266.658l-.08.008H9.23a.93.93 0 0 0-.076-.98l-1.79-2.456 1.54-2.373a.41.41 0 0 1 .637-.069m-3.29 1.764-.062-.068a.41.41 0 0 0-.605.068l-2.5 3.428-.04.067c-.135.275.056.619.373.619h5l.076-.007a.432.432 0 0 0 .257-.679z"})]})})}function jn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LogoIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M13.83 0C14.476 0 15 .53 15 1.185V12.69c0 .654-.524 1.185-1.17 1.185H9.75L8 16l-1.75-2.125H2.17c-.646 0-1.17-.53-1.17-1.185V1.186C1 .53 1.524 0 2.17 0z"}),gn("path",{fill:"#fff",
+d:"M4.785 2.133h-1.71v9.6h1.71V8.735c0-1.522.473-1.754.905-1.793l.228-.009.17.003c.51.02.979.15.979 1.199v3.598h1.71V7.598c0-1.865-1.152-2.463-2.29-2.463l-.39.003c-.753.017-.822.154-1.312 1.197zM11.889 9.6c-.573 0-1.037.477-1.037 1.067 0 .589.464 1.066 1.037 1.066s1.037-.477 1.037-1.066S12.462 9.6 11.889 9.6"})]})})}function Un(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","data-component":"MenuCollapseIcon",...e,children:gn("path",{fill:"currentColor",d:"m8.54 4.205 6.23 5.87a.69.69 0 0 1 0 1.03l-.72.68a.8.8 0 0 1-1.09 0L8 7.135l-4.96 4.65a.8.8 0 0 1-1.09 0l-.73-.69a.69.69 0 0 1 0-1.02l6.24-5.87a.8.8 0 0 1 1.08 0"})})}function Vn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16","data-component":"MenuExpandIcon",...e,children:gn("path",{fill:"currentColor",
+d:"M7.456 11.788 1.226 5.92a.695.695 0 0 1 0-1.025l.726-.684a.804.804 0 0 1 1.087-.001L8 8.861l4.961-4.65a.804.804 0 0 1 1.087.001l.727.684c.3.283.3.742 0 1.025l-6.23 5.867a.804.804 0 0 1-1.09 0z"})})}function Wn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"OrderableIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M4.293 5.293a1 1 0 0 0 1.414 1.414L8 4.414l2.293 2.293a1 1 0 1 0 1.414-1.414l-3-3a1 1 0 0 0-1.414 0zm0 5.414a1 1 0 0 1 1.414-1.414L8 11.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0z"})]})})}function $n(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"9","data-component":"PointerDownIcon",...e,children:gn("path",{stroke:"currentColor",d:"m15.5 0-7 8-8-8"})})}function Gn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"9","data-component":"PointerUpIcon",...e,
+children:gn("path",{stroke:"currentColor",d:"m.5 9 7-8 8 8"})})}function Xn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ProfileIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 9c4.36 0 8 2.6 8 6a1 1 0 0 1-1.993.117L14 15c0-2.123-2.628-4-6-4s-6 1.877-6 4a1 1 0 1 1-2 0c0-3.4 3.64-6 8-6M6 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0"})]})})}function Kn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"RadioIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8","clip-rule":"evenodd"})]})})}function Jn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",
+"aria-hidden":"true",viewBox:"0 0 16 16","data-component":"RadioCheckedIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8","clip-rule":"evenodd"}),gn("path",{fill:"currentColor",d:"M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0"})]})})}function Qn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ReplyIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.707.293a1 1 0 0 1 .083 1.32l-.083.094L5.415 4H8a6 6 0 0 1 0 12 1 1 0 1 1 0-2 4 4 0 0 0 0-8H5.415l2.292 2.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4a1 1 0 0 1 1.414 0"})]})})}function Zn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",
+viewBox:"0 0 16 16","data-component":"SettingsIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M3 1c1.312 0 2.427.842 2.835 2.015l.048-.008L6 3h9a1 1 0 0 1 .117 1.993L15 5H6q-.085 0-.166-.014A3 3 0 1 1 3 1m13 11a3 3 0 0 0-5.834-.986A1 1 0 0 0 10 11H1l-.117.007A1 1 0 0 0 1 13h9l.117-.007.048-.008A3.001 3.001 0 0 0 16 12m-4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0M2 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0"})]})})}function Yn(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ShareIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8.707.293 8.613.21 8.51.14a1 1 0 0 0-1.218.153l-4 4-.083.094a1 1 0 0 0 .083 1.32l.094.083a1 1 0 0 0 1.32-.083L7 3.415V11l.007.117A1 1 0 0 0 9 11V3.415l2.293 2.292.094.083a1 1 0 0 0 1.32-1.497zm7.286 9.59A1 1 0 0 0 15 9l-.117.007A1 1 0 0 0 14 10v4H2v-4l-.007-.117A1 1 0 0 0 0 10v5l.007.117A1 1 0 0 0 1 16h14l.117-.007A1 1 0 0 0 16 15v-5z"})]})})}function et(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ShowIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 2c4.36 0 8 2.6 8 6s-3.64 6-8 6-8-2.6-8-6 3.64-6 8-6m0 2C4.628 4 2 5.877 2 8s2.628 4 6 4 6-1.877 6-4-2.628-4-6-4m2 4a2 2 0 1 0-4 0 2 2 0 0 0 4 0"})]})})}function nt(e){return gn("svg",{width:"16",height:"16",viewBox:"0 0 64 64","data-component":"SpinnerSpokesIcon",...e,children:gn("g",{stroke:"currentColor","stroke-linecap":"round","stroke-width":"6",children:[gn("path",{
+d:"M32 16V4",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:"0;1;.8;.65;.45;.3;.15;0"})}),gn("path",{d:"m43.314 20.686 8.485-8.485",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:".15;0;1;.8;.65;.45;.3;.15"})}),gn("path",{d:"M48 32h12",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:".3;.15;0;1;.8;.65;.45;.3"})}),gn("path",{d:"m43.314 43.314 8.485 8.485",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:".45;.3;.15;0;1;.85;.65;.45"})}),gn("path",{d:"M32 48v12",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:".65;.45;.3;.15;0;1;.8;.65;"})}),gn("path",{d:"m20.686 43.314-8.485 8.485",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:".8;.65;.45;.3;.15;0;1;.8"})}),gn("path",{d:"M16 32H4",children:gn("animate",{
+attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:"1;.85;.6;.45;.3;.15;0;1;"})}),gn("path",{d:"m20.686 20.686-8.485-8.485",children:gn("animate",{attributeName:"stroke-opacity",dur:"750ms",repeatCount:"indefinite",values:"0;1;.8;.65;.45;.3;.15;0"})})]})})}var tt=Object.freeze({__proto__:null,AnnotateIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"AnnotateIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M14 0a2 2 0 0 1 2 2v13a1 1 0 0 1-1.555.832l-4.262-1.757A1 1 0 0 0 9.802 14H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm-2.109 3.5h-.484l-.14.006-.122.018a.7.7 0 0 0-.2.071l-.076.054-.108.1-.097.1-1.632 1.999-.091.12-.084.129a2.6 2.6 0 0 0-.291.722l-.03.142-.027.218-.009.223v2.646l.01.086.027.08a.54.54 0 0 0 .236.236l.067.028.07.017.074.005h2.907l.074-.005.094-.025a.5.5 0 0 0 .169-.108.5.5 0 0 0 .082-.096l.029-.051.027-.081.01-.086V7.336l-.006-.073-.018-.068a.44.44 0 0 0-.124-.178.6.6 0 0 0-.103-.074l-.055-.026-.087-.024-.092-.009h-.579l-.057-.006-.054-.017a.3.3 0 0 1-.096-.07.2.2 0 0 1-.045-.078l-.004-.04.01-.043.022-.043 1.311-2.227.047-.09.037-.106a.5.5 0 0 0-.06-.394.53.53 0 0 0-.255-.22l-.084-.028-.092-.016zm-5.924 0h-.424l-.121.006-.108.018a.6.6 0 0 0-.174.071l-.067.054-.095.1-.084.1-1.429 1.999-.08.12-.096.174a2.8 2.8 0 0 0-.232.677l-.025.142-.024.218L3 7.402v2.646l.008.086.024.08a.5.5 0 0 0 .097.148q.052.055.11.088l.058.028.062.017.065.005h2.543l.065-.005.082-.025a.515.515 0 0 0 .22-.204l.025-.051.024-.081.008-.086V7.336l-.005-.073-.023-.09a.487.487 0 0 0-.191-.23l-.048-.026-.076-.024-.08-.009H5.46l-.05-.006-.047-.017a.3.3 0 0 1-.084-.07.2.2 0 0 1-.04-.078l-.003-.04.008-.043.02-.043L6.411 4.36l.04-.09.033-.106a.55.55 0 0 0-.053-.394.5.5 0 0 0-.222-.22l-.074-.028-.08-.016z"
+})]})})},ArrowDownIcon:kn,ArrowLeftIcon:_n,ArrowRightIcon:Ln,ArrowUpIcon:An,BellFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"BellFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M9.873 1.298a2 2 0 0 0-3.746 0A6 6 0 0 0 2 7v2.5H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2h-1V7c0-2.66-1.73-4.915-4.127-5.702M10.13 12.5a.27.27 0 0 0-.25.185 2 2 0 0 1-3.76 0 .27.27 0 0 0-.25-.185H4.313a.237.237 0 0 0-.238.28 4.001 4.001 0 0 0 7.848 0 .237.237 0 0 0-.238-.28z"})]})})},BellIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"BellIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8 0a2 2 0 0 1 1.873 1.298A6 6 0 0 1 14 7v2.5h1a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2h1V7c0-2.66 1.73-4.915 4.127-5.702A2 2 0 0 1 8 0m0 3a4 4 0 0 0-4 4v2a.5.5 0 0 0 .5.5h7A.5.5 0 0 0 12 9V7a4 4 0 0 0-4-4","clip-rule":"evenodd"}),gn("path",{fill:"currentColor",d:"M9.88 12.685a.27.27 0 0 1 .25-.185h1.556c.15 0 .267.132.238.28a4.001 4.001 0 0 1-7.848 0 .237.237 0 0 1 .238-.28H5.87c.114 0 .212.078.251.185a2 2 0 0 0 3.76 0"})]})})},BookmarkFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"BookmarkFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M13 0a1 1 0 0 1 .993.883L14 1v14a1 1 0 0 1-1.534.846l-.09-.065L8 12.28l-4.375 3.5a1 1 0 0 1-1.6-.556l-.02-.112L2 15V1a1 1 0 0 1 .883-.993L3 0z"})]})})},BookmarkIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",
+viewBox:"0 0 16 16","data-component":"BookmarkIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M3 0h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1.625.78L8 12.28l-4.375 3.5a1 1 0 0 1-1.62-.668L2 15V1a1 1 0 0 1 1-1m9 12.92V2H4v10.919l3.375-2.7a1 1 0 0 1 1.147-.072l.103.072z"})]})})},CancelIcon:Nn,CaretDownIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CaretDownIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M3.293 5.293a1 1 0 0 1 1.32-.083l.094.083L8 8.585l3.293-3.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 .083 1.32l-.083.094-4 4a1 1 0 0 1-1.32.083l-.094-.083-4-4a1 1 0 0 1 0-1.414"})]})})},CaretLeftIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16",
+"data-component":"CaretLeftIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M9.293 3.293a1 1 0 0 1 1.497 1.32l-.083.094L7.415 8l3.292 3.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083-4-4a1 1 0 0 1-.083-1.32l.083-.094z"})]})})},CaretRightIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CaretRightIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M5.293 3.293a1 1 0 0 1 1.32-.083l.094.083 4 4a1 1 0 0 1 .083 1.32l-.083.094-4 4a1 1 0 0 1-1.497-1.32l.083-.094L8.585 8 5.293 4.707a1 1 0 0 1-.083-1.32z"})]})})},CaretUpIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CaretUpIcon",...e,children:gn("g",{"fill-rule":"evenodd",
+children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.293 5.293a1 1 0 0 1 1.32-.083l.094.083 4 4a1 1 0 0 1-1.32 1.497l-.094-.083L8 7.415l-3.293 3.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1-.083-1.32l.083-.094z"})]})})},CautionFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CautionFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M9.794 1.148C9.432.455 8.767 0 8 0S6.568.455 6.206 1.148L.29 12.474a2.6 2.6 0 0 0-.071 2.23C.504 15.356 1.144 16 2.082 16h11.836c.938 0 1.578-.645 1.864-1.295a2.6 2.6 0 0 0-.07-2.23zM9 6a1 1 0 1 0-2 0v3a1 1 0 0 0 2 0zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2"})]})})},CautionIcon:Mn,CcStdFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CcStdFilledIcon",
+...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.985 0q3.357 0 5.715 2.343a7.7 7.7 0 0 1 1.714 2.579Q15.999 6.37 16 8a8.2 8.2 0 0 1-.578 3.078 7.35 7.35 0 0 1-1.708 2.536 8.2 8.2 0 0 1-2.657 1.772Q9.572 16 7.986 16a7.8 7.8 0 0 1-3.036-.607 8.05 8.05 0 0 1-2.6-1.757A7.846 7.846 0 0 1 0 8q0-1.586.607-3.05A8 8 0 0 1 2.371 2.33Q4.657 0 7.985 0m-2.2 5.515q-1.014 0-1.678.672-.665.67-.665 1.814 0 1.17.657 1.828t1.73.657q.671 0 1.228-.335.477-.288.776-.76l.095-.162-.985-.5q-.287.686-.986.686-.53 0-.8-.386Q4.884 8.643 4.884 8q0-1.415 1.072-1.415a.991.991 0 0 1 .814.509l.071.134 1.072-.557q-.643-1.157-2.129-1.157m2.95.672q.665-.672 1.679-.672 1.486 0 2.114 1.157l-1.057.557-.072-.134a1 1 0 0 0-.35-.366 1 1 0 0 0-.478-.143Q9.5 6.586 9.5 8.001q0 .642.272 1.028.27.386.8.386.7 0 .985-.686l1 .5-.115.189q-.306.453-.77.733a2.3 2.3 0 0 1-1.214.335q-1.086 0-1.735-.657-.65-.657-.65-1.828-.001-1.143.664-1.814"})]})})},CcStdIcon:function(e){
+return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CcStdIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M13.7 2.343Q11.342 0 7.985 0 4.657 0 2.371 2.329A8 8 0 0 0 .607 4.95 7.9 7.9 0 0 0 0 8a7.85 7.85 0 0 0 2.35 5.636 8.05 8.05 0 0 0 2.6 1.757A7.8 7.8 0 0 0 7.986 16a8 8 0 0 0 3.071-.614q1.486-.615 2.657-1.772a7.35 7.35 0 0 0 1.707-2.536A8.2 8.2 0 0 0 16 8a8.15 8.15 0 0 0-.586-3.078A7.7 7.7 0 0 0 13.7 2.343M3.4 3.357q1.872-1.914 4.614-1.914 2.714 0 4.644 1.929a6.4 6.4 0 0 1 1.413 2.114q.486 1.185.486 2.515 0 2.757-1.871 4.586a6.9 6.9 0 0 1-2.178 1.443q-1.209.5-2.494.5a6.4 6.4 0 0 1-2.485-.493 6.6 6.6 0 0 1-2.13-1.43 6.6 6.6 0 0 1-1.45-2.128A6.3 6.3 0 0 1 1.444 8q0-1.299.507-2.493a6.9 6.9 0 0 1 1.45-2.15m4.514 3.315-1.072.557q-.171-.357-.42-.5a.95.95 0 0 0-.465-.143q-1.072 0-1.072 1.415 0 .642.271 1.028.272.386.8.386.7 0 .987-.686l.985.5a2.35 2.35 0 0 1-2.1 1.257q-1.07 0-1.729-.657-.657-.657-.657-1.828 0-1.143.665-1.814.664-.672 1.678-.672 1.486 0 2.13 1.157m3.557.557 1.057-.557q-.628-1.157-2.114-1.157-1.015 0-1.678.672Q8.07 6.857 8.07 8q0 1.17.65 1.828t1.736.657q.657 0 1.214-.335.557-.336.885-.922l-1-.5q-.285.686-.985.686-.53 0-.8-.386Q9.5 8.643 9.499 8q0-1.415 1.072-1.415.228 0 .479.143.25.143.421.5"
+})]})})},CcZeroFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CcZeroFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M13.703 2.342C12.131.78 10.221 0 7.983 0Q4.655-.002 2.37 2.325A8.1 8.1 0 0 0 .6 4.958Q0 6.415 0 8q0 1.6.6 3.042.6 1.444 1.741 2.599a8.3 8.3 0 0 0 2.6 1.76q1.457.6 3.042.599a8 8 0 0 0 3.076-.617 8.2 8.2 0 0 0 2.655-1.77 7.3 7.3 0 0 0 1.703-2.526A8.1 8.1 0 0 0 16 8a8.1 8.1 0 0 0-.582-3.076 7.7 7.7 0 0 0-1.715-2.582M4.71 7.46C4.82 5.485 5.581 3.395 8 3.395c2.641 0 3.305 2.492 3.305 4.605S10.641 12.605 8 12.605c-2.348 0-3.134-1.969-3.28-3.89l-.02-.36L4.695 8l.007-.355zm4.608-.838.04.249q.034.25.048.49l.011.23.007.516-.008.363-.015.267-.026.279-.04.283c-.136.802-.478 1.57-1.333 1.57q-.108 0-.204-.015l-.093-.02-.135-.043c-.28-.12-.463-.327-.274-.682l.056-.092zM8.297 5.17A1.2 1.2 0 0 0 8 5.13c-.855 0-1.198.769-1.334 1.57l-.04.283-.026.279-.015.266-.006.249v.413c.002.201.01.433.033.674l.027.244 1.759-3.232.05-.102c.11-.264.018-.458-.151-.604"})]})})},CcZeroIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16",
+"data-component":"CcZeroIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M7.983 0c2.238 0 4.148.78 5.72 2.342a7.7 7.7 0 0 1 1.715 2.582c.39.962.582 1.99.582 3.076a8.1 8.1 0 0 1-.583 3.087 7.3 7.3 0 0 1-1.703 2.526 8.2 8.2 0 0 1-2.655 1.77Q9.572 16 7.983 16a7.9 7.9 0 0 1-3.042-.6 8.3 8.3 0 0 1-2.6-1.759A8.1 8.1 0 0 1 .6 11.042 7.8 7.8 0 0 1 0 8q0-1.585.6-3.042a8.1 8.1 0 0 1 1.77-2.633C3.893.772 5.764 0 7.983 0m.034 1.44Q5.272 1.44 3.4 3.355a7 7 0 0 0-1.457 2.157 6.387 6.387 0 0 0 0 4.969 6.83 6.83 0 0 0 3.585 3.558q1.186.486 2.488.487a6.4 6.4 0 0 0 2.482-.498 6.9 6.9 0 0 0 2.185-1.446C13.93 11.364 14.56 9.839 14.56 8a6.6 6.6 0 0 0-.487-2.515 6.4 6.4 0 0 0-1.418-2.118Q10.73 1.439 8.017 1.44M11.305 8c0-2.113-.664-4.605-3.305-4.605-2.495 0-3.226 2.223-3.3 4.25L4.695 8c0 2.113.665 4.605 3.306 4.605S11.305 10.113 11.305 8M9.316 6.622 7.35 10.017c-.274.412-.083.645.219.774l.135.044q.137.033.297.034c1.358 0 1.422-1.938 1.422-2.869l-.007-.409a7 7 0 0 0-.06-.72zM6.58 7.778c.015-.985.163-2.646 1.421-2.646.107 0 .205.016.297.039.19.164.283.39.1.705L6.64 9.11l-.027-.244A10 10 0 0 1 6.577 8z"
+})]})})},CheckAllIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CheckAllIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.58 2.332a1 1 0 0 1 .235 1.394l-7 9.853a1 1 0 0 1-1.672-.065l-3-5a1 1 0 1 1 1.714-1.028l2.214 3.688 6.114-8.606a1 1 0 0 1 1.394-.236M.486 7.143a1 1 0 0 1 1.371.343l3 5a1 1 0 1 1-1.715 1.028l-3-5a1 1 0 0 1 .344-1.371"}),gn("path",{fill:"currentColor",d:"M11.6 2.2a1 1 0 0 1 .2 1.4l-3 4a1 1 0 1 1-1.6-1.2l3-4a1 1 0 0 1 1.4-.2"})]})})},CheckIcon:Tn,CheckboxCheckedFilledIcon:Dn,CheckboxCheckedIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CheckboxCheckedIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M0 2.5A2.5 2.5 0 0 1 2.5 0h11A2.5 2.5 0 0 1 16 2.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 13.5zM2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 13.5 1z","clip-rule":"evenodd"}),gn("path",{fill:"currentColor",d:"M11.136 3.82a.75.75 0 0 1 1.278.78l-.05.08-5.25 7.5a.75.75 0 0 1-1.204.034l-.053-.078-2.25-3.75a.75.75 0 0 1 1.237-.844l.05.072 1.654 2.758z"})]})})},CheckboxIcon:zn,ClockFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ClockFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 8c0-4.052-3.948-8-8-8S0 3.948 0 8s3.948 8 8 8 8-3.948 8-8M9 4a1 1 0 1 0-2 0v4a1 1 0 0 0 .445.832l3 2a1 1 0 0 0 1.11-1.664L9 7.465z"})]})})},ClockIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16",
+"data-component":"ClockIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 0c4.052 0 8 3.948 8 8s-3.948 8-8 8-8-3.948-8-8 3.948-8 8-8m0 2C5.052 2 2 5.052 2 8s3.052 6 6 6 6-3.052 6-6-3.052-6-6-6"}),gn("path",{fill:"currentColor",d:"M8 3a1 1 0 0 1 1 1v3.465l2.555 1.703a1 1 0 0 1-1.11 1.664l-3-2A1 1 0 0 1 7 8V4a1 1 0 0 1 1-1"})]})})},CodeIcon:Hn,CollapseIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CollapseIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M15.79 1.613a1 1 0 0 0-1.497-1.32L11 3.584V2l-.007-.117A1 1 0 0 0 9 2v4l.007.117A1 1 0 0 0 10 7h4l.117-.007A1 1 0 0 0 15 6l-.007-.117A1 1 0 0 0 14 5h-1.586l3.293-3.293zm-8.797 8.27A1 1 0 0 0 6 9H2l-.117.007A1 1 0 0 0 1 10l.007.117A1 1 0 0 0 2 11h1.584L.293 14.293l-.083.094a1 1 0 0 0 1.497 1.32L5 12.414V14l.007.117A1 1 0 0 0 7 14v-4z"})]})})},ContrastIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ContrastIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 8c0-4.052-3.948-8-8-8S0 3.948 0 8s3.948 8 8 8 8-3.948 8-8m-2 0c0 2.948-3.052 6-6 6V2l.201.005C11.085 2.139 14 5.119 14 8"})]})})},CopyFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"CopyFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",
+children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.993.883A1 1 0 0 0 15 0H7l-.117.007A1 1 0 0 0 6 1v10l.007.117A1 1 0 0 0 7 12h8l.117-.007A1 1 0 0 0 16 11V1zM.007 15.117A1 1 0 0 0 1 16h8l.117-.007A1 1 0 0 0 10 15v-1a1 1 0 0 0-1-1H5V5a1 1 0 0 0-1-1H1l-.117.007A1 1 0 0 0 0 5v10z"})]})})},CopyIcon:En,DottedCircleIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",viewBox:"0 0 16 16","data-component":"DottedCircleIcon",...e,children:gn("path",{fill:"currentColor","fill-rule":"evenodd",
+d:"M6.956.068a8 8 0 0 1 2.088 0 .889.889 0 1 1-.23 1.762 6.3 6.3 0 0 0-1.628 0 .889.889 0 0 1-.23-1.762m4.668 1.748a.89.89 0 0 1 1.247-.163c.554.426 1.05.922 1.476 1.476a.889.889 0 0 1-1.41 1.083 6.3 6.3 0 0 0-1.15-1.15.89.89 0 0 1-.163-1.246m-7.248 0c.299.39.226.948-.164 1.247a6.3 6.3 0 0 0-1.15 1.15.889.889 0 0 1-1.409-1.084A8 8 0 0 1 3.13 1.653a.89.89 0 0 1 1.247.163m10.56 4.374a.89.89 0 0 1 .996.766 8 8 0 0 1 0 2.088.889.889 0 1 1-1.762-.23 6.3 6.3 0 0 0 0-1.628.89.89 0 0 1 .766-.996m-13.872 0c.487.063.83.51.766.996a6.3 6.3 0 0 0 0 1.628.889.889 0 0 1-1.762.23 8 8 0 0 1 0-2.088.89.89 0 0 1 .996-.766m13.12 5.434c.389.3.462.857.163 1.247a8 8 0 0 1-1.476 1.476.889.889 0 0 1-1.084-1.41 6.3 6.3 0 0 0 1.15-1.15.89.89 0 0 1 1.247-.163m-12.368 0a.89.89 0 0 1 1.247.163c.331.432.718.819 1.15 1.15a.889.889 0 0 1-1.084 1.41 8 8 0 0 1-1.476-1.476.89.89 0 0 1 .163-1.247m4.374 3.312a.89.89 0 0 1 .996-.766 6.3 6.3 0 0 0 1.628 0 .889.889 0 1 1 .23 1.762 8 8 0 0 1-2.088 0 .89.89 0 0 1-.766-.996","clip-rule":"evenodd"})})},
+DownloadIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"DownloadIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m8.707 11.707-.094.083-.102.07a1 1 0 0 1-1.218-.153l-4-4-.083-.094a1 1 0 0 1 .083-1.32l.094-.083a1 1 0 0 1 1.32.083L7 8.585V1l.007-.117A1 1 0 0 1 9 1v7.585l2.293-2.292.094-.083a1 1 0 0 1 1.32 1.497zm7.286-1.824A1 1 0 0 0 15 9l-.117.007A1 1 0 0 0 14 10v4H2v-4l-.007-.117A1 1 0 0 0 0 10v5l.007.117A1 1 0 0 0 1 16h14l.117-.007A1 1 0 0 0 16 15v-5z"})]})})},EditIcon:Pn,EditorLatexIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EditorLatexIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M13.392 16q.237 0 .423-.108.185-.109.185-.248v-1.778q0-.149-.185-.252a.85.85 0 0 0-.423-.104H6.85q-.207 0-.267-.083-.06-.082 0-.152l5.533-5.101q.238-.21.193-.378a.75.75 0 0 0-.193-.325L6.88 2.707q-.06-.07-.007-.143.05-.075.289-.074h6.17a.8.8 0 0 0 .416-.108q.178-.109.178-.248V.356q0-.139-.178-.248A.8.8 0 0 0 13.333 0H2.904q-.238 0-.423.108-.185.109-.185.248v1.943q0 .192.11.326l.171.204 5.31 4.815q.06.07.075.178a.22.22 0 0 1-.074.195l-5.622 5.154a8 8 0 0 0-.163.2.5.5 0 0 0-.104.33v1.943q0 .139.185.248a.8.8 0 0 0 .423.108z"})]})})},EditorQuoteIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EditorQuoteIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M3.538 13.745Q3.27 14 2.7 14h-.754q-.57 0-.827-.463-.258-.463.037-1.011l2.04-3.817q.111-.19-.027-.35a.41.41 0 0 0-.322-.16h-.9a.73.73 0 0 1-.525-.227.74.74 0 0 1-.23-.548v-4.65q0-.3.23-.538A.71.71 0 0 1 1.947 2H6.47q.293 0 .524.236.23.236.23.539V7.31a4.7 4.7 0 0 1-.23 1.474 4.1 4.1 0 0 1-.598 1.19l-2.408 3.251q-.184.265-.45.52m7.776 0q-.267.255-.818.255h-.754q-.57 0-.836-.463-.267-.463.045-1.011l2.023-3.817q.11-.19-.019-.35a.39.39 0 0 0-.312-.16h-.901a.73.73 0 0 1-.524-.227.74.74 0 0 1-.23-.548v-4.65q0-.3.22-.538A.7.7 0 0 1 9.743 2h4.504q.294 0 .524.236t.23.539V7.31a4.9 4.9 0 0 1-.22 1.474q-.222.7-.607 1.19l-2.409 3.251q-.183.265-.45.52"})]})})},EditorTextBoldIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EditorTextBoldIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8.661 16q1.207 0 2.193-.351a5 5 0 0 0 1.69-.993q.706-.642 1.081-1.557t.375-2.03q0-.435-.114-.893a4 4 0 0 0-.325-.87 4 4 0 0 0-.495-.754 4.4 4.4 0 0 0-.604-.597q-.255-.19 0-.412.572-.503.953-1.311.382-.81.382-1.568 0-.96-.395-1.813a4.6 4.6 0 0 0-1.08-1.484q-.687-.63-1.627-.999A5.5 5.5 0 0 0 8.66 0h-6.14a.53.53 0 0 0-.362.14A.42.42 0 0 0 2 .456v15.086q0 .178.159.318.16.139.362.139zm-.127-9.852H5.826q-.255 0-.254-.223V3.437q0-.235.254-.235h2.708q.673 0 1.195.435.52.435.521 1.027 0 .591-.521 1.038a1.78 1.78 0 0 1-1.195.446m-2.708 6.65h2.708q.84 0 1.335-.525.495-.524.495-1.205 0-.658-.495-1.188-.496-.53-1.335-.53H5.826q-.255 0-.254.234v2.99q0 .224.254.224"})]})})},EditorTextItalicIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EditorTextItalicIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M10.61 16q.18 0 .329-.14a.63.63 0 0 0 .191-.317l.457-2.176a.35.35 0 0 0-.063-.313.34.34 0 0 0-.277-.133H8.845q-.213-.012-.17-.235l1.892-9.372q.053-.223.266-.223H13a.5.5 0 0 0 .335-.14.6.6 0 0 0 .196-.318L13.99.457a.5.5 0 0 0 .011-.1.34.34 0 0 0-.085-.223.34.34 0 0 0-.276-.134H5.805a.5.5 0 0 0-.335.14.62.62 0 0 0-.196.317l-.457 2.176a.35.35 0 0 0 .069.318q.111.14.281.14h2.18q.212 0 .17.223l-1.893 9.372q-.042.235-.255.235H2.967a.5.5 0 0 0-.324.133.6.6 0 0 0-.197.313l-.435 2.175a.5.5 0 0 0-.011.101q0 .123.074.223.107.134.266.134z"})]})})},EllipsisIcon:Bn,EllipsisVerticalIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EllipsisVerticalIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M10 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0m0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4"})]})})},EmailFilledIcon:function(e){
+return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"EmailFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.538 2.721A2 2 0 0 0 14 2H2l-.183.008a2 2 0 0 0-1.355.713L8 8.375zM7.7 9.4.031 3.647Q.001 3.82 0 4v8l.005.15A2 2 0 0 0 2 14h12l.15-.005A2 2 0 0 0 16 12V4l-.008-.178-.023-.174L8.3 9.4l-.08.049a.5.5 0 0 1-.44 0z"})]})})},EmailIcon:Rn,ExpandIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ExpandIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M15.993.883A1 1 0 0 0 15 0h-4l-.117.007A1 1 0 0 0 10 1l.007.117A1 1 0 0 0 11 2h1.584L9.293 5.293l-.083.094a1 1 0 0 0 1.497 1.32L14 3.414V5l.007.117A1 1 0 0 0 16 5V1zm-9.203 9.73a1 1 0 0 0-1.497-1.32L2 12.584V11l-.007-.117A1 1 0 0 0 0 11v4l.007.117A1 1 0 0 0 1 16h4l.117-.007A1 1 0 0 0 6 15l-.007-.117A1 1 0 0 0 5 14H3.414l3.293-3.293z"})]})})},ExternalIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ExternalIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M13 2a1 1 0 0 1 .993.883L14 3v6a1 1 0 0 1-1.993.117L12 9V5.414l-8.293 8.293a1 1 0 0 1-1.497-1.32l.083-.094L10.584 4H7a1 1 0 0 1-.993-.883L6 3a1 1 0 0 1 .883-.993L7 2z"})]})})},FileCodeFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileCodeFilledIcon",...e,
+children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M11 0v3.5a.5.5 0 0 0 .41.492L11.5 4H15v11.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zM6.53 5.47a.75.75 0 0 1 .073.976l-.073.084L5.061 8l1.47 1.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073-2-2a.75.75 0 0 1-.073-.976l.073-.084 2-2a.75.75 0 0 1 1.06 0m2.94 0a.75.75 0 0 1 .976-.073l.084.073 2 2 .073.084a.75.75 0 0 1 .007.882l-.08.094-2 2-.084.073a.75.75 0 0 1-.882.007l-.094-.08-.073-.084a.75.75 0 0 1-.007-.882l.08-.094L10.939 8l-1.47-1.47-.072-.084a.75.75 0 0 1 .073-.976"}),gn("path",{fill:"currentColor",d:"m12.685.144 2.167 2.143a.5.5 0 0 1 .148.356V3h-2.75a.25.25 0 0 1-.25-.25V0h.333a.5.5 0 0 1 .352.144"})]})})},FileCodeIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileCodeIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{
+fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M12.685.144A.5.5 0 0 0 12.333 0H1.5a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V2.643a.5.5 0 0 0-.148-.356zM2 1h9v2.5a.5.5 0 0 0 .5.5H14v11H2zm4.53 4.47a.75.75 0 0 1 .073.976l-.073.084L5.061 8l1.47 1.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073-2-2a.75.75 0 0 1-.073-.976l.073-.084 2-2a.75.75 0 0 1 1.06 0m4 0-.084-.073a.75.75 0 0 0-1.049 1.05l.073.083L10.939 8l-1.47 1.47-.08.094a.75.75 0 0 0 .008.882l.073.084.094.08a.75.75 0 0 0 .882-.007l.084-.073 2-2 .08-.094a.75.75 0 0 0-.007-.882l-.073-.084z"})]})})},FileGenericFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileGenericFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M11 0v3.5a.5.5 0 0 0 .41.492L11.5 4H15v11.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zM4.75 5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5zm0 2.75a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5zM4 11.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75"}),gn("path",{fill:"currentColor",d:"m12.685.144 2.167 2.143a.5.5 0 0 1 .148.356V3h-2.75a.25.25 0 0 1-.25-.25V0h.333a.5.5 0 0 1 .352.144"})]})})},FileGenericIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileGenericIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M12.333 0a.5.5 0 0 1 .352.144l2.167 2.143a.5.5 0 0 1 .148.356V15.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zM11 1H2v14h12V4h-2.5a.5.5 0 0 1-.5-.5zM8 11.25a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 .75-.75m3.25-3.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5zm.75-2a.75.75 0 0 0-.75-.75h-6.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 .75-.75"})]})})},FileImageFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FileImageFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M11 3.5V0H1.5a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V4h-3.5l-.09-.008A.5.5 0 0 1 11 3.5M8.958 5.122a.41.41 0 0 1 .583 0l.055.069 3.333 5.143.039.073a.43.43 0 0 1-.305.585l-.08.008H9.23l.044-.1a.93.93 0 0 0-.12-.88l-1.79-2.456 1.54-2.373zM6.19 6.818a.41.41 0 0 0-.544 0l-.061.068-2.5 3.428-.04.067a.432.432 0 0 0 .297.612l.076.007h5l.076-.007c.27-.05.42-.36.297-.612l-.04-.067-2.5-3.428zM12.685.144A.5.5 0 0 0 12.333 0H12v2.75c0 .138.112.25.25.25H15v-.357a.5.5 0 0 0-.148-.356z"})]})})},FileImageIcon:On,FilePdfFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FilePdfFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M11 0v3.5a.5.5 0 0 0 .41.492L11.5 4H15v11.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zM7.449 3c-.408 0-1.089.32-1.089 1.279 0 .821.091 1.552.68 2.511l-.15.394-.182.445q-.098.234-.212.485c-.108.273-.233.53-.355.78q-.123.252-.234.499c-.94.325-1.518.688-1.895.99l-.187.159-.153.143-.124.123c-.686.73-.583 1.281-.456 1.555l.048.09.098.126c.156.187.41.421.809.421a1 1 0 0 0 .21-.028l.243-.063.111-.051.071-.042.083-.057.093-.075.106-.098.119-.124.064-.073.138-.169.152-.203.167-.242.088-.136.189-.305q.098-.165.204-.352l.22-.403q.114-.214.237-.456c.363-.137.77-.228 1.225-.32a22 22 0 0 1 1.587-.228l.178.185.32.322c.694.682 1.05.887 1.498 1 .182.091.363.091.5.091.68 0 .997-.41 1.088-.639.09-.274.181-.959-.5-1.37-.457-.25-1.18-.425-2.102-.452l-.256-.004h-.363l-.103-.11-.222-.256a4 4 0 0 0-.129-.137l-.195-.216-.348-.4a12 12 0 0 1-.681-.89c.332-.838.445-1.355.482-1.77l.013-.218.004-.204C8.492 3.274 7.72 3 7.449 3m-2.428 8.01.205-.339c-.413.224-.67.425-.85.589l-.193.188c-.212.213-.259.37-.27.473l-.002.074.09.046h-.045l.029.023c.017.011.04.023.062.023 0 .045.045.045.09 0l.023-.007.039-.022.057-.044.035-.032.086-.085.105-.12.126-.16.148-.205.17-.254zm5.603-1.389c.314.018.568.062.766.113l.212.063.087.03.186.08.065.034.065.06c.05.051.101.122.07.214 0 .045-.09.09-.271.09l-.042-.006-.118-.032a.4.4 0 0 0-.067-.007c-.17-.034-.315-.094-.606-.334l-.218-.188zM7.84 7.901l-.164-.198v.046l-.243.571-.075.205-.13.268a2 2 0 0 0-.097.234h.046l-.09.046.249-.063c.079-.017.158-.028.25-.028q.135-.018.263-.042l.495-.1.239-.04-.208-.242-.19-.23zm-.391-3.988c.09.046.227.229.227.64l-.002.167a3.2 3.2 0 0 1-.18.928c-.181-.548-.226-.913-.181-1.324q0-.342.136-.41M12.685.144A.5.5 0 0 0 12.333 0H12v2.75c0 .138.112.25.25.25H15v-.357a.5.5 0 0 0-.148-.356z"
+})]})})},FilePdfIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FilePdfIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M12.333 0a.5.5 0 0 1 .352.144l2.167 2.143a.5.5 0 0 1 .148.356V15.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zM11 1H2v14h12V4h-2.5a.5.5 0 0 1-.5-.5zM8.538 4.507C8.492 3.274 7.72 3 7.449 3c-.408 0-1.089.32-1.089 1.279 0 .821.091 1.552.68 2.511l-.15.394-.182.445q-.098.234-.212.485c-.108.273-.233.53-.355.78q-.123.252-.234.499c-.94.325-1.518.688-1.895.99l-.187.159-.08.073-.197.193c-.686.73-.583 1.281-.456 1.555l.048.09.098.126c.156.187.41.421.809.421a1 1 0 0 0 .21-.028l.243-.063.111-.051.071-.042.083-.057.093-.075.106-.098.058-.059.125-.138.138-.169.152-.203.082-.116.173-.262.093-.147.196-.328.104-.182.22-.403q.114-.214.237-.456c.363-.137.77-.228 1.225-.32a22 22 0 0 1 1.587-.228l.178.185.32.322c.694.682 1.05.887 1.498 1 .182.091.363.091.5.091.68 0 .997-.41 1.088-.639.09-.274.181-.959-.5-1.37-.498-.274-1.315-.456-2.358-.456h-.363a3 3 0 0 1-.103-.11l-.222-.256-.129-.137-.195-.216-.348-.4a12 12 0 0 1-.681-.89c.332-.838.445-1.355.482-1.77l.013-.218zM5.226 10.67c-.413.224-.67.425-.85.589l-.193.188c-.212.213-.259.37-.27.473l-.002.074.09.046h-.045l.029.023c.017.011.04.023.062.023 0 .045.045.045.09 0l.023-.007.039-.022.057-.044.075-.07.096-.103.116-.139.137-.181.076-.109.17-.254.194-.31q.052-.084.106-.177m5.642-.831-.244-.219c.314.018.568.062.766.113l.212.063.087.03.136.057.115.057.065.06c.05.051.101.122.07.214 0 .045-.09.09-.271.09a.2.2 0 0 1-.042-.006l-.118-.032-.067-.007c-.19-.038-.347-.107-.709-.42M7.676 7.703v.046l-.243.571a4 4 0 0 0-.075.205l-.13.268a2 2 0 0 0-.097.234h.046l-.09.046.249-.063c.079-.017.158-.028.25-.028l.263-.042.495-.1.239-.04a15 15 0 0 1-.398-.472L7.84 7.9zm-.363-3.379q0-.342.136-.41c.09.045.227.228.227.639v.08l-.007.183a3.3 3.3 0 0 1-.175.832c-.181-.548-.226-.913-.181-1.324"
+})]})})},FilterClearIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FilterClearIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m8.4 12 1.428 2H5a1 1 0 0 1-.117-1.993L5 12zM11.172 9H13l.117-.007A1 1 0 0 0 13 7H9.744zM4.828 7l1.428 2H3a1 1 0 0 1-.117-1.993L3 7zM7.6 4H15l.117-.007A1 1 0 0 0 15 2H6.172zM1.268 2q.048.083.105.162L2.685 4H1a1 1 0 0 1-.117-1.993L1 2zM13.581 15.814a1 1 0 0 0 .233-1.395l-10-14A1 1 0 1 0 2.186 1.58l10 14a1 1 0 0 0 1.395.233"})]})})},FilterIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FilterIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M16 3a1 1 0 0 0-1-1H1l-.117.007A1 1 0 0 0 1 4h14l.117-.007A1 1 0 0 0 16 3m-3 4a1 1 0 0 1 .117 1.993L13 9H3a1 1 0 0 1-.117-1.993L3 7zm-2 5a1 1 0 0 1 .117 1.993L11 14H5a1 1 0 0 1-.117-1.993L5 12z"})]})})},FlagFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FlagFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M2 1a1 1 0 0 1 .883-.993L3 0h12c.852 0 1.297.986.783 1.623l-.076.084L12.415 5l3.292 3.293c.575.575.253 1.523-.485 1.684l-.108.017L15 10H4v5a1 1 0 0 1-1.993.117L2 15z"})]})})},FlagIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FlagIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M2.883.007A1 1 0 0 0 2 1v14l.007.117A1 1 0 0 0 4 15v-5h11l.114-.006.108-.017c.738-.16 1.06-1.109.485-1.684L12.415 5l3.292-3.293.076-.084C16.297.986 15.853 0 15 0H3zM4 2h8.584l-2.291 2.293-.083.094-.07.102a1 1 0 0 0 .153 1.218L12.585 8H4z"})]})})},FlashcardIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FlashcardIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M0 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0z"}),gn("path",{fill:"currentColor",d:"M0 11.5a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-1 0zM15 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0z"}),gn("path",{fill:"currentColor",d:"M15 11.5a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-1 0zM2 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10 .5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5z"})]})})},FolderFilledIcon:function(e){return gn("svg",{
+xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FolderFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M1.356 1.007A1.5 1.5 0 0 0 0 2.5V4h16v-.5l-.007-.144A1.5 1.5 0 0 0 14.5 2H5.915A1.5 1.5 0 0 0 4.5 1h-3zM16 13.5V5H0v8.5l.007.145A1.5 1.5 0 0 0 1.5 15h13l.145-.007A1.5 1.5 0 0 0 16 13.5"})]})})},FolderIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FolderIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M4.5 1a1.5 1.5 0 0 1 1.339.823l.056.125.018.052H14.5a1.5 1.5 0 0 1 1.473 1.215l.02.14L16 3.5v10a1.5 1.5 0 0 1-1.355 1.493L14.5 15h-13a1.5 1.5 0 0 1-1.493-1.355L0 13.5v-11a1.5 1.5 0 0 1 1.356-1.493L1.5 1zM15 5H1v8.5a.5.5 0 0 0 .41.492L1.5 14h13a.5.5 0 0 0 .492-.41L15 13.5zM1.5 2h3l.09.008a.5.5 0 0 1 .402.402l.016.18A.5.5 0 0 0 5.5 3h9l.09.008A.5.5 0 0 1 15 3.5V4H1V2.5l.008-.09A.5.5 0 0 1 1.5 2"})]})})},FolderOpenFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FolderOpenFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M6.895 1.948A1.5 1.5 0 0 0 5.5 1h-3l-.144.007A1.5 1.5 0 0 0 1 2.5L.999 4.133a1.5 1.5 0 0 0-.873 1.533l.877 7.89.006.135C1.08 14.405 1.72 15 2.5 15h11l.145-.007A1.5 1.5 0 0 0 15 13.5l.874-7.834.006-.083.003-.083A1.5 1.5 0 0 0 15 4.133L15 3.5l-.007-.144A1.5 1.5 0 0 0 13.5 2H6.913zM2.5 2h3l.09.008A.5.5 0 0 1 6 2.5l.008.09A.5.5 0 0 0 6.5 3h7l.09.008A.5.5 0 0 1 14 3.5V4H2V2.5l.008-.09A.5.5 0 0 1 2.5 2"})]})})},FolderOpenIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"FolderOpenIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M5.5 1a1.5 1.5 0 0 1 1.339.823l.056.125.018.052H13.5a1.5 1.5 0 0 1 1.473 1.215l.02.14L15 3.5l.001.633c.477.217.82.677.874 1.228l.008.153-.005.096L15 13.5a1.5 1.5 0 0 1-1.356 1.493L13.5 15h-11c-.78 0-1.42-.595-1.49-1.31l-.007-.135-.877-7.89A1.5 1.5 0 0 1 1 4.136V2.5a1.5 1.5 0 0 1 1.356-1.493L2.5 1zM1.593 5l-.031.003a.5.5 0 0 0-.444.462l.002.09L2 13.5a.5.5 0 0 0 .41.492L2.5 14h11c.245 0 .45-.177.494-.449l.009-.106.878-7.904.002-.041a.5.5 0 0 0-.41-.492L14.383 5zM2.5 2h3l.09.008A.5.5 0 0 1 6 2.5l.008.09A.5.5 0 0 0 6.5 3h7l.09.008.085.023A.5.5 0 0 1 14 3.5V4H2V2.5l.008-.09A.5.5 0 0 1 2.5 2"})]})})},GlobeIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GlobeIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-8.86 2.516a23 23 0 0 1 1.72.002c-.093.809-.232 1.543-.407 2.157l-.06.198-.073.222a5 5 0 0 1-.229.55L8 13.81l-.078-.138-.078-.16a6 6 0 0 1-.297-.836 13.7 13.7 0 0 1-.407-2.16m-4.06.604-.17.058a6.02 6.02 0 0 0 2.8 2.37 12.6 12.6 0 0 1-.467-2.03l-.054-.383-.054-.451a13 13 0 0 0-1.807.36zm7.731.016.055-.452.323.046c.741.115 1.39.268 1.902.447a6.02 6.02 0 0 1-2.8 2.37c.228-.693.402-1.508.52-2.411M2.146 6.673l-.001.012a6 6 0 0 0 .003 2.643c.781-.285 1.761-.504 2.86-.645l-.006-.38v-.606l.006-.378c-1.099-.141-2.079-.36-2.862-.646m11.578.046.129-.046Q13.999 7.314 14 8q-.002.687-.146 1.328c-.783-.285-1.763-.504-2.862-.645l.006-.38L11 8q0-.305-.006-.603l-.002-.078c1.039-.134 1.972-.337 2.732-.6m-4.73.762-.259.01a26 26 0 0 1-1.73-.009L7 8q0 .262.006.52a24 24 0 0 1 1.988 0L9 8zM7.922 2.33l.077-.14.08.14.077.16c.102.227.203.508.297.835.175.614.314 1.349.407 2.16a23 23 0 0 1-1.72-.002c.093-.81.232-1.544.407-2.158a5.6 5.6 0 0 1 .375-.995m-2.212.123-.045.019a6.02 6.02 0 0 0-2.756 2.351c.584.206 1.348.376 2.225.494l.055-.453c.118-.903.292-1.718.52-2.411m4.63.157-.05-.158.265.118a6.03 6.03 0 0 1 2.537 2.254c-.585.205-1.35.375-2.227.494l-.054-.454-.058-.411a13 13 0 0 0-.412-1.843"
+})]})})},GlobeLockIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GlobeLockIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.372 10.303c-.07-1.663-.816-2.364-2.497-2.364-1.726 0-2.5.774-2.5 2.5v.312c0 .173.14.313.313.313h.624c.173 0 .313-.14.313-.313v-.312l.003-.11c.057-.985.248-1.14 1.247-1.14 1.036 0 1.25.214 1.25 1.25v.312c0 .173.14.313.313.313h.624c.173 0 .313-.14.313-.313v-.312zm.624 1.938a.625.625 0 0 0-.621-.552h-5l-.073.004a.625.625 0 0 0-.552.62v3.75l.004.074c.036.31.3.552.621.552h5l.073-.004c.31-.036.552-.3.552-.621v-3.75z"}),gn("path",{fill:"currentColor",
+d:"M8.342 16.682a8 8 0 1 1 7.582-9.105 3 3 0 0 0-.166-.17c-.807-.762-1.871-.968-2.883-.968-1.053 0-2.148.233-2.958 1.042-.81.81-1.042 1.905-1.042 2.958v.369a2 2 0 0 0-.308.388 21 21 0 0 0-1.427.009c.093.81.232 1.545.407 2.159.094.327.195.608.297.835l.078.16.078.139c.053-.106.198.61.25.476v1.133l.01.16.004.043q.023.192.078.372M2.91 11.867l.17-.059.248-.075a13 13 0 0 1 1.807-.36l.054.451.054.382a12.6 12.6 0 0 0 .467 2.03 6.02 6.02 0 0 1-2.8-2.37m-.765-4.493.001-.012c.783.285 1.763.504 2.862.645l-.006.379v.606l.006.38c-1.099.14-2.079.36-2.86.645a6 6 0 0 1-.003-2.643m6.59.806.26-.01.005.519-.006.52a26 26 0 0 0-1.988 0A24 24 0 0 1 7 8.69l.006-.518a26 26 0 0 0 1.73.009M8 2.879l-.077.14a5.6 5.6 0 0 0-.375.995 14 14 0 0 0-.408 2.158q.425.019.861.018.436 0 .86-.016a13.7 13.7 0 0 0-.407-2.16 6 6 0 0 0-.297-.835l-.078-.16zm-2.334.281.045-.019c-.23.694-.403 1.51-.521 2.412l-.055.453c-.877-.118-1.641-.288-2.225-.494A6.02 6.02 0 0 1 5.665 3.16m4.625-.019.05.158c.17.548.308 1.168.413 1.843l.058.411.054.453c.877-.118 1.642-.288 2.226-.493a6.03 6.03 0 0 0-2.536-2.254z"
+})]})})},GoogleDriveIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GoogleDriveIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m15.539 9.51-4.872-8.44H5.333l4.872 8.44zM4.87 1.87 0 10.31l2.667 4.62 4.871-8.44zm1.387 8.44L3.59 14.93h9.742L16 10.31z"})]})})},GraphIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GraphIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M14 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V2a2 2 0 0 0-2-2M6 6a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0zM0 10a2 2 0 1 1 4 0v4a2 2 0 1 1-4 0z"})]})})},GridIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16",
+"data-component":"GridIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M1 2a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zM8.5 2a1 1 0 0 1 1-1H14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9.5a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zM8.5 7a1 1 0 0 1 1-1H14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9.5a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zM8.5 12a1 1 0 0 1 1-1H14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9.5a1 1 0 0 1-1-1z"})]})})},GroupsFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GroupsFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M11.429 6.857a3.429 3.429 0 1 1-6.858 0 3.429 3.429 0 0 1 6.858 0M3.429 4.571a2.286 2.286 0 1 0 0-4.571 2.286 2.286 0 0 0 0 4.571M12.571 4.571a2.286 2.286 0 1 0 0-4.57 2.286 2.286 0 0 0 0 4.57M4.571 11.429a2.286 2.286 0 0 0-2.285 2.285v1.143c0 .631.511 1.143 1.143 1.143h9.142c.632 0 1.143-.512 1.143-1.143v-1.143a2.286 2.286 0 0 0-2.285-2.285zM4.976 10.286H1.143A1.143 1.143 0 0 1 0 9.143V8a2.286 2.286 0 0 1 2.286-2.286h1.287a4.58 4.58 0 0 0 1.403 4.572M11.024 10.286h3.833c.631 0 1.143-.512 1.143-1.143V8a2.286 2.286 0 0 0-2.286-2.286h-1.287a4.58 4.58 0 0 1-1.403 4.572"})]})})},GroupsIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"GroupsIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M2 14a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v1a1 1 0 1 1-2 0v-1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1a1 1 0 1 1-2 0zM0 8a2.5 2.5 0 0 1 2.5-2.5H3a1 1 0 0 1 0 2h-.5A.5.5 0 0 0 2 8v1.5a1 1 0 1 1-2 0zM16 8a2.5 2.5 0 0 0-2.5-2.5H13a1 1 0 1 0 0 2h.5a.5.5 0 0 1 .5.5v1.5a1 1 0 1 0 2 0zM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0 2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M12.5 4.25a2 2 0 1 0 0-4 2 2 0 0 0 0 4M3.5 4.25a2 2 0 1 0 0-4 2 2 0 0 0 0 4"})]})})},HelpIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"HelpIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M13 4.5C13 1.983 10.734 0 8 0S3 1.983 3 4.5a1 1 0 0 0 2 0C5 3.151 6.316 2 8 2s3 1.151 3 2.5S9.684 7 8 7a1 1 0 0 0-1 1v1.5l.007.117A1 1 0 0 0 9 9.5v-.59c2.265-.415 4-2.208 4-4.41M10 14a2 2 0 1 0-4 0 2 2 0 0 0 4 0"})]})})},HideFilledIcon:function(e){return gn("svg",{
+xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"HideFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"m1.613.21.094.083 14 14a1 1 0 0 1-1.32 1.497l-.094-.083-14-14A1 1 0 0 1 1.613.21m-.038 4.195 3.43 3.429L5 8a3 3 0 0 0 3 3l.166-.006 2.631 2.632C9.923 13.87 8.98 14 8 14c-4.36 0-8-2.6-8-6 0-1.367.588-2.604 1.575-3.596M16 8c0-3.4-3.64-6-8-6-.98 0-1.924.131-2.798.374l2.631 2.631L8 5a3 3 0 0 1 3 3l-.005.166 3.43 3.43C15.412 10.604 16 9.365 16 8"})]})})},HideIcon:Fn,HighlightIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"HighlightIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M13 1a1 1 0 0 0-1-1h-2l-.117.007a1 1 0 0 0-.75 1.493A1 1 0 0 0 9 2v6l.009.134a1 1 0 0 0 .125.365.996.996 0 0 0 .374 1.37A1 1 0 0 0 9.5 10v2l.006.114c.087.814 1.098 1.196 1.701.593l1-1 .087-.099A1 1 0 0 0 12.5 11l.001-1.134a1 1 0 0 0 .365-1.366A1 1 0 0 0 13 8V2l-.009-.134a1 1 0 0 0-.125-.365A1 1 0 0 0 13 1m0 14a1 1 0 0 0-1-1H1l-.117.007A1 1 0 0 0 1 16h11l.117-.007A1 1 0 0 0 13 15"})]})})},ImageFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ImageFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2m7.541 5.122.055.069 3.333 5.143a.432.432 0 0 1-.266.658l-.08.008H9.23a.93.93 0 0 0-.076-.98l-1.79-2.456 1.54-2.373a.41.41 0 0 1 .637-.069M6.19 6.818l.061.068 2.5 3.428c.19.261.038.625-.257.68L8.417 11h-5c-.317 0-.508-.344-.373-.619l.04-.067 2.5-3.428a.41.41 0 0 1 .605-.068"})]})})},ImageIcon:qn,InfoIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"InfoIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M8 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M8 7a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1"})]})})},LeaveFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LeaveFilledIcon",...e,children:gn("g",{
+"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M0 8c0-4.052 3.948-8 8-8s8 3.948 8 8-3.948 8-8 8-8-3.948-8-8m6.613-2.79a1 1 0 0 0-1.226 0l-.094.083-.083.094a1 1 0 0 0 0 1.226l.083.094L6.585 8 5.293 9.293l-.083.094a1 1 0 0 0 .083 1.32l.094.083a1 1 0 0 0 1.32-.083L8 9.415l1.293 1.292.094.083a1 1 0 0 0 1.32-1.497L9.415 8l1.292-1.293.083-.094A1 1 0 0 0 9.387 5.21l-.094.083L8 6.585 6.707 5.293z"})]})})},LeaveIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LeaveIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8 0c4.052 0 8 3.948 8 8s-3.948 8-8 8-8-3.948-8-8 3.948-8 8-8m0 2C5.052 2 2 5.052 2 8s3.052 6 6 6 6-3.052 6-6-3.052-6-6-6m2.707 4.707.08-.087c.778-.94-.58-2.241-1.494-1.327L8 6.585 6.707 5.293l-.094-.083a1 1 0 0 0-1.32 1.497L6.585 8 5.293 9.293l-.08.087c-.778.94.58 2.241 1.494 1.327L8 9.415l1.293 1.292.094.083a1 1 0 0 0 1.32-1.497L9.415 8z"})]})})},LinkIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LinkIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M15.004 6.108c1.412-1.466 1.29-3.735-.152-5.073-1.45-1.346-3.88-1.415-5.406 0l-.09.095L8.3 2.404l-.074.101a1 1 0 0 0 .205 1.307l.102.074a1 1 0 0 0 1.306-.205l1.005-1.211.091-.076c.748-.573 1.896-.507 2.558.107.66.613.694 1.645 0 2.29l-.08.082-3.077 3.592c-.805.723-1.856.713-2.655-.028a1 1 0 0 0-1.36 1.466c1.576 1.463 3.83 1.463 5.406 0l.06-.06 3.118-3.638zM9.733 7.51a1 1 0 0 0-.053-1.413c-1.576-1.463-3.83-1.463-5.406 0l-.08.082-3.099 3.615-.099.098c-1.412 1.466-1.29 3.735.152 5.073 1.45 1.346 3.88 1.415 5.406 0l.09-.095L7.7 13.596l.074-.101a1 1 0 0 0-.205-1.307l-.102-.074a1 1 0 0 0-1.306.205l-1.006 1.21-.09.077c-.748.573-1.896.507-2.558-.107a1.544 1.544 0 0 1 0-2.29l.08-.082 3.077-3.592c.805-.723 1.856-.713 2.655.028a1 1 0 0 0 1.413-.053"})]})})},ListIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ListIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"
+}),gn("path",{fill:"currentColor",d:"M16 3a1 1 0 0 0-1-1H1l-.117.007A1 1 0 0 0 1 4h14l.117-.007A1 1 0 0 0 16 3m-1 4a1 1 0 0 1 .117 1.993L15 9H1a1 1 0 0 1-.117-1.993L1 7zm0 5a1 1 0 0 1 .117 1.993L15 14H1a1 1 0 0 1-.117-1.993L1 12z"})]})})},ListOrderedIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ListOrderedIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"m3.237 0 .052.008q.066.015.12.061a.25.25 0 0 1 .083.132l.006.052-.004 3.167.744.001.051.007a.3.3 0 0 1 .119.058q.067.054.086.132l.006.053-.001.595-.01.05a.278.278 0 0 1-.197.176l-.07.008H1.29l-.051-.008a.3.3 0 0 1-.12-.061.25.25 0 0 1-.084-.132l-.006-.052.001-.596.01-.05a.25.25 0 0 1 .077-.113.3.3 0 0 1 .12-.06l.069-.008.932.002.003-1.959-.796.629-.068.037a.3.3 0 0 1-.196-.002.25.25 0 0 1-.172-.179L1 1.881v-.587l.007-.089.015-.075a.35.35 0 0 1 .073-.132l.06-.059.83-.758.04-.036A1 1 0 0 1 2.139.07a.5.5 0 0 1 .183-.062L2.428 0zm-.46 5.5q.351 0 .66.101.311.102.544.288t.372.437q.14.256.14.551 0 .284-.145.542-.105.185-.258.34l-.108.1L2.71 8.932l1.52.001.053.006q.066.015.12.056.071.054.091.132l.007.054-.002.59-.01.05a.25.25 0 0 1-.083.113.3.3 0 0 1-.121.059L4.216 10H1.27l-.053-.007a.3.3 0 0 1-.122-.059.25.25 0 0 1-.089-.132L1 9.748v-.711l.004-.05a.3.3 0 0 1 .04-.115l.034-.043.035-.033L3.04 7.167l.036-.036a1 1 0 0 0 .08-.114.3.3 0 0 0 .055-.145.27.27 0 0 0-.099-.21q-.1-.093-.303-.094-.244 0-.369.093a.24.24 0 0 0-.103.147l-.006.064-.002.123-.01.052a.25.25 0 0 1-.084.112.3.3 0 0 1-.12.058l-.069.008h-.726l-.053-.007a.3.3 0 0 1-.121-.059.25.25 0 0 1-.09-.132l-.006-.054V6.87l.01-.137q.026-.216.135-.407.14-.25.379-.437.236-.185.544-.287.309-.1.658-.101m.617 6.103a2 2 0 0 0-.646-.103q-.34 0-.645.103a1.7 1.7 0 0 0-.533.286 1.5 1.5 0 0 0-.366.43q-.105.19-.132.402l-.008.135v.097l.006.052q.02.076.087.131a.3.3 0 0 0 .12.059l.052.006.712.001.067-.007a.3.3 0 0 0 .119-.059.25.25 0 0 0 .081-.111l.01-.051.002-.11.006-.065a.24.24 0 0 1 .098-.148q.12-.09.324-.09.212 0 .329.09c.07.053.103.12.103.213a.26.26 0 0 1-.104.222.45.45 0 0 1-.224.086l-.112.006h-.077l-.069.008a.3.3 0 0 0-.12.06.25.25 0 0 0-.079.111l-.01.05-.001.57.006.053q.02.077.087.132a.3.3 0 0 0 .12.058l.051.007h.1l.114.007a.54.54 0 0 1 .262.095c.08.06.12.14.12.253a.29.29 0 0 1-.12.252.6.6 0 0 1-.376.102q-.247-.001-.378-.101a.28.28 0 0 1-.112-.186l-.005-.077v-.047l-.006-.054a.24.24 0 0 0-.09-.133.3.3 0 0 0-.118-.056l-.051-.006-.708-.001-.07.007a.3.3 0 0 0-.12.06.25.25 0 0 0-.079.112l-.01.05-.001.078.009.148q.027.22.132.418.14.259.382.45.24.187.555.294.316.108.67.108t.67-.107.555-.296q.243-.19.384-.449.143-.264.143-.566 0-.28-.14-.538l-.075-.122-.057-.075a1 1 0 0 0-.131-.134l-.047-.035.063-.061q.11-.122.189-.269.123-.228.124-.484 0-.29-.134-.543a1.4 1.4 0 0 0-.364-.432 1.8 1.8 0 0 0-.534-.286M16 14a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 15h8l.117-.007A1 1 0 0 0 16 14m0-6a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 9h8l.117-.007A1 1 0 0 0 16 8m0-6a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 3h8l.117-.007A1 1 0 0 0 16 2"
+})]})})},ListUnorderedIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ListUnorderedIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M2 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m2 8a2 2 0 1 0-4 0 2 2 0 0 0 4 0m12 0a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 15h8l.117-.007A1 1 0 0 0 16 14m0-6a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 9h8l.117-.007A1 1 0 0 0 16 8m0-6a1 1 0 0 0-1-1H7l-.117.007A1 1 0 0 0 7 3h8l.117-.007A1 1 0 0 0 16 2"})]})})},LockFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LockFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M11.995 4.783C11.882 2.123 10.69 1 8 1 5.239 1 4 2.239 4 5v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V5l.005-.176C6.096 3.249 6.402 3 8 3c1.657 0 2 .343 2 2v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V5zm.998 3.1A1 1 0 0 0 12 7H4l-.117.007A1 1 0 0 0 3 8v6l.007.117A1 1 0 0 0 4 15h8l.117-.007A1 1 0 0 0 13 14V8z"})]})})},LockIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LockIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M11.995 4.783C11.882 2.123 10.69 1 8 1 5.239 1 4 2.239 4 5v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V5l.005-.176C6.096 3.249 6.402 3 8 3c1.657 0 2 .343 2 2v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V5zM5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM4 7a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"})]})})},LogoIcon:jn,LogoutIcon:function(e){return gn("svg",{
+xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"LogoutIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M10 1a1 1 0 0 0-1-1H1L.883.007A1 1 0 0 0 0 1v14l.007.117A1 1 0 0 0 1 16h8l.117-.007A1 1 0 0 0 10 15l-.007-.117A1 1 0 0 0 9 14H1.999V2H9l.117-.007A1 1 0 0 0 10 1m1.707 2.293-.094-.083a1 1 0 0 0-1.32.083l-.083.094a1 1 0 0 0 .083 1.32L12.585 7H5l-.117.007A1 1 0 0 0 5 9h7.585l-2.292 2.293-.083.094a1 1 0 0 0 1.497 1.32l4-4 .083-.094a1 1 0 0 0-.083-1.32z"})]})})},MentionIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"MentionIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8.195 16q-1.95 0-3.47-.53-1.522-.523-2.574-1.54-1.05-1.01-1.601-2.47T0 8.137q0-1.838.55-3.335.555-1.497 1.62-2.568Q3.232 1.156 4.767.578 6.307 0 8.275 0q1.821 0 3.251.53 1.436.529 2.433 1.509a6.4 6.4 0 0 1 1.521 2.319q.526 1.338.52 2.963a9.5 9.5 0 0 1-.196 2.057 5.1 5.1 0 0 1-.635 1.638q-.428.694-1.125 1.101-.697.402-1.687.457-.708.055-1.149-.104-.44-.158-.672-.469a1.7 1.7 0 0 1-.293-.736h-.074q-.146.366-.574.663a3.4 3.4 0 0 1-1.045.457 4.2 4.2 0 0 1-1.302.116 3.9 3.9 0 0 1-1.369-.335 3.5 3.5 0 0 1-1.143-.846q-.495-.554-.782-1.37-.28-.815-.287-1.886.006-1.058.3-1.844.299-.786.788-1.32.494-.537 1.1-.84a3.9 3.9 0 0 1 1.216-.39q.69-.105 1.308 0 .617.103 1.039.335.427.23.531.499h.086v-.682h1.913v5.94q.006.42.19.651a.6.6 0 0 0 .494.231q.423 0 .703-.37.287-.372.428-1.139.147-.766.147-1.954 0-1.144-.306-2.008-.3-.87-.843-1.479a4.4 4.4 0 0 0-1.253-.998 5.8 5.8 0 0 0-1.552-.56 8.2 8.2 0 0 0-1.712-.176q-1.521 0-2.658.462-1.137.458-1.895 1.284a5.4 5.4 0 0 0-1.136 1.942 7.7 7.7 0 0 0-.38 2.416q.008 1.442.404 2.556.403 1.108 1.186 1.862.782.755 1.93 1.145 1.15.39 2.641.389.703 0 1.375-.104.672-.097 1.216-.243.544-.14.874-.274l.605 1.765q-.385.219-1.045.408-.654.195-1.479.31Q9.063 16 8.195 16m-.28-5.502q.745 0 1.185-.286.446-.285.636-.846.195-.566.183-1.393-.006-.731-.19-1.236a1.4 1.4 0 0 0-.617-.773q-.434-.267-1.21-.268-.678 0-1.155.287a1.87 1.87 0 0 0-.721.803q-.245.51-.25 1.205.005.645.207 1.223.202.573.666.931.465.354 1.265.353"
+})]})})},MenuCollapseIcon:Un,MenuExpandIcon:Vn,MinusIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"MinusIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M14 8a1 1 0 0 0-1-1H3l-.117.007A1 1 0 0 0 3 9h10l.117-.007A1 1 0 0 0 14 8"})]})})},NoteFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"NoteFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.995 1.85A2 2 0 0 0 14 0H2l-.15.005A2 2 0 0 0 0 2v12l.005.15A2 2 0 0 0 2 16h3a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1h8a1 1 0 0 0 1-1V2zM16 9.25a.25.25 0 0 0-.25-.25H8a1 1 0 0 0-1 1v5.75c0 .138.112.25.25.25z"})]})})},NoteIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",
+width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"NoteIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M14 0a2 2 0 0 1 1.995 1.85L16 2v7a1 1 0 0 1-.31.724l-.09.076-8 6a1 1 0 0 1-.471.192L7 16H2a2 2 0 0 1-1.995-1.85L0 14V2A2 2 0 0 1 1.85.005L2 0zm0 2H2v12h4V9a1 1 0 0 1 .883-.993L7 8h7zm-6 8h4l-4 3z"})]})})},OneDriveIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"OneDriveIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M5.14 8.277a3.574 3.574 0 0 1 6.057-1.608c.293-.098.599-.155.908-.168v-.104c0-1.985-1.476-3.595-3.295-3.595-1.3 0-2.415.83-2.95 2.024a2.4 2.4 0 0 0-1.355-.428c-1.427 0-2.583 1.261-2.583 2.818 0 .167.019.33.045.49C.866 7.814.004 8.94.004 10.169q.002.017.003.036c0 .01-.007.022-.007.033 0 .492.171.941.449 1.304a2.1 2.1 0 0 0 1.71.856h1.01a2.86 2.86 0 0 1-.32-1.291 2.895 2.895 0 0 1 2.292-2.83m9.165 1.544c-.02 0-.04.005-.06.006.005-.059.017-.117.017-.177a2.13 2.13 0 0 0-2.13-2.13c-.451 0-.89.145-1.251.412a2.575 2.575 0 0 0-4.1-.61 2.6 2.6 0 0 0-.758 1.83c0 .018.005.034.005.052a2 2 0 0 0-.287-.029 1.93 1.93 0 0 0-1.892 2.321 2.09 2.09 0 0 0 2.052 1.702h8.561v-.016a1.684 1.684 0 0 0-.157-3.361"})]})})},OrderableIcon:Wn,PauseIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PauseIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M4.5 2C3.672 2 3 2.504 3 3.125v9.75C3 13.496 3.672 14 4.5 14S6 13.496 6 12.875v-9.75C6 2.504 5.328 2 4.5 2M11.5 2c-.828 0-1.5.504-1.5 1.125v9.75c0 .621.672 1.125 1.5 1.125s1.5-.504 1.5-1.125v-9.75C13 2.504 12.328 2 11.5 2"})]})})},PendingIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PendingIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M6.956.068a8 8 0 0 1 2.088 0 .889.889 0 1 1-.23 1.762 6.3 6.3 0 0 0-1.628 0 .889.889 0 0 1-.23-1.762m4.668 1.748a.89.89 0 0 1 1.247-.163c.554.426 1.05.922 1.476 1.476a.889.889 0 0 1-1.41 1.083 6.3 6.3 0 0 0-1.15-1.15.89.89 0 0 1-.163-1.246m-7.248 0c.299.39.226.948-.164 1.247a6.3 6.3 0 0 0-1.15 1.15.889.889 0 0 1-1.409-1.084A8 8 0 0 1 3.13 1.653a.89.89 0 0 1 1.247.163m10.56 4.374a.89.89 0 0 1 .996.766 8 8 0 0 1 0 2.088.889.889 0 1 1-1.762-.23 6.3 6.3 0 0 0 0-1.628.89.89 0 0 1 .766-.996m-13.872 0c.487.063.83.51.766.996a6.3 6.3 0 0 0 0 1.628.889.889 0 0 1-1.762.23 8 8 0 0 1 0-2.088.89.89 0 0 1 .996-.766m13.12 5.434c.389.3.462.857.163 1.247a8 8 0 0 1-1.476 1.476.889.889 0 0 1-1.084-1.41 6.3 6.3 0 0 0 1.15-1.15.89.89 0 0 1 1.247-.163m-12.368 0a.89.89 0 0 1 1.247.163c.331.432.718.819 1.15 1.15a.889.889 0 0 1-1.084 1.41 8 8 0 0 1-1.476-1.476.89.89 0 0 1 .163-1.247m4.374 3.312a.89.89 0 0 1 .996-.766 6.3 6.3 0 0 0 1.628 0 .889.889 0 1 1 .23 1.762 8 8 0 0 1-2.088 0 .89.89 0 0 1-.766-.996","clip-rule":"evenodd"})]})
+})},PinFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PinFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M4 0a1 1 0 0 0 0 2 .5.5 0 0 1 .5.5v.146a.5.5 0 0 1-.053.224L3.106 5.553A1 1 0 0 0 3 6v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-.106-.447L11.553 2.87a.5.5 0 0 1-.053-.224V2.5A.5.5 0 0 1 12 2a1 1 0 1 0 0-2zM9.043 11h-2l.075 4.024a1 1 0 1 0 2-.047z"})]})})},PinIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PinIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M3 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2 .5.5 0 0 0-.5.5v.146a.5.5 0 0 0 .053.224l1.341 2.683c.07.139.106.292.106.447v3a1 1 0 0 1-1 1H9.024l.093 4.977a1 1 0 0 1-2 .046L7.024 10H4a1 1 0 0 1-1-1V6a1 1 0 0 1 .106-.447L4.447 2.87a.5.5 0 0 0 .053-.224V2.5A.5.5 0 0 0 4 2a1 1 0 0 1-1-1m4 1a.5.5 0 0 0-.5.5V3a1 1 0 0 1-.106.447L5.053 6.13A.5.5 0 0 0 5 6.355V7.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5V6.354a.5.5 0 0 0-.053-.224L9.606 3.448A1 1 0 0 1 9.5 3v-.5A.5.5 0 0 0 9 2z","clip-rule":"evenodd"})]})})},PlusIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PlusIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8.993 2.867 9 3v3.999L13 7a1 1 0 0 1 .117 1.993L13 9H9v4c0 1.287-1.864 1.332-1.993.133L7 13V9H3a1 1 0 0 1-.117-1.993L3 7h4V3c0-1.287 1.864-1.332 1.993-.133"})]})})},PointerDownIcon:$n,PointerUpIcon:Gn,PreviewFilledIcon:function(e){
+return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PreviewFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0M6.006 4.89A1 1 0 0 1 7.6 4.2l4 3 .1.085a1 1 0 0 1-.1 1.515l-4 3-.092.061A1 1 0 0 1 6 11V5z"})]})})},PreviewIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"PreviewIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0m0 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2m-.492 2.138A1 1 0 0 0 6 5v6l.006.11a1 1 0 0 0 1.594.69l4-3 .1-.085a1 1 0 0 0-.1-1.515l-4-3z"})]})})},ProfileFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",
+viewBox:"0 0 16 16","data-component":"ProfileFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M12 4a4 4 0 1 0-8 0 4 4 0 0 0 8 0m4 11c0-3.4-3.64-6-8-6s-8 2.6-8 6a1 1 0 0 0 1 1h14l.117-.007A1 1 0 0 0 16 15"})]})})},ProfileIcon:Xn,RadioCheckedIcon:Jn,RadioIcon:Kn,RedoIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"RedoIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M3.717 5.42c-.206.34-.558.58-.955.58H2.63c-.67 0-1.148-.648-.837-1.24A7 7 0 0 1 8 1a7 7 0 0 1 6 3.393V3a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 1 1 0-2h1.584a5.001 5.001 0 0 0-8.867-.58M2 13v-1.392A7 7 0 0 0 8 15a7 7 0 0 0 6.206-3.76c.31-.592-.168-1.24-.837-1.24h-.13c-.398 0-.75.24-.956.58A5.001 5.001 0 0 1 3.416 10H5a1 1 0 0 0 0-2H1a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0"})]})})
+},RefreshIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"RefreshIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M8 0a1 1 0 0 1 .993.883L9 1v7.585l1.293-1.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 .083 1.32l-.083.094-3 3a1 1 0 0 1-1.32.083l-.094-.083-3-3a1 1 0 0 1 1.32-1.497l.094.083L7 8.585V1a1 1 0 0 1 1-1"}),gn("path",{fill:"currentColor",d:"M4.82 1.683a1 1 0 0 1-.248 1.392 6 6 0 1 0 6.856 0 1 1 0 0 1 1.144-1.64 8 8 0 1 1-9.144 0 1 1 0 0 1 1.392.248","clip-rule":"evenodd"})]})})},ReplyIcon:Qn,RestrictedIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"RestrictedIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8 0c1.682 0 3.346.68 4.717 1.766l.08.063.285.241.31.285.128.125.16.165.243.265.311.373C15.32 4.653 16 6.318 16 8c0 4.052-3.948 8-8 8-1.682 0-3.346-.68-4.717-1.766l-.056-.044a9 9 0 0 1-.322-.272l-.131-.118-.167-.156-.132-.13-.152-.156-.253-.276-.304-.365C.68 11.347 0 9.682 0 8c0-4.052 3.948-8 8-8m4.765 4.651L4.65 12.765C5.654 13.523 6.835 14 8 14c2.948 0 6-3.052 6-6 0-1.165-.477-2.346-1.235-3.349M2 8c0-2.948 3.052-6 6-6 1.165 0 2.347.477 3.35 1.236L3.236 11.35C2.476 10.347 2 9.165 2 8"})]})})},SchoolFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SchoolFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.504 1.132a1 1 0 0 1 .992 0l6.983 3.99A1 1 0 0 1 16 6v6a1 1 0 1 1-2 0V7.723l-5.504 3.145a1 1 0 0 1-.992 0l-7-4a1 1 0 0 1 0-1.736z"}),gn("path",{fill:"currentColor",
+d:"M2.5 11V8.585l4.756 2.717a1.5 1.5 0 0 0 1.488 0L13.5 8.585V11a4 4 0 0 1-4 4h-3a4 4 0 0 1-4-4"})]})})},SchoolIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SchoolIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.504 1.132a1 1 0 0 1 .992 0l6.983 3.99A1 1 0 0 1 16 6v6a1 1 0 1 1-2 0V7.723l-.5.286V11a4 4 0 0 1-4 4h-3a4 4 0 0 1-4-4V8.009L.504 6.869a1 1 0 0 1 0-1.737zM4.5 9.152V11a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V9.152l-3.004 1.716a1 1 0 0 1-.992 0zM3.016 6 8 8.848 12.984 6 8 3.152z"})]})})},SearchIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SearchIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M12 6a6 6 0 1 0-2.525 4.892l4.818 4.815.094.083a1 1 0 0 0 1.32-1.497L10.89 9.474A5.97 5.97 0 0 0 12 6M2 6a4 4 0 1 1 6.961 2.69l-.15.155-.16.152A3.98 3.98 0 0 1 6 10a4 4 0 0 1-4-4"})]})})},SelectionIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SelectionIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M2.5 0h-1A1.5 1.5 0 0 0 0 1.5v1a1.5 1.5 0 0 0 1 1.415v8.17A1.5 1.5 0 0 0 0 13.5v1A1.5 1.5 0 0 0 1.5 16h1a1.5 1.5 0 0 0 1.415-1h8.17a1.5 1.5 0 0 0 1.415 1h1a1.5 1.5 0 0 0 1.5-1.5v-1a1.5 1.5 0 0 0-1-1.415v-8.17A1.5 1.5 0 0 0 16 2.5v-1A1.5 1.5 0 0 0 14.5 0h-1a1.5 1.5 0 0 0-1.415 1h-8.17A1.5 1.5 0 0 0 2.5 0m9.585 13c.151-.426.489-.764.915-.915v-8.17A1.5 1.5 0 0 1 12.085 3h-8.17c-.151.426-.489.764-.915.915v8.17c.426.151.764.489.915.915zM1 1.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM1.5 13a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM13 1.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm.5 11.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z","clip-rule":"evenodd"})]})})},SettingsIcon:Zn,ShareIcon:Yn,ShowFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ShowFilledIcon",...e,children:gn("g",{
+"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 8c0-3.4-3.64-6-8-6S0 4.6 0 8s3.64 6 8 6 8-2.6 8-6M5 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0"})]})})},ShowIcon:et,SocialFacebookIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SocialFacebookIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.999 8.049c0-4.445-3.582-8.049-8-8.049S0 3.604 0 8.049C0 12.066 2.925 15.396 6.75 16v-5.624H4.717V8.049H6.75V6.276c0-2.018 1.195-3.132 3.022-3.132.875 0 1.79.157 1.79.157v1.981h-1.008c-.994 0-1.304.62-1.304 1.257v1.51h2.219l-.355 2.327H9.25V16c3.825-.604 6.75-3.934 6.75-7.951z","clip-rule":"evenodd"})]})})},SocialTwitterIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16",
+"data-component":"SocialTwitterIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M15.969 3.049c-.59.259-1.22.436-1.884.516a3.3 3.3 0 0 0 1.442-1.815c-.634.37-1.336.64-2.084.79a3.28 3.28 0 0 0-5.59 2.988 9.3 9.3 0 0 1-6.76-3.418C.799 2.61.646 3.18.65 3.76c0 1.14.58 2.142 1.459 2.73a3.3 3.3 0 0 1-1.485-.41v.04a3.28 3.28 0 0 0 2.63 3.218 3.3 3.3 0 0 1-1.474.057 3.29 3.29 0 0 0 3.069 2.278A6.58 6.58 0 0 1 .78 13.076q-.39 0-.78-.044a9.33 9.33 0 0 0 5.038 1.472c6.036 0 9.332-4.997 9.332-9.323 0-.14 0-.28-.01-.42a6.6 6.6 0 0 0 1.64-1.7z","clip-rule":"evenodd"})]})})},SortIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"SortIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M4.707.293 4.613.21a1 1 0 0 0-1.32.083l-3 3-.083.094a1 1 0 0 0 .083 1.32l.094.083a1 1 0 0 0 1.32-.083L3 3.415V8a1 1 0 1 0 2 0V3.415l1.293 1.292.094.083a1 1 0 0 0 1.32-1.497zM13 8a1 1 0 1 0-2 0v4.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l3 3 .094.083a1 1 0 0 0 1.32-.083l3-3 .083-.094a1 1 0 0 0-.083-1.32l-.094-.083a1 1 0 0 0-1.32.083L13 12.585z"})]})})},SpinnerCircleIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 38 38","data-component":"SpinnerCircleIcon",...e,children:gn("g",{fill:"none","fill-rule":"evenodd",transform:"translate(1 1)",children:[gn("path",{stroke:"currentColor","stroke-width":"2",d:"M36 18c0-9.94-8.06-18-18-18",children:gn("animateTransform",{attributeName:"transform",dur:"0.9s",from:"0 18 18",repeatCount:"indefinite",to:"360 18 18",type:"rotate"})}),gn("circle",{cx:"36",cy:"18",r:"1",fill:"#fff",children:gn("animateTransform",{attributeName:"transform",dur:"0.9s",from:"0 18 18",repeatCount:"indefinite",to:"360 18 18",
+type:"rotate"})})]})})},SpinnerSpokesIcon:nt,TagFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"TagFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M7.563.174A1 1 0 0 0 7 0H1L.883.007A1 1 0 0 0 0 1v6l.007.121a1 1 0 0 0 .329.626l9 8 .098.078a1 1 0 0 0 1.38-.244l5-7 .067-.107a1 1 0 0 0-.223-1.227l-8-7zM3 5a2 2 0 1 1 4 0 2 2 0 0 1-4 0"})]})})},TagIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"TagIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M7 0a1 1 0 0 1 .563.174l.096.073 8 7a1 1 0 0 1 .222 1.227l-.067.107-5 7a1 1 0 0 1-1.38.244l-.098-.078-9-8a1 1 0 0 1-.329-.626L0 7V1A1 1 0 0 1 .883.007L1 0zm-.376 2H2v4.551l7.833 6.962 3.826-5.358zM7 5a2 2 0 1 0-4 0 2 2 0 0 0 4 0"})]})})},ThemeIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"ThemeIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M8.993.883A1 1 0 0 0 7 1v2l.007.117A1 1 0 0 0 9 3V1zm4.742 2.787a1 1 0 0 0-1.492-1.327l-1.415 1.414-.077.088a1 1 0 0 0 1.492 1.327l1.414-1.415zM8 5c1.552 0 3 1.448 3 3s-1.448 3-3 3-3-1.448-3-3 1.448-3 3-3m-2.828 5.828a1 1 0 0 1 .077 1.327l-.077.088-1.415 1.414a1 1 0 0 1-1.492-1.327l.078-.087 1.414-1.415a1 1 0 0 1 1.415 0M8 12a1 1 0 0 1 .993.883L9 13v2a1 1 0 0 1-1.993.117L7 15v-2a1 1 0 0 1 1-1m4.243-1.172-.088-.077a1 1 0 0 0-1.327 1.492l1.415 1.414.087.078a1 1 0 0 0 1.327-1.492zM16 8a1 1 0 0 0-1-1h-2l-.117.007A1 1 0 0 0 13 9h2l.117-.007A1 1 0 0 0 16 8M3 7a1 1 0 0 1 .117 1.993L3 9H1a1 1 0 0 1-.117-1.993L1 7zm.67-4.735.087.078 1.415 1.414A1 1 0 0 1 3.845 5.25l-.088-.077-1.414-1.415A1 1 0 0 1 3.67 2.265"})]})})},TrashFilledIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"TrashFilledIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{
+fill:"currentColor",d:"M16 1a1 1 0 0 0-1-1H1a1 1 0 1 0 0 2h14a1 1 0 0 0 1-1m-1.003 4.08A1 1 0 0 0 14 4H2l-.116.007a1 1 0 0 0-.865 1.19l2 10 .03.113A1 1 0 0 0 4 16h8l.118-.007a1 1 0 0 0 .863-.797l2-10z"})]})})},TrashIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"TrashIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",d:"M16 1a1 1 0 0 0-1-1H1a1 1 0 1 0 0 2h14a1 1 0 0 0 1-1M14 4H2a1 1 0 0 0-.98 1.196l2 10A1 1 0 0 0 4 16h8a1 1 0 0 0 .98-.804l2-10A1 1 0 0 0 14 4m-1.22 2-1.6 8H4.819l-1.6-8z"})]})})},VitalSourceIcon:function(e){return gn("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16","aria-hidden":"true",viewBox:"0 0 16 16","data-component":"VitalSourceIcon",...e,children:gn("g",{"fill-rule":"evenodd",children:[gn("path",{fill:"none",d:"M0 0h16v16H0z"}),gn("path",{fill:"currentColor",
+d:"M16 0H0v16h16zm-5.055 3.968.085-.014 1.681.28-.16.47c-.452 1.32-.926 2.707-1.422 3.98a82 82 0 0 1-1.978 4.65H7.496a86 86 0 0 1-1.979-4.65A204 204 0 0 1 3.29 2.666l2.026.337.42 1.161c.234.64.47 1.287.585 1.624q.336.986.686 1.968.332.94.685 1.873.315.838.673 1.66.342-.822.658-1.654.356-.931.692-1.872.354-.985.694-1.975c.121-.355.206-.667.29-.977.074-.273.148-.545.247-.844","clip-rule":"evenodd"})]})})}});function it({children:e,classes:n,elementRef:t,expanded:i,pressed:l,title:o,icon:r,size:c="md",variant:a="secondary",unstyled:d=!1,role:s,...h}){const u=!d,p=u&&"custom"!==a,m=u&&"custom"!==c,f={"aria-label":o};return"tab"===s?f["aria-selected"]=l:(f["aria-pressed"]=l,f["aria-expanded"]=i),gn("button",{role:null!=s?s:"button","data-component":"Button",type:"button",...f,...h,className:ee({"focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap flex items-center":u},p&&{"font-semibold rounded":!0,
+"text-grey-7 bg-grey-1 enabled:hover:text-grey-9 enabled:hover:bg-grey-2 aria-pressed:text-grey-9 aria-expanded:text-grey-9":"secondary"===a,"text-grey-1 bg-grey-7 enabled:hover:bg-grey-8 disabled:text-grey-4":"primary"===a},m&&{"p-2 gap-x-2":"md"===c,"p-1 gap-x-1":"xs"===c,"p-1.5 gap-x-1.5":"sm"===c,"p-2.5 gap-x-1.5":"lg"===c},n),ref:t,title:o,children:[r&&gn(r,{className:"w-em h-em"}),e]})}const lt=ee("input-group:border input-group:rounded-none","input-group:first:rounded-l input-group:last:rounded-r","input-group:ml-[-1px] input-group:first:ml-0","focus:z-1");function ot({children:e,classes:n,elementRef:t,...i}){return gn("div",{"data-component":"InputGroup",...i,ref:t,className:ee("input-group","flex items-stretch w-full justify-center",n),children:e})}function rt({children:e,classes:n,elementRef:t,pressed:i,expanded:l,icon:o,size:r="md",title:c,variant:a="secondary",unstyled:d=!1,...s}){const h=!d;return gn(it,{"data-component":"IconButton",...s,classes:ee({
+"focus-visible:ring focus-visible:outline-none transition-colors rounded whitespace-nowrap":h,"flex items-center justify-center":h},h&&lt,h&&"custom"!==a&&{"text-grey-7 bg-transparent enabled:hover:text-grey-9 aria-pressed:text-brand aria-expanded:text-brand":"secondary"===a,"text-brand bg-transparent enabled:hover:text-grey-9 disabled:text-grey-7":"primary"===a,"text-grey-7 bg-grey-2 enabled:hover:text-grey-9 enabled:hover:bg-grey-3 disabled:text-grey-5 aria-pressed:bg-grey-3 aria-expanded:bg-grey-3":"dark"===a},h&&"custom"!==r&&{"gap-x-2 touch:min-w-touch-minimum touch:min-h-touch-minimum":!0,"p-2":"md"===r,"p-1":"xs"===r,"p-1.5":"sm"===r,"p-2.5":"lg"===r},n),elementRef:t,title:c,pressed:i,expanded:l,unstyled:!0,children:[o&&gn(o,{className:"w-em h-em"}),e]})}function ct({children:e,classes:n,elementRef:t,title:i,onClick:l,...o}){var r;const c=be(wn);return gn(rt,{"data-component":"CloseButton",elementRef:t,icon:Nn,title:null!==(r=null!=i?i:null==c?void 0:c.title)&&void 0!==r?r:"Close",classes:n,...o,
+onClick:null!=l?l:null==c?void 0:c.onClose,children:e})}function at({children:e,classes:n,elementRef:t,tagName:i="h1",variant:l="primary",...o}){const r=i;return gn("div",{"data-component":"CardTitle",...o,className:ee({"text-lg text-brand font-semibold":"primary"===l,"text-xl text-slate-7 font-normal":"secondary"===l},n),ref:t,children:gn(r,{"data-testid":"card-title-heading",children:e})})}function dt({children:e,classes:n,elementRef:t,fullWidth:i=!1,onClose:l,title:o,variant:r="primary",...c}){const a=be(wn),d=null!=l?l:null==a?void 0:a.onClose;return gn("div",{"data-component":"CardHeader",...c,className:ee("flex items-center gap-x-2 border-b py-2",{"bg-slate-0 border-slate-5 rounded-t-[inherit]":"secondary"===r,"mx-3":!i&&"primary"===r,"px-3":i||"secondary"===r},n),ref:t,children:[o&&gn(at,{variant:r,children:o}),e,gn("div",{className:"grow"}),d&&gn(ct,{onClick:d,classes:ee("-mr-2.5","text-[16px]")})]})}
+function st({children:e,elementRef:n,buttons:t,fullWidthHeader:i=!1,icon:l,onClose:o,paddingSize:r="md",scrollable:c=!1,title:a,...d}){const s="flex flex-col min-h-0 h-full",h="none"===r?e:gn(Cn,{classes:s,"data-testid":"panel-content-wrapper",size:r,children:e});return gn(xn,{"data-composite-component":"Panel",...d,classes:s,elementRef:n,children:[gn(dt,{onClose:o,fullWidth:c||i,children:[l&&gn(l,{className:"w-em h-em"}),gn(at,{children:a})]}),c?gn(yn,{classes:ee({"rounded-b-[inherit]":!t}),children:h}):gn(y,{children:h}),t&&gn(Cn,{"data-testid":"panel-buttons",children:gn(Sn,{children:t})})]})}function ht({closeOnClickAway:e=!1,closeOnEscape:n=!1,closeOnFocusAway:t=!1,children:i,initialFocus:l="auto",restoreFocus:o=!1,transitionComponent:r,classes:c,elementRef:a,onClose:d,closeTitle:s,...h}){const u="custom"!==h.variant;const{buttons:p,icon:m,paddingSize:f="md",title:g="",scrollable:b=!0,...v}=u?h:{buttons:void 0,icon:void 0,paddingSize:void 0,title:void 0,scrollable:void 0,...h
+},w=mn(a),I=me(document.activeElement),[x,S]=he(!1),C=ge((()=>{r?S(!1):null==d||d()}),[d,r]),k=ge((()=>{if("manual"===l)return;var e;if("auto"===l)return void(null===(e=w.current)||void 0===e||e.focus());const n=null==l?void 0:l.current;var t;n&&!n.disabled?n.focus():null===(t=w.current)||void 0===t||t.focus()}),[l,w]);cn(w,C,{enabled:e}),dn(["Escape"],C,{enabled:n}),an(w,C,{enabled:t});const _=ve(),L=fe((()=>null!=r?r:y),[r]);ue((()=>{S(!0),r||k()}),[]),pe((()=>{const e=I.current;return()=>{o&&e&&e.focus()}}),[]),pe((()=>{var e;const n=null==w||null===(e=w.current)||void 0===e?void 0:e.querySelector("p");n&&(n.id=_,w.current.setAttribute("aria-describedby",_))}),[_,w]);const A={onClose:d?C:void 0,title:s};return gn(wn.Provider,{value:A,children:gn(L,{direction:x?"in":"out",onTransitionEnd:e=>{"in"===e?k():null==d||d()},children:gn("div",{"data-component":"Dialog",tabIndex:-1,role:"dialog",...v,className:ee("flex flex-col",c),ref:w,children:u?gn(st,{buttons:p,fullWidthHeader:!0,icon:m,paddingSize:f,title:g,
+scrollable:b,children:i}):gn(y,{children:i})})})})}function ut({children:e,disableCloseOnEscape:n=!1,disableFocusTrap:t=!1,disableRestoreFocus:i=!1,size:l="md",classes:o,elementRef:r,closeOnClickAway:c=!1,closeOnFocusAway:a=!1,initialFocus:d="auto",...s}){const h=mn(r);return function(e,{enabled:n=!0,selector:t=bn}={}){const i=me(null);ue((()=>{if(!n)return()=>{};if(!e.current)throw new Error("Container ref not set");const l=e.current,o=()=>{const e=Array.from(l.querySelectorAll(t)).filter((e=>{return null!==e.offsetParent&&!("boolean"==typeof(n=e).disabled&&n.disabled);var n}));return document.activeElement===l&&e.unshift(l),e},r=(e=o(),n=-1,t=!1)=>{n<0&&(n=e.findIndex((e=>0===e.tabIndex)))<0&&(n=0);for(const[l,o]of e.entries())o.tabIndex=l===n?0:-1,l===n&&t&&(i.current=o,o.focus())},c=o(),a=c.indexOf(document.activeElement);r(c,a);const d=new tn;d.add(l,"focusin",(e=>{const n=o(),t=n.indexOf(e.target);t>=0&&r(n,t)})),d.add(l,"keydown",(e=>{const n=o();let t=n.findIndex((e=>0===e.tabIndex))
+;-1!==t&&n[t]!==l||!i.current||(t=n.indexOf(i.current));let c=!1;"Tab"===e.key&&e.shiftKey?(0===t?t=n.length-1:--t,c=!0):"Tab"===e.key&&(t===n.length-1?t=0:++t,c=!0),c&&(r(n,t,!0),e.preventDefault(),e.stopPropagation())}));const s=new MutationObserver((()=>{r()}));return s.observe(l,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0}),()=>{d.removeAll(),s.disconnect()}}),[e,n,t])}(h,{enabled:!t}),gn(vn,{"data-composite-component":"ModalDialog",children:gn(ht,{"aria-modal":!0,...s,closeOnClickAway:c,closeOnFocusAway:a,closeOnEscape:!n,initialFocus:d,restoreFocus:!i,classes:ee("flex flex-col","custom"!==l&&"max-w-[90vw] max-h-[90vh]","custom"!==l&&"tall:fixed tall:max-h-[80vh] tall:top-[10vh]",{"w-[30rem]":"sm"===l,"w-[36rem]":"md"===l,"w-[42rem]":"lg"===l},o),elementRef:h,"data-modal-size":l,children:e})})}function pt({children:e,objectFit:n="cover",ratio:t="16/9"}){
+const i=N(e),l=i.find((e=>"object"==typeof e)),o=l?i.filter((e=>e!==l)):e,r=ee("absolute w-full h-full top-0 left-0","flex items-center justify-center",{"object-cover":"cover"===n,"object-contain":"contain"===n,"object-fill":"fill"===n,"object-scale-down":"scale-down"===n,"object-none":"none"===n});return gn("div",{className:"w-full h-0 relative overflow-hidden","data-component":"AspectRatio",style:{paddingBottom:`calc(100% / (${t}))`},children:[l&&U(l,{class:ee(r,l.props.className)}),o]})}function mt({children:e,elementRef:n,containerRef:t,checked:i,icon:l,checkedIcon:o,disabled:r,onChange:c,id:a,type:d,containerClasses:s,...h}){const u=i?o:l;return gn("label",{className:ee("relative flex items-center gap-x-1.5",{"cursor-pointer":!r,"opacity-70":r},s),htmlFor:a,"data-composite-component":"checkbox"===d?"Checkbox":"RadioButton",ref:t,children:[gn("input",{...h,type:d,ref:n,className:ee("peer","absolute w-em h-em","opacity-[.00001]",{"cursor-pointer":!r}),checked:i,disabled:r,id:a,onChange:c}),gn(u,{
+className:ee("peer-focus-visible:ring","w-em h-em","min-w-min min-h-min")}),gn("span",{children:e})]})}function ft({checked:e,defaultChecked:n=!1,icon:t=zn,checkedIcon:i=Dn,onChange:l,...o}){const r="boolean"==typeof e,[c,a]=he(n);return gn(mt,{icon:t,checkedIcon:i,type:"checkbox",checked:r?e:c,onChange:function(e){null==l||l.call(this,e),r||a(e.target.checked)},...o})}function gt(e,n){pe((()=>{var t;null===(t=e.current)||void 0===t||t.setCustomValidity(null!=n?n:"")}),[n,e])}function bt({classes:e,feedback:n}){return ee("focus-visible:ring focus-visible:outline-none ring-inset border rounded w-full p-2","bg-grey-0 focus:bg-white disabled:bg-grey-1","placeholder:text-grey-6 disabled:placeholder:text-grey-7","touch:text-at-least-16px",{"ring-2":!!n,"ring-red-error":"error"===n,"ring-yellow-notice":"warning"===n},lt,e)}function vt({elementRef:e,type:n="text",classes:t,error:i,feedback:l,...o}){o.id||o["aria-label"]||console.warn("`Input` component should have either an `id` or an `aria-label` attribute")
+;const r=mn(e);return i&&(l="error"),gt(r,i),gn("input",{"data-component":"Input",...o,ref:r,type:n,className:bt({classes:t,feedback:l}),"aria-invalid":"error"===l})}function wt({children:e,details:n,selected:t=!1,pressed:i,...l}){const o=t||i;return gn(it,{classes:ee("group","w-full gap-x-2 px-2 py-1","rounded border border-stone-300 bg-stone-50","enabled:hover:border-slate-5 enabled:hover:bg-slate-0","disabled:border-stone-200","aria-pressed:border-slate-5 aria-pressed:bg-slate-0 aria-pressed:shadow-inner","aria-expanded:border-slate-5 aria-expanded:bg-slate-0 aria-expanded:shadow-inner"),size:"custom",variant:"custom",pressed:o,...l,children:[gn("div",{className:"grow flex items-center gap-x-1 text-start",children:[o&&gn("div",{className:"rounded-full bg-slate-600 p-0.5",children:gn(Tn,{className:"w-[0.6em] h-[0.6em] text-white"})}),gn("div",{className:"text-slate-600 font-semibold group-disabled:text-stone-400","data-testid":"option-button-label",children:e})]}),gn("div",{className:"text-end",
+children:n&&gn("span",{className:ee("uppercase text-[0.8em] text-stone-500","group-enabled:group-hover:text-stone-600","group-disabled:text-stone-400","group-aria-pressed:text-slate-600 group-aria-expanded:text-slate-600"),"data-testid":"option-button-details",children:n})})]})}const It=V(null);function yt({value:e,children:n,subtitle:t,disabled:i}){const l=be(It);if(!l)throw new Error("RadioGroup.Radio can only be used as RadioGroup child");const{selected:o,disabled:r=i,onChange:c}=l,a=!r&&o===e;return gn("div",{role:"radio","aria-checked":a,"aria-disabled":r,className:ee("focus-visible:ring focus-visible:outline-none rounded-lg px-3 py-2 flex-1 group",{"hover:bg-grey-3/25 aria-checked:bg-grey-3/50 cursor-pointer":!r,"opacity-70":r}),"data-value":e,onClick:r?void 0:()=>c(e),onKeyDown:r?void 0:n=>{["Enter"," "].includes(n.key)&&(n.preventDefault(),c(e))},tabIndex:-1,children:[gn("div",{className:"flex items-center gap-x-1.5",children:[gn(a?Jn:Kn,{}),gn("span",{className:ee("flex items-center gap-x-1.5",{
+"text-grey-7 group-hover:text-grey-8 group-aria-checked:text-grey-8":!r}),children:n})]}),t&&gn("div",{className:ee("pl-4 ml-1.5 mt-1 text-sm",{"text-grey-6 group-hover:text-grey-7 group-aria-checked:text-grey-7":!r}),children:t})]})}yt.displayName="RadioGroup.Radio",Object.assign((function({direction:e="horizontal",children:n,selected:t,onChange:i,disabled:l,"aria-label":o,"aria-labelledby":r,name:c}){const a=me(null);return rn(a,{loop:!1,selector:'[role="radio"]:not([aria-disabled="true"])',focusElement:e=>{i(e.dataset.value),e.focus()}}),gn(It.Provider,{value:{selected:t,disabled:l,onChange:i},children:[gn("div",{"aria-label":o,"aria-labelledby":r,ref:a,role:"radiogroup",className:ee("w-full flex gap-1.5",{"flex-col":"vertical"===e}),children:n}),c&&gn("input",{type:"hidden","data-testid":"hidden-input",name:c,value:t,disabled:l})]})}),{Radio:yt,displayName:"RadioGroup"});const xt=3,St=8
+;function Ct({anchorElementRef:e,children:n,open:t,onClose:i,align:l="left",placement:o="below",arrow:r=!1,classes:c,variant:a="panel",onScroll:d,elementRef:s,asNativePopover:h=HTMLElement.prototype.hasOwnProperty("popover")}){const u=mn(s),p=function(e,n,{open:t,asNativePopover:i,alignToRight:l,placement:o,arrow:r}){const[c,a]=he(o),d=ge((()=>{const t=e.current,c=n.current,d=e=>{Object.assign(t.style,e);const n=Object.keys(e);return()=>n.map((e=>t.style[e]=""))},s=window.innerHeight,{top:h,bottom:u,left:p,height:m,width:f}=c.getBoundingClientRect(),g=s-u,{height:b,width:v}=t.getBoundingClientRect(),w="above"===o&&(h>b||g<h)||"below"===o&&g<b&&h>g;a(w?"above":"below");const I=r?xt+8:xt;if(!i)return d(w?{bottom:"100%",marginBottom:`${I}px`}:{top:"100%",marginTop:`${I}px`});const{top:y,width:x}=document.body.getBoundingClientRect(),S=Math.abs(y),C=(l?p+f:x-p)-St;let k=p;return v>C?k=l?St:k-(v-C):l&&v>f&&(k-=v-f),d({minWidth:`${f}px`,top:w?S+h-b-I+"px":`${S+h+m+I}px`,left:`${Math.max(St,k)}px`})}),[e,n,o,r,i,l])
+;return pe((()=>{if(!t)return()=>{};const n=e.current;i&&n.togglePopover(!0);const l=d();if(!i)return l;const o=new tn;o.add(document.body,"scroll",d,{capture:!0});const r=new ResizeObserver(d);return r.observe(n),()=>{i&&(null==n||n.togglePopover(!1)),l(),o.removeAll(),r.disconnect()}}),[d,i,t,e]),c}(u,e,{open:t,placement:o,arrow:r,alignToRight:"right"===l,asNativePopover:h});return function(e,n,t,i,l){ue((()=>{if(!l)return()=>{};const n=e.current,i=e=>{"open"===e.oldState&&"closed"===e.newState&&t()};return n.addEventListener("toggle",i),()=>n.removeEventListener("toggle",i)}),[l,t,e]);const o=i&&!l;cn(e,(e=>{e.composedPath().includes(n.current)||t()}),{enabled:o}),dn(["Escape"],t,{enabled:o})}(u,e,i,t,h),function({popoverRef:e,open:n}){pe((()=>{const t=e.current,i=n?document.activeElement:null;return t&&i?()=>{const e=document.activeElement;e&&!t.contains(e)&&e!==document.body||i.focus()}:()=>{}}),[e,n])}({open:t,popoverRef:u}),gn("div",{
+className:ee("absolute z-5","panel"===a&&["max-h-80 ","rounded border bg-white shadow hover:shadow-md focus-within:shadow-md",!r&&"overflow-y-auto overflow-x-hidden"],r&&"overflow-visible",h&&["max-w-[calc(100%-16px)]","p-0 m-0"],!h&&{hidden:!t,"right-0":"right"===l,"min-w-full":!0},c),ref:u,popover:h&&"auto",onScroll:d,"data-testid":"popover","data-component":"Popover",children:[t&&r&&gn("div",{className:ee("absolute z-10","fill-white text-grey-3",{"top-full":"above"===p,"bottom-full":"below"===p,"left-2":"left"===l,"right-2":"right"===l}),"data-testid":"arrow",children:gn("below"===p?Gn:$n,{})}),t&&n]})}const kt=V(null);function _t(e,n){return"function"==typeof e?e(n):e}function Lt({value:e,children:n,disabled:t=!1,classes:i,elementRef:l,title:o}){const r=me(null),c=me(null),a=mn(l),d=e=>e.target===r.current||e.target===c.current,s=be(kt);if(!s)throw new Error("Select.Option can only be used as Select or MultiSelect child")
+;const{selectValue:h,value:u,multiple:p}=s,m=fe((()=>!t&&(p?u.includes(e)||0===u.length&&void 0===e:u===e)),[u,t,p,e]),f=ge((()=>{const n={closeListbox:!0};h(p?void 0!==e?[e]:[]:e,n)}),[p,h,e]),g=ge((()=>{if(!p)return;const n={closeListbox:void 0===e};if(void 0===e)return void h([],n);const t=u.indexOf(e);if(-1===t)h([...u,e],n);else{const e=[...u];e.splice(t,1),h(e,n)}}),[u,p,h,e]);return gn("li",{className:ee("w-full ring-inset outline-none rounded-none select-none","px-1 mb-1 first:mt-1 whitespace-nowrap group",{"text-grey-4":t,"cursor-pointer":!t},i),onClick:e=>{t||d(e)||f()},onKeyDown:e=>{t||(["Enter"," "].includes(e.key)&&!d(e)?(e.preventDefault(),f()):r.current&&"ArrowRight"===e.key&&(e.preventDefault(),r.current.focus()))},role:"option","aria-disabled":t,"aria-selected":m,tabIndex:m?0:-1,ref:a,title:o,children:gn("div",{className:ee("flex justify-between items-center","w-full rounded",{"hover:bg-grey-1 group-focus-visible:ring":!t,"bg-grey-1 hover:bg-grey-2":m}),children:[gn("div",{
+className:ee("py-2 pl-3",{truncate:"truncate"===s.listboxOverflow,"whitespace-normal":"wrap"===s.listboxOverflow}),children:_t(n,{selected:m,disabled:t})}),!p&&gn("div",{className:"px-3",children:gn(Tn,{className:ee("text-grey-6 scale-125",{"opacity-0":!m})})}),p&&gn(ft,{containerClasses:ee("self-stretch px-3","text-lg",{"text-grey-6":m,"text-grey-3 hover:text-grey-6":!m}),checked:m,checkedIcon:Dn,elementRef:r,containerRef:c,onChange:g,onKeyDown:e=>{var n;"ArrowLeft"===e.key&&(e.preventDefault(),null===(n=a.current)||void 0===n||n.focus())}})]})})}function At({buttonContent:e,value:n,onChange:t,children:i,disabled:l,elementRef:o,buttonId:r,buttonClasses:c,popoverClasses:a,containerClasses:d,onPopoverScroll:s,alignListbox:h="left",multiple:u,listboxOverflow:p="truncate","aria-label":m,"aria-labelledby":f,listboxAsPopover:g}){const b=me(null),v=me(null),[w,I]=he(!1),y=ge((()=>I(!1)),[I]),x=ve(),S=mn(o),C=ve(),k=ge(((e,n)=>{t(e),n.closeListbox&&y()}),[t,y]);return an(b,y),rn(v,{horizontal:!1,loop:!1,
+autofocus:!0,containerVisible:w,selector:'[role="option"]:not([aria-disabled="true"])'}),gn("div",{className:ee("relative w-full border rounded",{"border-grey-5":w},lt,d),ref:b,children:[gn("button",{id:null!=r?r:C,className:ee("focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap","w-full flex items-center justify-between gap-x-2","bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6","text-left","rounded-[inherit]",c),type:"button",role:"combobox",disabled:l,"aria-expanded":w,"aria-haspopup":"listbox","aria-controls":x,"aria-label":m,"aria-labelledby":f,ref:S,onClick:()=>I((e=>!e)),onKeyDown:e=>{"ArrowDown"!==e.key||w||(e.preventDefault(),I(!0))},"data-testid":"select-toggle-button",children:[gn("div",{className:"pl-2 py-2 truncate grow",children:e}),gn("div",{className:"pr-2 py-2 text-grey-6",children:gn(w?Un:Vn,{})})]}),gn(kt.Provider,{value:{value:n,selectValue:k,multiple:u,listboxOverflow:p},children:gn(Ct,{anchorElementRef:b,open:w,onClose:y,asNativePopover:g,align:h,
+classes:a,onScroll:s,children:gn("ul",{role:"listbox",id:x,ref:v,"aria-multiselectable":u,"aria-labelledby":null!=r?r:C,"aria-orientation":"vertical",children:i})})})]})}Lt.displayName="Select.Option";const Nt=Object.assign((function(e){return At({...e,multiple:!1})}),{Option:Lt,displayName:"Select"});function Mt({elementRef:e,error:n,feedback:t,classes:i,...l}){l.id||l["aria-label"]||console.warn("`Textarea` component should have either an `id` or an `aria-label` attribute");const o=mn(e);return n&&(t="error"),gt(o,n),gn("textarea",{"data-component":"Textarea",...l,ref:o,className:bt({classes:i,feedback:t}),"aria-invalid":"error"===t})}Object.assign((function(e){return At({...e,multiple:!0})}),{Option:Lt,displayName:"MultiSelect"});const Tt=V({});function zt({children:e,classes:n,elementRef:t,title:i,interactive:l=!1,stickyHeader:o=!1,borderless:r=!1,striped:c=!0,grid:a=!1,...d}){const s=mn(t),h=fe((()=>({interactive:l,stickyHeader:o,borderless:r,striped:c,grid:a,tableRef:s})),[l,o,r,c,a,s])
+;return gn(Tt.Provider,{value:h,children:gn("table",{"data-component":"Table",...d,"aria-label":i,className:ee("w-full h-full","focus-visible:ring focus-visible:outline-none ring-inset","table-fixed","border-separate border-spacing-0",{"border-x border-b":!r},n),ref:s,children:e})})}const Dt=V(null);function Ht({children:e,classes:n,elementRef:t,...i}){const l=be(Tt),o=fe((()=>({section:"body"})),[]);return gn(Dt.Provider,{value:o,children:gn("tbody",{"data-component":"TableBody",...i,ref:t,className:ee({"cursor-pointer":null==l?void 0:l.interactive},n),children:e})})}function Et({children:e,classes:n,elementRef:t,unpadded:i=!1,...l}){const o=be(Dt),{borderless:r,grid:c}=be(Tt),a=o&&"head"===o.section;return gn(a?"th":"td",{"data-component":"TableCell",...l,ref:t,className:ee({"p-3":!i,"text-left border-b border-b-grey-5":a,"border-t":a&&!r,"border-none":!c&&!a,"group-last/unselected:border-b group-last/unselected:border-grey-2 group-last/unselected:border-dotted":!c&&!a,"group-[:not(:last-child)]:border-b":c
+},n),scope:a?"col":void 0,"data-grid":c,"data-borderless":r,children:e})}function Pt({children:e,classes:n,elementRef:t,...i}){const l=fe((()=>({section:"foot"})),[]);return gn(Dt.Provider,{value:l,children:gn("tfoot",{"data-component":"TableFoot",...i,ref:t,className:ee("h-full",n),children:e})})}function Bt({children:e,classes:n,elementRef:t,...i}){const l=be(Tt),o=fe((()=>({section:"head"})),[]);return gn(Dt.Provider,{value:o,children:gn("thead",{"data-component":"TableHead",...i,ref:t,className:ee("z-1","bg-grey-2",{"sticky top-0":null==l?void 0:l.stickyHeader},n),children:e})})}function Rt({children:e,classes:n,elementRef:t,selected:i,...l}){const o=mn(t),r=be(Dt),{interactive:c,striped:a,grid:d}=be(Tt),s="head"===(null==r?void 0:r.section);return gn("tr",{"data-component":"TableRow",...l,"aria-selected":i,ref:o,className:ee("group","focus-visible:ring focus-visible:outline-none ring-inset",{"odd:bg-slate-9/[.03]":a&&!s&&!i,"bg-slate-7 text-color-text-inverted":i,"hover:bg-slate-9/[.08]":c&&!i,
+"group/unselected":!i,"group/selected":i,"divide-x":d},n),"data-section":s?"head":"body","data-striped":a,"data-grid":d,children:e})}function Ot(e,n){return e[n]}function Ft({children:e,onClick:n,field:t}){const i="flex justify-between items-center";return n?gn(it,{classes:`${i} w-full h-full !p-3`,variant:"custom",onClick:n,"data-testid":`${t}-order-button`,children:e}):gn("div",{className:i,children:e})}function qt({children:e,elementRef:n,columns:t=[],rows:i=[],selectedRow:l,selectedRows:o,loading:r=!1,renderItem:c=Ot,onSelectRow:a,onSelectRows:d,onConfirmRow:s,emptyMessage:h,order:u,onOrderChange:p,orderableColumns:m=[],title:f,borderless:g,striped:b,grid:v,...w}){const I=mn(n),x=be(In),[S,C]=fe((()=>Array.isArray(m)?[m,{}]:[Object.keys(m),m]),[m]),k=ge((e=>{const n=function(e,n,t){var i;return e!==(null==n?void 0:n.field)?{field:e,direction:null!==(i=null==t?void 0:t[e])&&void 0!==i?i:"ascending"}:{field:e,direction:"ascending"===n.direction?"descending":"ascending"}}(e,u,C);null==p||p(n)
+}),[C,p,u]),_=r||!i.length&&h,L=fe((()=>t.map((e=>e.field))),[t]),A=ln(((e,n="replace")=>{null==a||a(e);let t=[e];if("extend"===n&&o&&o.length>0){const n=i.indexOf(o[0]),l=i.indexOf(e);t=l>=n?i.slice(n,l+1):i.slice(l,n+1).reverse()}null==d||d(t)}));rn(I,{selector:"tbody tr",horizontal:!0,vertical:!0,focusElement:(e,n)=>{n&&e.dispatchEvent(new MouseEvent("click",{shiftKey:n.shiftKey})),e.focus()}});const N=ln((e=>{null==s||s(e)})),M=ge(((e,n)=>{"Enter"===e.key&&e.target===e.currentTarget&&(N(n),e.preventDefault(),e.stopPropagation())}),[N]);ue((()=>{var e,n;if(!l||!x)return;const t=x.scrollRef.current,i=null===(e=I.current)||void 0===e?void 0:e.querySelector("thead"),o=null===(n=I.current)||void 0===n?void 0:n.querySelector('tr[aria-selected="true"]');if(t&&o){const e=o.offsetTop-t.scrollTop;if(e>t.clientHeight&&o.scrollIntoView(),i){const n=e-i.clientHeight;n<0&&t.scrollBy(0,n)}}}),[l,I,x]);const T=!r&&i.length>0,z=fe((()=>o||(l?[l]:[])),[o,l]),D=fe((()=>i.map(((e,n)=>gn(Rt,{selected:z.includes(e),
+onClick:n=>A(e,n.shiftKey?"extend":"replace"),onDblClick:()=>N(e),onKeyDown:n=>M(n,e),children:L.map((n=>gn(Et,{children:c(e,n)},n)))},n)))),[N,L,c,M,i,A,z]),H=Boolean(a||d||s);return gn(zt,{"data-composite-component":"DataTable",role:"grid",...w,elementRef:I,interactive:H,stickyHeader:!0,title:f,borderless:g,striped:b,grid:v,children:[gn(Bt,{children:gn(Rt,{children:t.map((e=>{const n=!!p&&S.includes(e.field),t=(null==u?void 0:u.field)===e.field;return gn(Et,{classes:e.classes,unpadded:n,"aria-sort":t?u.direction:void 0,children:gn(Ft,{field:e.field.toString(),onClick:n?()=>k(e.field):void 0,children:[gn("div",{children:e.label}),n&&gn("div",{className:ee("rounded p-1",{"bg-white":t}),"aria-hidden":!0,children:[t&&("ascending"===u.direction?gn(An,{}):gn(kn,{})),!t&&gn(Wn,{className:ee("text-grey-5",{"group-hover:text-grey-7":H})})]})]})},e.field)}))})}),gn(Ht,{children:[!r&&D,_&&gn(Rt,{children:gn(Et,{colSpan:t.length,classes:"text-center p-3",children:r?gn(nt,{className:"inline w-2em h-2em"}):gn(y,{
+children:h})})})]}),e,T&&gn(Pt,{})]})}function jt({children:e,classes:n,elementRef:t,borderless:i=!1,rounded:l=!1,...o}){return gn("div",{"data-component":"ScrollContainer",...o,ref:t,className:ee("flex flex-col h-full w-full","min-h-0",{border:!i,"rounded-lg overflow-hidden":l},n),children:e})}function Ut({children:e,classes:n,elementRef:t,...i}){return gn("div",{"data-component":"ScrollContent",...i,ref:t,className:ee("px-3 py-2",n),children:e})}function Vt({children:e,elementRef:n,borderless:t=!1,rounded:i=!1,...l}){return gn(jt,{"data-composite-component":"ScrollBox",...l,borderless:t,rounded:i,elementRef:n,children:gn(yn,{children:gn(Ut,{children:e})})})}function Wt({size:e="sm",color:n="text-light"}){return gn(nt,{className:ee({"text-color-text-light":"text-light"===n,"text-color-text":"text"===n,"text-color-text-inverted":"text-inverted"===n},{"w-em h-em":"sm"===e,"w-2em h-2em":"md"===e,"w-4em h-4em":"lg"===e}),"data-component":"Spinner"})}
+function $t({children:e,elementRef:n,borderless:t=!1,loading:i=!1,objectFit:l="cover",placeholder:o,ratio:r="16/9",size:c="md",...a}){const d=null!=o?o:gn(Bn,{className:ee("text-grey-5",{"w-4 h-4":"sm"===c||"md"===c,"w-8 h-8":"lg"===c})}),s=N(e).length?e:gn("div",{children:d});return gn("div",{"data-composite-component":"Thumbnail",...a,ref:n,className:ee("bg-grey-1 w-full h-full overflow-hidden",{"p-3":"md"===c&&!t,"p-2":"sm"===c&&!t,"p-4":"lg"===c&&!t,"p-0":t}),children:gn("div",{className:"bg-white h-full w-full flex items-center justify-center overflow-hidden",children:gn(pt,{ratio:r,objectFit:l,children:i?gn("div",{children:gn(Wt,{size:c})}):s})})})}function Gt({children:e,classes:n,elementRef:t,icon:i,status:l="notice",size:o="md",variant:r="outlined",unstyled:c=!1,...a}){const d=!c,s=d&&"custom"!==r,h=d&&"custom"!==o;let u=i;if(!u)switch(l){case"success":u=Tn;break;case"error":u=Nn;break;default:u=Mn}const p=s&&h;return gn("div",{"data-component":"Callout",...a,ref:t,
+className:ee(d&&"flex items-center border",s&&{"rounded border":!0,"shadow hover:shadow-md cursor-pointer":"raised"===r,"border-yellow-notice":"notice"===l,"border-green-success":"success"===l,"border-red-error":"error"===l},s&&{"bg-yellow-notice":"notice"===l&&p,"bg-green-success":"success"===l&&p,"bg-red-error":"error"===l&&p,"bg-white":!p},n),children:[p&&gn("div",{className:ee({"p-2":"md"===o,"p-1.5":"sm"===o,"p-3":"lg"===o}),children:gn(u,{"data-testid":"callout-icon",className:ee("text-white",{"w-[1.25em] h-[1.25em]":"md"===o,"w-[0.85em] h-[0.85em]":"sm"===o,"w-[1.5em] h-[1.5em]":"lg"===o})})}),gn("div",{className:ee(h&&{"p-2":"md"===o,"py-1.5 px-2":"sm"===o,"p-3":"lg"===o},d&&"grow",s&&"bg-white rounded-r"),children:e})]})}function Xt({...e}){return gn(vn,{"data-composite-component":"SpinnerOverlay",...e,variant:"light",children:gn(Wt,{size:"lg"})})}function Kt({message:e,onDismiss:n}){return gn(Gt,{classes:ee({"sr-only":e.visuallyHidden}),status:e.type,onClick:()=>n(e.id),variant:"raised",
+children:e.message})}const Jt=({direction:e,onTransitionEnd:n,children:t,transitionClasses:i={}})=>{const l="out"===e,o=me(null),r=fe((()=>{const{transitionIn:e="animate-fade-in",transitionOut:n="animate-fade-out"}=i;return{[e]:!l,[n]:l}}),[l,i]);return gn("div",{"data-testid":"animation-container",onAnimationEnd:t=>{t.target===o.current&&(null==n||n(null!=e?e:"in"))},ref:o,className:ee("relative w-full container",r),children:t})};function Qt({messages:e,onMessageDismiss:n,transitionClasses:t,setTimeout_:i=setTimeout}){const[l,o]=he([]),r=me(new Map),c=ge((e=>o((n=>[...n,e]))),[]),a=ge((e=>{const n=i((()=>{c(e),r.current.delete(e)}),5e3);r.current.set(e,n)}),[c,i]),d=ge(((e,t)=>{var i;const l=null===(i=t.autoDismiss)||void 0===i||i;"in"===e&&l&&a(t.id),"out"===e&&(n(t.id),o((e=>e.filter((e=>e!==t.id)))))}),[a,n]);return pe((()=>{const e=r.current;return()=>{e.forEach((e=>clearTimeout(e)))}}),[]),gn("ul",{"aria-live":"polite","aria-relevant":"additions",className:"w-full space-y-2",
+"data-component":"ToastMessages",children:e.map((e=>{const n=l.includes(e.id);return gn("li",{className:ee({"mb-2":!e.visuallyHidden}),children:gn(Jt,{direction:n?"out":"in",onTransitionEnd:n=>d(n,e),transitionClasses:t,children:gn(Kt,{message:e,onDismiss:c})})},e.id)}))})}function Zt({children:e,classes:n,elementRef:t,underline:i="none",unstyled:l=!1,variant:o="brand",...r}){const c=!l;return gn("a",{"data-component":"Link",rel:"noopener noreferrer",...r,className:ee(c&&{"focus-visible:ring focus-visible:outline-none rounded":!0,"no-underline hover:no-underline":"none"===i,"underline hover:underline":"always"===i,"no-underline hover:underline":"hover"===i},c&&"custom"!==o&&{"text-brand hover:text-brand-dark":"brand"===o,"text-color-text-light hover:text-brand":"text-light"===o,"text-color-text hover:text-brand-dark":"text"===o},n),ref:t,children:e})}function Yt({children:e,classes:n,elementRef:t,inline:i=!1,underline:l="none",variant:o="brand",unstyled:r=!1,...c}){const a=!r;return gn(it,{
+"data-component":"LinkButton",...c,elementRef:t,classes:ee(a&&{"focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap rounded":!0,inline:i,"flex items-center":!i},a&&{"no-underline hover:no-underline":"none"===l,"underline enabled:hover:underline":"always"===l,"no-underline enabled:hover:underline":"hover"===l},a&&"custom"!==o&&{"aria-pressed:font-semibold aria-expanded:font-semibold":!0,"text-brand enabled:hover:text-brand-dark":"brand"===o,"text-color-text enabled:hover:text-brand-dark":"text"===o,"text-color-text-light enabled:hover:text-brand":"text-light"===o},n),unstyled:!0,children:e})}function ei({children:e,invisible:n=!1,pressed:t=!1,onClick:i,title:l}){return gn(it,{classes:ee("px-3.5 py-2.5 gap-x-1","font-semibold rounded","text-grey-7 enabled:hover:text-grey-9 enabled:hover:bg-grey-3","disabled:text-grey-5 aria-pressed:bg-grey-3 aria-expanded:bg-grey-3",n&&"invisible"),disabled:n,onClick:i,pressed:t,size:"custom",title:l,variant:"custom",children:e})}
+function ni({currentPage:e,onChangePage:n,totalPages:t}){const i=e<t,l=e>1,o=function(e,n,{boundaryCount:t=1,siblingCount:i=1}={}){if(n<=1)return[];const l=[],o=n-(e=Math.max(1,Math.min(e,n)));let r=null;if((t=Math.max(t,1))+(i=Math.max(i,0))<e-1){for(let e=1;e<=t;e++)l.push(e);r={index:l.length,count:e-i-t,value:e-i-1},l.push(null);for(let n=e-i;n<e;n++)l.push(n)}else for(let n=1;n<e;n++)l.push(n);l.push(e);let c=null;if(t+i<o){for(let n=e+1;n<=e+i;n++)l.push(n);c={index:l.length,count:n-t+1-(e+i),value:e+i+1},l.push(null);for(let e=n-t+1;e<=n;e++)l.push(e)}else for(let t=e+1;t<=n;t++)l.push(t);const a=Math.min(2*t+2*i+3,n);for(;l.length<a&&(null!==(d=c)&&void 0!==d&&d.count||null!==(s=r)&&void 0!==s&&s.count);){var d,s;c&&c.count>0?(l.splice(c.index,0,c.value),++c.index,++c.value,--c.count):r&&(l.splice(r.index+1,0,r.value),--r.value,--r.count)}return l}(e,t),r=(e,t)=>{n(e),t.blur()};return gn("div",{className:"flex items-center text-md select-none","data-testid":"pagination-navigation",children:[gn("div",{
+className:"mr-2",children:gn(ei,{invisible:!l,title:"Go to previous page",onClick:n=>r(e-1,n.target),children:[gn(_n,{}),"prev"]})}),gn("ul",{className:ee("hidden","md:flex md:items-center md:justify-center md:gap-x-2","md:grow"),children:o.map(((n,t)=>gn("li",{children:null===n?gn("div",{className:"px-3 text-center","data-testid":"pagination-gap",children:"…"}):gn(ei,{title:`Go to page ${n}`,pressed:n===e,onClick:e=>r(n,e.target),children:n.toString()},`page-${t}`)},t)))}),gn("div",{className:ee("ml-2 flex justify-end","grow md:grow-0"),children:gn(ei,{invisible:!i,title:"Go to next page",onClick:n=>r(e+1,n.target),children:["next",gn(Ln,{})]})})]})}function ti({children:e,classes:n,elementRef:t,expanded:i,pressed:l,title:o,direction:r,...c}){return gn(it,{"data-component":"PointerButton",...c,elementRef:t,
+classes:ee("relative w-[26px] h-[16px]","flex items-center justify-center","bg-white rounded-[4px] border","before:absolute before:border-transparent","after:absolute after:border-transparent","text-[10px] text-color-text-light leading-none font-semibold",{"shadow-[1px_1px_1px_rgba(0,0,0,0.1)]":"down"!==r,"shadow-[1px_0px_1px_rgba(0,0,0,0.1)]":"down"===r},{"rounded-r-[4px] rounded-l-[2px]":"left"===r,"before:right-full before:top-1/2 after:right-full after:top-1/2":"left"===r,"before:mt-[-8px] before:border-8 before:border-r-[5px] before:border-r-grey-3":"left"===r,"after:mt-[-7px] after:border-[7px] after:border-r-[4px] after:border-r-white":"left"===r},{"z-1 rounded-t-px-sm rounded-b-px":"up"===r,"before:top-auto before:left-1/2 before:bottom-full after:top-auto after:left-1/2 after:bottom-full":"up"===r,"before:ml-[-13px] before:border-[13px] before:border-b-[6px] before:border-b-grey-3":"up"===r,"after:ml-[-12px] after:border-[12px] after:border-b-[5px] after:border-b-white":"up"===r},{
+"z-1 rounded-t-px rounded-b-px-sm":"down"===r,"before:top-full before:left-1/2 after:top-full after:left-1/2":"down"===r,"before:ml-[-13px] before:border-[13px] before:border-t-[6px] before:border-t-grey-3":"down"===r,"after:ml-[-12px] after:border-[12px] after:border-t-[5px] after:border-t-white":"down"===r},n),expanded:i,pressed:l,title:o,variant:"custom",size:"custom",children:e})}function ii({children:e,classes:n,elementRef:t,icon:i,textContent:l,selected:o=!1,size:r="md",variant:c="text",unstyled:a=!1,...d}){const s=!a,h=s&&"custom"!==r;return gn(it,{"data-component":"Tab",...d,classes:ee(h&&"gap-x-1.5",s&&"custom"!==c&&{"px-4 py-2":"tab"===c&&h,"font-semibold text-grey-7 rounded-t-lg border border-transparent border-b-0":"tab"===c,"aria-selected:text-color-text aria-selected:bg-white":"tab"===c,"aria-selected:border aria-selected:border-grey-3 aria-selected:border-b-0":"tab"===c,"enabled:hover:text-color-text disabled:text-grey-7/50":"tab"===c,"enabled:hover:text-brand-dark":"text"===c,
+"aria-selected:font-bold":"text"===c},n),elementRef:t,"aria-selected":o,role:"tab",variant:"custom",size:"custom",unstyled:a,children:[i&&gn(i,{className:ee("p-[0.125em] w-em h-em")}),gn("span",{"data-content":l,"data-testid":"sizing-wrapper",className:ee({"before:content-[attr(data-content)] before:font-bold":l,"before:block before:invisible before:h-0 before:overflow-hidden":l}),children:e})]})}function li({children:e,classes:n,elementRef:t,vertical:i=!1,...l}){const o=mn(t);return rn(o,{selector:"button",horizontal:!0,vertical:i}),gn("div",{"data-component":"TabList",...l,ref:o,className:ee("flex focus-visible:ring focus-visible:outline-none",{"flex-col":i},n),role:"tablist","aria-orientation":i?"vertical":"horizontal",children:e})}const oi=({children:e,direction:n="in",onTransitionEnd:t,delay:i,elementRef:l})=>{const o="in"===n,r=mn(l),[c,a]=he(o?"auto":0),[d,s]=he(o);ue((()=>{if(o===(0!==c))return;const e=r.current;o?(e.style.display="",s(!0),a(e.scrollHeight)):(e.style.height=`${e.scrollHeight}px`,
+e.getBoundingClientRect(),a(0))}),[c,r,o]);const h=ge((e=>{e.target===r.current&&"height"===e.propertyName&&(o?a("auto"):s(!1),null==t||t(n))}),[r,o,t,n]);return gn("div",{ontransitionend:h,ref:r,style:{display:d?"":"none",height:c,overflow:"auto"===c?"visible":"hidden",transition:"height 0.15s ease-in",transitionDelay:i},children:e})};var ri,ci;function ai(){if(ci)return ri;function e(n){return n instanceof Map?n.clear=n.delete=n.set=function(){throw new Error("map is read-only")}:n instanceof Set&&(n.add=n.clear=n.delete=function(){throw new Error("set is read-only")}),Object.freeze(n),Object.getOwnPropertyNames(n).forEach((t=>{const i=n[t],l=typeof i;"object"!==l&&"function"!==l||Object.isFrozen(i)||e(i)})),n}ci=1;class n{constructor(e){void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}ignoreMatch(){this.isMatchIgnored=!0}}function t(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function i(e,...n){
+const t=Object.create(null);for(const n in e)t[n]=e[n];return n.forEach((function(e){for(const n in e)t[n]=e[n]})),t}const l=e=>!!e.scope;class o{constructor(e,n){this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){this.buffer+=t(e)}openNode(e){if(!l(e))return;const n=((e,{prefix:n})=>{if(e.startsWith("language:"))return e.replace("language:","language-");if(e.includes(".")){const t=e.split(".");return[`${n}${t.shift()}`,...t.map(((e,n)=>`${e}${"_".repeat(n+1)}`))].join(" ")}return`${n}${e}`})(e.scope,{prefix:this.classPrefix});this.span(n)}closeNode(e){l(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){this.buffer+=`<span class="${e}">`}}const r=(e={})=>{const n={children:[]};return Object.assign(n,e),n};class c{constructor(){this.rootNode=r(),this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){this.top.children.push(e)}openNode(e){const n=r({scope:e});this.add(n),this.stack.push(n)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),n.children.forEach((n=>this._walk(e,n))),e.closeNode(n)),e}static _collapse(e){"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{c._collapse(e)})))}}class a extends c{constructor(e){super(),this.options=e}addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){this.closeNode()}__addSublanguage(e,n){const t=e.root;n&&(t.scope=`language:${n}`),this.add(t)}toHTML(){return new o(this,this.options).value()}finalize(){return this.closeAllNodes(),!0}}function d(e){return e?"string"==typeof e?e:e.source:null}function s(e){return p("(?=",e,")")}function h(e){return p("(?:",e,")*")}function u(e){return p("(?:",e,")?")}function p(...e){
+const n=e.map((e=>d(e))).join("");return n}function m(...e){const n=function(e){const n=e[e.length-1];return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}}(e),t="("+(n.capture?"":"?:")+e.map((e=>d(e))).join("|")+")";return t}function f(e){return new RegExp(e.toString()+"|").exec("").length-1}const g=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./;function b(e,{joinWith:n}){let t=0;return e.map((e=>{t+=1;const n=t;let i=d(e),l="";for(;i.length>0;){const e=g.exec(i);if(!e){l+=i;break}l+=i.substring(0,e.index),i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?l+="\\"+String(Number(e[1])+n):(l+=e[0],"("===e[0]&&t++)}return l})).map((e=>`(${e})`)).join(n)}const v="[a-zA-Z]\\w*",w="[a-zA-Z_]\\w*",I="\\b\\d+(\\.\\d+)?",y="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",x="\\b(0b[01]+)",S={begin:"\\\\[\\s\\S]",relevance:0},C={scope:"string",begin:"'",end:"'",illegal:"\\n",contains:[S]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",contains:[S]
+},_=function(e,n,t={}){const l=i({scope:"comment",begin:e,end:n,contains:[]},t);l.contains.push({scope:"doctag",begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0});const o=m("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/);return l.contains.push({begin:p(/[ ]+/,"(",o,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),l},L=_("//","$"),A=_("/\\*","\\*/"),N=_("#","$"),M={scope:"number",begin:I,relevance:0},T={scope:"number",begin:y,relevance:0},z={scope:"number",begin:x,relevance:0},D={begin:/(?=\/[^/\n]*\/)/,contains:[{scope:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[S,{begin:/\[/,end:/\]/,relevance:0,contains:[S]}]}]},H={scope:"title",begin:v,relevance:0},E={scope:"title",begin:w,relevance:0},P={begin:"\\.\\s*"+w,relevance:0};var B=Object.freeze({__proto__:null,MATCH_NOTHING_RE:/\b\B/,IDENT_RE:v,UNDERSCORE_IDENT_RE:w,NUMBER_RE:I,C_NUMBER_RE:y,
+BINARY_NUMBER_RE:x,RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",SHEBANG:(e={})=>{const n=/^#![ ]*\//;return e.binary&&(e.begin=p(n,/.*\b/,e.binary,/\b.*/)),i({scope:"meta",begin:n,end:/$/,relevance:0,"on:begin":(e,n)=>{0!==e.index&&n.ignoreMatch()}},e)},BACKSLASH_ESCAPE:S,APOS_STRING_MODE:C,QUOTE_STRING_MODE:k,PHRASAL_WORDS_MODE:{begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},COMMENT:_,C_LINE_COMMENT_MODE:L,C_BLOCK_COMMENT_MODE:A,HASH_COMMENT_MODE:N,NUMBER_MODE:M,C_NUMBER_MODE:T,BINARY_NUMBER_MODE:z,REGEXP_MODE:D,TITLE_MODE:H,UNDERSCORE_TITLE_MODE:E,METHOD_GUARD:P,END_SAME_AS_BEGIN:function(e){return Object.assign(e,{"on:begin":(e,n)=>{n.data._beginMatch=e[1]},"on:end":(e,n)=>{n.data._beginMatch!==e[1]&&n.ignoreMatch()}})}});function R(e,n){"."===e.input[e.index-1]&&n.ignoreMatch()}function O(e,n){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function F(e,n){n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=R,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,void 0===e.relevance&&(e.relevance=0))}function q(e,n){Array.isArray(e.illegal)&&(e.illegal=m(...e.illegal))}function j(e,n){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match}}function U(e,n){void 0===e.relevance&&(e.relevance=1)}const V=(e,n)=>{if(!e.beforeMatch)return;if(e.starts)throw new Error("beforeMatch cannot be used with starts");const t=Object.assign({},e);Object.keys(e).forEach((n=>{delete e[n]})),e.keywords=t.keywords,e.begin=p(t.beforeMatch,s(t.begin)),e.starts={relevance:0,contains:[Object.assign(t,{endsParent:!0})]},e.relevance=0,delete t.beforeMatch},W=["of","and","for","in","not","or","if","then","parent","list","value"],$="keyword";function G(e,n,t=$){
+const i=Object.create(null);return"string"==typeof e?l(t,e.split(" ")):Array.isArray(e)?l(t,e):Object.keys(e).forEach((function(t){Object.assign(i,G(e[t],n,t))})),i;function l(e,t){n&&(t=t.map((e=>e.toLowerCase()))),t.forEach((function(n){const t=n.split("|");i[t[0]]=[e,X(t[0],t[1])]}))}}function X(e,n){return n?Number(n):function(e){return W.includes(e.toLowerCase())}(e)?0:1}const K={},J=e=>{console.error(e)},Q=(e,...n)=>{console.log(`WARN: ${e}`,...n)},Z=(e,n)=>{K[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),K[`${e}/${n}`]=!0)},Y=new Error;function ee(e,n,{key:t}){let i=0;const l=e[t],o={},r={};for(let e=1;e<=n.length;e++)r[e+i]=l[e],o[e+i]=!0,i+=f(n[e-1]);e[t]=r,e[t]._emit=o,e[t]._multi=!0}function ne(e){!function(e){e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,delete e.scope)}(e),"string"==typeof e.beginScope&&(e.beginScope={_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope}),function(e){if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw J("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),Y;if("object"!=typeof e.beginScope||null===e.beginScope)throw J("beginScope must be object"),Y;ee(e,e.begin,{key:"beginScope"}),e.begin=b(e.begin,{joinWith:""})}}(e),function(e){if(Array.isArray(e.end)){if(e.skip||e.excludeEnd||e.returnEnd)throw J("skip, excludeEnd, returnEnd not compatible with endScope: {}"),Y;if("object"!=typeof e.endScope||null===e.endScope)throw J("endScope must be object"),Y;ee(e,e.end,{key:"endScope"}),e.end=b(e.end,{joinWith:""})}}(e)}function te(e){function n(n,t){return new RegExp(d(n),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(t?"g":""))}class t{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(e,n){n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),this.matchAt+=f(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null);const e=this.regexes.map((e=>e[1]))
+;this.matcherRe=n(b(e,{joinWith:"|"}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex;const n=this.matcherRe.exec(e);if(!n)return null;const t=n.findIndex(((e,n)=>n>0&&void 0!==e)),i=this.matchIndexes[t];return n.splice(0,t),Object.assign(n,i)}}class l{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){if(this.multiRegexes[e])return this.multiRegexes[e];const n=new t;return this.rules.slice(e).forEach((([e,t])=>n.addRule(e,t))),n.compile(),this.multiRegexes[e]=n,n}resumingScanAtSamePosition(){return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,n){this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){const n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex;let t=n.exec(e);if(this.resumingScanAtSamePosition())if(t&&t.index===this.lastIndex);else{const n=this.getMatcher(0);n.lastIndex=this.lastIndex+1,t=n.exec(e)}return t&&(this.regexIndex+=t.position+1,
+this.regexIndex===this.count&&this.considerAll()),t}}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=i(e.classNameAliases||{}),function t(o,r){const c=o;if(o.isCompiled)return c;[O,j,ne,V].forEach((e=>e(o,r))),e.compilerExtensions.forEach((e=>e(o,r))),o.__beforeBegin=null,[F,q,U].forEach((e=>e(o,r))),o.isCompiled=!0;let a=null;return"object"==typeof o.keywords&&o.keywords.$pattern&&(o.keywords=Object.assign({},o.keywords),a=o.keywords.$pattern,delete o.keywords.$pattern),a=a||/\w+/,o.keywords&&(o.keywords=G(o.keywords,e.case_insensitive)),c.keywordPatternRe=n(a,!0),r&&(o.begin||(o.begin=/\B|\b/),c.beginRe=n(c.begin),o.end||o.endsWithParent||(o.end=/\B|\b/),o.end&&(c.endRe=n(c.end)),c.terminatorEnd=d(c.end)||"",o.endsWithParent&&r.terminatorEnd&&(c.terminatorEnd+=(o.end?"|":"")+r.terminatorEnd)),o.illegal&&(c.illegalRe=n(o.illegal)),
+o.contains||(o.contains=[]),o.contains=[].concat(...o.contains.map((function(e){return function(e){e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((function(n){return i(e,{variants:null},n)})));if(e.cachedVariants)return e.cachedVariants;if(ie(e))return i(e,{starts:e.starts?i(e.starts):null});if(Object.isFrozen(e))return i(e);return e}("self"===e?o:e)}))),o.contains.forEach((function(e){t(e,c)})),o.starts&&t(o.starts,r),c.matcher=function(e){const n=new l;return e.contains.forEach((e=>n.addRule(e.begin,{rule:e,type:"begin"}))),e.terminatorEnd&&n.addRule(e.terminatorEnd,{type:"end"}),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n}(c),c}(e)}function ie(e){return!!e&&(e.endsWithParent||ie(e.starts))}class le extends Error{constructor(e,n){super(e),this.name="HTMLInjectionError",this.html=n}}const oe=t,re=i,ce=Symbol("nomatch"),ae=function(t){const i=Object.create(null),l=Object.create(null),o=[];let r=!0
+;const c="Could not find the language '{}', did you forget to load/include a language module?",d={disableAutodetect:!0,name:"Plain text",contains:[]};let f={ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",cssSelector:"pre code",languages:null,__emitter:a};function g(e){return f.noHighlightRe.test(e)}function b(e,n,t){let i="",l="";"object"==typeof n?(i=e,t=n.ignoreIllegals,l=n.language):(Z("10.7.0","highlight(lang, code, ...args) has been deprecated."),Z("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),l=e,i=n),void 0===t&&(t=!0);const o={code:i,language:l};_("before:highlight",o);const r=o.result?o.result:v(o.language,o.code,t);return r.code=o.code,_("after:highlight",r),r}function v(e,t,l,o){const a=Object.create(null);function d(){if(!_.keywords)return void A.addText(N);let e=0;_.keywordPatternRe.lastIndex=0;let n=_.keywordPatternRe.exec(N),t=""
+;for(;n;){t+=N.substring(e,n.index);const l=x.case_insensitive?n[0].toLowerCase():n[0],o=(i=l,_.keywords[i]);if(o){const[e,i]=o;if(A.addText(t),t="",a[l]=(a[l]||0)+1,a[l]<=7&&(M+=i),e.startsWith("_"))t+=n[0];else{const t=x.classNameAliases[e]||e;h(n[0],t)}}else t+=n[0];e=_.keywordPatternRe.lastIndex,n=_.keywordPatternRe.exec(N)}var i;t+=N.substring(e),A.addText(t)}function s(){null!=_.subLanguage?function(){if(""===N)return;let e=null;if("string"==typeof _.subLanguage){if(!i[_.subLanguage])return void A.addText(N);e=v(_.subLanguage,N,!0,L[_.subLanguage]),L[_.subLanguage]=e._top}else e=w(N,_.subLanguage.length?_.subLanguage:null);_.relevance>0&&(M+=e.relevance),A.__addSublanguage(e._emitter,e.language)}():d(),N=""}function h(e,n){""!==e&&(A.startScope(n),A.addText(e),A.endScope())}function u(e,n){let t=1;const i=n.length-1;for(;t<=i;){if(!e._emit[t]){t++;continue}const i=x.classNameAliases[e[t]]||e[t],l=n[t];i?h(l,i):(N=l,d(),N=""),t++}}function p(e,n){
+return e.scope&&"string"==typeof e.scope&&A.openNode(x.classNameAliases[e.scope]||e.scope),e.beginScope&&(e.beginScope._wrap?(h(N,x.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),N=""):e.beginScope._multi&&(u(e.beginScope,n),N="")),_=Object.create(e,{parent:{value:_}}),_}function m(e,t,i){let l=function(e,n){const t=e&&e.exec(n);return t&&0===t.index}(e.endRe,i);if(l){if(e["on:end"]){const i=new n(e);e["on:end"](t,i),i.isMatchIgnored&&(l=!1)}if(l){for(;e.endsParent&&e.parent;)e=e.parent;return e}}if(e.endsWithParent)return m(e.parent,t,i)}function g(e){return 0===_.matcher.regexIndex?(N+=e[0],1):(D=!0,0)}function b(e){const n=e[0],i=t.substring(e.index),l=m(_,e,i);if(!l)return ce;const o=_;_.endScope&&_.endScope._wrap?(s(),h(n,_.endScope._wrap)):_.endScope&&_.endScope._multi?(s(),u(_.endScope,e)):o.skip?N+=n:(o.returnEnd||o.excludeEnd||(N+=n),s(),o.excludeEnd&&(N=n));do{_.scope&&A.closeNode(),_.skip||_.subLanguage||(M+=_.relevance),_=_.parent}while(_!==l.parent);return l.starts&&p(l.starts,e),
+o.returnEnd?0:n.length}let I={};function y(i,o){const c=o&&o[0];if(N+=i,null==c)return s(),0;if("begin"===I.type&&"end"===o.type&&I.index===o.index&&""===c){if(N+=t.slice(o.index,o.index+1),!r){const n=new Error(`0 width match regex (${e})`);throw n.languageName=e,n.badRule=I.rule,n}return 1}if(I=o,"begin"===o.type)return function(e){const t=e[0],i=e.rule,l=new n(i),o=[i.__beforeBegin,i["on:begin"]];for(const n of o)if(n&&(n(e,l),l.isMatchIgnored))return g(t);return i.skip?N+=t:(i.excludeBegin&&(N+=t),s(),i.returnBegin||i.excludeBegin||(N=t)),p(i,e),i.returnBegin?0:t.length}(o);if("illegal"===o.type&&!l){const e=new Error('Illegal lexeme "'+c+'" for mode "'+(_.scope||"<unnamed>")+'"');throw e.mode=_,e}if("end"===o.type){const e=b(o);if(e!==ce)return e}if("illegal"===o.type&&""===c)return 1;if(z>1e5&&z>3*o.index){throw new Error("potential infinite loop, way more iterations than matches")}return N+=c,c.length}const x=S(e);if(!x)throw J(c.replace("{}",e)),new Error('Unknown language: "'+e+'"');const C=te(x)
+;let k="",_=o||C;const L={},A=new f.__emitter(f);!function(){const e=[];for(let n=_;n!==x;n=n.parent)n.scope&&e.unshift(n.scope);e.forEach((e=>A.openNode(e)))}();let N="",M=0,T=0,z=0,D=!1;try{if(x.__emitTokens)x.__emitTokens(t,A);else{for(_.matcher.considerAll();;){z++,D?D=!1:_.matcher.considerAll(),_.matcher.lastIndex=T;const e=_.matcher.exec(t);if(!e)break;const n=y(t.substring(T,e.index),e);T=e.index+n}y(t.substring(T))}return A.finalize(),k=A.toHTML(),{language:e,value:k,relevance:M,illegal:!1,_emitter:A,_top:_}}catch(n){if(n.message&&n.message.includes("Illegal"))return{language:e,value:oe(t),illegal:!0,relevance:0,_illegalBy:{message:n.message,index:T,context:t.slice(T-100,T+100),mode:n.mode,resultSoFar:k},_emitter:A};if(r)return{language:e,value:oe(t),illegal:!1,relevance:0,errorRaised:n,_emitter:A,_top:_};throw n}}function w(e,n){n=n||f.languages||Object.keys(i);const t=function(e){const n={value:oe(e),illegal:!1,relevance:0,_top:d,_emitter:new f.__emitter(f)};return n._emitter.addText(e),n
+}(e),l=n.filter(S).filter(k).map((n=>v(n,e,!1)));l.unshift(t);const o=l.sort(((e,n)=>{if(e.relevance!==n.relevance)return n.relevance-e.relevance;if(e.language&&n.language){if(S(e.language).supersetOf===n.language)return 1;if(S(n.language).supersetOf===e.language)return-1}return 0})),[r,c]=o,a=r;return a.secondBest=c,a}function I(e){let n=null;const t=function(e){let n=e.className+" ";n+=e.parentNode?e.parentNode.className:"";const t=f.languageDetectRe.exec(n);if(t){const n=S(t[1]);return n||(Q(c.replace("{}",t[1])),Q("Falling back to no-highlight mode for this block.",e)),n?t[1]:"no-highlight"}return n.split(/\s+/).find((e=>g(e)||S(e)))}(e);if(g(t))return;if(_("before:highlightElement",{el:e,language:t}),e.children.length>0&&(f.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),console.warn("The element with unescaped HTML:"),console.warn(e)),
+f.throwUnescapedHTML)){throw new le("One of your code blocks includes unescaped HTML.",e.innerHTML)}n=e;const i=n.textContent,o=t?b(i,{language:t,ignoreIllegals:!0}):w(i);e.innerHTML=o.value,function(e,n,t){const i=n&&l[n]||t;e.classList.add("hljs"),e.classList.add(`language-${i}`)}(e,t,o.language),e.result={language:o.language,re:o.relevance,relevance:o.relevance},o.secondBest&&(e.secondBest={language:o.secondBest.language,relevance:o.secondBest.relevance}),_("after:highlightElement",{el:e,result:o,text:i})}let y=!1;function x(){if("loading"===document.readyState)return void(y=!0);document.querySelectorAll(f.cssSelector).forEach(I)}function S(e){return e=(e||"").toLowerCase(),i[e]||i[l[e]]}function C(e,{languageName:n}){"string"==typeof e&&(e=[e]),e.forEach((e=>{l[e.toLowerCase()]=n}))}function k(e){const n=S(e);return n&&!n.disableAutodetect}function _(e,n){const t=e;o.forEach((function(e){e[t]&&e[t](n)}))}
+"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(function(){y&&x()}),!1),Object.assign(t,{highlight:b,highlightAuto:w,highlightAll:x,highlightElement:I,highlightBlock:function(e){return Z("10.7.0","highlightBlock will be removed entirely in v12.0"),Z("10.7.0","Please use highlightElement now."),I(e)},configure:function(e){f=re(f,e)},initHighlighting:()=>{x(),Z("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},initHighlightingOnLoad:function(){x(),Z("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")},registerLanguage:function(e,n){let l=null;try{l=n(t)}catch(n){if(J("Language definition for '{}' could not be registered.".replace("{}",e)),!r)throw n;J(n),l=d}l.name||(l.name=e),i[e]=l,l.rawDefinition=n.bind(null,t),l.aliases&&C(l.aliases,{languageName:e})},unregisterLanguage:function(e){delete i[e];for(const n of Object.keys(l))l[n]===e&&delete l[n]},listLanguages:function(){return Object.keys(i)},getLanguage:S,
+registerAliases:C,autoDetection:k,inherit:re,addPlugin:function(e){!function(e){e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=n=>{e["before:highlightBlock"](Object.assign({block:n.el},n))}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=n=>{e["after:highlightBlock"](Object.assign({block:n.el},n))})}(e),o.push(e)},removePlugin:function(e){const n=o.indexOf(e);-1!==n&&o.splice(n,1)}}),t.debugMode=function(){r=!1},t.safeMode=function(){r=!0},t.versionString="11.8.0",t.regex={concat:p,lookahead:s,either:m,optional:u,anyNumberOfTimes:h};for(const n in B)"object"==typeof B[n]&&e(B[n]);return Object.assign(t,B),t},de=ae({});return de.newInstance=()=>ae({}),ri=de,de.HighlightJS=de,de.default=de,ri}var di=W(ai());const si=e=>({IMPORTANT:{scope:"meta",begin:"!important"},BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{scope:"number",begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},FUNCTION_DISPATCH:{className:"built_in",
+begin:/[\w-]+(?=\()/},ATTRIBUTE_SELECTOR_MODE:{scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{scope:"number",begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z][A-Za-z0-9_-]*/}
+}),hi=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","p","q","quote","samp","section","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],ui=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"],pi=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"],mi=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"],fi=["align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","content-visibility","counter-increment","counter-reset","cue","cue-after","cue-before","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-smoothing","font-stretch","font-style","font-synthesis","font-variant","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","gap","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","pause","pause-after","pause-before","perspective","perspective-origin","pointer-events","position","quotes","resize","rest","rest-after","rest-before","right","row-gap","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","speak","speak-as","src","tab-size","table-layout","text-align","text-align-all","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-transform","text-underline-position","top","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"].reverse()
+;function gi(e){const n=e.regex,t=si(e),i=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE];return{name:"CSS",case_insensitive:!0,illegal:/[=|'\$]/,keywords:{keyframePosition:"from to"},classNameAliases:{keyframePosition:"selector-tag"},contains:[t.BLOCK_COMMENT,{begin:/-(webkit|moz|ms|o)-(?=[a-z])/},t.CSS_NUMBER_MODE,{className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0},{className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0},t.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{begin:":("+pi.join("|")+")"},{begin:":(:)?("+mi.join("|")+")"}]},t.CSS_VARIABLE,{className:"attribute",begin:"\\b("+fi.join("|")+")\\b"},{begin:/:/,end:/[;}{]/,contains:[t.BLOCK_COMMENT,t.HEXCOLOR,t.IMPORTANT,t.CSS_NUMBER_MODE,...i,{begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"},contains:[...i,{className:"string",begin:/[^)]/,endsWithParent:!0,excludeEnd:!0}]},t.FUNCTION_DISPATCH]},{begin:n.lookahead(/@/),end:"[{;]",relevance:0,illegal:/:/,contains:[{className:"keyword",
+begin:/@-?\w[\w]*(-\w+)*/},{begin:/\s/,endsWithParent:!0,excludeEnd:!0,relevance:0,keywords:{$pattern:/[a-z-]+/,keyword:"and or not only",attribute:ui.join(" ")},contains:[{begin:/[a-z-]+(?=:)/,className:"attribute"},...i,t.CSS_NUMBER_MODE]}]},{className:"selector-tag",begin:"\\b("+hi.join("|")+")\\b"}]}}
+const bi="[A-Za-z$_][0-9A-Za-z$_]*",vi=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],wi=["true","false","null","undefined","NaN","Infinity"],Ii=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],yi=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],xi=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],Si=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","global"],Ci=[].concat(xi,Ii,yi)
+;function ki(e){const n=e.regex,t=bi,i="<>",l="</>",o={begin:/<[A-Za-z0-9\\._:-]+/,end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,n)=>{const t=e[0].length+e.index,i=e.input[t];if("<"===i||","===i)return void n.ignoreMatch();let l;">"===i&&(((e,{after:n})=>{const t="</"+e[0].slice(1);return-1!==e.input.indexOf(t,n)})(e,{after:t})||n.ignoreMatch());const o=e.input.substring(t);((l=o.match(/^\s*=/))||(l=o.match(/^\s+extends\s+/))&&0===l.index)&&n.ignoreMatch()}},r={$pattern:bi,keyword:vi,literal:wi,built_in:Ci,"variable.language":Si},c="[0-9](_?[0-9])*",a=`\\.(${c})`,d="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",s={className:"number",variants:[{begin:`(\\b(${d})((${a})|\\.)?|(${a}))[eE][+-]?(${c})\\b`},{begin:`\\b(${d})\\b((${a})\\b|\\.)?|(${a})\\b`},{begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{begin:"\\b0[0-7]+n?\\b"}],relevance:0},h={className:"subst",begin:"\\$\\{",end:"\\}",keywords:r,
+contains:[]},u={begin:"html`",end:"",starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,h],subLanguage:"xml"}},p={begin:"css`",end:"",starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,h],subLanguage:"css"}},m={begin:"gql`",end:"",starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,h],subLanguage:"graphql"}},f={className:"string",begin:"`",end:"`",contains:[e.BACKSLASH_ESCAPE,h]},g={className:"comment",variants:[e.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,excludeBegin:!0,relevance:0},{className:"variable",begin:t+"(?=\\s*(-)|$)",endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]}),e.C_BLOCK_COMMENT_MODE,e.C_LINE_COMMENT_MODE]},b=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,u,p,m,f,{match:/\$\d+/},s];h.contains=b.concat({begin:/\{/,end:/\}/,keywords:r,contains:["self"].concat(b)});const v=[].concat(g,h.contains),w=v.concat([{
+begin:/\(/,end:/\)/,keywords:r,contains:["self"].concat(v)}]),I={className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:r,contains:w},y={variants:[{match:[/class/,/\s+/,t,/\s+/,/extends/,/\s+/,n.concat(t,"(",n.concat(/\./,t),")*")],scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{match:[/class/,/\s+/,t],scope:{1:"keyword",3:"title.class"}}]},x={relevance:0,match:n.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),className:"title.class",keywords:{_:[...Ii,...yi]}},S={variants:[{match:[/function/,/\s+/,t,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],className:{1:"keyword",3:"title.function"},label:"func.def",contains:[I],illegal:/%/};const C={match:n.concat(/\b/,(k=[...xi,"super","import"],n.concat("(?!",k.join("|"),")")),t,n.lookahead(/\(/)),className:"title.function",relevance:0};var k;const _={begin:n.concat(/\./,n.lookahead(n.concat(t,/(?![0-9A-Za-z$_(])/))),
+end:t,excludeBegin:!0,keywords:"prototype",className:"property",relevance:0},L={match:[/get|set/,/\s+/,t,/(?=\()/],className:{1:"keyword",3:"title.function"},contains:[{begin:/\(\)/},I]},A="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+e.UNDERSCORE_IDENT_RE+")\\s*=>",N={match:[/const|var|let/,/\s+/,t,/\s*/,/=\s*/,/(async\s*)?/,n.lookahead(A)],keywords:"async",className:{1:"keyword",3:"title.function"},contains:[I]};return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:r,exports:{PARAMS_CONTAINS:w,CLASS_REFERENCE:x},illegal:/#(?![$_A-z])/,contains:[e.SHEBANG({label:"shebang",binary:"node",relevance:5}),{label:"use_strict",className:"meta",relevance:10,begin:/^\s*['"]use (strict|asm)['"]/},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,u,p,m,f,g,{match:/\$\d+/},s,x,{className:"attr",begin:t+n.lookahead(":"),relevance:0},N,{begin:"("+e.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",keywords:"return throw case",relevance:0,contains:[g,e.REGEXP_MODE,{className:"function",begin:A,returnBegin:!0,
+end:"\\s*=>",contains:[{className:"params",variants:[{begin:e.UNDERSCORE_IDENT_RE,relevance:0},{className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:r,contains:w}]}]},{begin:/,/,relevance:0},{match:/\s+/,relevance:0},{variants:[{begin:i,end:l},{match:/<[A-Za-z0-9\\._:-]+\s*\/>/},{begin:o.begin,"on:begin":o.isTrulyOpeningTag,end:o.end}],subLanguage:"xml",contains:[{begin:o.begin,end:o.end,skip:!0,contains:["self"]}]}]},S,{beginKeywords:"while if switch catch for"},{begin:"\\b(?!function)"+e.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",returnBegin:!0,label:"func.def",contains:[I,e.inherit(e.TITLE_MODE,{begin:t,className:"title.function"})]},{match:/\.\.\./,relevance:0},_,{match:"\\$"+t,relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},contains:[I]},C,{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,className:"variable.constant"},y,L,{match:/\$[(.]/}]}}function _i(e){
+const n=ki(e),t=bi,i=["any","void","number","boolean","string","object","never","symbol","bigint","unknown"],l={beginKeywords:"namespace",end:/\{/,excludeEnd:!0,contains:[n.exports.CLASS_REFERENCE]},o={beginKeywords:"interface",end:/\{/,excludeEnd:!0,keywords:{keyword:"interface extends",built_in:i},contains:[n.exports.CLASS_REFERENCE]},r={$pattern:bi,keyword:vi.concat(["type","namespace","interface","public","private","protected","implements","declare","abstract","readonly","enum","override"]),literal:wi,built_in:Ci.concat(i),"variable.language":Si},c={className:"meta",begin:"@"+t},a=(e,n,t)=>{const i=e.contains.findIndex((e=>e.label===n));if(-1===i)throw new Error("can not find mode to replace");e.contains.splice(i,1,t)};Object.assign(n.keywords,r),n.exports.PARAMS_CONTAINS.push(c),n.contains=n.contains.concat([c,l,o]),a(n,"shebang",e.SHEBANG()),a(n,"use_strict",{className:"meta",relevance:10,begin:/^\s*['"]use strict['"]/});const d=n.contains.find((e=>"func.def"===e.label));return d.relevance=0,
+Object.assign(n,{name:"TypeScript",aliases:["ts","tsx","mts","cts"]}),n}function Li(e){const n=e.regex,t=n.concat(/[\p{L}_]/u,n.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),i={className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},l={begin:/\s/,contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]},o=e.inherit(l,{begin:/\(/,end:/\)/}),r=e.inherit(e.APOS_STRING_MODE,{className:"string"}),c=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),a={endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",begin:/[\p{L}0-9._:-]+/u,relevance:0},{begin:/=\s*/,relevance:0,contains:[{className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[i]},{begin:/'/,end:/'/,contains:[i]},{begin:/[^\s"'=<>`]+/}]}]}]};return{name:"HTML, XML",aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,relevance:10,contains:[l,c,r,o,{begin:/\[/,end:/\]/,contains:[{
+className:"meta",begin:/<![a-z]/,end:/>/,contains:[l,o,c,r]}]}]},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,relevance:10},i,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,relevance:10,contains:[c]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[a],starts:{end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[a],starts:{end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{className:"tag",begin:/<>|<\/>/},{className:"tag",begin:n.concat(/</,n.lookahead(n.concat(t,n.either(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[{className:"name",begin:t,relevance:0,starts:a}]},{className:"tag",begin:n.concat(/<\//,n.lookahead(n.concat(t,/>/))),contains:[{className:"name",begin:t,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}}function Ai(e){var n
+;let t="string"==typeof e?e:null!==(n=e.displayName)&&void 0!==n?n:e.name;return t=t.replace(/\$[0-9]+$/,""),t=t.replace(/\B_$/,""),t}function Ni(e){if("string"==typeof e||"number"==typeof e||"bigint"==typeof e)return e.toString();if("boolean"==typeof e)return"";if(e&&"type"in e){let n=Object.entries(e.props).map((([e,n])=>{if(function(e){return e.match(/^_/)||"children"===e}(e))return"";if(function(e){const n=null==e?void 0:e.type;return"string"==typeof n||"function"==typeof n}(n))return`${e}={${Ni(n)}}`;let t="";switch(typeof n){case"boolean":t=n?e:`${e}={false}`;break;case"string":t=`${e}="${i=n,i.replace(/"/g,'\\"')}"`;break;case"bigint":case"number":case"undefined":t=`${e}={${n}}`;break;case"function":t=Ai(n)?`${e}={${Ai(n)}}`:`${e}={${n.toString()}}`;break;case"object":t=n?`${e}={${e}}`:`${e}={${n}}`;break;default:n&&(t=`${e}={${n.toString()}}`)}var i;return t})).join(" ").trim();n.length>0&&(n=" "+n);const t=e.type===y?"":Ai(e.type),i=e.props.children;if(i){
+let e=Array.isArray(i)?i.map(Ni).join("\n"):Ni(i);return e=function(e,n){const t=" ".repeat(n);return e.split("\n").map((e=>t+e)).join("\n")}(e,2),`<${t}${n}>\n${e}\n</${t}>`}return`<${t}${n} />`}return""}function Mi(e,n){di.getLanguage("typescript")||di.registerLanguage("typescript",_i),di.getLanguage("xml")||di.registerLanguage("xml",Li),di.getLanguage("css")||di.registerLanguage("css",gi);const t=void 0!==n?[n]:void 0;return di.highlightAuto(e,t).value}function Ti(e,n){return Mi(Ni(e),n)}function zi({children:e,level:n=2,...t}){return n<=2?gn("h2",{className:"text-2xl text-slate-600 font-medium mb-4",...t,children:e}):3===n?gn("h3",{className:"text-xl text-slate-600 font-medium mb-4",...t,children:e}):gn("h4",{className:"text-lg border-b border-stone-300 text-slate-600 font-normal mb-4",...t,children:e})}const Di=V(0);function Hi({children:e,intro:n,level:t,title:i,...l}){const o=be(Di),r=null!=t?t:o+1;return gn(Di.Provider,{value:r,children:gn("section",{"data-depth":r,className:ee("leading-relaxed",{
+"mt-8 mb-16":r<=1,"mt-8 mb-8":2===r,"mt-6 mb-8":r>=3}),...l,children:[i&&gn(zi,{level:r+1,children:i}),n&&gn("div",{className:"text-base space-y-3 leading-relaxed",children:n}),e]})})}function Ei({message:e}){return gn("div",{className:"w-full text-red-600 p-2 border rounded border-red-600",children:e})}async function Pi(e,n){const t=await fetch(`/examples/${e}.tsx`,{signal:n});if(t.status>=400)throw new Error(`Failed loading ${e} example file`);return(await t.text()).replace(/^import .*;\n/gm,"").replace(/^\s*\n*/,"")}function Bi({size:e,title:n,...t}){const[i,l]=function(e){const n=function(e){return"content"in e}(e),[t,i]=he(n?Ti(e.content,e.lang):void 0),[l,o]=he();return ue((()=>{if(n)return()=>{};const t=new AbortController;return Pi(`/examples/${e.exampleFile}.tsx`,t.signal).then((e=>i(Mi(e,"typescript")))).catch(o),()=>t.abort()}),[n,e]),[t,l]}(t);return gn("figure",{className:"space-y-2 min-h-0 h-full",children:[i&&gn(jt,{borderless:!0,children:[gn("div",{
+className:ee("unstyled-text bg-slate-7 text-color-text-inverted p-4 rounded-md min-h-0 h-full",{"text-sm":"sm"===e}),children:gn(yn,{variant:"flat",children:gn("code",{className:"text-color-text-inverted",children:gn("pre",{className:"whitespace-pre-wrap",dangerouslySetInnerHTML:{__html:i}})})})}),n&&gn("figcaption",{className:"flex justify-end",children:gn("span",{className:"italic",children:n})})]}),l&&gn(Ei,{message:l.message})]})}var Ri={Callout:function({children:e}){return gn("div",{className:"flex gap-x-2 p-3 rounded-md bg-slate-50 border shadow-inner",children:[gn("div",{className:"w-6 h-6",children:gn(Mn,{className:"text-yellow-notice w-6 h-6 mt-0.5"})}),gn("div",{children:e})]})},Code:Bi,Demo:function({classes:e,withSource:n=!1,style:t={},title:i,...l}){const[o,r]=he("demo"),c=function(e){const[n,t]=he(),[i,l]=he(),[o,r]=he(),[c,a]=he();return ue((()=>{if(!e.exampleFile)return()=>{}
+;import(`../examples/${e.exampleFile}.tsx`).then((({default:e})=>l(gn(e,{})))).catch((()=>a(`Failed loading ../examples/${e.exampleFile}.tsx module`)));const n=new AbortController;return Pi(e.exampleFile,n.signal).then(t).catch((e=>r(e.message))),()=>n.abort()}),[e.exampleFile,e.children]),e.children?{children:e.children}:{code:n,example:i,codeError:o,exampleError:c}}(l),a="children"in c;return gn("div",{className:"my-8 p-2 space-y-1",children:[gn("div",{className:"flex items-center px-2",children:[gn("div",{className:"py-1 grow",children:gn("h5",{className:"text-base text-base leading-none font-semibold text-slate-600",children:i})}),gn("div",{className:"flex flex-row items-center justify-end gap-x-4",children:n&&gn("button",{className:ee("flex items-center gap-x-1.5 py-1 px-2 rounded-md","text-sm text-slate-500","hover:bg-slate-50 border hover:border-slate-300",{"bg-slate-100 border border-slate-400 shadow-inner":"source"===o,"border-slate-100 shadow":"source"!==o}),"aria-pressed":"source"===o,
+onClick:()=>r((e=>"source"===e?"demo":"source")),title:"Toggle view-source panel",children:gn(Hn,{className:"w-[18px] h-[18px]"})})})]}),gn("div",{className:"p-2 unstyled-text",children:["demo"===o&&gn("div",{className:"w-full p-8 rounded-md border border-stone-300 bg-stone-50 rounded-md",style:t,children:gn("div",{className:ee("h-full flex flex-row items-center justify-center gap-2",e),children:[a?c.children:c.example,!a&&c.exampleError&&gn(Ei,{message:c.exampleError})]})}),"source"===o&&gn(y,{children:[a?gn("div",{className:"border w-full rounded-md bg-slate-7 text-color-text-inverted p-4",children:gn("ul",{children:N(c.children).map(((e,n)=>gn("li",{children:gn("code",{children:gn("pre",{className:"font-pre whitespace-pre-wrap break-words text-sm",dangerouslySetInnerHTML:{__html:Ti(e)}})})},n)))})}):c.code&&gn(Bi,{content:c.code}),!a&&c.codeError&&gn(Ei,{message:c.codeError})]})]})]})},Info:function({children:e}){return gn("div",{className:"grid grid-cols-[6rem_1fr] gap-x-4 gap-y-2 m-4",children:e})},
+InfoItem:function({children:e,label:n}){return gn(y,{children:[gn("div",{className:"pt-1 text-right font-medium text-stone-600 text-sm",children:n}),gn("div",{children:e})]})},Link:function({children:e,href:n}){return gn(Ze,{href:n,asChild:!0,children:gn(Zt,{underline:"always",children:e})})},Page:function({children:e,intro:n,title:t}){return gn("main",{className:"styled-text text-stone-600",children:gn("div",{className:"px-8 py-4",children:[gn("h1",{className:"text-3xl text-slate-600 font-bold",id:"page-header",children:t}),n&&gn("div",{className:"my-8 pb-8 border-b space-y-4 font-light text-xl leading-relaxed",children:n}),e]})})},Section:Hi,SectionL2:function({children:e,title:n,...t}){return gn(Hi,{level:2,title:n,...t,children:e})},SectionL3:function({children:e,title:n,...t}){return gn(Hi,{level:3,title:n,...t,children:e})},StatusChip:function({status:e}){return gn("span",{className:ee("rounded-md py-1 px-2 mr-1.5 text-sm font-semibold",{"bg-red-error text-color-text-inverted":"breaking"===e,
+"bg-yellow-notice":"deprecated"===e||"changed"===e,"bg-green-success text-color-text-inverted":"added"===e}),children:["breaking"===e&&gn("span",{children:"Breaking"}),"deprecated"===e&&gn("span",{children:"Deprecated"}),"added"===e&&gn("span",{children:"Added"}),"changed"===e&&gn("span",{children:"Changed"})]})},Usage:function({componentName:e,symbolName:n=e,size:t="md"}){return gn(Bi,{content:`import { ${n} } from '@hypothesis/frontend-shared';\n`,size:t})}};function Oi({colorClass:e,colorName:n}){return gn("div",{children:[gn("div",{className:ee(e,"w-64 h-8 mr-4")}),gn("p",{children:gn("i",{children:n})})]})}const Fi=gn(y,{children:[gn(Oi,{colorClass:"bg-brand",colorName:"brand"}),gn(Oi,{colorClass:"bg-brand-dark",colorName:"brand-dark"})]}),qi=gn(y,{children:[gn(Oi,{colorClass:"bg-white",colorName:"white"}),gn(Oi,{colorClass:"bg-grey-0",colorName:"grey-0"}),gn(Oi,{colorClass:"bg-grey-1",colorName:"grey-1"}),gn(Oi,{colorClass:"bg-grey-2",colorName:"grey-2"}),gn(Oi,{colorClass:"bg-grey-3",colorName:"grey-3"
+}),gn(Oi,{colorClass:"bg-grey-4",colorName:"grey-4"}),gn(Oi,{colorClass:"bg-grey-5",colorName:"grey-5"}),gn(Oi,{colorClass:"bg-grey-6",colorName:"grey-6"}),gn(Oi,{colorClass:"bg-grey-7",colorName:"grey-7"}),gn(Oi,{colorClass:"bg-grey-8",colorName:"grey-8"}),gn(Oi,{colorClass:"bg-grey-9",colorName:"grey-9"}),gn(Oi,{colorClass:"bg-black",colorName:"black"})]}),ji=gn(y,{children:[gn(Oi,{colorClass:"bg-slate-0",colorName:"slate-0"}),gn(Oi,{colorClass:"bg-slate-1",colorName:"slate-1"}),gn(Oi,{colorClass:"bg-slate-3",colorName:"slate-3"}),gn(Oi,{colorClass:"bg-slate-5",colorName:"slate-5"}),gn(Oi,{colorClass:"bg-slate-7",colorName:"slate-7"}),gn(Oi,{colorClass:"bg-slate-9",colorName:"slate-9"})]}),Ui=gn(y,{children:[gn(Oi,{colorClass:"bg-green-success",colorName:"green-success (green alias)"}),gn(Oi,{colorClass:"bg-yellow-notice",colorName:"yellow-notice (yellow alias)"}),gn(Oi,{colorClass:"bg-red-error",colorName:"red-error (red alias)"})]}),Vi=gn(y,{children:[gn(Oi,{colorClass:"bg-green-light",
+colorName:"green-light"}),gn(Oi,{colorClass:"bg-green",colorName:"green"}),gn(Oi,{colorClass:"bg-green-dark",colorName:"green-dark"}),gn(Oi,{colorClass:"bg-yellow-light",colorName:"yellow-light"}),gn(Oi,{colorClass:"bg-yellow",colorName:"yellow"}),gn(Oi,{colorClass:"bg-yellow-dark",colorName:"yellow-dark"}),gn(Oi,{colorClass:"bg-red-light",colorName:"red-light"}),gn(Oi,{colorClass:"bg-red",colorName:"red"}),gn(Oi,{colorClass:"bg-red-dark",colorName:"red-dark"})]}),Wi=gn(y,{children:gn(Oi,{colorClass:"bg-blue-focus",colorName:"blue-focus"})});function $i(){return gn(y,{children:[gn("li",{children:"Alpha"}),gn("li",{children:"Bravo"}),gn("li",{children:"Charlie"}),gn("li",{children:"Delta"}),gn("li",{children:"Echo"}),gn("li",{children:"Foxtrot"}),gn("li",{children:"Golf"}),gn("li",{children:"Hotel"}),gn("li",{children:"India"}),gn("li",{children:"Juliett"}),gn("li",{children:"Kilo"}),gn("li",{children:"Lima"}),gn("li",{children:"Mike"}),gn("li",{children:"November"}),gn("li",{children:"Oscar"}),gn("li",{
+children:"Papa"}),gn("li",{children:"Quebec"}),gn("li",{children:"Romeo"}),gn("li",{children:"Sierra"}),gn("li",{children:"Tango"}),gn("li",{children:"Uniform"}),gn("li",{children:"Victor"}),gn("li",{children:"Whiskey"}),gn("li",{children:"XRay"}),gn("li",{children:"Yankee"}),gn("li",{children:"Zulu"})]})}function Gi({size:e="lg"}){return"xs"===e?gn(y,{children:[gn("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna."}),gn("p",{children:"Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices."})]}):"sm"===e?gn("p",{
+children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper."}):"md"===e?gn(y,{children:[gn("p",{
+children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper."}),gn("p",{children:"Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In dictum sapien ut congue facilisis. Curabitur consequat vestibulum ultricies."}),gn("p",{
+children:"Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut venenatis ex. Quisque elementum libero quam, non consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae ipsum."})]}):gn("p",{
+children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper. Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In dictum sapien ut congue facilisis. Curabitur consequat vestibulum ultricies. Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut venenatis ex. Quisque elementum libero quam, non consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae ipsum. Maecenas ultricies ultrices diam laoreet lacinia. Nunc commodo eu lorem a bibendum. Sed eu magna rutrum, consectetur orci sit amet, venenatis ex. Aliquam sodales nec odio ac ultricies. In sit amet congue ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus accumsan justo nec maximus sollicitudin. Aenean eu urna egestas justo dignissim venenatis quis quis massa. Pellentesque convallis posuere elit, eu interdum diam placerat et. Aenean cursus vehicula nibh, in scelerisque nunc feugiat eu. Praesent eleifend ipsum eget urna dictum semper. Nullam dapibus nisl sit amet ultricies lobortis. Vestibulum a velit neque. Suspendisse tincidunt aliquet lorem et consectetur. Phasellus at libero fringilla nulla egestas aliquam. Nullam ut magna risus. Etiam consequat neque sapien, vel ultrices justo vehicula sit amet. Donec semper facilisis odio vel faucibus. Integer eget sagittis justo. Integer sed tincidunt neque. In vulputate fermentum lacus, eget sollicitudin nisi vestibulum vel. Etiam porttitor varius justo, id efficitur tellus congue a. Cras condimentum congue lectus sit amet commodo. Etiam lacus ex, efficitur volutpat enim id, malesuada posuere metus. Mauris convallis convallis arcu, sit amet placerat felis sodales ut. Duis semper a risus ac consequat. Nulla id nibh sem. Aliquam et nulla nec lectus viverra lobortis. Vivamus eros enim, lobortis nec efficitur nec, rhoncus at tortor. Aliquam aliquet bibendum ipsum eu feugiat. Duis iaculis bibendum ligula non ultricies. Curabitur cursus nulla in nisl tincidunt, eget eleifend tellus ultricies. Pellentesque eget mauris nec magna ultrices fringilla id sit amet nulla. Ut nec velit sed augue eleifend pharetra. Aliquam a posuere massa. Nunc vitae tortor ut est cursus vestibulum. In hac habitasse platea dictumst. Nulla eget orci eleifend, elementum turpis vitae, consectetur magna. In in nulla in tellus vestibulum pharetra. Curabitur at rhoncus enim, tempus congue est. Nullam consectetur lobortis nunc, vel feugiat lorem semper a. Ut tellus nulla, tempus id posuere vel, luctus et sem. Nulla nec rhoncus mi. Aenean sit amet mollis nibh. Nam ullamcorper tellus quis arcu aliquam, dignissim ultricies justo efficitur. Cras non ipsum tempor, elementum dui id, pellentesque turpis. Praesent commodo dolor in elit aliquet, sit amet pellentesque sem molestie. In pharetra nisl nec orci pellentesque, ut posuere quam faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis purus non erat tempor euismod. Vestibulum non leo eget magna vestibulum mattis. Aenean vitae tortor vel mauris pretium tempor. Sed viverra eros tristique, dapibus tellus a, feugiat ipsum. Pellentesque non tellus scelerisque, molestie massa vitae, fermentum ex. Quisque molestie interdum nibh a luctus. Sed aliquet risus ac varius suscipit. Proin eget leo vel lacus finibus posuere vel non nisl. In tristique ligula leo, sed molestie sem sodales nec. Phasellus sed consectetur lectus. In pretium hendrerit eros, a sagittis est faucibus ac. Etiam faucibus felis et eros commodo fringilla. Duis volutpat lobortis suscipit. Maecenas facilisis metus in lorem aliquet efficitur. Duis scelerisque eros scelerisque, rhoncus massa eget, tempor ipsum. Donec id feugiat purus, non condimentum turpis. Sed consequat lorem a odio pharetra pretium. Proin sed turpis ac sapien convallis iaculis a sit amet est. Proin lorem risus, rhoncus non metus at, fringilla commodo erat. Sed quis elit vitae leo ullamcorper interdum non nec ipsum. Etiam ullamcorper lorem ac velit condimentum, eget porttitor odio mollis. Maecenas semper, urna eu cursus placerat, enim neque aliquam orci, ut elementum justo ex id justo. Nunc malesuada egestas dui at vestibulum."
+})}const Xi=[{title:"Машенька",year:"1926",language:"Russian",translatedTitle:"Mary"},{title:"Король, дама, валет",year:"1928",language:"Russian",translatedTitle:"King, Queen, Knave"},{title:"Защита Лужина",year:"1930",language:"Russian",translatedTitle:"The Defense"},{title:"Соглядатай",year:"1930",language:"Russian",translatedTitle:"The Eye"},{title:"The Real Life of Sebastian Knight",year:"1941",language:"English"},{title:"Bend Sinister",year:"1947",language:"English"},{title:"Pale Fire",year:"1965",language:"English"},{title:"Подвиг",year:"1932",language:"Russian",translatedTitle:"Glory"},{title:"Ada or Ardor: A Family Chronicle",year:"1969",language:"English"}],Ki=[{field:"title",label:"Title"},{field:"year",label:"Year"},{field:"language",label:"Language"}];function Ji({rows:e,orderableColumns:n=Ki.map((({field:e})=>e)),...t}){const[i,l]=he(),o=hn(e,i);return gn(y,{children:[gn(it,{classes:"mb-2",onClick:()=>l(void 0),children:"Reset order"}),gn("div",{className:"h-[250px]",children:gn(yn,{
+children:gn(qt,{...t,rows:o,order:i,orderableColumns:n,onOrderChange:l})})})]})}function Qi({rows:e,orderableColumns:n=Ki.map((({field:e})=>e)),...t}){const[i,l]=he(!1),[o,r]=he(),c=me(null),a=ge((e=>{c.current&&clearTimeout(c.current),r(e),l(!0),c.current=setTimeout((()=>{l(!1),c.current=null}),600)}),[]),d=hn(e,o);return gn(y,{children:[gn(it,{classes:"mb-2",onClick:()=>a(void 0),children:"Reset order"}),gn("div",{className:"h-[250px]",children:gn(yn,{children:gn(qt,{...t,rows:d,order:o,orderableColumns:n,onOrderChange:a,loading:i})})})]})}const Zi=[{title:"Машенька",year:"1926",language:"Russian",translatedTitle:"Mary"},{title:"Король, дама, валет",year:"1928",language:"Russian",translatedTitle:"King, Queen, Knave"},{title:"Защита Лужина",year:"1930",language:"Russian",translatedTitle:"The Defense"},{title:"Соглядатай",year:"1930",language:"Russian",translatedTitle:"The Eye"},{title:"The Real Life of Sebastian Knight",year:"1941",language:"English"},{title:"Bend Sinister",year:"1947",language:"English"},{
+title:"Pale Fire",year:"1965",language:"English"},{title:"Подвиг",year:"1932",language:"Russian",translatedTitle:"Glory"},{title:"Ada or Ardor: A Family Chronicle",year:"1969",language:"English"}],Yi=[{field:"title",label:"Title"},{field:"year",label:"Year"},{field:"language",label:"Language"}];function el(){return gn(y,{children:[gn(it,{onClick:()=>alert("You chose maybe"),children:"Maybe"},"maybe"),gn(it,{onClick:()=>alert("You chose yep"),variant:"primary",children:"Do it!"},"yep")]})}function nl({_alwaysShowButton:e=!1,_nonCloseable:n,children:t,...i}){var l;const[o,r]=he(!1),c=()=>r(!1),a=n?void 0:c,d="custom"!==i.variant?{buttons:null!==(l=i.buttons)&&void 0!==l?l:gn(it,{onClick:c,children:"Escape!"})}:void 0,s=gn(it,{onClick:()=>r(!o),variant:"primary",children:[o?"Hide":"Show"," dialog"]});return gn("div",{className:"flex w-full gap-x-2",children:[(!o||e)&&gn("div",{children:s}),gn("div",{className:"grow",children:o&&gn(ht,{...d,...i,onClose:a,children:t})})]})}function tl(){
+const[e,n]=he(null),t=ge((async()=>{const e=await async function({title:e="Confirm",message:n,confirmAction:t="Yes",cancelAction:i="Cancel",initialFocus:l="cancel"}){const o={current:null},r={current:null},c="cancel"===l?o:r,a=document.createElement("div");return a.setAttribute("data-testid","confirm-container"),a.style.position="relative",a.style.zIndex="10",document.body.appendChild(a),new Promise((l=>{const d=e=>{j(null,a),a.remove(),l(e)};j(gn(ut,{buttons:gn(y,{children:[gn(it,{elementRef:o,"data-testid":"cancel-button",onClick:()=>d(!1),children:i}),gn(it,{variant:"primary",elementRef:r,"data-testid":"confirm-button",onClick:()=>d(!0),children:t})]}),initialFocus:c,title:e,onClose:()=>d(!1),children:n}),a)}))}({message:"This is a confirm dialog",title:"Your title",confirmAction:"Yes please",cancelAction:"I changed my mind"});n(e)}),[]);return gn(y,{children:[gn(it,{variant:"primary",onClick:t,children:"Show confirm"}),null!==e&&gn(y,{children:["You clicked ",e?"Yes":"Cancel"]})]})}
+function il({buttons:e,_alwaysShowButton:n=!1,_nonCloseable:t,children:i,...l}){const[o,r]=he(!1),c=()=>r(!1),a=t?void 0:c,d=e||gn(it,{onClick:c,children:"Escape!"}),s=gn(it,{onClick:()=>r(!o),variant:"primary",children:[o?"Hide":"Show"," dialog"]});return gn(y,{children:[(!o||n)&&s,o&&gn(ut,{buttons:d,...l,onClose:a,children:i})]})}function ll(e){const[n,t]=he(!1);return gn(y,{children:[gn(it,{onClick:()=>t((e=>!e)),variant:"primary",children:[n?"Hide":"Show"," dialog"]}),n&&gn(ut,{...e,onClose:()=>t(!1),closeOnClickAway:!0})]})}const ol=[{message:"Success toast message",type:"success",autoDismiss:!1},{message:"Warning toast message",type:"notice",autoDismiss:!1},{message:"Error toast message",type:"error",autoDismiss:!1}];function rl({messages:e,transitionClasses:n,_printOnDismiss:t=!1,_allowAppending:i=!1}){const[l,o]=he(e.map(((e,n)=>({id:`${n}`,...e})))),[r,c]=he(),a=ge((e=>{c(l.find((n=>n.id===e))),o((n=>n.filter((n=>n.id!==e))))}),[l]),d=ge((({autoDismiss:e})=>{const n={
+id:`${0===l.length?1:Number(l[l.length-1].id)+1}`,message:e?"Dismissing in 5 seconds...":"Click me to dismiss",type:"success",autoDismiss:e};o((e=>[...e,n]))}),[l]);return gn("div",{className:"w-full",children:[i&&gn("div",{className:"flex gap-x-2 mb-3",children:[gn(it,{onClick:()=>d({autoDismiss:!1}),classes:"mb-2",variant:"primary",children:"Append message"}),gn(it,{onClick:()=>d({autoDismiss:!0}),classes:"mb-2",variant:"primary",children:"Append auto-dismiss message"})]}),gn("div",{className:"w-1/2 mx-auto flex flex-col gap-y-4",children:[gn(Qt,{messages:l,onMessageDismiss:a,transitionClasses:n}),t&&r&&gn("div",{children:["Just dismissed message ",'"',r.message,'"']})]})]})}function cl({children:e,...n}){const[t,i]=he(!1),l=gn(it,{onClick:()=>i(!t),variant:"primary",children:[t?"Hide":"Show"," dialog"]});return gn("div",{className:"flex w-full gap-x-2",children:[!t&&gn("div",{children:l}),gn("div",{className:"grow",children:t&&gn(ht,{...n,onClose:()=>i(!1),children:e})})]})}const al=[{id:"1",
+name:"All students"},{id:"2",name:"Albert Banana"},{id:"3",name:"Bernard California"},{id:"4",name:"Cecelia Davenport"},{id:"5",name:"Doris Evanescence"}];function dl({student:e}){return gn("div",{className:"flex",children:[gn("div",{className:"rounded px-2 mr-2 bg-grey-7 text-white",children:e.id}),gn("div",{className:"truncate",children:e.name})]})}function sl({buttonClasses:e,wrapperClasses:n="w-96"}){const[t,i]=he(),l=fe((()=>t?al.findIndex((e=>e===t)):-1),[t]),o=ge((()=>{var e;i(null!==(e=al[l+1])&&void 0!==e?e:t)}),[t,l]),r=ge((()=>{var e;i(null!==(e=al[l-1])&&void 0!==e?e:t)}),[t,l]),c=ve();return gn("div",{className:n,children:[gn("label",{htmlFor:c,children:"Select a person"}),gn(ot,{children:[gn(rt,{icon:_n,title:"Previous student",variant:"dark",onClick:r,disabled:l<=0}),gn(Nt,{buttonId:c,value:t,onChange:i,buttonClasses:e,buttonContent:t?gn(dl,{student:t}):gn(y,{children:"Select one…"}),children:al.map((e=>gn(Nt.Option,{value:e,children:gn(dl,{student:e})},e.id)))}),gn(rt,{icon:Ln,
+title:"Next student",variant:"dark",onClick:o,disabled:l>=al.length-1})]})]})}const hl=[{id:"1",name:"All students"},{id:"2",name:"Albert Banana"},{id:"3",name:"Bernard California"},{id:"4",name:"Cecelia Davenport"},{id:"5",name:"Doris Evanescence"}];function ul({item:e}){return gn("div",{className:"flex",children:[gn("div",{className:"rounded px-2 mr-2 bg-grey-7 text-white",children:e.id}),gn("div",{className:"truncate",children:e.name})]})}function pl({items:e=hl}){const[n,t]=he(),i=ve();return gn("div",{className:"w-96 mx-auto",children:[gn("label",{htmlFor:i,children:"Select a person"}),gn(Nt,{value:n,onChange:t,buttonId:i,buttonContent:n?gn(ul,{item:n}):gn(y,{children:"Select one…"}),children:e.map((e=>gn(Nt.Option,{value:e,children:gn(ul,{item:e})},e.id)))})]})}const ml=[{id:"1",name:"All students"},{id:"2",name:"Albert Banana"},{id:"3",name:"Bernard California"},{id:"4",name:"Cecelia Davenport"},{id:"5",name:"Doris Evanescence"}];function fl({textOnly:e,items:n=ml,...t}){const[i,l]=he(),o=ve()
+;return gn(y,{children:[gn("label",{htmlFor:o,children:"Select a person"}),gn(Nt,{...t,buttonId:o,value:i,onChange:l,buttonContent:gn(y,i?{children:[e&&i.name,!e&&gn("div",{className:"flex",children:[gn("div",{className:"rounded px-2 mr-2 bg-grey-7 text-white",children:i.id}),gn("div",{className:"truncate",children:i.name})]})]}:{children:"Select one…"}),children:n.map((n=>gn(Nt.Option,{value:n,disabled:n.disabled,children:({disabled:t})=>e?n.name:gn("div",{className:"flex",children:[gn("div",{className:ee("rounded px-2 mr-2 text-white",{"bg-grey-7":!t,"bg-grey-4":t}),children:n.id}),gn("div",{className:"truncate",children:n.name})]})},n.id)))})]})}const gl=({children:e,direction:n,onTransitionEnd:t,_transitionStatus:i})=>{const[l,o]=he(n);return gn("div",{className:"flex-col w-full space-y-2",children:[gn(it,{onClick:()=>o((e=>"in"===e?"out":"in")),variant:"primary",children:["in"===l?"Hide":"Show"," slider"]}),gn(oi,{direction:l,onTransitionEnd:t,children:e}),gn("div",{children:["in"===i&&gn("p",{
+children:["The ",gn("code",{children:"Slider"})," just opened."]}),"out"===i&&gn("p",{children:["The ",gn("code",{children:"Slider"})," just closed."]})]})]})};const bl={data:"Data Display",feedback:"Feedback",input:"Input",layout:"Layout",navigation:"Navigation",transition:"Transitions"};Object.freeze(bl);const vl=[{title:"Getting started",group:"foundations",component:function(){return gn(Ri.Page,{title:"Getting started",intro:gn(y,{children:gn("p",{children:["The ",gn("code",{children:"@hypothesis/frontend-shared"})," package provides reusable UI components, hooks and utilities for Hypothesis front-end applications."]})}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{title:"Installation",children:[gn("p",{children:["Add"," ",gn(Zt,{href:"https://tailwindcss.com/",underline:"always",children:"tailwindcss"})," ","to your application's dependencies."]}),gn(Ri.Code,{content:"$ yarn add tailwindcss @tailwindcss/postcss @hypothesis/frontend-shared"}),gn("p",{
+children:["Then, in your project's gulp configuration, pass"," ",gn("code",{children:["{"," tailwind: true ","}"]})," ","to the ",gn("code",{children:"buildCSS"})," function:"]}),gn(Ri.Code,{content:"import { buildCSS } from '@hypothesis/frontend-build';\n\ngulp.task('build-tailwind-css', () =>\n  buildCSS(['app.css'], {\n    tailwind: true,\n  }),\n);"})]}),gn(Ri.SectionL2,{title:"Configuration",children:[gn("p",{children:"In your project's CSS entry point, import the Tailwind theme from this package:"}),gn(Ri.Code,{size:"sm",title:"Your project's tailwind config",lang:"css",content:"@import 'tailwindcss' @source(none);\n\n/* Scan the frontend-shared package for used classes. The path is relative to\n   the location of the CSS file. */\n@source 'node_modules/@hypothesis/frontend-shared/lib/**/*.js';\n\n/* Enable the Tailwind theme and additional utilities. */\n@import '@hypothesis/frontend-shared/tailwind-config.css';\n  "}),gn("p",{children:["See the"," ",gn("a",{
+href:"https://tailwindcss.com/docs/functions-and-directives",children:"Tailwind documentation"})," ","for more details on configuration at-rules."]})]}),gn(Ri.SectionL2,{title:"Usage",children:gn(Ri.Usage,{componentName:"Card, Link"})})]})})},route:"/"},{title:"Using components",group:"foundations",component:function(){return gn(Ri.Page,{title:"Using components",intro:gn("p",{children:"This package provides several categories of components. Which category a component belongs to indicates its general role and common props API."}),children:[gn(Ri.Section,{title:"Presentational components",children:[gn("p",{children:[gn("strong",{className:"font-semibold",children:"Presentational components"})," ","are the most common type of component. They are composable components that encapsulate design patterns and UI behavior."]}),gn("p",{children:["Examples:"," ",gn(Ri.Link,{href:"/input-button",children:gn("code",{children:"Button"})}),","," ",gn(Ri.Link,{href:"/navigation-link",children:gn("code",{children:"Link"})})]
+}),gn(Ri.Section,{id:"presentational-components-api",title:"API",children:[gn("p",{children:"All presentational components provide this API unless documented otherwise."}),gn(Ri.SectionL3,{title:"children",children:gn(Ri.Info,{children:gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})})}),gn(Ri.SectionL3,{title:"classes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["CSS class(es) that will be appended to the CSS classes applied to the ","component's"," outermost or most significant element. This can be used independently or in conjunction with the Styling API props."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"elementRef",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"Ref"})," applied to the ","component's"," outermost or most significant element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"preact.Ref<HTMLElement | undefined>"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Presentational components accept HTML attributes applicable to the element type of the ","component's"," outermost or most significant element."]}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{content:'<Link id="my-own-id" href="https://www.example.com">A Link with attributes</Link>',size:"sm"})}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.JSX.HTMLAttributes<T extends HTMLElement>"})})]})})]}),gn(Ri.Section,{id:"presentational-components-styling-api",title:"Styling API",children:[gn("p",{children:gn(Ri.Callout,{children:"These props extend the common presentational-component API. They are new and not supported by all presentational components yet. See individual component API documentation for details."})}),gn("p",{children:["See also the"," ",gn(Ri.Link,{href:"/styling-components",
+children:"styling guide"})," ","that details how to use these props to customize components."]}),gn(Ri.SectionL3,{title:"variant",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Many presentational components have multiple variants. Variants"," ",'"theme"'," a component, affecting such aspects as color, transitions, shadows, etc. Set to ",gn("code",{children:"'custom'"})," to disable variant styling."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'custom' | string"})}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{content:'<SomeComponent variant="secondary" classes="bg-pink">\n   <p>This will EXTEND the "secondary" variant styles with a pink background</p>\n</SomeComponent>\n\n<SomeComponent variant="custom" classes="bg-pink">\n  <p>This will REPLACE all theming styles with a pink background</p>\n</SomeComponent>',size:"sm"})})]})}),gn(Ri.SectionL3,{title:"size",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:["Many, but not all, presentational components provide multiple sizes. The ",gn("code",{children:"size"})," value affects size, padding, margins, etc. Set to ",gn("code",{children:"'custom'"})," to disable size-related styling."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'custom' | string"})}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{content:'<SomeComponent size="lg" classes="mt-4">\n  This will EXTEND size styling with a top margin\n</SomeComponent>\n\n<SomeComponent size="custom" classes="mt-4">\n  This will REPLACE size styling with a top margin\n</SomeComponent>',size:"sm"})})]})}),gn(Ri.SectionL3,{title:"unstyled",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set this to disable all styling. This is a ",'"master switch"'," ","that will supersede ",gn("code",{children:"size"})," and ",gn("code",{children:"variant"})," ","values. Note that some components have core (typically behavioral) CSS classes that cannot be disabled."]
+}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{content:'<SomeComponent unstyled classes="bg-pink">\n  This will replace all styles with a pink background (only)\n</SomeComponent>',size:"sm"})})]})})]})]}),gn(Ri.Section,{title:"Composite components",children:[gn("p",{children:[gn("strong",{className:"font-semibold",children:"Composite components"})," ","compose and style presentational components in a particular way to satisfy a use case and sometimes support more complex or widget-like behavior."]}),gn("p",{children:["Examples:"," ",gn(Ri.Link,{href:"/data-scrollbox",children:gn("code",{children:"ScrollBox"})}),","," ",gn(Ri.Link,{href:"/layout-panel",children:gn("code",{children:"Panel"})})]}),gn(Ri.Section,{id:"composite-components-api",title:"API",children:[gn(Ri.SectionL3,{title:"children",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{
+label:"description",children:["Some, but not all, composite components accept"," ",gn("code",{children:"children"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]})}),gn(Ri.SectionL3,{title:"elementRef",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"Ref"})," applied to the ","component's"," outermost or most significant element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.Ref<HTMLElement | undefined>"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Some, but not all, composite components accept HTML attributes applicable to the element type of the ","component's"," outermost or most significant element."]}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{content:'<Link id="my-own-id" href="https://www.example.com">A Link with attributes</Link>',size:"sm"})}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:"preact.JSX.HTMLAttributes<T extends HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"Transition components",children:[gn("p",{children:[gn("strong",{className:"font-semibold",children:"Transition components"})," are components with an in/out transition which can be used standalone or wrapped by other components."]}),gn("p",{children:["Example:"," ",gn(Ri.Link,{href:"/transitions-slider",children:gn("code",{children:"Slider"})})]}),gn(Ri.Section,{title:"API",id:"transition-components-api",children:[gn(Ri.SectionL3,{title:"delay",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Sets delay before transitions begin. See the"," ",gn("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay",children:"transition-delay"})," ","CSS property."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | undefined"})})]})}),gn(Ri.SectionL3,{title:"direction",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"Sets the current direction of the component transition."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'in' | 'out' "})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'in'"})})]})}),gn(Ri.SectionL3,{title:"onTransitionEnd",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Callback invoked when the ","component's"," transition has completed."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(direction: 'in' | 'out') => void"})})]})})]})]}),gn(Ri.Section,{title:"Simple components",children:gn("p",{children:[gn("strong",{className:"font-semibold",children:"Simple components"})," are opinionated, simple components that apply design patterns. These components have a minimal, component-specific API."]})})]})},route:"/using-components"},{title:"Styling components",group:"foundations",component:function(){return gn(Ri.Page,{title:"Styling components",intro:gn(y,{children:gn("p",{children:["The"," ",gn(Ri.Link,{
+href:"/using-components#presentational-components-styling-api",children:"styling API"})," ","supported by some presentational components provides several mechanisms for style customizations."]})}),children:gn(Ri.Section,{title:"Using the Styling API",children:[gn(Ri.Callout,{children:["This documentation pertains to updated presentational components that support the extended"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"Styling API"}),". For components that ","don't"," yet support this API, you can achieve most style customization using the ",gn("code",{children:"classes"})," prop, but may need to use ",gn("code",{children:"!important"})," rules in some cases to avoid conflicts."]}),gn(Ri.Section,{title:"Component CSS layers and associated styling props",children:[gn("div",{className:"grid grid-cols-6 gap-2 my-8 items-center border py-4 px-2 rounded border-stone-400",children:[gn("div",{}),gn("div",{className:"col-span-4 border rounded-md p-3 text-center",
+children:"Functional and behavioral"}),gn("div",{}),gn("div",{className:"text-right",children:gn("code",{children:"unstyled"})}),gn("div",{className:"col-span-4 border rounded-md p-3 text-center",children:"Core and layout"}),gn("div",{}),gn("div",{className:"text-right",children:gn("code",{children:"variant"})}),gn("div",{className:"col-span-2 border rounded-md p-3 text-center",children:"Theming"}),gn("div",{className:"col-span-2 border rounded-md p-3 text-center",children:"Dimensions"}),gn("div",{children:gn("code",{children:"size"})})]}),gn("ul",{children:[gn("li",{children:["Some components have foundational"," ",gn("strong",{children:"functional and behavioral CSS"})," that cannot be disabled, e.g. interactivity, accessibility rules."]}),gn("li",{children:[gn("strong",{children:"Core and layout"})," styling can be disabled with the"," ",gn("code",{children:"unstyled"})," prop. This will also disable theming and dimensional (sizing) styles, allowing full visual customization."]}),gn("li",{
+children:[gn("strong",{children:"Theming"})," can be controlled or disabled with the"," ",gn("code",{children:"variant"})," prop."]}),gn("li",{children:[gn("strong",{children:"Dimensions"})," and sizing can be controlled or disabled with the ",gn("code",{children:"size"})," prop."]})]})]}),gn(Ri.Section,{title:"Theming with variant",children:[gn("p",{children:["Many presentational components provide ",gn("code",{children:"variant"})," options, which apply different defined ",'"themes"'," to the component."]}),gn(Ri.Demo,{title:"Variant examples: Link",withSource:!0,children:gn("div",{className:"flex flex-col",children:[gn(Zt,{href:"https://www.example.com",variant:"brand",children:"Link with variant: brand"}),gn(Zt,{href:"https://www.example.com",variant:"text",children:"Link with variant: text"})]})}),gn(Ri.Section,{title:"Adjusting theming with the 'custom' variant",children:[gn("p",{children:["Set ",gn("code",{children:"variant"})," to ",gn("code",{children:"'custom'"})," when:"]}),gn("ul",{
+children:[gn("li",{children:["the component you are working takes a",gn("code",{children:"variant"})," prop (not all components have variants), ",gn("strong",{children:"and"})]}),gn("li",{children:["you want to apply CSS (",gn("code",{children:"classes"}),") that are in any of the theme-styling categories below"]})]}),gn("p",{children:"Styles for dimensions (size) and core layout will still be applied."}),gn(Ri.Demo,{title:"Customizing Link theming",withSource:!0,children:gn(Zt,{href:"https://www.example.com",variant:"custom",classes:"text-blue-focus hover:text-grey-7",children:"Link with custom theming of text color"})}),gn(Ri.Section,{title:"Theme styling categories",children:[gn("p",{children:[gn("code",{children:"variant"})," styles correspond to the following"," ",gn(Zt,{href:"https://tailwindcss.com/docs",children:"TailwindCSS"})," ","styling categories:"]}),gn("ul",{children:[gn("li",{children:"typography (includes colors)"}),gn("li",{children:"backgrounds"}),gn("li",{children:"borders (except ring)"
+}),gn("li",{children:"effects"}),gn("li",{children:"filters"}),gn("li",{children:"transitions and animation"}),gn("li",{children:"transforms"})]})]}),gn(Ri.Section,{title:"Avoiding CSS conflicts",children:[gn("p",{children:["Setting ",gn("code",{children:"variant"})," to ",gn("code",{children:"'custom'"})," ","ensures that the component does not output any theme-related styles. This prevents CSS conflicts with your theming"," ",gn("code",{children:"classes"})," and makes it easier to spot when a component has had its theme customized."]}),gn(Ri.Demo,{title:"Example: variant styles conflict",withSource:!0,children:gn(Zt,{href:"https://www.example.com",variant:"text",classes:"text-brand",underline:"always",children:"This link should be red"})}),gn(Ri.Demo,{title:"Example: Using `custom` variant to avoid conflicts",withSource:!0,children:gn(Zt,{href:"https://www.example.com",variant:"custom",classes:"text-brand",underline:"always",children:"This link should be red"})})]})]})]}),gn(Ri.Section,{
+title:"Sizing with `size`",children:[gn(Ri.Section,{title:"When to use size='custom'",children:[gn("p",{children:["Set ",gn("code",{children:"size"})," to ",gn("code",{children:"'custom'"})," when:"]}),gn("ul",{children:[gn("li",{children:["the component you are working takes a",gn("code",{children:"size"})," prop (not all components have sizes), ",gn("strong",{children:"and"})]}),gn("li",{children:["you want to apply ",gn("code",{children:"classes"})," that are in any of the sizing categories below"]})]}),gn("p",{children:["Setting ",gn("code",{children:"size"})," to ",gn("code",{children:"'custom'"})," ensures that the component does not output any size-related styles. This prevents CSS conflicts with your sizing ",gn("code",{children:"classes"})," and makes it easier to spot when a component has had its theme customized."]})]}),gn(Ri.Section,{title:"Size styling categories",children:[gn("p",{children:[gn("code",{children:"size"})," styles correspond to the following"," ",gn(Zt,{
+href:"https://tailwindcss.com/docs",children:"TailwindCSS"})," ","styling categories:"]}),gn("ul",{children:[gn("li",{children:"spacing: margins, padding, etc."}),gn("li",{children:"sizing"}),gn("li",{children:"flexbox and grid: gap (only)"})]})]})]}),gn(Ri.Section,{title:"Unstyled components",children:[gn("p",{children:[gn("code",{children:"unstyled"})," (",gn("code",{children:"boolean"}),") disables all styles in a component (except, in some cases, essential behavioral styles required for component functionality)."]}),gn(Ri.Demo,{title:"Fully-customized Link using unstyled",withSource:!0,children:gn(Zt,{unstyled:!0,href:"http://www.example.com",classes:"border rounded-md bg-slate-500 p-2 text-white hover:text-slate-100 hover:bg-slate-600",children:"Customized link"})}),gn(Ri.Callout,{children:[gn("strong",{children:"Note"}),": When ",gn("code",{children:"unstyled"})," is set, values passed to ",gn("code",{children:"size"})," or ",gn("code",{children:"variant"
+})," will be ignored, as associated styles are disabled."]}),gn(Ri.Section,{title:"Unstyled style categories",children:[gn("p",{children:["Setting ",gn("code",{children:"unstyled"})," disables (pretty much) all styling."," ","Disabled styles include those in ",gn("code",{children:"variant"})," and"," ",gn("code",{children:"size"})," categories, and, in addition, styles from the following"," ",gn(Zt,{href:"https://tailwindcss.com/docs",children:"TailwindCSS"})," ","styling categories:"]}),gn("ul",{children:[gn("li",{children:"layout"}),gn("li",{children:"flexbox and grid"}),gn("li",{children:"border: ring (only)"})]})]})]})]})})},route:"/styling-components"},{route:"/foundations-colors",title:"Colors",component:function(){return gn(Ri.Page,{title:"Colors",children:[gn(Ri.SectionL2,{title:"Brand red",children:gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:Fi})}),gn(Ri.SectionL2,{title:"Greys",children:gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:qi})}),gn(Ri.SectionL2,{
+title:"Slates",children:[gn("p",{children:"These slightly blue greys may be used sparingly to help with differentiation and clarity within interfaces."}),gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:ji})]}),gn(Ri.SectionL2,{title:"Highlighting",children:gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:Vi})}),gn(Ri.SectionL2,{title:"State indicators",children:gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:Ui})}),gn(Ri.SectionL2,{title:"Focus indicators",children:gn("div",{className:"my-4 flex flex-row flex-wrap gap-4",children:Wi})})]})},group:"foundations"},{route:"/foundations-util",title:"Utilities",component:function(){return gn(Ri.Page,{title:"Utilities",intro:gn("p",{children:["This ","package's"," ",gn("code",{children:"tailwindcss"})," preset provides some extra utility classes and modifiers. These can be used independently to style your ","app's"," component elements."]}),children:[gn(Ri.SectionL2,{title:"Utility classes",
+children:gn(Ri.SectionL3,{title:".focus-visible-ring",children:[gn("p",{children:["The ",gn("code",{children:".focus-visible-ring"})," utility class customizes an interactive element's focus ring such that it is only visible when the element has ",gn("code",{children:":focus-visible"})," or the polyfilled equivalent for browsers that do not support"," ",gn("code",{children:":focus-visible"}),". It uses the ",gn("code",{children:"blue-focus"})," ","color."]}),gn(Ri.Demo,{title:"input and button with .focus-visible-ring",withSource:!0,children:[gn("input",{type:"text",className:"border focus-visible-ring"}),gn("button",{className:"focus-visible-ring",children:"Button"})]}),gn(Ri.Demo,{title:"Combining with other tailwind ring classes",withSource:!0,children:[gn("input",{type:"text",className:"border focus-visible-ring ring-slate-5"}),gn("button",{className:"focus-visible-ring ring-inset",children:"Inset ring"})]})]})}),gn(Ri.SectionL2,{title:"Modifiers (variants)",children:[gn("p",{
+children:"This package also provides some tailwind variants (modifiers) that can be combined with other tailwind utility classes."}),gn(Ri.SectionL3,{title:"Styling groups of inputs",children:[gn("p",{children:["The ",gn("code",{children:"input-group"})," modifier allows adaptation of styling on inputs when they are part of a group of inputs. This is identical in functionality to the"," ",gn(Zt,{href:"https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state",underline:"always",children:["tailwind ",gn("code",{children:"group"})," modifier"]})," ","but is ",'"namespaced"'," to associate it with its more targeted usage."]}),gn("p",{children:["Each of the ",gn("code",{children:"button"}),"s used in the following grouping examples has the markup shown below. The ",gn("code",{children:"rounded-lg"})," ","class sets border-radius on the buttons, but"," ",gn("code",{children:"input-group:rounded-none"})," removes it when the buttons are inside of an ",gn("code",{children:"input-group"
+}),"."]}),gn(Ri.Code,{content:gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"Label"}),title:"Button element styling"}),gn(Ri.Demo,{title:"buttons in an .input-group",withSource:!0,children:gn("div",{className:"input-group",children:gn("div",{className:"flex gap-x-2 input-group:gap-x-0",children:[gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"One"}),gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"Two"}),gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"Three"})]})})}),gn(Ri.Demo,{title:"The same buttons not in an .input-group",withSource:!0,children:gn("div",{className:"flex gap-x-2 input-group:gap-x-0",children:[gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"One"}),gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"Two"}),gn("button",{className:"border p-2 rounded-lg input-group:rounded-none",children:"Three"
+})]})})]})]})]})},group:"foundations"},{title:"AspectRatio",group:"data",component:function(){return gn(Ri.Page,{title:"AspectRatio",intro:gn("p",{children:[gn("code",{children:"AspectRatio"})," is a simple component that controls the aspect ratio of its first direct child, with a default ratio of 16:9."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"AspectRatio"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic AspectRatio",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(pt,{children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})})})]}),gn(Ri.Section,{title:"Working with AspectRatio",children:[gn(Ri.SectionL3,{title:"Placeholder content",children:[gn("p",{children:["Placeholder content can be put in a container that is the first direct child of the ",gn("code",{children:"AspectRatio"}),"."]}),gn(Ri.Demo,{title:"Placeholder",withSource:!0,children:gn("div",{className:"w-[250px] border rounded-md",children:gn(pt,{
+children:gn("div",{children:gn(On,{className:"text-slate-5 w-2em h-2em"})})})})})]}),gn(Ri.SectionL3,{title:"Fitting and positioning content",children:[gn("p",{children:["The way the content is resized and fitted (",gn(Zt,{underline:"always",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",children:"object-fit"}),") can be controlled with the ",gn("code",{children:"objectFit"})," prop (documented below)."]}),gn("p",{children:[gn(Zt,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-position",underline:"always",children:"Object positioning"})," ","within the content ","element's"," box can be handled by styling the content element itself. By default, the browser will position content ",gn("code",{children:"50% 50%"})," within the ","element's"," box. In this example, the image is styled to apply"," ",gn("code",{children:"object-position: top"})," instead."]}),gn(Ri.Demo,{title:"Changing the contained object's position",withSource:!0,children:gn("div",{className:"w-[350px]",
+children:gn(pt,{children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder",className:"object-top"})})})})]})]}),gn(Ri.Section,{title:"Component API",children:[gn(Ri.SectionL3,{title:"children",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Either the"," ",gn(Zt,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element",children:"replaced element"})," ","to be sized or placeholder content in a container."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]})}),gn(Ri.SectionL3,{title:"ratio",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set the aspect ratio for the content"}),gn(Ri.InfoItem,{label:"type",children:[gn("code",{children:"string"})," Any numeric string that can be used in a CSS"," ",gn("code",{children:"calc()"})," expression"]}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'16/9'"})})]})}),gn(Ri.SectionL3,{title:"objectFit",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["Control the way the content is resized and fitted (",gn(Zt,{underline:"always",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",children:"object-fit"}),")."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'cover'"})})]}),gn(Ri.Demo,{title:"objectFit:'cover' (default)",withSource:!0,children:gn("div",{className:"w-[350px] border rounded-md",children:gn(pt,{objectFit:"cover",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn(Ri.Demo,{title:"objectFit:'contain'",withSource:!0,children:gn("div",{className:"w-[350px] border rounded-md",children:gn(pt,{objectFit:"contain",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn(Ri.Demo,{title:"objectFit:'fill'",withSource:!0,children:gn("div",{className:"w-[350px] border rounded-md",children:gn(pt,{
+objectFit:"fill",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn(Ri.Demo,{title:"objectFit:'scale-down'",withSource:!0,children:gn("div",{className:"w-[350px] border rounded-md",children:gn(pt,{objectFit:"scale-down",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn(Ri.Demo,{title:"objectFit:'none'",withSource:!0,children:gn("div",{className:"w-[350px] border rounded-md",children:gn(pt,{objectFit:"none",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})})]})]})]})})},route:"/data-aspectratio"},{title:"DataTable",group:"data",component:function(){const[e,n]=he(Xi[Xi.length-1]),[t,i]=he(null),[l,o]=he(null),[r,c]=he([]);return gn(Ri.Page,{title:"DataTable",intro:gn("p",{children:[gn("code",{children:"DataTable"})," is a composite component that provides support for interactive tables with columns and rows data. It is built atop the ",gn("code",{children:"Table"})," family of presentational components."]}),
+children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"DataTable"}),gn(Ri.Demo,{title:"Basic DataTable",withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"A subset of Nabokov's novels with publish date and original language",rows:Xi,columns:Ki})})})})]}),gn(Ri.SectionL2,{title:"Working with tables",children:[gn(Ri.SectionL3,{title:"Rows, columns and items",children:[gn("p",{children:[gn("code",{children:"DataTable"})," operates on ",gn("code",{children:"rows"})," and",gn("code",{children:"columns"}),". Rows are generic key-value objects and columns determine which fields in each row are rendered in the table."]}),gn("p",{children:["All of the ",gn("code",{children:"DataTable"})," examples on this page use the same ",gn("code",{children:"rows"})," data:"]}),gn("div",{className:"h-[300px]",children:gn(Ri.Code,{title:"rows data used for examples on this page",
+content:"const rows = [\n    {\n      title: 'Машенька',\n      year: '1926',\n      language: 'Russian',\n      translatedTitle: 'Mary',\n    },\n    {\n      title: 'Король, дама, валет',\n      year: '1928',\n      language: 'Russian',\n      translatedTitle: 'King, Queen, Knave',\n    },\n    {\n      title: 'Защита Лужина',\n      year: '1930',\n      language: 'Russian',\n      translatedTitle: 'The Defense',\n    },\n    {\n      title: 'Соглядатай',\n      year: '1930',\n      language: 'Russian',\n      translatedTitle: 'The Eye',\n    },\n    {\n      title: 'The Real Life of Sebastian Knight',\n      year: '1941',\n      language: 'English',\n    },\n    {\n      title: 'Bend Sinister',\n      year: '1947',\n      language: 'English',\n    },\n    {\n      title: 'Pale Fire',\n      year: '1965',\n      language: 'English',\n    },\n    {\n      title: 'Подвиг',\n      year: '1932',\n      language: 'Russian',\n      translatedTitle: 'Glory',\n    },\n    {\n      title: 'Ada or Ardor: A Family Chronicle',\n      year: '1969',\n      language: 'English',\n    },\n  ];"
+})}),gn(Ri.Code,{title:"example of columns",content:"const columns = [\n  { field: 'title', label: 'Title', classes: 'w-[80%]' },\n  { field: 'year', label: 'Year' },\n];"})]}),gn(Ri.SectionL3,{title:"Grid DataTables with scroll",children:gn(Ri.Demo,{title:"Grid DataTables with scroll",withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"A subset of Nabokov's novels with publish date and original language",rows:Xi,columns:Ki,grid:!0})})})})}),gn(Ri.SectionL3,{title:"Interactive DataTables",children:[gn("p",{children:["The presence of a ",gn("code",{children:"onSelectRow"}),","," ",gn("code",{children:"onSelectRows"})," or ",gn("code",{children:"onConfirmRow"})," callback prop will cause a ",gn("code",{children:"DataTable"})," to be interactive."]}),gn("p",{children:["Rows in interactive ",gn("code",{children:"DataTable"}),"s can be"," ",gn("strong",{children:"selected"})," by a single click or keyboard navigation focus, then subsequently — if ",gn("code",{
+children:"onConfirmRow"})," is provided — ",gn("strong",{children:"confirmed"})," with a double-click or by pressing ","'Enter'","."]}),gn("p",{children:[gn("code",{children:"DataTable"})," does not maintain internal state and expects a parent component to provide the current selected rows. If the user should be able to select a single row, this should be passed via ",gn("code",{children:"selectedRow"}),". If the user should be allowed to selected multiple rows, the selection should be passed via"," ",gn("code",{children:"selectedRows"}),"."]}),gn(Ri.Demo,{title:"Interactive DataTable with callbacks for row selection, confirmation",withSource:!0,children:gn("div",{className:"space-y-2 w-full",children:[gn("div",{children:["Selected row:"," ",t?gn("i",{children:t.title}):"None"]}),gn("div",{children:["Confirmed row:"," ",l?gn("i",{children:l.title}):"None"]}),gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,selectedRow:t,
+onSelectRow:e=>i(e),onConfirmRow:e=>o(e)})})})]})})]}),gn(Ri.SectionL3,{title:"Tables in constrained spaces",children:[gn("p",{children:[gn("code",{children:"DataTable"})," and ",gn("code",{children:"Table"})," are designed to be compatible with scrolling contexts. The examples on this page are constrained within ",gn("code",{children:"Scroll"})," components."]}),gn("p",{children:[gn("code",{children:"DataTable"})," is designed to fill its containing space vertically. If there are sparse data (fewer rows than fill the space), the ",gn("code",{children:"Table"})," will still occupy the full vertical height."]}),gn(Ri.Demo,{withSource:!0,title:"Constrained Table with sparse content",children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"A subset of Nabokov's novels with publish date and original language",rows:[Xi[0],Xi[1]],columns:Ki})})})})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"DataTable"
+})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"})," ","and some"," ",gn(Ri.Link,{href:"/data-table#table-props",children:[gn("code",{children:"Table"})," presentational props"]}),"."]}),gn(Ri.SectionL3,{title:"columns",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["An array of objects defining headers to render, as well as which fields in ",gn("code",{children:"rows"})," are rendered. Optional"," ",gn("code",{children:"classes"})," extend CSS classes applied to associated"," ",gn("code",{children:"th"})," elements."]}),gn(Ri.InfoItem,{label:"type",children:gn(Ri.Code,{size:"sm",content:"Array<{\n  field: string;\n  label: string;\n  classes?: string;\n}>\n"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]}),gn(Ri.Demo,{title:"Setting columns for a DataTable",withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{
+title:"Some of Nabokov's novels and their publish date",rows:Xi,columns:[{field:"title",label:"Title",classes:"w-[80%]"},{field:"year",label:"Year"}]})})})}),gn(Ri.Code,{title:"columns data used for this example",content:"const columns = [\n  { field: 'title', label: 'Title', classes: 'w-[80%]' },\n  { field: 'year', label: 'Year' },\n];"})]}),gn(Ri.SectionL3,{title:"rows",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Array of objects mapping field names to values. Only fields that are declared in ",gn("code",{children:"columns"})," will be rendered."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Array<Record<string,any>"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]}),gn(Ri.Demo,{title:"Only fields declared in columns are rendered",withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"A subset of Nabokov's novels with publish date and original language",rows:Xi,columns:Ki})})})
+}),gn("p",{children:["In this example, the ",gn("code",{children:"translatedTitle"})," field is not referenced in ",gn("code",{children:"columns"}),", so it is not rendered."]}),gn(Ri.Code,{title:"columns data used for this example",content:"const columns = [\n  { field: 'title', label: 'Title' },\n  { field: 'year', label: 'Year' },\n  { field: 'language', label: 'Language' },\n];"})]}),gn(Ri.SectionL3,{title:"emptyMessage",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Message to show if there are no ",gn("code",{children:"rows"}),". Superseded by"," ",gn("code",{children:"loading"})," state."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:[],columns:Ki,emptyMessage:gn("strong",{children:"No books found"})})})})})]}),gn(Ri.SectionL3,{title:"loading",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:"Show a loading spinner. Column headings are still displayed."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,loading:!0})})})})]}),gn(Ri.SectionL3,{title:"renderItem",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback for formatting the contents of an individual table cell."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(r: Row, field: keyof Row) => preact.ComponentChildren"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"(r: Row, field: keyof Row) => r[field] as ComponentChildren"})})]}),gn(Ri.Demo,{title:"Using renderItem to format table cell contents",withSource:!0,children:gn("div",{className:"w-full h-[250px]",
+children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels and their translated titles",rows:Xi,columns:[{field:"title",label:"Title"},{field:"translatedTitle",label:"Translated As"},{field:"year",label:"Year"}],renderItem:(e,n)=>{switch(n){case"title":return gn("i",{children:e.title});case"translatedTitle":return e.translatedTitle?gn("i",{children:e.translatedTitle}):"N/A";default:return e[n]}}})})})}),gn(Ri.Code,{title:"renderItem callback used for this example",size:"sm",content:"const renderItem = (row, field) => {\n  switch (field) {\n    case 'title':\n      return <i>{row.title}</i>;\n    case 'translatedTitle':\n      return row.translatedTitle ? (\n        <i>{row.translatedTitle}</i>\n      ) : (\n        'N/A'\n      );\n    default:\n      return row[field];\n  }\n}"})]}),gn(Ri.SectionL3,{title:"onSelectRow",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback invoked when a row is selected (focused or single-clicked)."}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:"(r: Row) => void"})})]}),gn(Ri.Demo,{title:"DataTable with onSelectRow callback",withSource:!0,children:gn("div",{className:"space-y-2 w-full",children:[gn("div",{children:["Selected row:"," ",e?gn("i",{children:e.title}):"None"]}),gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,selectedRow:e,onSelectRow:e=>n(e)})})})]})})]}),gn(Ri.SectionL3,{title:"onSelectRows",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback invoked when the selected rows are changed if multi-row selections are enabled by passing the `selectedRows` prop."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(r: Row[]) => void"})})]}),gn(Ri.Demo,{title:"DataTable with onSelectRows callback",withSource:!0,children:gn("div",{className:"space-y-2 w-full",children:[gn("div",{children:["Selected rows:"," ",r.length>0?gn("i",{children:r.map((e=>e.title)).join(", ")}):"None"]}),gn("div",{
+className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,selectedRows:r,onSelectRows:e=>c(e)})})})]})})]}),gn(Ri.SectionL3,{title:"onConfirmRow",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Callback invoked when a row is confirmed (double-clicked, or"," ",gn("kbd",{children:"enter"})," pressed)"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(r: Row) => void"})})]})}),gn(Ri.SectionL3,{title:"selectedRow",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set which Row in ",gn("code",{children:"rows"})," is currently selected."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Row"})})]}),gn(Ri.Demo,{title:"DataTable with selectedRow",withSource:!0,children:gn("div",{className:"w-full h-[250px]",children:gn(yn,{children:gn(qt,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,selectedRow:Xi[2]})})})})]}),gn(Ri.SectionL3,{title:"selectedRows",children:gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["This is like ",gn("code",{children:"selectedRow"})," except that it specifies an array of rows, and enables the user to select multiple rows."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Row[]"})})]})}),gn(Ri.SectionL3,{title:"order",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the column from which ",gn("code",{children:"rows"})," are currently ordered. It will cause an arrow icon to be displayed next to the corresponding column name."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"{ field: T; direction: 'ascending' | 'descending' } | null"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"onOrderChange",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Used together with ",gn("code",{children:"order"
+}),", can be used to know what is the new order to apply when a column is clicked. It will cause columns to have a pointer cursor."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(newOrder: { field: T; direction: 'ascending' | 'descending' } | null) => void"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"DataTable with client-side ordering",children:gn("div",{className:"w-full",children:gn(Ji,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki})})}),gn(Ri.Demo,{title:"DataTable with server-side ordering",children:gn("div",{className:"w-full",children:gn(Qi,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki})})})]}),gn(Ri.SectionL3,{title:"orderableColumns",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["If provided together with ",gn("code",{children:"onOrderChange"
+}),", it allows to restrict which columns can be used to order the table, or define the initial ordering direction for every orderable column. Defaults to no columns."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Field[] | Partial<Record<Field, 'ascending' | 'descending'>> | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Partially orderable DataTable",children:gn("div",{className:"w-full",children:gn(Ji,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,orderableColumns:["title","year"]})})}),gn(Ri.Demo,{title:"Year orders descending by default",children:gn("div",{className:"w-full",children:gn(Ji,{title:"Some of Nabokov's novels",rows:Xi,columns:Ki,orderableColumns:{title:"ascending",year:"descending"}})})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"DataTable"
+})," accepts HTML element attributes except those detailed below."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'rows' | 'role' | 'loading'>"})})]})})]})]})})},route:"/data-datatable"},{title:"Icons",group:"data",component:function(){return gn(Ri.Page,{title:"Icons",intro:gn("p",{children:"Icons are simple, standalone components that wrap SVG source markup."}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"CancelIcon"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Icon component usage: CancelIcon",withSource:!0,children:gn(Nn,{})})})]}),gn(Ri.SectionL2,{title:"Icon components",children:gn("div",{className:"my-4 grid grid-cols-4 gap-6",children:Object.keys(tt).map((e=>{const n=tt[e];return gn("div",{className:ee("flex flex-col gap-y-4 border rounded p-4 items-center justify-center"),children:[gn(n,{}),e]},e)}))})}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{
+title:"...htmlProps",children:[gn(Ri.Callout,{children:["Unlike other components in this package, Icon components take"," ",gn("code",{children:"className"}),", not ",gn("code",{children:"classes"}),"."]}),gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Icon components accept SVG attributes."}),gn(Ri.InfoItem,{label:"type",children:[gn("code",{children:["preact.JSX.HTMLAttributes<",gn(Zt,{href:"https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement",children:"SVGSVGElement"})]}),">"]})]})]}),gn(Ri.Demo,{title:"Styled icon component",withSource:!0,children:gn(Mn,{className:"text-yellow-notice w-16 h-16"})})]})]})})},route:"/data-icons"},{title:"ScrollBox",group:"data",component:function(){return gn(Ri.Page,{title:"ScrollBox",intro:gn("p",{children:["The composite ",gn("code",{children:"ScrollBox"})," component provides a container for scrolling content, while individual ",gn("code",{children:"Scroll"})," components are available for additional customization if needed."]}),
+children:[gn(Ri.Section,{title:"ScrollBox",intro:gn("p",{children:[gn("code",{children:"ScrollBox"})," is an opinionated composite component that provides a shorthand for styling scrollable content."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"ScrollBox"}),gn(Ri.Demo,{title:"Basic Scrollbox",withSource:!0,children:gn("div",{className:"w-[280px] h-[200px]",children:gn(Vt,{children:gn("ul",{children:gn($i,{})})})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"ScrollBox"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"}),"."]}),gn(Ri.SectionL3,{title:"borderless",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Disable the border on the ",gn("code",{children:"ScrollBox"})]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{
+title:"Turning off borders",withSource:!0,children:gn("div",{className:"w-[280px] h-[200px]",children:gn(Vt,{borderless:!0,children:gn("ul",{children:gn($i,{})})})})})]})]})]}),gn(Ri.Section,{title:"Working with scrolling components",intro:gn("p",{children:[gn("code",{children:"Scroll"})," and its allies allow for more customization control if ",gn("code",{children:"ScrollBox"})," ","doesn't"," meet flexibility needs."]}),children:gn(Ri.SectionL2,{title:"Composing Scroll components",children:gn(Ri.SectionL3,{children:[gn("p",{children:["Sizing constraints are dictated by the immediate parent container of the outermost ",gn("code",{children:"Scroll*"})," component. Here and in following examples, the parent container sets width (",gn("code",{children:"320px"}),") and height (",gn("code",{children:"200px"}),")."]}),gn(Ri.Demo,{title:"Using Scroll components to manage scroll",withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(jt,{children:gn(yn,{children:gn(Ut,{children:gn("ul",{
+children:gn($i,{})})})})})})})]})})}),gn(Ri.Section,{title:"Scroll",intro:gn("p",{children:[gn("code",{children:"Scroll"})," is a presentational component providing a fluid container that scrolls on overflow."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Scroll"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Scroll",withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(yn,{children:gn("ul",{children:gn($i,{})})})})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"Scroll"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Scroll"}),"'s"," default ",gn("code",{children:"'raised'"})," ",gn("code",{children:"variant"
+})," ","renders CSS shadows to hint that content is scrollable. These can be disabled by using the ",gn("code",{children:"flat"})," variant."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'raised' | 'flat'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"raised"})})]}),gn(Ri.Demo,{title:"variant:'flat'",withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(yn,{variant:"flat",children:gn("ul",{children:gn($i,{})})})})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Scroll"})," accepts HTML element attributes"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"ScrollContent",intro:gn("p",{children:[gn("code",{children:"ScrollContent"})," is a presentational component that puts consistent padding and spacing around content in a"," ",gn("code",{children:"Scroll"})," component."]}),
+children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"ScrollContent"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Scroll with ScrollContent",withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(yn,{children:gn(Ut,{children:gn("ul",{children:gn($i,{})})})})})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"ScrollContent"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Scroll"})," accepts HTML element attributes"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLDivElement>"})})]})})]})]}),gn(Ri.Section,{title:"ScrollContainer",intro:gn(y,{children:[gn("p",{children:[gn("code",{children:"ScrollContainer"
+})," is a presentational component that allows the combination of scrolling and non-scrolling content to be constrained to the parent ","container's"," dimensions. This is very handy when trying to constrain complex content within, e.g., a modal."]}),gn("p",{children:["Only the content within ",gn("code",{children:"Scroll"})," actually scrolls."]})]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"ScrollContainer"}),gn(Ri.Demo,{title:"Basic ScrollContainer",withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(jt,{children:[gn("div",{className:"p-2 border-b",children:"Non-scrolling content here"}),gn(yn,{children:gn(Ut,{children:gn("ul",{children:gn($i,{})})})}),gn("div",{className:"p-2 border-t",children:"More non-scrolling content"})]})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"ScrollContainer"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",
+children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"borderless",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Disable the border on the ",gn("code",{children:"ScrollContainer"})]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-[320px] h-[200px]",children:gn(jt,{borderless:!0,children:[gn("div",{className:"p-2 border-b",children:"Non-scrolling content here"}),gn(yn,{children:gn(Ut,{children:gn("ul",{children:gn($i,{})})})})]})})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"ScrollContainer"})," accepts HTML element attributes"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLDivElement>"})})]})})]})]})]})},route:"/data-scrollbox"},{title:"Table",group:"data",
+component:function(){return gn(Ri.Page,{title:"Table",intro:gn("p",{children:[gn("code",{children:"Table"}),", ",gn("code",{children:"TableHead"}),", ",gn("code",{children:"TableBody"}),","," ",gn("code",{children:"TableRow"})," and ",gn("code",{children:"TableCell"})," are presentational components for rendering table content."]}),children:gn(Ri.Section,{title:"Table",children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Table, TableHead, TableBody, TableRow, TableCell",size:"sm"}),gn(Ri.Demo,{title:"Basic Table",withSource:!0,children:gn(zt,{title:"Some sushi rolls",children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{children:[gn(Et,{children:"Boston roll"}),gn(Et,{
+children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]}),gn(Rt,{children:[gn(Et,{children:"California roll"}),gn(Et,{children:["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in ","premium"," ","varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]})]})]})]})})]}),gn(Ri.SectionL2,{title:"Working with Tables",children:[gn(Ri.SectionL3,{title:"Composing Table components",children:gn("p",{children:["All ",gn("code",{children:"Table*"})," (",gn("code",{children:"TableHead"}),","," ",gn("code",{children:"TableFoot"}),", ",gn("code",{children:"TableRow"}),","," ",gn("code",{children:"TableCell"}),", ",gn("code",{
+children:"TableBody"}),") are presentational components and take all standard props from the presentational component API. All also accept HTML attributes for their associated element."]})}),gn(Ri.SectionL3,{title:"Sizing Tables",children:[gn("p",{children:"Table column width is established by the first row, which are typically headers."}),gn(Ri.Demo,{title:"Controlling column width",withSource:!0,children:gn(zt,{title:"Some sushi rolls",children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[200px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{
+children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]}),gn(Rt,{children:[gn(Et,{children:"California roll"}),gn(Et,{children:["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in"," ","premium"," varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]})]})]})]})})]})]}),gn(Ri.SectionL2,{id:"table-props",title:"Component API",children:[gn("code",{children:"Table"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"stickyHeader",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Make the table headers sticky in scrolling contexts"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",
+children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Table with stickyHeader and rounded Scroll",withSource:!0,children:gn("div",{className:"h-[250px]",children:gn(jt,{rounded:!0,children:gn(yn,{children:gn(zt,{title:"Some sushi rolls",stickyHeader:!0,borderless:!0,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]}),gn(Rt,{
+children:[gn(Et,{children:"California roll"}),gn(Et,{children:["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in"," ","premium"," varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]})]}),gn(Rt,{children:[gn(Et,{children:"Dynamite roll"}),gn(Et,{children:"A roll including yellowtail (hamachi) or prawn tempura, and fillings such as bean sprouts, carrots, avocado, cucumber, chili, spicy mayonnaise, and roe."})]}),gn(Rt,{children:[gn(Et,{children:"Hawaiian roll"}),gn(Et,{children:"A roll containing shōyu tuna (canned), tamago, kanpyō, kamaboko, and the distinctive red and green hana ebi (shrimp powder)."})]})]})]})})})})})]}),gn(Ri.SectionL3,{title:"interactive",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set this boolean prop if rows in the table are select-able or otherwise interactive."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})
+}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Table with interactive set",withSource:!0,children:gn(zt,{title:"Some sushi rolls",interactive:!0,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{onClick:()=>alert("Yum, Alaska roll!"),children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{onClick:()=>alert("This is a new one!"),children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{onClick:()=>alert("I call this a salmon-skin roll"),children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{
+children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]})]})]})})]}),gn(Ri.SectionL3,{id:"table-props-borderless",title:"borderless",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set this boolean prop if you want to remove the table","'","s outer borders, in case it is rendered in a container with its own borders."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Table without borders",withSource:!0,children:gn(zt,{title:"Some sushi rolls",borderless:!0,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{onClick:()=>alert("Yum, Alaska roll!"),children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{
+children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{onClick:()=>alert("This is a new one!"),children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{onClick:()=>alert("I call this a salmon-skin roll"),children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]})]})]})})]}),gn(Ri.SectionL3,{title:"striped",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Renders a different background for odd rows."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"true"})})]}),gn(Ri.Demo,{title:"Table without stripes",withSource:!0,children:gn(zt,{title:"Some sushi rolls",
+striped:!1,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{onClick:()=>alert("Yum, Alaska roll!"),children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{onClick:()=>alert("This is a new one!"),children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{onClick:()=>alert("I call this a salmon-skin roll"),children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]})]})]})})]}),gn(Ri.SectionL3,{title:"grid",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Renders borders for table cells."
+}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Table with grid",withSource:!0,children:gn(zt,{title:"Some sushi rolls",grid:!0,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{onClick:()=>alert("Yum, Alaska roll!"),children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{onClick:()=>alert("This is a new one!"),children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{onClick:()=>alert("I call this a salmon-skin roll"),children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{
+children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]})]})]})}),gn(Ri.Demo,{title:"Table with grid, without stripes",withSource:!0,children:gn(zt,{title:"Some sushi rolls",grid:!0,striped:!1,children:[gn(Bt,{children:gn(Rt,{children:[gn(Et,{classes:"w-[180px]",children:"Sushi roll name"}),gn(Et,{children:"Definition"})]})}),gn(Ht,{children:[gn(Rt,{onClick:()=>alert("Yum, Alaska roll!"),children:[gn(Et,{children:"Alaskan roll"}),gn(Et,{children:"A variant of the California roll with smoked salmon on the inside, or layered on the outside."})]}),gn(Rt,{onClick:()=>alert("This is a new one!"),children:[gn(Et,{children:"Boston roll"}),gn(Et,{children:"An uramaki California roll with poached shrimp instead of imitation crab."})]}),gn(Rt,{onClick:()=>alert("I call this a salmon-skin roll"),children:[gn(Et,{children:"British Columbia roll"}),gn(Et,{
+children:"A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."})]})]})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Link"})," accepts HTML attribute props applicable to"," ",gn("code",{children:"HTMLTableElement"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.JSX.HTMLAttributes<HTMLTableElement>"})})]})})]})]})})},route:"/data-table"},{title:"Thumbnail",group:"data",component:function(){return gn(Ri.Page,{title:"Thumbnail",intro:gn("p",{children:[gn("code",{children:"Thumbnail"})," renders media thumbnails, handling aspect ratio, loading states, and placeholder content. It is a composite component that uses"," ",gn(Ri.Link,{href:"/data-aspectratio",children:gn("code",{children:"AspectRatio"})}),"."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{
+children:[gn(Ri.Usage,{componentName:"Thumbnail"}),gn(Ri.Demo,{title:"Basic Thumbnail",withSource:!0,children:gn("div",{className:"w-[250px]",children:gn($t,{children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})})]}),gn(Ri.SectionL2,{title:"Working with Thumbnails",children:[gn(Ri.SectionL3,{title:"Loading and placeholder content",children:[gn(Ri.Demo,{withSource:!0,title:"Loading state",children:gn("div",{className:"w-[250px]",children:gn($t,{loading:!0,children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn(Ri.Demo,{withSource:!0,title:"Placeholder shown when empty",children:gn("div",{className:"w-[250px]",children:gn($t,{})})})]}),gn(Ri.SectionL3,{title:"Height and width constraints",children:[gn("p",{children:[gn("code",{children:"Thumbnail"})," will constrain content to within the height and width constraints of the containing element. If the parent element has a set height and there is extra space, Thumbnail content will be centered vertically."]
+}),gn(Ri.Demo,{title:"Extra available vertical space",withSource:!0,children:gn("div",{className:"w-[250px] h-[300px]",children:gn($t,{children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})}),gn("p",{children:["Thumbnail content respects parent constraints, even if there is not enough room to show the full content. In this example,",gn("code",{children:"object-position: top"})," has been set on the contained image to optimize the cropping."]}),gn(Ri.Demo,{title:"Content taller than vertical space",withSource:!0,children:gn("div",{className:"w-[350px] h-[150px]",children:gn($t,{children:gn("img",{src:"https://placehold.co/400x400",className:"object-top",alt:"placeholder"})})})})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"Thumbnail"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"}),"."]}),gn(Ri.SectionL3,{title:"borderless",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["Render the ",gn("code",{children:"Thumbnail"})," with no visual border. Relative border size can be controlled with the"," ",gn("code",{children:"size"})," prop."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"borderless Thumbnails",withSource:!0,children:gn("div",{className:"space-y-4",children:[gn("div",{className:"w-[200px]",children:gn($t,{borderless:!0,children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})}),gn("div",{className:"w-[200px]",children:gn($t,{borderless:!0})})]})})]}),gn(Ri.SectionL3,{title:"loading",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Display a loading indicator."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"objectFit",
+children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Control the way the content is resized and fitted (",gn(Zt,{underline:"always",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",children:"object-fit"}),")."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'cover'"})})]})}),gn(Ri.SectionL3,{title:"placeholder",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Custom placeholder content to use when the"," ",gn("code",{children:"Thumbnail"})," is empty."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]}),gn(Ri.Demo,{withSource:!0,title:"Custom placeholder",children:gn("div",{className:"w-[250px]",children:gn($t,{placeholder:gn(qn,{className:"text-grey-5 w-1em h-1em"})})})})]}),gn(Ri.SectionL3,{title:"ratio",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{
+label:"description",children:"Set the aspect ratio for the content."}),gn(Ri.InfoItem,{label:"type",children:[gn("code",{children:"string"})," Any numeric string that can be used in a CSS"," ",gn("code",{children:"calc()"})," expression"]}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'16/9'"})})]}),gn(Ri.Demo,{title:"ratio: '4/3'",withSource:!0,children:gn("div",{className:"w-[250px]",children:gn($t,{ratio:"4/3",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})})})]}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the relative proportions of the ",gn("code",{children:"Thumbnail"}),", its border, loading spinner and placeholder content. If you need more styling control, use"," ",gn(Ri.Link,{href:"/data-aspectratio",children:"AspectRatio"})," ","directly."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'sm' | 'md' | 'lg'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{
+children:"'md'"})})]}),gn(Ri.Demo,{title:"size: 'sm'",withSource:!0,children:gn("div",{className:"flex gap-x-4",children:[gn("div",{className:"w-[200px]",children:gn($t,{size:"sm",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})}),gn("div",{className:"w-[200px]",children:gn($t,{size:"sm",loading:!0})}),gn("div",{className:"w-[200px]",children:gn($t,{size:"sm"})})]})}),gn(Ri.Demo,{title:"size: 'md'",withSource:!0,children:gn("div",{className:"flex gap-x-4",children:[gn("div",{className:"w-[200px]",children:gn($t,{size:"md",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})}),gn("div",{className:"w-[200px]",children:gn($t,{size:"md",loading:!0})}),gn("div",{className:"w-[200px]",children:gn($t,{size:"md"})})]})}),gn(Ri.Demo,{title:"size: 'lg'",withSource:!0,children:gn("div",{className:"flex gap-x-4",children:[gn("div",{className:"w-[200px]",children:gn($t,{size:"lg",children:gn("img",{src:"https://placehold.co/400x400",alt:"placeholder"})})}),gn("div",{
+className:"w-[200px]",children:gn($t,{size:"lg",loading:!0})}),gn("div",{className:"w-[200px]",children:gn($t,{size:"lg"})})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Thubmnail"})," accepts HTML element attributes"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'loading' | 'placeholder'>"})})]})})]})]})})},route:"/data-thumbnail"},{title:"Callout",group:"feedback",component:function(){return gn(Ri.Page,{title:"Callout",intro:gn("p",{children:"Callout is a presentational component that can be used for alerts, banners or toast messages."}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Callout"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic Callout",children:gn("div",{className:"flex flex-col gap-y-4",children:[gn(Gt,{status:"notice",children:"A callout with (default) notice status."
+}),gn(Gt,{status:"success",children:"A callout with a success message."}),gn(Gt,{status:"error",children:"A callout with an error message."})]})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"Callout"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"icon",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Custom icon to display in callout."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]}),gn(Ri.Demo,{title:"Callout with custom icon",withSource:!0,children:gn(Gt,{icon:Xn,status:"success",children:"This callout has a custom icon"})})]}),gn(Ri.SectionL3,{title:"status",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Will theme the callout with an appropriate icon and coloring (unless overridden by the ",gn("code",{children:"icon"
+})," prop or Styling API props)."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'notice' | 'success' | 'error'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'notice'"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Callout"})," accepts HTML attribute props applicable to"," ",gn("code",{children:"HTMLElement"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'icon'>"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"Callout"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the ",gn("code",{children:"Callout"})," theming."]
+}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'outlined' | 'raised' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'outlined'"})})]}),gn(Ri.Demo,{title:"Callout variants",withSource:!0,children:gn("div",{className:"flex flex-col gap-y-4",children:[gn(Gt,{variant:"outlined",children:["This is an ",gn("strong",{children:"outlined"})," (default) callout."]}),gn(Gt,{variant:"raised",children:["This is a ",gn("strong",{children:"raised"})," callout, which provides dimensionality and interactive cursor."]})]})}),gn(Ri.Demo,{title:"Callout with custom variant",withSource:!0,children:gn(Gt,{variant:"custom",children:["Note that no icon is rendered when variant is"," ",gn("code",{children:"'custom'"}),"."]})})]}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the relative internal sizing of the callout. Set to"," ",gn("code",{children:"'custom'"
+})," to disable sizing classes and set your own with ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'sm' | 'md' | 'lg' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{title:"Callout sizes",withSource:!0,children:gn("div",{className:"flex flex-col gap-y-4",children:[gn(Gt,{status:"success",size:"sm",children:"A callout with a small size."}),gn(Gt,{status:"success",size:"md",children:"A callout with a medium size."}),gn(Gt,{status:"success",size:"lg",children:"A callout with a large size."}),gn(Gt,{status:"success",size:"custom",classes:"p-4",children:["Note that no icon is rendered if size is"," ",gn("code",{children:"'custom'"})]})]})})]}),gn(Ri.SectionL3,{title:"unstyled",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set this to disable all styling and provide your own styling with ",gn("code",{children:"classes"}),". No icon will be rendered."]}),gn(Ri.InfoItem,{
+label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})})]})]})})},route:"/feedback-callout"},{title:"Dialogs",group:"feedback",component:function(){const e=me(null),[n,t]=he(null),[i,l]=he("tab1");return gn(Ri.Page,{title:"Dialogs",intro:gn("p",{children:[gn("code",{children:"Dialog"})," and ",gn("code",{children:"ModalDialog"})," provide functionality similar to a ","browser's"," ",gn("code",{children:"dialog"})," element, with applied",gn("code",{children:"Panel"})," layout."]}),children:[gn(Ri.Section,{id:"dialog",title:"Dialog",intro:gn("p",{children:[gn("code",{children:"Dialog"})," renders a non-modal dialog. It handles focus routing and provides other optional dialog behaviors."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Dialog"}),gn(Ri.Demo,{title:"Basic Dialog",withSource:!0,children:gn(nl,{buttons:gn(el,{}),icon:Pn,initialFocus:e,title:"Basic dialog",children:[gn("p",{
+children:"This is a basic Dialog that routes focus initially to a text input."}),gn(ot,{children:[gn(vt,{name:"my-input",elementRef:e}),gn(rt,{icon:Ln,variant:"dark",title:"go"})]})]})})]}),gn(Ri.SectionL2,{title:"Working with Dialogs",children:gn(Ri.SectionL3,{title:"Laying out content",children:[gn("p",{children:["By default, ",gn("code",{children:"Dialog"})," will lay out its children in a"," ",gn("code",{children:"Panel"}),". Set ",gn("code",{children:"variant"})," to"," ",gn("code",{children:"'custom'"})," to use a custom layout."]}),gn("p",{children:["Use"," ",gn(Ri.Link,{href:"/input-closebutton",children:gn("code",{children:"CloseButton"})})," ","in custom dialog layouts to ensure the proper close handler is used."]}),gn(Ri.Demo,{title:"Dialog with custom layout",withSource:!0,children:gn(nl,{variant:"custom",transitionComponent:oi,children:gn("div",{className:"flex gap-x-3 items-center border p-3 bg-white",children:[gn("div",{className:"grow",children:"Custom dialog content"}),gn(ct,{})]})})})]})
+}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"Dialog"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"}),"."]}),gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"title"})," is required for all dialogs."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]})}),gn(Ri.SectionL3,{title:"classes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Atypically for a composite component, ",gn("code",{children:"Dialog"})," ","accepts ",gn("code",{children:"classes"})," (CSS classes). These will be appended to the classes applied to the ","dialog's"," container element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"closeOnClickAway",
+children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["The ",gn("code",{children:"Dialog"})," should close (invoke its"," ",gn("code",{children:"onClose"})," callback) when there are click events outside of it"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Dialog that closes on external clicks",withSource:!0,children:gn(nl,{closeOnClickAway:!0,title:"Dialog that closes when there are external clicks",children:gn("p",{children:"This dialog will close if you click outside of it"})})})]}),gn(Ri.SectionL3,{title:"closeOnEscape",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["The ",gn("code",{children:"Dialog"})," should close (invoke its"," ",gn("code",{children:"onClose"})," callback) when the ",gn("kbd",{children:"ESC"})," key is pressed."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{
+label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Dialog with close-on-Escape behavior",withSource:!0,children:gn(nl,{closeOnEscape:!0,title:"Close on ESC",children:gn("p",{children:["This dialog will close if you press ",gn("kbd",{children:"Escape"}),"."]})})})]}),gn(Ri.SectionL3,{title:"closeOnFocusAway",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["The ",gn("code",{children:"Dialog"})," should close (invoke its"," ",gn("code",{children:"onClose"})," callback) when there are focus events outside of it."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Dialog that closes on external focus events",withSource:!0,children:gn(nl,{closeOnFocusAway:!0,title:"Close on Away Focus",children:gn("p",{children:"This dialog will close if you focus outside of it"})})})]}),gn(Ri.SectionL3,{title:"initialFocus",children:gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["Determine how initial focus is routed when the"," ",gn("code",{children:"Dialog"})," is mounted (opened). By default (",gn("code",{children:"'auto'"}),"), the dialog itself will be focused. Provide a ",gn("code",{children:"ref"})," to focus a specific element initially, or set to ",gn("code",{children:"'manual'"})," to opt out of any focus routing."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.RefObject<HTMLOrSVGElement | null> | 'auto' | 'manual'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'auto'"})})]})}),gn(Ri.SectionL3,{title:"onClose",children:[gn(Ri.Callout,{children:["The ",gn("code",{children:"onClose"})," prop is optional, but should be considered required for all new ",gn("code",{children:"Dialog"}),"s. This flexibility exists to support legacy use cases of"," ","non-closeable"," dialogs."]}),gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:["Callback invoked when the ",gn("code",{children:"Dialog"})," should be closed."," ","Note: ",gn("code",{children:"Dialog"}),"s have no state — when rendered, they are always open."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => void"})})]}),gn(Ri.Demo,{title:"Non-closeable Dialog example",withSource:!0,children:gn(nl,{icon:Pn,title:"Non-closeable dialog example",_nonCloseable:!0,children:gn("p",{children:["This is a ",'"non-closeable"'," ",gn("code",{children:"Dialog"}),". This pattern should be avoided, but is supported for a few legacy use cases. You can close this modal by clicking the"," ",'"Escape!"'," button."]})})})]}),gn(Ri.SectionL3,{title:"closeTitle",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Determine the accessible title to be set on the close button when ",gn("code",{children:"onClose"})," has also been provided."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"default",
+children:gn("code",{children:"'Close'"})})]}),gn(Ri.Demo,{title:"Custom close title",withSource:!0,children:gn(nl,{title:"Custom close title",closeTitle:"Custom text here",children:gn("p",{children:"This dialog has a custom title on the close button. Hover over it to see it."})})})]}),gn(Ri.SectionL3,{title:"restoreFocus",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Upon closing (unmounting), restore focus to the element that had focus before the ",gn("code",{children:"Dialog"})," was opened (mounted)."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Dialog with focus restoration on close",withSource:!0,children:gn(nl,{_alwaysShowButton:!0,restoreFocus:!0,title:"Restore focus",children:gn("p",{children:"This dialog will restore focus to the previously-focused element on close."})})})]}),gn(Ri.SectionL3,{title:"transitionComponent",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"TransitionComponent"})," to use when this"," ",gn("code",{children:"Dialog"})," is opened/mounted and closed/unmounted. By default, no transition is applied."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"TransitionComponent"})})]}),gn(Ri.Demo,{title:"Dialog with TransitionComponent example",withSource:!0,children:gn(nl,{title:"Dialog with TransitionComponent example",transitionComponent:oi,children:gn("p",{children:"This dialog has a slide down/up transition when opened/closed."})})})]}),gn(Ri.SectionL3,{title:"variant",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["By default, contents are laid out in a ",gn("code",{children:"Panel"}),". Set to ",gn("code",{children:"'custom'"})," to lay out dialog content manually."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'panel' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'panel'"})})]})
+}),gn(Ri.SectionL3,{title:"...panelProps",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Dialog"})," uses ",gn("code",{children:"Panel"})," for layout. All"," ",gn(Ri.Link,{href:"/layout-panel",children:"Panel"})," props are accepted and forwarded except for"," ",gn("code",{children:"fullWidthHeader"})," (which is always set for"," ",gn("code",{children:"Dialog"}),")."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<PanelProps, 'fullWidthHeader'>"})})]})})]})]}),gn(Ri.Section,{id:"modaldialog",title:"ModalDialog",intro:gn("p",{children:[gn("code",{children:"ModalDialog"})," renders a modal dialog with a full-screen backdrop overlay. It extends ",gn("code",{children:"Dialog"})," and sets some different behavioral defaults."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"ModalDialog"}),gn(Ri.Demo,{title:"Basic ModalDialog",withSource:!0,children:gn(il,{_alwaysShowButton:!0,buttons:gn(el,{}),icon:Pn,initialFocus:e,
+title:"Basic dialog",children:[gn("p",{children:"This is a basic ModalDialog."}),gn("ul",{className:"list-disc m-8",children:[gn("li",{children:["It will close if you press the ",gn("kbd",{children:"Escape"})," key."]}),gn("li",{children:"It will trap focus and allow navigation with tab and shift-tab."}),gn("li",{children:"It will restore focus after it is closed."})]}),gn(ot,{children:[gn(vt,{name:"my-input",elementRef:e}),gn(rt,{icon:Ln,variant:"dark",title:"go"})]})]})})]}),gn(Ri.SectionL2,{title:"Working with ModalDialogs",children:[gn(Ri.SectionL3,{title:"Handling long content",children:[gn("p",{children:["By default, content in a ",gn("code",{children:"Dialog"})," or"," ",gn("code",{children:"ModalDialog"})," will scroll as needed to keep the modal from exceeding viewport capacity."]}),gn(Ri.Demo,{title:"Modal with overflowing content",withSource:!0,children:gn(il,{buttons:gn(el,{}),title:"Modal with long content",children:gn(Gi,{size:"lg"})})})]}),gn(Ri.SectionL3,{title:"Handling complex modals",
+children:[gn("p",{children:["Modal dialogs should provide appropriate keyboard navigation even when there are multiple or complex embedded widgts, like data tables (ARIA ",gn("code",{children:'role="grid"'}),") or tabs (ARIA"," ",gn("code",{children:'role="tablist"'}),")."]}),gn(Ri.Demo,{title:"Modal with embedded ARIA widgets",withSource:!0,children:gn(il,{buttons:gn(el,{}),classes:"h-[25rem]",title:"Modal with tabs and data table",scrollable:!1,children:[gn(li,{classes:"gap-x-4",children:[gn(ii,{textContent:"Tab 1",selected:"tab1"===i,onClick:()=>l("tab1"),children:"Tab 1"}),gn(ii,{textContent:"Tab 2",selected:"tab2"===i,onClick:()=>l("tab2"),children:"Tab 2"})]}),gn("p",{children:["Content for both tabs, with"," ",gn(Zt,{href:"#",underline:"always",children:"a link"}),"."]}),"tab1"===i&&gn(yn,{children:gn(qt,{rows:Zi,columns:Yi,title:"Nabokov novels",selectedRow:n,onSelectRow:e=>t(e)})}),"tab2"===i&&gn(y,{children:[gn("p",{children:"This is content on another, second, tab."}),gn("div",{
+className:"flex gap-x-4",children:[gn(it,{children:"Click me"}),gn(it,{children:"No, me!"})]})]})]})})]}),gn(Ri.SectionL3,{title:"Managing modal height",children:[gn("p",{children:"By default, the height of a modal is dependent on the content inside of it. It will grow in height as needed for the content until it fills the available vertical space in the viewport, after which it will (unless disabled) scroll overheight content."}),gn("p",{children:"But you may wish to control the height of your modals. There are two options:"}),gn("ul",{children:[gn("li",{children:[gn("strong",{children:"Set a height on the ModalDialog"})," itself via the"," ",gn("code",{children:"classes"})," prop. The Modal will always render at this height. If contained content height exceeds this height, it will scroll."]}),gn("li",{children:[gn("strong",{children:["Set a minimum height on the ","ModalDialog's"," content"]
+}),". The ModalDialog will always render at least this height, but will grow in height if needed to accommodate longer content (up to the bounds of the viewport)."]})]}),gn(Ri.Demo,{title:"ModalDialog with a fixed height",withSource:!0,children:gn(il,{title:"Modal with a fixed height",buttons:gn(el,{}),classes:"h-[25rem]",children:gn("p",{children:["This ModalDialog has a height of ",gn("code",{children:"25rem"}),"."]})})}),gn(Ri.Demo,{title:"Modal with a fixed height: long content",withSource:!0,children:gn(il,{title:"ModalDialog with a fixed height",buttons:gn(el,{}),classes:"h-[25rem]",children:[gn("p",{children:["This ModalDialog has a height of ",gn("code",{children:"25rem"})," and long content."]}),gn(Gi,{size:"lg"})]})}),gn(Ri.Demo,{title:"Modal with a minimum content height and not much content",withSource:!0,children:gn(il,{title:"Modal with minimum height set on content",buttons:gn(el,{}),children:gn("div",{className:"min-h-[15rem]",children:gn("p",{
+children:["This ","ModalDialog's"," content has a preferred height of 15rem set by a CSS class."]})})})}),gn(Ri.Demo,{title:"Modal with a minimum height and scrolling content",withSource:!0,children:gn(il,{title:"Modal with a minimum height and tall content",buttons:gn(el,{}),children:gn("div",{className:"min-h-[15rem] space-y-3",children:[gn("p",{children:"This modal has a preferred height of 15rem, but its content exceeds the height of the viewport, and scrolls."}),gn("hr",{}),gn("p",{children:gn(Gi,{size:"lg"})})]})})})]}),gn(Ri.SectionL3,{title:"Custom layout",children:gn(Ri.Demo,{title:"Modal dialog with custom layout",withSource:!0,children:gn(ll,{variant:"custom",children:gn("div",{className:"flex gap-x-3 items-center border p-3 bg-white",children:[gn("div",{className:"grow",children:"Custom dialog content"}),gn(ct,{})]})})})})]}),gn(Ri.SectionL2,{title:"ComponentAPI",children:[gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{
+children:"title"})," is required for all modal dialogs."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]})}),gn(Ri.SectionL3,{title:"disableCloseOnEscape",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Do not close the ",gn("code",{children:"ModalDialog"})," when ",gn("kbd",{children:"ESC"})," is pressed."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"disableFocusTrap",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Do not trap focus in the modal."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Callout,{children:[gn("em",{children:"Note"}),": Modal focus trapping is part of"," ",gn(Zt,{
+href:"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboardinteraction",underline:"always",children:"WAI-ARIA authoring guidelines"}),". Disabling this prop is not recommended and could raise issues of accessibility."]})]}),gn(Ri.SectionL3,{title:"disableRestoreFocus",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Do not restore focus to previously-focused element when the modal is closed."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the relative width of the modal element. Set to ","'custom'"," ","to customize dimensions via ",gn("code",{children:"classes"}),".",gn("br",{}),"Note that setting ","'custom'"," value will disable both horizontal and vertical automatic sizing."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"'sm' | 'md' | 'lg' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{title:"size='sm'",withSource:!0,children:gn(il,{buttons:gn(el,{}),title:"Small modal",size:"sm",children:gn(Gi,{size:"sm"})})}),gn(Ri.Demo,{title:"size='md' (default)",withSource:!0,children:gn(il,{buttons:gn(el,{}),title:"Medium-size modal",size:"md",children:gn(Gi,{size:"md"})})}),gn(Ri.Demo,{title:"size='lg'",withSource:!0,children:gn(il,{buttons:gn(el,{}),title:"Wide modal",size:"lg",children:gn(Gi,{size:"md"})})}),gn(Ri.Demo,{title:"size='custom'",withSource:!0,children:gn(il,{buttons:gn(el,{}),classes:"w-[40em] h-[80vh] top-[10vh]",title:"Custom-size modal",size:"custom",children:gn(Gi,{size:"md"})})})]}),gn(Ri.SectionL3,{title:"scrollable (default true)",children:[gn("p",{children:"By default, dialogs will scroll overflowing content. In some cases, it is desireable to scroll only a portion of the content, or to disable scrolling entirely."}),gn("p",{
+children:["The ",gn("i",{children:"Handling Complex Modals"})," example above disables scrolling with the ",gn("code",{children:"scrollable"})," prop."]})]}),gn(Ri.SectionL3,{title:"...dialogAndPanelProps",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Props forwarded to ",gn("code",{children:"Dialog"})," and ",gn("code",{children:"Panel"}),"."]}),gn(Ri.InfoItem,{label:"props",children:["All ",gn("code",{children:"Dialog"})," and ",gn("code",{children:"Panel"})," props,"," ",gn("strong",{children:"except"}),":",gn("ul",{children:[gn("li",{children:[gn("code",{children:"closeOnEscape (Dialog)"}),": Use"," ",gn("code",{children:"disableCloseOnEscape"})," instead"]}),gn("li",{children:[gn("code",{children:"restoreFocus (Dialog)"}),": Use"," ",gn("code",{children:"disableRestoreFocus"})," instead"]}),gn("li",{children:[gn("code",{children:"fullWidthHeader (Panel)"}),": always"," ",gn("code",{children:"true"})," for all dialogs"]})]})]}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:"Omit<DialogProps, 'restoreFocus' | 'closeOnEscape'>"})})]})})]})]}),gn(Ri.Section,{id:"confirmprompt",title:"confirm",intro:gn("p",{children:[gn("code",{children:"confirm"})," is a utility function that renders a"," ",gn("code",{children:"ModalDialog"})," with two action buttons. It returns a"," ",gn("code",{children:"Promise"})," resolving a ",gn("code",{children:"boolean"}),"."]}),children:gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"confirm"}),gn(Ri.Demo,{title:"Basic confirm",children:gn(tl,{})}),gn(Ri.Demo,{title:"Usage",children:gn(Ri.Code,{content:"const answer = await confirm({\n  message: 'This is a confirm dialog',\n\n  // Optional options\n  title: 'Your title',\n  confirmAction: 'Yes please',\n  cancelAction: 'I changed my mind'\n});"})})]})})]})},route:"/feedback-dialog"},{title:"Popover",group:"feedback",component:function(){return gn(Ri.Page,{title:"Popover",intro:gn(y,{children:gn("p",{children:[gn("code",{children:"Popover"
+})," is a floating element rendered above other content and positioned next to an anchor element."]})}),children:gn(Ri.Section,{title:"Popover",intro:gn(y,{children:[gn("p",{children:["By default, ",gn("code",{children:"Popover"})," will be displayed below the anchor element, unless there is not enough space below."]}),gn("p",{children:"It will always be at least as wide as the anchor element, but it can grow to fit its content if needed. However, it will never grow beyond the viewport."}),gn("p",{children:["In browsers that support it, ",gn("code",{children:"Popover"})," uses the"," ",gn(Zt,{target:"_blank",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover",children:gn("code",{children:"popover"})})," ","attribute and gets toggled via"," ",gn(Zt,{target:"_blank",href:"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",children:"popover API"
+}),". Otherwise, it is rendered as an absolute-positioned element, so it is recommended to wrap it and its anchor element in a relative-positioned container."]})]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{symbolName:"Popover"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Popover",exampleFile:"popover-basic",withSource:!0})})]}),gn(Ri.SectionL2,{title:"Popover component API",children:[gn(Ri.SectionL3,{title:"align",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Determines to which side of the anchor element the popover should be aligned."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'left' | 'right'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'left'"})})]}),gn(Ri.Demo,{title:"Right-aligned Popover",exampleFile:"popover-right",withSource:!0})]}),gn(Ri.SectionL3,{title:"anchorElementRef",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"A reference to the element to which the popover should anchor, which will be used to calculate the popover size and positioning."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"RefObject<HTMLElement | undefined>"})})]})}),gn(Ri.SectionL3,{title:"arrow",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Determines if a small arrow pointing to the anchor element should be displayed."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"true | false"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Popover with arrow",exampleFile:"popover-with-arrow",withSource:!0})]}),gn(Ri.SectionL3,{title:"asNativePopover",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Determines if the"," ",gn(Zt,{target:"_blank",href:"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",children:"popover API"
+})," ","should be used. It","'","s mainly used as a test seam, but can be used to explicitly disable use of the native popover API."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:[gn("code",{children:"true"})," if the browser supports ",gn("code",{children:"[popover]"}),". Otherwise it is ",gn("code",{children:"false"})]})]})}),gn(Ri.SectionL3,{title:"classes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Additional CSS classes to pass to the popover."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | string[]"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"elementRef",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Ref for the popover","'","s outermost element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["RefObject","<","HTMLElement",">"]})})]})}),gn(Ri.SectionL3,{
+title:"onClose",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Callback invoked when the popover is automatically closed by clicking away or pressing ",gn("code",{children:"Escape"}),".",gn("br",{}),"The caller should use this callback to keep local state in sync, so that the popover is re-rendered with ",gn("code",{children:"open"})," set to"," ",gn("code",{children:"false"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => void"})})]})}),gn(Ri.SectionL3,{title:"onScroll",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Handler for ",'"',"scroll",'"'," events on the outermost element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => void | undefined"})})]})}),gn(Ri.SectionL3,{title:"open",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Whether the ",gn("code",{children:"Popover"})," is currently open or not."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"boolean"})})]})}),gn(Ri.SectionL3,{title:"placement",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Whether the ",gn("code",{children:"Popover"})," should show above or below the anchor element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'above' | 'below'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'below'"})})]}),gn(Ri.Demo,{title:"Popover placement",exampleFile:"popover-placement",withSource:!0})]}),gn(Ri.SectionL3,{title:"restoreFocusOnClose",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Determines if focus should be restored when the"," ",gn("code",{children:"Popover"})," is closed."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"true"})})]})}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the ",gn("code",{children:"Popover"
+})," style variant."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'panel' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'panel'"})})]}),gn(Ri.Demo,{title:"Custom Popover",exampleFile:"popover-custom",withSource:!0})]})]})]})})},route:"/feedback-popover"},{title:"Spinner",group:"feedback",component:function(){const[e,n]=he(!1);function t(){n(!e)}return gn(Ri.Page,{title:"Spinner",intro:gn(y,{children:gn("p",{children:[gn("code",{children:"Spinner"})," and ",gn("code",{children:"SpinnerOverlay"})," are simple components to render loading spinners."]})}),children:[gn(Ri.Section,{title:"Spinner",intro:gn("p",{children:[gn("code",{children:"Spinner"})," is a simple component to render a spinner with spokes, representing loading or other progress."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Spinner"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,children:gn(Wt,{})})})]}),gn(Ri.SectionL2,{title:"Component API",
+children:[gn(Ri.SectionL3,{title:"color",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set the foreground color of the spinner icon."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["'text' |'text-light' | 'text-inverted'","]"]})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'text-light'"})})]}),gn(Ri.Demo,{title:"Available Spinner colors",withSource:!0,children:gn("div",{className:"flex gap-x-8 items-center",children:[gn(Wt,{color:"text-light",size:"md"}),gn(Wt,{color:"text",size:"md"}),gn("div",{className:"bg-slate-7 rounded-lg flex items-center justify-center p-8",children:gn(Wt,{color:"text-inverted",size:"md"})})]})})]}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set relative size of the spinner."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'sm' | 'md' | 'lg' "})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{
+title:"Spinner sizes",withSource:!0,children:gn("div",{className:"flex gap-x-8 items-center",children:[gn(Wt,{size:"sm"}),gn(Wt,{size:"md"}),gn(Wt,{size:"lg"})]})})]})]})]}),gn(Ri.Section,{title:"SpinnerOverlay",intro:gn("p",{children:[gn("code",{children:"SpinnerOverlay"})," is a simple component that composes a spinner with an"," ",gn(Ri.Link,{href:"/layout-overlay",children:gn("code",{children:"Overlay"})}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"SpinnerOverlay"}),gn(Ri.SectionL3,{children:[gn(Ri.Demo,{title:"Basic SpinnerOverlay",children:[gn(it,{onClick:t,children:"Show overlay"}),e&&gn(Xt,{onClick:t})]}),gn(Ri.Code,{content:"<Button onClick={toggleOverlayOpen}>Show overlay</Button>\n{overlayOpen && <SpinnerOverlay onClick={toggleOverlayOpen} />}",title:"Source for spinner-overlay example"})]})]}),gn(Ri.SectionL2,{title:"Component API",children:gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"HTML attributes applied to the outermost full-screen element."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<JSX.HTMLAttributes<HTMLElement>, 'className' | 'open'>"})})]})})})]})]})},route:"/feedback-spinner"},{title:"ToastMessages",group:"feedback",component:function(){return gn(Ri.Page,{title:"ToastMessages",intro:gn("p",{children:["ToastMessages is a component that wraps"," ",gn(Ri.Link,{href:"/feedback-callout",children:"Callout"})," with out of the box accessibility, message auto-dismiss, dismiss-on-click, transitions and message positioning."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"ToastMessages"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic ToastMessages",children:gn(rl,{messages:ol,onMessageDismiss:()=>{}})})})]}),gn(Ri.SectionL2,{title:"Working with ToastMessages",children:[gn(Ri.SectionL3,{title:"Accessibility",children:[gn("p",{children:[gn("code",{children:"ToastMessages"
+})," includes an"," ",gn(Zt,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions",children:gn("code",{children:["aria-live=",'"',"polite",'"']})})," ","wrapper which will announce added toast messages to screen readers."]}),gn("p",{children:["Additionally, it is possible to append hidden messages that are only announced by screen readers, via"," ",gn("code",{children:"{ visuallyHidden: true }"})]})]}),gn(Ri.SectionL3,{title:"Positioning",children:gn("p",{children:["By default, every message rendered by ",gn("code",{children:"ToastMessages"})," ","will be relative positioned. It","'","s up to consumers to wrap it in an absolute-positioned container if desired."]})}),gn(Ri.SectionL3,{title:"Auto-dismiss",children:gn("p",{children:["All messages will be auto-dismissed after 5 seconds. Pass",gn("code",{children:"{ autoDismiss: false }"})," for those messages where you want this to be prevented."]})}),gn(Ri.SectionL3,{title:"Transitions",children:gn("p",{
+children:["All messages will fade-in when appended and fade-out when dismissed, but you can provide your own transition classes via"," ",gn("code",{children:"transitionClasses"})," prop."]})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"messages",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The list of toast messages to display at a given point."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"ToastMessage[]"})})]}),gn(Ri.Demo,{title:"ToastMessages with one message",withSource:!0,children:gn(rl,{messages:[ol[0]],onMessageDismiss:()=>{}})})]}),gn(Ri.SectionL3,{title:"onMessageDismiss",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback invoked with the toast message id, when it ends its dismiss transition. The message with that id can then be removed from the list."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(toastMessageId: string) => void"})})]}),gn(Ri.Demo,{
+title:"Click a message to dismiss it",withSource:!0,children:gn(rl,{messages:ol,onMessageDismiss:()=>{},_printOnDismiss:!0})})]}),gn(Ri.SectionL3,{title:"transitionClasses",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Custom CSS classes to apply to toast messages when appended and/or dismissed. By default they get"," ",gn("code",{children:"animate-fade-in"})," and ",gn("code",{children:"animate-fade-out"})]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"{ transitionIn?: string; transitionOut?: string; }"})})]}),gn(Ri.Demo,{title:"Custom transitions",withSource:!0,children:gn(rl,{messages:ol,onMessageDismiss:()=>{},transitionClasses:{transitionIn:"animate-slide-in-from-right",transitionOut:"animate-slide-out-to-right"},_allowAppending:!0})})]})]})]})})},route:"/feedback-toast-messages"},{title:"Button",group:"input",component:function(){return gn(Ri.Page,{title:"Button",intro:gn("p",{
+children:["Button components apply common styling and accessibility attributes to"," ",gn("code",{children:"button"})," elements."]}),children:[gn(Ri.Section,{title:"Button",children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Button"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Button",withSource:!0,children:gn(it,{icon:Tn,onClick:()=>alert("You clicked the button"),children:"Click me"})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Button"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"expanded",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["This ","button's"," associated content is expanded."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"icon",children:gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["An SVG icon to display to the left of the ","button's"," content."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]})}),gn(Ri.SectionL3,{title:"pressed",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"This button is active"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Used to set an ",gn("code",{children:"aria-label"})," attribute"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Button"})," accepts HTML attribute props applicable to"," ",gn("code",{children:"HTMLButtonElement"}),"."]}),gn(Ri.InfoItem,{
+label:"type",children:gn("code",{children:"Omit<preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"Button"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set a defined theme on the button. Set to ","'custom'"," to disable theming and provide your own theming with"," ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'primary' | 'secondary' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'secondary'"})})]}),gn(Ri.Demo,{title:"variant: 'secondary'",withSource:!0,children:[gn(it,{variant:"secondary",children:"Default"}),gn(it,{variant:"secondary",children:[gn(Nn,{}),"Default"]
+}),gn(it,{variant:"secondary",pressed:!0,children:"Pressed"}),gn(it,{variant:"secondary",expanded:!0,children:"Expanded"}),gn(it,{variant:"secondary",disabled:!0,children:"Disabled"})]}),gn(Ri.Demo,{title:"variant: 'primary'",withSource:!0,children:[gn(it,{variant:"primary",children:"Default"}),gn(it,{variant:"primary",children:[gn(Pn,{}),"Default"]}),gn(it,{variant:"primary",pressed:!0,children:"Pressed"}),gn(it,{variant:"primary",expanded:!0,children:"Expanded"}),gn(it,{variant:"primary",disabled:!0,children:"Disabled"})]}),gn(Ri.Demo,{title:"variant: 'custom' (custom theming)",withSource:!0,children:[gn(it,{variant:"custom",classes:"border rounded-md",children:"Default"}),gn(it,{variant:"custom",classes:"border rounded-md",children:[gn(Pn,{}),"Default"]}),gn(it,{variant:"custom",pressed:!0,classes:"border rounded-md",children:"Pressed"}),gn(it,{variant:"custom",expanded:!0,classes:"border rounded-md",children:"Expanded"}),gn(it,{variant:"custom",disabled:!0,classes:"border rounded-md",children:"Disabled"
+})]})]}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the relative internal sizing of the button. Set to"," ","'custom'"," to disable sizing classes and set your own with"," ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'xs' | 'sm' | 'md' | 'lg' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{title:"Button sizes",withSource:!0,children:[gn(it,{icon:Pn,size:"xs",children:"(xs)"}),gn(it,{icon:Pn,size:"sm",children:"(sm)"}),gn(it,{icon:Qn,size:"md",children:"(md)"}),gn(it,{icon:Tn,size:"lg",children:"(lg)"}),gn(it,{icon:Tn,size:"custom",classes:"p-2 gap-x-3",children:"(custom)"})]})]}),gn(Ri.SectionL3,{title:"unstyled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set this to disable all styling and provide your own styling with ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"unstyled Button with custom styling",withSource:!0,children:gn(it,{unstyled:!0,classes:"border rounded-md p-2 bg-stone-100 font-normal color-slate-600 hover:bg-stone-50 hover:color-slate-700 hover:shadow-lg",children:"Custom button"})})]})]})]}),gn(Ri.Section,{title:"IconButton",intro:gn("p",{children:[gn("code",{children:"IconButton"})," is for icon-only ",gn("code",{children:"Button"}),"s."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"IconButton"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic IconButton",withSource:!0,children:gn(rt,{onClick:()=>alert("You clicked the button"),icon:Qn,title:"Reply"})})})]}),gn(Ri.SectionL2,{title:"Working with IconButtons",children:gn(Ri.SectionL3,{title:"Styling the icon",children:[gn("p",{
+children:["If you need more control over icon styles, use an icon component directly in the content instead of passing an ",gn("code",{children:"icon"})," ","prop."]}),gn(Ri.Demo,{withSource:!0,children:[gn(rt,{title:"Share",children:gn(Yn,{className:"w-8 h-8"})}),gn(rt,{title:"Share",children:gn(Yn,{className:"w-3 h-3"})})]})]})}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"title"})," is required for ",gn("code",{children:"IconButton"}),"s."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]})}),gn(Ri.SectionL3,{title:"...buttonProps",children:[gn("code",{children:"IconButton"})," accepts and forwards all props from the"," ",gn("code",{children:"Button"})," component API."]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{
+label:"description",children:[gn("code",{children:"IconButton"})," accepts HTML attribute props applicable to ",gn("code",{children:"HTMLButtonElement"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"IconButton"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set a defined theme on the button. Set to ","'custom'"," to disable theming and provide your own theming with"," ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'primary' | 'secondary' | 'dark' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{
+children:"'secondary'"})})]}),gn("p",{children:["The following examples show themed ",gn("code",{children:"IconButton"}),"s in default state, ",gn("code",{children:"pressed"}),", ",gn("code",{children:"expanded"})," and"," ",gn("code",{children:"disabled"}),"."]}),gn(Ri.Demo,{title:"variant: 'secondary'",withSource:!0,children:[gn(rt,{variant:"secondary",title:"Watch out!",icon:Mn}),gn(rt,{variant:"secondary",title:"Watch out!",icon:Mn,pressed:!0}),gn(rt,{variant:"secondary",title:"Watch out!",icon:Mn,expanded:!0}),gn(rt,{variant:"secondary",title:"Watch out!",icon:Mn,disabled:!0})]}),gn(Ri.Demo,{title:"variant: 'primary'",withSource:!0,children:[gn(rt,{variant:"primary",title:"Watch out!",icon:Mn}),gn(rt,{variant:"primary",title:"Watch out!",icon:Mn,pressed:!0}),gn(rt,{variant:"primary",title:"Watch out!",icon:Mn,expanded:!0}),gn(rt,{variant:"primary",title:"Watch out!",icon:Mn,disabled:!0})]}),gn(Ri.Demo,{classes:"bg-slate-0 p-4",title:"variant: 'dark'",withSource:!0,children:[gn(rt,{variant:"dark",
+title:"Watch out!",icon:Mn}),gn(rt,{variant:"dark",title:"Watch out!",icon:Mn,pressed:!0}),gn(rt,{variant:"dark",title:"Watch out!",icon:Mn,expanded:!0}),gn(rt,{variant:"dark",title:"Watch out!",icon:Mn,disabled:!0})]}),gn(Ri.Demo,{title:"variant: 'custom' with custom theming",withSource:!0,children:[gn(rt,{classes:"border rounded-md text-slate-600",variant:"custom",title:"Watch out!",icon:Mn}),gn(rt,{classes:"border rounded-md text-slate-800 bg-stone-100 border-slate-400",variant:"custom",title:"Watch out!",icon:Mn,pressed:!0}),gn(rt,{variant:"custom",classes:"border rounded-md text-slate-800 bg-stone-100 border-slate-400",title:"Watch out!",icon:Mn,expanded:!0}),gn(rt,{classes:"border rounded-md text-slate-400",variant:"custom",title:"Watch out!",icon:Mn,disabled:!0})]})]}),gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set relative internal sizing. Set to ","'custom'"," to disable sizing classes and set your own with ",gn("code",{
+children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'xs' | 'sm' | 'md' | 'lg' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{title:"size: 'xs', 'sm', 'md', 'lg' and 'custom'",withSource:!0,children:[gn(rt,{icon:Pn,size:"xs",title:"Edit"}),gn(rt,{icon:Pn,size:"sm",title:"Edit"}),gn(rt,{icon:Pn,size:"md",title:"Edit"}),gn(rt,{icon:Pn,size:"lg",title:"Edit"}),gn(rt,{icon:Pn,size:"custom",title:"Edit",classes:"p-3"})]})]}),gn(Ri.SectionL3,{title:"unstyled",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set this to disable all styling and provide your own styling with ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})})]})]})]})},route:"/input-button"},{title:"Checkbox",group:"input",component:function(){const[e,n]=he(!1);return gn(Ri.Page,{title:"Checkbox",
+intro:gn("p",{children:[gn("code",{children:"Checkbox"})," is a composite component that includes a checkbox input and label."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Checkbox"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Checkbox",withSource:!0,children:gn("div",{className:"flex flex-col",children:[gn(ft,{children:"Click me"}),gn(ft,{disabled:!0,children:"Disabled"})]})})})]}),gn(Ri.SectionL2,{title:"Working with Checkboxes",children:[gn(Ri.SectionL3,{title:"Controlled Checkboxes",children:[gn("p",{children:["The presence of a ",gn("code",{children:"checked"})," prop will make the"," ",gn("code",{children:"Checkbox"})," behave as a controlled component. Consuming components should respond to the ",gn("code",{children:"onChange"})," event."]}),gn(Ri.Demo,{title:"Controlling a Checkbox with `checked`",withSource:!0,children:gn(ft,{checked:e,onChange:e=>{n(e.target.checked)},children:"Controlled checkbox"})}),gn(Ri.Code,{
+content:"const [checked, setChecked] = useState(false);\n\nconst handleControlledChange = e => {\n  setChecked(e.target.checked);\n};\n\n<Checkbox\n  checked={checked}\n  onChange={handleControlledChange}\n>\n  Controlled checkbox\n</Checkbox>\n",size:"sm",title:"When the `checked prop` is present, Checkbox will behave as a controlled component"}),gn(Ri.Demo,{title:"Don't forget to handle events for controlled Checkboxes",withSource:!0,children:gn(ft,{checked:!1,children:gn("div",{className:"text-red-error",children:"This checkbox will not update when clicked"})})})]}),gn(Ri.SectionL3,{title:"Customizing Checkbox icons",children:[gn("p",{children:[gn("code",{children:"Checkbox"})," uses icons to style the checkbox, in unchecked and checked states. Custom icons may be provided if desired."]}),gn(Ri.Demo,{withSource:!0,title:"Checkbox with custom icon and checkedIcon",children:gn(ft,{icon:Fn,checkedIcon:et,defaultChecked:!0})})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{
+children:"Checkbox"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"checked",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set whether the ",gn("code",{children:"Checkbox"})," is checked. The presence of this component indicates that the ",gn("code",{children:"Checkbox"})," is being used as a controlled component."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"defaultChecked",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Whether the ",gn("code",{children:"Checkbox"})," is initially checked. For use when ",gn("code",{children:"Checkbox"})," is an uncontrolled component."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",
+children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Uncontrolled Checkbox with defaultChecked",withSource:!0,children:gn(ft,{defaultChecked:!0,children:"Default checked"})})]}),gn(Ri.SectionL3,{title:"icon",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"IconComponent"})," to use as the (unchecked) checkbox icon"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]})}),gn(Ri.SectionL3,{title:"checkedIcon",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"IconComponent"})," to use as the (checked) checkbox icon"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Checkbox"})," accepts HTML attributes for input elements"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"JSX.InputHTMLAttributes<HTMLInputElement>"})})]})})]})]})},route:"/input-checkbox"},{title:"CloseButton",group:"input",component:function(){return gn(Ri.Page,{title:"CloseButton",intro:gn("p",{children:"Render a close button that can take a click handler or find one in context."}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"CloseButton"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic CloseButton",children:gn(ct,{})})})]}),gn(Ri.SectionL2,{title:"Working with CloseButton",children:gn(Ri.SectionL3,{title:"Click handlers for close buttons",children:[gn("p",{children:["You can pass an ",gn("code",{children:"onClick"})," prop to"," ",gn("code",{children:"CloseButton"})," like any button and that will be used. If no ",gn("code",{children:"onClick"})," is provided, ",gn("code",{children:"CloseButton"})," will check for any available ",gn("code",{children:"CloseableContext"})," close handler and use that, if found."]}),gn("p",{
+children:["For example, ",gn("code",{children:"Dialog"})," components provide a"," ",gn("code",{children:"CloseableContext"}),". Any ",gn("code",{children:"CloseButton"})," inside of a ",gn("code",{children:"Dialog"})," with an ",gn("code",{children:"onClose"})," handler will use that handler automatically: you do not need to provide an"," ",gn("code",{children:"onClick"})," prop in these cases."]}),gn(Ri.Demo,{title:"Dialog with CloseButton",withSource:!0,children:gn(cl,{variant:"custom",children:gn("div",{className:"flex gap-x-3",children:[gn("div",{className:"grow",children:"Example custom dialog"}),gn(ct,{})]})})})]})}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"CloseButton"})," provides the same API as"," ",gn("code",{children:gn(Ri.Link,{href:"/input-button",children:"IconButton"})}),"."]}),gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["This is an optional prop for ",gn("code",{
+children:"CloseButton"})," (it is required for ",gn("code",{children:"IconButton"}),")."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'Close'"})})]})})]})]})})},route:"/input-closebutton"},{title:"Input",group:"input",component:function(){return gn(Ri.Page,{title:"Input",intro:gn("p",{children:[gn("code",{children:"Input"})," is a presentational component for styling textual"," ",gn("code",{children:"input"})," elements."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Input"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Input",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(vt,{"aria-label":"Input example",placeholder:"Placeholder..."})})})})]}),gn(Ri.SectionL2,{title:"Working with Inputs",children:[gn(Ri.SectionL3,{title:"Labels",children:[gn("p",{
+children:["Hypothesis does not currently have a design pattern for labeling text inputs. However, for accessibility, it is critical that an"," ",gn("code",{children:"Input"})," have either an associated ",gn("code",{children:"label"})," ","element or an ",gn("code",{children:"aria-label"})," attribute."]}),gn(Ri.Demo,{title:"Input with label",withSource:!0,children:gn("div",{className:"w-[350px]",children:[gn("label",{htmlFor:"input-with-label",className:"font-semibold",children:"Label"}),gn(vt,{id:"input-with-label",placeholder:"Placeholder..."})]})})]}),gn(Ri.SectionL3,{title:"Disabled inputs",children:[gn("p",{children:[gn("code",{children:"Input"}),"s can be disabled by applying the HTML"," ",gn("code",{children:"disabled"})," attribute."]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(vt,{"aria-label":"Example input",placeholder:"Placeholder...",disabled:!0})})})]}),gn(Ri.SectionL3,{title:"Validation errors",children:[gn("p",{
+children:["Validation errors can be triggered as a result of standard HTML attributes such as ",gn("code",{children:"required"})," or a custom error set using the ",gn("code",{children:"error"})," prop. Errors set using"," ",gn("code",{children:"error"})," are synced to the browser via"," ",gn("code",{children:"HTMLInputElement.setCustomValidity"}),". This allows the browser to alert the user when they try to submit the containing form."]}),gn("p",{children:["If the input has custom validation checks, they should be performed in the element's ",gn("code",{children:"onChange"})," handler."]}),gn("p",{children:["If the form is using custom UI to present validation errors, inputs must link to the element displaying their validation error using ",gn("code",{children:"aria-describedby"}),"."]})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Input"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"
+}),".",gn(Ri.SectionL3,{title:"error",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set ",gn("code",{children:"error"})," to indicate a validation error. This implicitly sets"," ",gn("code",{children:["feedback=",'"',"error",'"']}),". In addition to visually and semantically indicating the error state, this will set a custom validation error on the input using ",gn("code",{children:"HTMLInputElement.setCustomValidity"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"feedback",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set ",gn("code",{children:"feedback"})," to indicate that there is an associated error or warning for the ",gn("code",{children:"Input"}),".",gn("br",{}),"Notice that setting"," ",gn("code",{children:["feedback=",'"',"error",'"']})," ","will implicitly set"," ",gn("code",{children:["aria-invalid=",'"',"true",'"']}),"."]}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:['"error"'," | ",'"warning"']})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{withSource:!0,children:[gn("div",{className:"w-[350px]",children:gn(vt,{"aria-label":"Input with error",feedback:"error",value:"something invalid"})}),gn("div",{className:"w-[350px]",children:gn(vt,{"aria-label":"Input with warning",feedback:"warning",value:"might be a problem"})})]})]}),gn(Ri.SectionL3,{title:"type",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Input"})," supports several input types"]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'text' | 'url' | 'email' | 'search'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'text'"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Input"})," accepts HTML attributes for input elements."]}),gn(Ri.InfoItem,{label:"type",
+children:gn("code",{children:"JSX.InputHTMLAttributes<HTMLInputElement>"})})]})})]})]})})},route:"/input-input"},{title:"InputGroup",group:"input",component:function(){return gn(Ri.Page,{title:"InputGroup",intro:gn("p",{children:[gn("code",{children:"InputGroup"})," is a presentational component that provides layout and styling for groups of input components."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"InputGroup"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic InputGroup containing an Input and an IconButton",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(ot,{children:[gn(vt,{name:"test"}),gn(rt,{icon:En,title:"copy",variant:"dark"})]})})})})]}),gn(Ri.SectionL2,{title:"Working with InputGroups",children:[gn(Ri.SectionL3,{title:"Composing InputGroups",children:[gn("p",{children:["The following input components can be used in an"," ",gn("code",{children:"InputGroup"}),":"]}),gn("ul",{children:[gn("li",{children:gn("code",{
+children:"Input"})}),gn("li",{children:gn("code",{children:"IconButton"})}),gn("li",{children:gn("code",{children:"Select"})}),gn("li",{children:gn("code",{children:"MultiSelect"})})]}),gn(Ri.Demo,{title:"Select and IconButton components in InputGroup",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(ot,{children:[gn(rt,{icon:_n,title:"Previous",variant:"dark"}),gn(Nt,{value:"1",buttonContent:"Apple",onChange:()=>{},children:[gn(Nt.Option,{value:"1",children:"Apple"}),gn(Nt.Option,{value:"2",children:"Banana"}),gn(Nt.Option,{value:"3",children:"Cherries"})]}),gn(rt,{icon:Ln,title:"Next",variant:"dark"})]})})})]}),gn(Ri.SectionL3,{title:"Sizing InputGroups",children:gn(Ri.Demo,{title:"Scaling to local font size",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn("div",{className:"text-xs",children:gn(ot,{children:[gn(vt,{name:"test"}),gn(rt,{icon:En,title:"copy",size:"sm",variant:"dark"})]})})})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{
+children:[gn("code",{children:"InputGroup"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"InputGroup"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]})})},route:"/input-input-group"},{title:"OptionButton",group:"input",component:function(){return gn(Ri.Page,{title:"OptionButton",intro:gn("p",{children:[gn("code",{children:"OptionButton"})," is a simple component for presenting an option as part of a set of options. It can be used in places where it is impractical or undesirable to use an equivalent"," ",gn("code",{children:'input type="radio"'})," or ",gn("code",{children:"select"})," element."," ",gn("code",{children:"OptionButton"})," wraps"," ",gn(Ri.Link,{href:"/input-button",
+children:gn("code",{children:"Button"})}),"."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"OptionButton"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic OptionButton",children:gn("div",{className:"w-[250px]",children:gn(wt,{children:"Option Alpha"})})})})]}),gn(Ri.SectionL2,{title:"Working with OptionButton",children:gn(Ri.SectionL3,{title:"Multiple OptionButtons",children:[gn("p",{children:[gn("code",{children:"OptionButton"})," is designed for use in a set, similar to an ",gn("code",{children:"option"})," element or a radio button. While not enforced, a maximum of one ",gn("code",{children:"OptionButton"})," in a set should be selected. There is also ",gn("code",{children:"disabled"}),"styling."]}),gn("p",{children:["To facilitate alignment, ",gn("code",{children:"OptionButton"})," stretches to the full width of its container."]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-[280px] space-y-2",children:[gn(wt,{
+children:"Option Alpha"}),gn(wt,{selected:!0,children:"Option Bravo"}),gn(wt,{children:"Option Charlie-Delta-Echo"}),gn(wt,{disabled:!0,children:"Option Foxtrot"}),gn(wt,{children:"Option Golf"})]})})]})}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"details",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Optional content to display at right side of button. Be sure to set a useful ",gn("code",{children:"title"})," (used for generating"," ",gn("code",{children:"aria-label"}),") when constructing such buttons."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]}),gn(Ri.Demo,{title:"OptionButton with details",withSource:!0,children:gn("div",{className:"w-[250px]",children:gn(wt,{details:"PDF",title:"Select a PDF from Google Drive",children:"Google Drive"})})})]}),gn(Ri.SectionL3,{title:"selected",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:["The option represented by the button is selected. A maximum of one ",gn("code",{children:"OptionButton"})," in a set should be selected at any time. This is an alias for the ",gn("code",{children:"Button"})," ",gn("code",{children:"pressed"})," prop."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Selected OptionButton",withSource:!0,children:gn("div",{className:"w-[250px]",children:gn(wt,{details:"PDF",title:"Select a PDF from Google Drive",selected:!0,children:"Google Drive"})})})]}),gn(Ri.SectionL3,{title:"...buttonProps",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"OptionButton"})," accepts and forwards all"," ",gn(Ri.Link,{href:"/input-button",children:gn("code",{children:"Button"})})," ","component API props. Styling API props are not forwarded."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"Omit<ButtonProps, 'size' | 'unstyled' | 'classes' | 'variant'>"})})]})})]})]})})},route:"/input-option-button"},{title:"RadioGroup",group:"input",component:function(){return gn(Ri.Page,{title:"Radio group",intro:gn("p",{children:[gn("code",{children:"RadioGroup"})," is a component implementing the"," ",gn(Zt,{href:"https://www.w3.org/WAI/ARIA/apg/patterns/radio/",target:"_blank",children:"Radio Group Pattern"}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"RadioGroup"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic RadioGroup",withSource:!0,exampleFile:"radio-group-horizontal"})})]}),gn(Ri.SectionL2,{title:"Working with RadioGroups",children:[gn("p",{children:[gn("code",{children:"RadioGroup"})," can render a list of radios arranged horizontally or vertically. Each radio can optionally render a subtitle, and be individually disabled."]}),gn("p",{
+children:"Radios can be focused via arrow keys. Right/Down to move focus to the next radio, and Up/Left for the previous one."}),gn(Ri.SectionL3,{title:"RadioGroup direction",children:gn(Ri.Demo,{title:"Vertical RadioGroup",withSource:!0,exampleFile:"radio-group-vertical"})}),gn(Ri.SectionL3,{title:"RadioGroup with complex layout",children:[gn("p",{children:["If the ",gn("code",{children:"RadioGroup"})," ",gn("code",{children:"direction"})," does not fit your needs, you can provide a more complex container around radios, like a responsive set of columns or a grid layout."]}),gn(Ri.Demo,{title:"RadioGroup grid layout",withSource:!0,exampleFile:"radio-group-grid-layout"})]}),gn(Ri.SectionL3,{title:"Labelling RadioGroups",children:[gn("p",{children:["There are two ways to label a ",gn("code",{children:"RadioGroup"}),". Make sure to use at least one of them."]}),gn(Ri.Demo,{title:"Via aria-label",withSource:!0,exampleFile:"radio-group-aria-label"}),gn(Ri.Demo,{title:"Via aria-labelledby",withSource:!0,
+exampleFile:"radio-group-aria-labelledby"})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"aria-label",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Sets the ",gn("code",{children:"aria-label"})," attribute in the"," ",gn("code",{children:"RadioGroup"}),". Make sure either this or"," ",gn("code",{children:"aria-labelledby"})," is used."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"aria-labelledby",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Sets the ",gn("code",{children:"aria-labelledby"})," attribute in the"," ",gn("code",{children:"RadioGroup"}),". Make sure either this or"," ",gn("code",{children:"aria-label"})," is used."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{
+children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"children",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["The content to render inside the ",gn("code",{children:"RadioGroup"}),", typically a list of ",gn("code",{children:"RadioGroup.Radio"})," components."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"ComponentChildren"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"direction",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Whether the radios should be stacked horizontally or vertically."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["'","vertical","'"," | ","'","horizontal","'"]})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:["'","horizontal","'"]})})]})}),gn(Ri.SectionL3,{title:"disabled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:["If true, it will disable all radios, regardless of the value of their own ",gn("code",{children:"disabled"})," prop.",gn("br",{}),"Disabled radios are never marked as selected."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Disabled RadioGroup",withSource:!0,exampleFile:"radio-group-disabled"})]}),gn(Ri.SectionL3,{title:"name",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["When provided, a hidden ",gn("code",{children:"input"})," will be included, with this name and selected value, allowing ",gn("code",{children:"RadioGroup"})," to be used as a regular form control."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Named RadioGroup in form",withSource:!0,exampleFile:"radio-group-in-form"})]}),gn(Ri.SectionL3,{
+title:"onChange",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"A callback invoked when selected radio changes."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["(newValue: T) ","=>"," void"]})})]})}),gn(Ri.SectionL3,{title:"selected",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The value for currently selected radio."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"T | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})})]})]})},route:"/input-radio-group"},{title:"Selects",group:"input",component:function(){return gn(Ri.Page,{title:"Selects",intro:gn("p",{children:[gn("code",{children:"Select"})," and ",gn("code",{children:"MultiSelect"})," are composite components which behave like the native ",gn("code",{children:"<select>"})," ","element."]}),children:[gn(Ri.Section,{title:"Select",intro:gn("p",{children:[gn("code",{children:"Select"
+})," renders a single-selection drop-down control."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Select"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Select",exampleFile:"select-basic",withSource:!0})})]}),gn(Ri.SectionL2,{title:"Working with Select",children:[gn("p",{children:[gn("code",{children:"Select"})," toggles a listbox where ",gn("code",{children:"Options"}),"'"," UI can be customized and values can be objects."]}),gn("p",{children:["A ",gn(Ri.Link,{href:"/feedback-popover",children:"Popover"})," ","component is used to wrap the listbox and ensure it is always correctly positioned."]}),gn(Ri.SectionL3,{title:"Composing and styling Selects",children:[gn(Ri.Demo,{title:"Select with custom Options",exampleFile:"select-with-custom-options",withSource:!0}),gn(Ri.Demo,{title:"Select in InputGroup",exampleFile:"select-in-input-group",withSource:!0})]}),gn(Ri.SectionL3,{title:"Select with many options",children:gn(Ri.Demo,{title:"Select with many options",children:gn(pl,{
+items:[...ml.map((({id:e,name:n})=>({id:`1${e}`,name:`1 ${n}`}))),...ml.map((({id:e,name:n})=>({id:`2${e}`,name:`2 ${n}`}))),...ml.map((({id:e,name:n})=>({id:`3${e}`,name:`3 ${n}`}))),...ml.map((({id:e,name:n})=>({id:`4${e}`,name:`4 ${n}`}))),...ml.map((({id:e,name:n})=>({id:`5${e}`,name:`5 ${n}`}))),...ml.map((({id:e,name:n})=>({id:`6${e}`,name:`6 ${n}`})))]})})}),gn(Ri.SectionL3,{title:"Labeling Select",children:[gn("p",{children:["There are three ways to label a ",gn("code",{children:"Select"}),". Make sure you always use one of them."]}),gn(Ri.Demo,{title:gn(y,{children:["Via"," ",gn("code",{children:["<","label ","/>"]})," ","linked to ",gn("code",{children:"buttonId"})]}),exampleFile:"select-basic",withSource:!0}),gn(Ri.Demo,{title:"Via aria-label",exampleFile:"select-aria-label",withSource:!0}),gn(Ri.Demo,{title:"Via aria-labelledby",exampleFile:"select-aria-labelledby",withSource:!0})]}),gn(Ri.SectionL3,{title:"Select with long content",children:[gn("p",{children:[gn("code",{children:"Select"
+})," makes sure the button content never overflows, and applies ",gn("code",{children:"text-overflow: ellipsis"}),"."]}),gn("p",{children:["If you provide more complex children to ",gn("code",{children:"buttonContent"}),", and the default hidden overflow logic does not work for your use case, it is up to you to handle the overflow logic in your components."]}),gn("p",{children:"On the other hand, the listbox will always grow to fit its options."}),gn(Ri.Demo,{title:"Plain text",children:gn("div",{className:"mx-auto",children:gn(fl,{textOnly:!0,buttonClasses:"!w-36",items:ml.map((({name:e,...n})=>({...n,name:`${e} (this item has very long text)`})))})})}),gn(Ri.Demo,{title:"Custom options",children:gn("div",{className:"mx-auto",children:gn(fl,{buttonClasses:"!w-36"})})}),gn(Ri.Demo,{title:"Input group",children:gn("div",{className:"mx-auto",children:gn(sl,{buttonClasses:"!w-36",wrapperClasses:""})})})]})]}),gn(Ri.SectionL2,{title:"Select component API",children:[gn("code",{children:"Select"
+})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"}),gn(Ri.SectionL3,{title:"value",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Represents currently selected Option."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"T"})})]})}),gn(Ri.SectionL3,{title:"onChange",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"A callback invoked every time selected value changes."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(newValue: T) => void"})})]})}),gn(Ri.SectionL3,{title:"buttonContent",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The content to be displayed in the toggle button."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"ComponentChildren"})})]})}),gn(Ri.SectionL3,{title:"buttonId",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["The toggle button","'","s ",gn("code",{
+children:"id"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"disabled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Whether the Select is disabled or not."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Disabled Select",exampleFile:"select-disabled",withSource:!0})]}),gn(Ri.SectionL3,{title:"alignListbox",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Whether the listbox should be aligned to the right or left side of the toggle button."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'left' | 'right'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'left'"})})]}),gn(Ri.Demo,{title:"Right-aligned listbox",exampleFile:"select-right",withSource:!0})]
+}),gn(Ri.SectionL3,{title:"buttonClasses",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Additional classes to pass to toggle button."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | string[]"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Custom button",children:gn("div",{className:"w-96 mx-auto",children:gn(fl,{buttonClasses:"!bg-yellow-notice"})})})]}),gn(Ri.SectionL3,{title:"containerClasses",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Additional classes to pass to container."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | string[]"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Custom container",children:gn("div",{className:"w-96 mx-auto",children:gn(fl,{containerClasses:"border-4 border-yellow-notice"})})})]}),gn(Ri.SectionL3,{title:"listboxAsPopover",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:["Determines if the listbox should be rendered using the"," ",gn(Zt,{target:"_blank",href:"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",children:"popover API"}),". It","'","s mainly used as a test seam, but can help explicitly disabling this behavior if needed."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:[gn("code",{children:"true"})," if the browser supports ",gn("code",{children:"[popover]"}),". Otherwise it is ",gn("code",{children:"false"})]})]}),gn(Ri.Demo,{title:"Non-popover listbox",exampleFile:"select-non-popover-listbox",withSource:!0})]}),gn(Ri.SectionL3,{title:"popoverClasses",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Additional classes to pass to the popover."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | string[]"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]
+}),gn(Ri.Demo,{title:"Custom popover",children:gn("div",{className:"w-96 mx-auto",children:gn(fl,{popoverClasses:"border-4 border-yellow-notice"})})})]}),gn(Ri.SectionL3,{title:"listboxOverflow",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Determines the behavior of the listbox options when their content is larger than the listbox.",gn("ul",{className:"list-disc",children:[gn("li",{children:[gn("code",{children:"'truncate'"}),": Text will use one line and be truncated with an ellipsis."]}),gn("li",{children:[gn("code",{children:"'wrap'"}),": Text will span multiple lines if needed, ensuring all content is visible."]})]})]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'truncate' | 'wrap'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'truncate'"})})]}),gn(Ri.Demo,{title:"Truncate listbox options",exampleFile:"select-truncate-listbox",withSource:!0}),gn(Ri.Demo,{title:"Wrap listbox options",exampleFile:"select-wrap-listbox",withSource:!0})]
+}),gn(Ri.SectionL3,{title:"onPopoverScroll",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A callback passed to the ",gn("code",{children:"Popover"}),"'","s ",gn("code",{children:"onScroll"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["() ","=>"," void ","|"," undefined"]})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})})]}),gn(Ri.SectionL2,{title:"Select.Option component API",children:[gn(Ri.SectionL3,{title:"children",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Content of the option. You can pass a callback to receive the option status (",gn("code",{children:"disabled"})," and ",gn("code",{children:"selected"}),")."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["ComponentChildren | ((","{"," disabled, selected ","}",") ","=>"," ","ComponentChildren)"]})})]})}),gn(Ri.SectionL3,{title:"value",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"The value to set when this option is selected."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"T"})})]})}),gn(Ri.SectionL3,{title:"disabled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Whether the option is disabled or not."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{title:"Disabled options",children:gn("div",{className:"w-96 mx-auto",children:gn(fl,{items:ml.map((e=>"4"!==e.id?e:{...e,disabled:!0}))})})})]}),gn(Ri.SectionL3,{title:"classes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["CSS class(es) that will be appended to the CSS classes applied to the options","'","s outermost element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | string[] | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{
+title:"elementRef",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A ",gn("code",{children:"Ref"})," applied to the option","'","s outermost element."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["MutableRef","<","HTMLElement | undefined",">"," | undefined"]})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})}),gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["If provided, it is set as the option","'","s ",gn("code",{children:"title"})," ","attribute."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})})]})]}),gn(Ri.Section,{title:"MultiSelect",intro:gn("p",{children:[gn("code",{children:"MultiSelect"})," is a variant of ",gn("code",{children:"Select"})," that allows multiple options to be selected at once. It has the same API except that ",gn("code",{
+children:"value"})," accepts, and ",gn("code",{children:"onChange"})," ","receives receive, arrays rather than a single item."]}),children:gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"MultiSelect"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic MultiSelect",exampleFile:"select-multi-select",withSource:!0})})]})})]})},route:"/input-select"},{title:"Textarea",group:"input",component:function(){return gn(Ri.Page,{title:"Textarea",intro:gn("p",{children:[gn("code",{children:"Textarea"})," is a presentational component for styling"," ",gn("code",{children:"textarea"})," elements."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Textarea"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Textarea",withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(Mt,{"aria-label":"Textarea example",placeholder:"Placeholder..."})})})})]}),gn(Ri.SectionL2,{title:"Working with Textareas",children:[gn(Ri.SectionL3,{title:"Labels",children:[gn("p",{
+children:["Hypothesis does not currently have a design pattern for labeling textareas. However, for accessibility, it is critical that a"," ",gn("code",{children:"Textarea"})," have either an associated ",gn("code",{children:"label"})," ","element or an ",gn("code",{children:"aria-label"})," attribute."]}),gn(Ri.Demo,{title:"Textarea with label",withSource:!0,children:gn("div",{className:"w-[350px]",children:[gn("label",{htmlFor:"textarea-with-label",className:"font-semibold",children:"Label"}),gn(Mt,{id:"textarea-with-label",placeholder:"Placeholder..."})]})})]}),gn(Ri.SectionL3,{title:"Disabled Textareas",children:[gn("p",{children:[gn("code",{children:"Textarea"}),"s can be disabled by applying the HTML"," ",gn("code",{children:"disabled"})," attribute."]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"w-[350px]",children:gn(Mt,{"aria-label":"Example textarea",placeholder:"Placeholder...",disabled:!0})})})]}),gn(Ri.SectionL3,{title:"Validation errors",children:[gn("p",{
+children:["Validation errors can be triggered as a result of standard HTML attributes such as ",gn("code",{children:"required"})," or a custom error set using the ",gn("code",{children:"error"})," prop. Errors set using"," ",gn("code",{children:"error"})," are synced to the browser via"," ",gn("code",{children:"HTMLTextAreaElement.setCustomValidity"}),". This allows the browser to alert the user when they try to submit the containing form."]}),gn("p",{children:["If the text area has custom validation checks, they should be performed in the element's ",gn("code",{children:"onChange"})," handler."]}),gn("p",{children:["If the form is using custom UI to present validation errors, inputs must link to the element displaying their validation error using ",gn("code",{children:"aria-describedby"}),"."]})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Textarea"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",
+children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"error",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set ",gn("code",{children:"error"})," to indicate a validation error. This implicitly sets"," ",gn("code",{children:["feedback=",'"',"error",'"']}),". In addition to visually and semantically indicating the error state, this will set a custom validation error on the textarea using ",gn("code",{children:"HTMLTextAreaElement.setCustomValidity"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"feedback",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set ",gn("code",{children:"feedback"})," to indicate that there is an associated error or warning for the ",gn("code",{children:"Textarea"}),".",gn("br",{}),"Notice that setting"," ",gn("code",{children:["feedback=",'"',"error",'"']})," ","will implicitly set"," ",gn("code",{children:["aria-invalid=",'"',"true",'"']}),"."]
+}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:['"error"'," | ",'"warning"']})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]}),gn(Ri.Demo,{withSource:!0,children:[gn("div",{className:"w-[350px]",children:gn(Mt,{"aria-label":"Textarea with error",feedback:"error",value:"something invalid"})}),gn("div",{className:"w-[350px]",children:gn(Mt,{"aria-label":"Textarea with warning",feedback:"warning",value:"might be a problem"})})]})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Textarea"})," accepts HTML attributes for textarea elements."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.TextareaHTMLAttributes<HTMLTextareaElement>"})})]})})]})]})})},route:"/input-textarea"},{title:"Card",group:"layout",component:function(){return gn(Ri.Page,{title:"Card",intro:gn("p",{children:["The ",gn("code",{children:"Card"
+})," family of presentational components provide support for laying out content in a card-like interface."]}),children:[gn(Ri.Section,{title:"Card",intro:gn("p",{children:[gn("code",{children:"Card"})," lays out content in a frame, with dimensional shadows by default."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Card, CardContent"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Card",withSource:!0,children:gn(xn,{children:gn(Cn,{children:gn(Gi,{size:"xs"})})})})})]}),gn(Ri.SectionL2,{title:"Working with Cards",children:gn(Ri.SectionL3,{title:"Full-width content",children:[gn("p",{children:["You can add full-bleed content by placing it outside of the"," ",gn("code",{children:"CardContent"})," component."]}),gn(Ri.Demo,{title:"Card with full-width image",withSource:!0,children:gn(xn,{children:[gn("img",{className:"rounded-t-[inherit]",src:"https://placehold.co/1000/250",alt:"placeholder"}),gn(Cn,{children:gn(Gi,{size:"xs"})})]})})]})}),gn(Ri.SectionL2,{title:"Component API",
+children:[gn("code",{children:"Card"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"active",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Style the card as if it is hovered or otherwise active."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"active Card",withSource:!0,children:gn(xn,{active:!0,children:gn(Cn,{children:gn(Gi,{size:"xs"})})})})]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set the ",gn("code",{children:"Card"})," theming."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'raised' | 'flat'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"raised"})})]}),gn(Ri.Demo,{title:"raised",withSource:!0,children:gn(xn,{variant:"raised",
+children:gn(Cn,{children:gn("p",{children:["The default ",'"raised"'," variant has dimensional effects on hover."]})})})}),gn(Ri.Demo,{title:"flat",withSource:!0,children:gn(xn,{variant:"flat",children:gn(Cn,{children:gn("p",{children:["The ",'"flat"'," variant does not have dimensional effects."]})})})})]}),gn(Ri.SectionL3,{title:"width",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Define how the ","card's"," width is set. Provide width"," ",gn("code",{children:"classes"})," when setting ",gn("code",{children:"width"})," to"," ",gn("code",{children:"'custom'"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'full' | 'auto' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'full'"})})]}),gn(Ri.Demo,{title:"full width",withSource:!0,children:gn(xn,{width:"full",children:gn(Cn,{children:"By default, a card will use the full width of its container."})})}),gn(Ri.Demo,{title:"auto width",withSource:!0,children:gn(xn,{width:"auto",
+children:gn(Cn,{children:["Setting width to ",gn("em",{children:"auto"}),"."]})})}),gn(Ri.Demo,{title:"custom width with extra classes",withSource:!0,children:gn(xn,{classes:"w-[400px]",width:"custom",children:gn(Cn,{children:gn("p",{children:"Sized to 400 px."})})})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Card"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"CardContent",intro:gn("p",{children:[gn("code",{children:"CardContent"})," puts consistent padding and spacing around content in a ",gn("code",{children:"Card"})," component."]}),children:[gn(Ri.SectionL2,{children:gn(Ri.Usage,{componentName:"Card, CardContent"})}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"CardContent"})," accepts all standard"," ",gn(Ri.Link,{
+href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"size",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set relative spacing and padding."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'sm' | 'md' | 'lg'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"space-y-3",children:[gn(xn,{children:gn(Cn,{size:"sm",children:[gn("div",{children:[gn("code",{children:"CardContent"})," component with"," ",gn("strong",{children:gn("code",{children:["size=","'sm'"]})}),"."]}),gn(Gi,{size:"xs"})]})}),gn(xn,{children:gn(Cn,{size:"md",children:[gn("div",{children:[gn("code",{children:"CardContent"})," component with"," ",gn("strong",{children:gn("code",{children:["size=","'md'"]})}),"."]}),gn(Gi,{size:"xs"})]})}),gn(xn,{children:gn(Cn,{size:"lg",children:[gn("div",{children:[gn("code",{children:"CardContent"
+})," component with"," ",gn("strong",{children:gn("code",{children:["size=","'lg'"]})}),"."]}),gn(Gi,{size:"xs"})]})})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"CardContent"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"CardHeader",intro:gn("p",{children:[gn("code",{children:"CardHeader"})," renders a styled title and an optional close button on a ",gn("code",{children:"Card"}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Card, CardContent, CardHeader",size:"sm"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic CardHeader",children:gn(xn,{children:[gn(dt,{title:"Card title"}),gn(Cn,{children:gn("div",{children:["A ",gn("code",{children:"Card"})," with ",gn("code",{children:"CardHeader"}),"."]})})]})})})]}),gn(Ri.SectionL2,{title:"Component API",
+children:[gn("code",{children:"CardHeader"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"title",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Render a ",gn("code",{children:"CardTitle"})," with this title string in the"," ",gn("code",{children:"CardHeader"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]}),gn(Ri.Demo,{withSource:!0,title:"With a `title`",children:gn(xn,{children:[gn(dt,{title:"Card title",onClose:()=>{}}),gn(Cn,{children:gn("div",{children:["A ",gn("code",{children:"Card"})," with ",gn("code",{children:"CardHeader"}),"."]})})]})}),gn(Ri.Demo,{withSource:!0,title:"Composed with `CardTitle`",children:gn(xn,{children:[gn(dt,{onClose:()=>{},children:gn(at,{children:"Title here"})}),gn(Cn,{children:gn("div",{children:["A ",gn("code",{children:"Card"})," with ",gn("code",{children:"CardHeader"}),"."]})})]})})]
+}),gn(Ri.SectionL3,{title:"onClose",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback to request that the card close. When provided, a close button will be rendered."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => void"})})]}),gn(Ri.Demo,{withSource:!0,children:gn(xn,{children:[gn(dt,{title:"This card can be closed",onClose:()=>alert("you clicked it")}),gn(Cn,{children:gn("div",{children:["Passing an ",gn("code",{children:"onClose"})," function to"," ",gn("code",{children:"CardHeader"})," will add a close button."]})})]})}),gn(Ri.Demo,{title:"Close button sizing",withSource:!0,children:gn("div",{className:"text-[13px] w-full",children:gn(xn,{children:[gn(dt,{onClose:()=>alert("you clicked it"),children:gn("h3",{className:"text-brand font-semibold",children:"Custom title styling"})}),gn(Cn,{children:gn("div",{children:["The close button will always have the same size, regardless of local font size. Here, font size is"," ",gn("code",{children:"13px"
+}),", echoing the client application base font size, but the close button remains the same size."]})})]})})})]}),gn(Ri.SectionL3,{title:"fullWidth",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Ensure that the header divider (border) spans the full width of the card. This can be helpful when the card content scrolls."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Making a CardHeader span the full width",withSource:!0,children:gn(xn,{children:[gn(dt,{title:"Full-width header",onClose:()=>alert("you clicked it"),fullWidth:!0}),gn(Cn,{children:gn("div",{children:["A ",gn("code",{children:"Card"})," with ",gn("code",{children:"CardHeader"}),"."]})})]})})]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Define which theme to use for ",gn("code",{children:"CardHeader"}),"."]}),gn(Ri.InfoItem,{
+label:"type",children:gn("code",{children:"{'primary' | 'secondary'}"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'primary'"})})]}),gn(Ri.Demo,{title:"primary",withSource:!0,children:gn(xn,{children:[gn(dt,{variant:"primary",title:"Primary variant",onClose:()=>{}}),gn(Cn,{children:gn("p",{children:["This ","Card's"," ",gn("code",{children:"CardHeader"})," is styled with the"," ",gn("code",{children:"primary"})," (default) variant."]})})]})}),gn(Ri.Demo,{title:"secondary",withSource:!0,children:gn(xn,{children:[gn(dt,{variant:"secondary",onClose:()=>{},title:"Secondary variant"}),gn(Cn,{children:gn("p",{children:["This ","Card's"," ",gn("code",{children:"CardHeader"})," is styled with the"," ",gn("code",{children:"secondary"})," variant."]})})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"CardHeader"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"CardTitle",intro:gn("p",{children:[gn("code",{children:"CardTitle"})," styles a heading element in a"," ",gn("code",{children:"CardHeader"}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Card, CardContent, CardHeader, CardTitle",size:"sm"}),gn(Ri.Demo,{title:"Setting title with CardTitle",withSource:!0,children:gn(xn,{children:[gn(dt,{children:[gn(Pn,{}),gn(at,{children:"Card title"})]}),gn(Cn,{children:gn("div",{children:["Using ",gn("code",{children:"CardTitle"})," in a ",gn("code",{children:"CardHeader"}),". This allows for other custom content in the"," ",gn("code",{children:"CardHeader"}),"."]})})]})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"CardTitle"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"tagName",children:[gn(Ri.Info,{
+children:[gn(Ri.InfoItem,{label:"description",children:"Which heading element to use for the title"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'h1' | 'h2' | 'h3' | 'h4' | 'h5'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'h1'"})})]}),gn(Ri.Demo,{title:"tagName = 'h3'",withSource:!0,children:gn(xn,{children:[gn(dt,{children:[gn(Pn,{}),gn(at,{tagName:"h3",children:"Card title"})]}),gn(Cn,{children:gn("p",{children:["Setting a different heading level (HTML tag) in a"," ",gn("code",{children:"CardTitle"}),"."]})})]})})]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Define which theme to use for ",gn("code",{children:"CardTitle"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"{'primary' | 'secondary'}"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'primary'"})})]}),gn(Ri.Demo,{title:"primary",withSource:!0,children:gn(xn,{children:[gn(dt,{children:gn(at,{
+variant:"primary",children:"Card title"})}),gn(Cn,{children:gn("p",{children:["This ",gn("code",{children:"CardTitle"})," uses the default"," ",gn("code",{children:"'primary'"})," variant."]})})]})}),gn(Ri.Demo,{title:"secondary",withSource:!0,children:gn(xn,{children:[gn(dt,{children:gn(at,{variant:"secondary",children:"Card title"})}),gn(Cn,{children:gn("p",{children:["This ",gn("code",{children:"CardTitle"})," uses the",gn("code",{children:"'secondary'"})," variant."]})})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"CardTitle"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]}),gn(Ri.Section,{title:"CardActions",intro:gn("p",{children:["Use ",gn("code",{children:"CardActions"})," to render a group of buttons in a"," ",gn("code",{children:"Card"}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{
+componentName:"Card, CardContent, CardHeader, CardActions",size:"sm"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Card with actions",withSource:!0,children:gn(xn,{children:[gn(dt,{title:"This card has some actions"}),gn(Cn,{children:[gn(Gi,{size:"xs"}),gn(Sn,{children:[gn(it,{children:"Cancel"}),gn(it,{variant:"primary",children:"Do it"})]})]})]})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"CardActions"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"CardActions"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]})]})},route:"/layout-card"},{title:"Panel",group:"layout",component:function(){return gn(Ri.Page,{title:"Panel",intro:gn("p",{
+children:[gn("code",{children:"Panel"})," is a composite component that can be used to create panel-like interfaces. For more nuanced control, use ",gn("code",{children:"Card"})," ","and its allies."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Panel"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Panel",withSource:!0,children:gn(st,{title:"A simple panel",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})})]}),gn(Ri.SectionL2,{title:"Working with Panels",children:gn(Ri.SectionL3,{title:"Scrolling content",children:[gn("p",{children:["If a ",gn("code",{children:"Panel"})," is a direct child of an element with a height constraint and the ",gn("code",{children:"scrollable"})," prop is set, its content will scroll if it exceeds the available height. Header and buttons do not scroll."]}),gn(Ri.Demo,{title:"Scrolling content with `scrollable` prop",withSource:!0,
+children:gn("div",{className:"h-[350px]",children:gn(st,{title:"Scrolling content",scrollable:!0,children:gn(Gi,{})})})}),gn("p",{children:["More control can be achieved by using ",gn("code",{children:"ScrollBox"})," or other scrolling components instead."]}),gn(Ri.Demo,{title:"Scrolling certain content",withSource:!0,children:gn("div",{className:"h-[350px]",children:gn(st,{title:"Scrolling selected content",buttons:gn(y,{children:[gn(it,{children:"Buttons"}),gn(it,{children:"do not"}),gn(it,{variant:"primary",children:"Scroll"})]}),children:[gn("p",{children:"This content does not scroll."}),gn(Vt,{children:gn(Gi,{})})]})})})]})}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Panel"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#composite-components-api",children:"composite component props"}),".",gn(Ri.SectionL3,{title:"title",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Panel title"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{
+children:"string"})}),gn(Ri.InfoItem,{label:"required",children:gn("code",{children:"true"})})]})}),gn(Ri.SectionL3,{title:"buttons",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"ComponentChildren"})," to render as available actions in the panel."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.ComponentChildren"})})]}),gn(Ri.Demo,{title:"Panel with buttons",withSource:!0,children:gn(st,{title:"Panel title",buttons:gn(y,{children:[gn(it,{children:"Cancel"}),gn(it,{variant:"primary",children:"Do it"})]}),children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]}),gn(Ri.SectionL3,{title:"fullWidthHeader",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Make the header and its bottom border stretch the full width of the panel."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{
+label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{title:"Panel with fullWidthHeader",withSource:!0,children:gn(st,{title:"Panel with full-width header",fullWidthHeader:!0,children:gn(Gi,{size:"xs"})})})]}),gn(Ri.SectionL3,{title:"icon",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["An ",gn("code",{children:"IconComponent"})," to render in the panel header."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]}),gn(Ri.Demo,{title:"Panel with icon",withSource:!0,children:gn(st,{title:"Panel title",icon:Pn,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]}),gn(Ri.SectionL3,{title:"onClose",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Render a close button and invoke this callback function when it is clicked."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => void"})})]}),gn(Ri.Demo,{
+title:"Panel with close button",withSource:!0,children:gn(st,{title:"Panel title",onClose:()=>alert("you clicked it"),children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]}),gn(Ri.SectionL3,{title:"paddingSize",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Determine how much padding is used around the content in the panel."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'sm' | 'md' | 'lg' | 'none'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]}),gn(Ri.Demo,{withSource:!0,children:gn(st,{title:"paddingSize: 'sm'",paddingSize:"sm",children:gn("div",{className:"bg-grey-1",children:gn(Gi,{size:"xs"})})})}),gn(Ri.Demo,{withSource:!0,children:gn(st,{title:"paddingSize: 'md'",paddingSize:"md",children:gn("div",{className:"bg-grey-1",children:gn(Gi,{size:"xs"})})})}),gn(Ri.Demo,{withSource:!0,children:gn(st,{title:"paddingSize: 'lg'",paddingSize:"lg",
+children:gn("div",{className:"bg-grey-1",children:gn(Gi,{size:"xs"})})})}),gn(Ri.Demo,{withSource:!0,title:"No padding",children:gn(st,{title:"paddingSize: 'none'",paddingSize:"none",children:gn("div",{className:"bg-grey-1",children:gn(Gi,{size:"xs"})})})})]}),gn(Ri.SectionL3,{title:"scrollable",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Make the content in the panel scroll if the panel exceeds height constraints. All scrollable panels have a"," ",gn("code",{children:"fullWidthHeader"})," to align with scroll-shadow hints."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"h-[300px]",children:gn(st,{title:"Scrolling panel",buttons:gn(y,{children:[gn(it,{children:"Cancel"}),gn(it,{variant:"primary",children:"Do it"})]}),scrollable:!0,children:gn(Gi,{size:"lg"})})})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",
+children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Panel"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]})})},route:"/layout-panel"},{title:"Overlay",group:"layout",component:function(){const[e,n]=he(!1),[t,i]=he(!1),[l,o]=he(!1),r=()=>n(!e),c=()=>o(!l),a=()=>i(!t);return gn(Ri.Page,{title:"Overlay",intro:gn("p",{children:[gn("code",{children:"Overlay"})," is a presentational component that styles full-screen backdrops for use during loading or as a modal backdrop."]}),children:gn(Ri.Section,{title:"Overlay",children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Overlay"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Overlay",withSource:!0,children:[gn(it,{onClick:r,children:"Show Overlay"}),gn(vn,{open:e,onClick:r,children:gn(xn,{width:"auto",children:gn(Cn,{children:"Content in Overlay"})})})]})})]}),gn(Ri.SectionL2,{title:"Component API",
+children:[gn("code",{children:"Overlay"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Define which theme to use for the ",gn("code",{children:"Overlay"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"{'dark' | 'light'}"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'dark'"})})]}),gn(Ri.Demo,{title:"dark",withSource:!0,children:[gn(it,{onClick:a,children:"Show Overlay"}),gn(vn,{open:t,onClick:a,variant:"dark",children:gn(Wt,{size:"lg",color:"text-inverted"})})]}),gn(Ri.Demo,{title:"light",withSource:!0,children:[gn(it,{onClick:c,children:"Show Overlay"}),gn(vn,{open:l,onClick:c,variant:"light",children:gn(Wt,{size:"lg"})})]})]}),gn(Ri.SectionL3,{title:"open",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"Set whether the overlay is open (visible) or not."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'true'"})})]})}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Overlay"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"JSX.HTMLAttributes<HTMLElement>"})})]})})]})]})})},route:"/layout-overlay"},{title:"Link",group:"navigation",route:"/navigation-link",component:function(){return gn(Ri.Page,{title:"Link",intro:gn("p",{children:[gn("code",{children:"Link"})," is a presentational component that provides styling and common behavior for anchor (",gn("code",{children:"a"}),") elements."]}),children:gn(Ri.Section,{title:"Link",children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Link"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Link",withSource:!0,children:gn(Zt,{
+href:"https://www.example.com",children:"A link to a website"})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Link"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"underline",children:[gn("div",{className:"m-4",children:gn(Ri.Callout,{children:[gn("strong",{children:"Note"})," The ",gn("code",{children:"underline"})," prop is likely to be removed in future and underlining will be controlled with a styling-API prop. This prop is ignored if"," ",gn("code",{children:"unstyled"})," is set (in which case, no underline styling will be applied)."]})}),gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Control when underlines are applied to links. Current default is"," ",gn("code",{children:"'none'"}),", but this will be changing in future. Links inline with text content should set ",gn("code",{children:"underline"})," ","to ",gn("code",{
+children:"'always'"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'none' | 'hover' | 'always'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'none'"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"flex flex-col",children:[gn(Zt,{href:"https://www.example.com",underline:"none",children:"Link with underline: none"}),gn(Zt,{href:"https://www.example.com",underline:"hover",children:"Link with underline: hover"}),gn(Zt,{href:"https://www.example.com",underline:"always",children:"Link with underline: always"})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Link"})," accepts HTML attribute props applicable to"," ",gn("code",{children:"HTMLAnchorElement"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.JSX.AnchorHTMLAttributes<HTMLAnchorElement>"})}),gn(Ri.InfoItem,{label:"example",children:gn(Ri.Code,{
+content:'<Link id="my-own-id" href="https://www.example.com">A Link with attributes</Link>',size:"sm"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"Link"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",id:"styling-api-variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Link ",gn("code",{children:"variant"}),"s affect the color of link text (including hover color). Set to ",gn("code",{children:"custom"})," to remove theming styles."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'brand' | 'text' | 'text-light' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'brand'"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"flex flex-col",children:[gn(Zt,{href:"https://www.example.com",variant:"brand",
+children:"Variant: brand (default)"}),gn(Zt,{href:"https://www.example.com",variant:"text",children:"Variant: text"}),gn(Zt,{href:"https://www.example.com",variant:"text-light",children:"Variant: text-light"}),gn(Zt,{href:"https://www.example.com",variant:"custom",children:"Variant: custom"})]})})]}),gn(Ri.SectionL3,{title:"unstyled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set to remove all styling."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn(Zt,{href:"https://www.example.com",unstyled:!0,children:"Unstyled Link"})})]})]})]})})}},{title:"LinkButton",group:"navigation",component:function(){return gn(Ri.Page,{title:"LinkButton",intro:gn("p",{children:[gn("code",{children:"LinkButton"})," is a presentational component that can be used to style a button to appear as a link."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{
+children:[gn(Ri.Usage,{componentName:"LinkButton"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic LinkButton",withSource:!0,children:gn(Yt,{children:"Example of LinkButton"})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"color",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"status",children:[gn(Ri.StatusChip,{status:"deprecated"})," Use"," ",gn("code",{children:"variant"})," prop instead."]}),gn(Ri.InfoItem,{label:"description",children:["Link ",gn("code",{children:"color"})," affects the color of link text (including hover color)."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'brand' | 'text' | 'text-light'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'brand'"})})]})}),gn(Ri.SectionL3,{title:"inline",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Style a ",gn("code",{children:"LinkButton"})," to lay out inline. Ignored if"," ",gn("code",{children:"unstyled"})," is set."]}),gn(Ri.InfoItem,{
+label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"flex flex-col gap-y-4",children:[gn("p",{children:["This is"," ",gn(Yt,{underline:"always",children:"a default LinkButton"})," ","with some text."]}),gn("p",{children:["This is"," ",gn(Yt,{underline:"always",inline:!0,children:"an inline LinkButton"})," ","with some text."]})]})})]}),gn(Ri.SectionL3,{title:"underline",children:[gn("div",{className:"m-4",children:gn(Ri.Callout,{children:[gn("strong",{children:"Note"})," The ",gn("code",{children:"underline"})," prop is likely to be removed in future and underlining will be controlled with a styling-API prop. This prop is ignored if"," ",gn("code",{children:"unstyled"})," is set (in which case, no underline styling will be applied)."]})}),gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Control when underlines are applied to ",gn("code",{
+children:"LinkButton"}),"s. Current default is ",gn("code",{children:"'none'"}),", but this will be changing in future. Links inline with text content should set"," ",gn("code",{children:"underline"})," to ",gn("code",{children:"'always'"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'none' | 'hover' | 'always'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'none'"})})]}),gn(Ri.Demo,{withSource:!0,children:gn("div",{className:"flex flex-col",children:[gn(Yt,{underline:"none",children:"Underline: none (default)"}),gn(Yt,{underline:"hover",children:"Underline: hover"}),gn(Yt,{underline:"always",children:"Underline: always"}),gn("p",{children:["LinkButtons should be"," ",gn(Yt,{underline:"always",inline:!0,children:"always underlined"})," ","when inline with text content."]})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"LinkButton"
+})," accepts HTML attribute props applicable to ",gn("code",{children:"HTMLButtonElement"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"LinkButton"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set to ",gn("code",{children:"custom"})," to remove theming styles."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'brand' | 'text' | 'text-light' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'brand'"})})]}),gn("div",{className:"m-8 grid grid-cols-4 gap-x-16 gap-y-4",children:[gn("div",{className:"row-span-2 self-end",children:gn("strong",{children:"variant"})
+}),gn("div",{className:"uppercase col-span-3 w-full text-center font-semibold border-b border-stone-300 pb-2 border-dashed",children:"states"}),gn("div",{children:gn("strong",{children:"default"})}),gn("div",{children:gn("strong",{children:"pressed"})}),gn("div",{children:gn("strong",{children:"disabled"})}),gn("div",{className:"col-span-4 border-b border-stone-300"}),gn("div",{children:gn("code",{children:"'brand'"})}),gn(Yt,{variant:"brand",children:"Link text"}),gn(Yt,{variant:"brand",pressed:!0,children:"Link text"}),gn(Yt,{variant:"brand",disabled:!0,children:"Link text"}),gn("div",{children:gn("code",{children:"'text'"})}),gn(Yt,{variant:"text",children:"Link text"}),gn(Yt,{variant:"text",pressed:!0,children:"Link text"}),gn(Yt,{variant:"text",disabled:!0,children:"Link text"}),gn("div",{children:gn("code",{children:"'text-light'"})}),gn(Yt,{variant:"text-light",children:"Link text"}),gn(Yt,{variant:"text-light",pressed:!0,children:"Link text"}),gn(Yt,{variant:"text-light",disabled:!0,
+children:"Link text"}),gn("div",{children:gn("code",{children:"'custom'"})}),gn(Yt,{variant:"custom",children:"Link text"}),gn(Yt,{variant:"custom",pressed:!0,children:"Link text"}),gn(Yt,{variant:"custom",disabled:!0,children:"Link text"})]})]}),gn(Ri.SectionL3,{title:"unstyled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set to remove all styling."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,children:gn(Yt,{unstyled:!0,children:"Unstyled LinkButton"})})]})]})]})})},route:"/navigation-linkbutton"},{title:"Pagination",group:"navigation",component:function(){const[e,n]=he(1);return gn(Ri.Page,{title:"Pagination",intro:gn("p",{children:[gn("code",{children:"Pagination"})," is a component that allows navigating between pages in a paginated set of items."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{
+symbolName:"Pagination"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic usage",withSource:!0,children:gn(ni,{currentPage:e,totalPages:10,onChangePage:e=>n(e)})})})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn(Ri.SectionL3,{title:"currentPage",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The 1-based number of the currently visible page."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"number"})})]})}),gn(Ri.SectionL3,{title:"onChangePage",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Callback invoked with the new page number when the user clicks a navigation button."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:["(newPage: number) ","=>"," void"]})})]})}),gn(Ri.SectionL3,{title:"totalPages",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The total number of pages available."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"number"})})]})})]})]})})},
+route:"/navigation-pagination"},{title:"PointerButton",group:"navigation",component:function(){return gn(Ri.Page,{title:"PointerButton",intro:gn(y,{children:[gn("p",{children:[gn("code",{children:"PointerButton"}),' is a presentational component for styling a button that points towards a group of items elsewhere in the UI or off-screen. They are specifically used to indicate and navigate to "buckets" (groups of annotations that are near each other in document content) in the Hypothesis client.']}),gn("p",{children:"PointerButtons point at and navigate to these groups of annotation highlights, which are either in the visible content of the source document (guest page) or off-screen (above or below)."})]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"PointerButton"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic PointerButtons",withSource:!0,children:[gn(ti,{direction:"up",children:"3"}),gn(ti,{direction:"down",children:"7"}),gn(ti,{direction:"left",children:"5"
+})]})})]}),gn(Ri.SectionL2,{title:"Working with PointerButtons",children:gn(Ri.SectionL3,{title:"PointerButtons in context",children:[gn("p",{children:["The following example shows ",gn("code",{children:"PointerButtons"})," as they might appear in the client, positioned absolutely in a"," ",'"bucket bar"',"."]}),gn(Ri.Demo,{title:"PointerButtons in visual context",withSource:!0,children:gn("div",{className:"w-[23px] h-[250px] bg-grey-2",children:gn("ul",{className:"relative h-full pointer-events-none",children:[gn("li",{className:"absolute right-0 pointer-events-auto mt-[-11px]",style:{top:"15px"},children:gn(ti,{direction:"up",children:"6"})}),gn("li",{className:"absolute right-0 pointer-events-auto mt-[-8px]",style:{top:"47px"},children:gn(ti,{direction:"left",children:"10"})}),gn("li",{className:"absolute right-0 pointer-events-auto mt-[-8px]",style:{top:"112px"},children:gn(ti,{direction:"left",children:"1"})}),gn("li",{className:"absolute right-0 pointer-events-auto",style:{top:"230px"},children:gn(ti,{
+direction:"down",children:"4"})})]})})})]})}),gn(Ri.SectionL2,{title:"Component API",children:[gn("code",{children:"Button"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),".",gn(Ri.SectionL3,{title:"direction",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Direction the button should point. If not provided, the button will be a round lozenge."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'up' | 'down' | 'left'"})})]}),gn(Ri.Demo,{title:"direction not set",withSource:!0,children:gn(ti,{children:"24"})}),gn("p",{children:["The ",gn("code",{children:"left"})," direction is intended to point to and navigate to a bucket of annotations currently visible on-screen."]}),gn(Ri.Demo,{title:"direction: left",withSource:!0,children:gn(ti,{direction:"left",children:"3"})}),gn("p",{children:["The ",gn("code",{children:"up"
+})," direction is intended to point to and navigate to the next bucket offscreen (above)."]}),gn(Ri.Demo,{title:"direction: up",withSource:!0,children:gn(ti,{direction:"up",children:"4"})}),gn("p",{children:["The ",gn("code",{children:"down"})," direction is intended to point to and navigate to the next bucket offscreen (below)."]}),gn(Ri.Demo,{title:"direction: down",withSource:!0,children:gn(ti,{direction:"down",children:"6"})})]}),gn(Ri.SectionL3,{title:"...buttonProps",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"PointerButton"})," props for"," ",gn(Ri.Link,{href:"/input-button",children:"Button"})," except for styling API props. This includes HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<ButtonProps>, 'variant' | 'size' | 'unstyled'>"})})]})})]})]})})},route:"/navigation-pointerbutton"},{title:"Tabs",group:"navigation",component:function(){
+const[e,n]=he("notifications"),[t,i]=he("annotations"),[l,o]=he("annotations"),[r,c]=he("annotations"),[a,d]=he("notifications");return gn(Ri.Page,{title:"Tabs",intro:gn("p",{children:[gn("code",{children:"Tab"})," and ",gn("code",{children:"TabList"})," are presentational components for rendering accessible tabs."]}),children:[gn(Ri.Section,{title:"Tab",intro:gn("p",{children:[gn("code",{children:"Tab"})," generates a button with appropriate ARIA attributes."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Tab"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{title:"Basic Tabs in a tablist",withSource:!0,children:gn("div",{role:"tablist",className:"gap-x-6 flex",children:[gn(ii,{children:["Annotations",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:52})]}),gn(ii,{selected:!0,children:["Page Notes",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:4})]}),gn(ii,{children:["Orphans",gn("span",{
+className:"relative bottom-[3px] left-[2px] text-[10px]",children:2})]})]})})})]}),gn(Ri.SectionL2,{title:"Working with Tabs",children:[gn(Ri.SectionL3,{title:"Accessibility",children:gn("ul",{children:[gn("li",{children:[gn("code",{children:"Tab"}),"s ",gn("em",{children:"must"})," be direct children of an element with ",gn("code",{children:["role=",'"tablist"']})," (or use the"," ",gn("code",{children:"TabList"})," component)."]}),gn("li",{children:["You ",gn("em",{children:"should"})," provide an"," ",gn("a",{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls",children:gn("code",{children:"aria-controls"})})," ","attribute to each ",gn("code",{children:"Tab"}),". This is not always feasible in our applications."]})]})}),gn(Ri.SectionL3,{title:"Preventing text jiggle with textContent",children:[gn("p",{
+children:"Bolding is used in our design patterns to indicate a selected tab. Without any intervention, textual tabs will jiggle around when they are selected. This has a simple cause: bold text takes up more room."}),gn("p",{children:[gn("strong",{children:["Setting ",gn("code",{children:"textContent"})," can help prevent jiggle in selected tabs"]}),". The size of the tab will accommodate this string rendered in bold text."]}),gn(Ri.Demo,{title:"Tabs without textContent (jiggle when selected)",withSource:!0,children:gn(li,{classes:"gap-x-6",children:[gn(ii,{selected:"annotations"===t,onClick:()=>i("annotations"),children:["Annotations",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:52})]}),gn(ii,{selected:"pageNotes"===t,onClick:()=>i("pageNotes"),children:["Page Notes",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:48})]}),gn(ii,{selected:"orphans"===t,onClick:()=>i("orphans"),children:["Orphans",gn("span",{
+className:"relative bottom-[3px] left-[2px] text-[10px]",children:4})]})]})}),gn("p",{children:["For tabs that have a simple text label, setting"," ",gn("code",{children:"textContent"})," to that string avoids the jiggle. Text will still change size (bold text is larger) but the tabs themselves do not move."]}),gn(Ri.Demo,{title:"Tabs with textContent (no jiggle)",withSource:!0,children:gn(li,{classes:"gap-x-6",children:[gn(ii,{selected:"annotations"===l,onClick:()=>o("annotations"),textContent:"Annotations",children:"Annotations"}),gn(ii,{selected:"pageNotes"===l,onClick:()=>o("pageNotes"),textContent:"Page Notes",children:"Page Notes"}),gn(ii,{selected:"orphans"===l,onClick:()=>o("orphans"),textContent:"Orphans",children:"Orphans"})]})}),gn("p",{children:["For tabs with styled or dynamic content, ",gn("code",{children:"textContent"})," ","can be set to an estimated ",'"widest-possible-text-content"'," ","value."]}),gn(Ri.Demo,{title:"Tabs with estimated widest-value textContent",withSource:!0,
+children:gn(li,{classes:"gap-x-6",children:[gn(ii,{selected:"annotations"===r,onClick:()=>c("annotations"),textContent:"Annotations##",children:["Annotations",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:52})]}),gn(ii,{selected:"pageNotes"===r,onClick:()=>c("pageNotes"),textContent:"Page Notes##",children:["Page Notes",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:56})]}),gn(ii,{selected:"orphans"===r,onClick:()=>c("orphans"),textContent:"Orphans##",children:["Orphans",gn("span",{className:"relative bottom-[3px] left-[2px] text-[10px]",children:2})]})]})})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"Tab"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"icon",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"Optional icon to display on the left, sized proportionally to the inherited font size."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"IconComponent"})})]}),gn(Ri.Demo,{title:"Tabs with icon",withSource:!0,children:gn("div",{role:"tablist",children:[gn(ii,{icon:Xn,children:"Profile"}),gn(ii,{classes:"text-lg",icon:Xn,children:"Profile"}),gn(ii,{classes:"text-xl",icon:Xn,children:"Profile"})]})})]}),gn(Ri.SectionL3,{title:"selected",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Asserts that the ",gn("code",{children:"Tab"})," is currently selected and the"," ",gn("code",{children:"tabpanel"})," it controls (where relevant) is active and visible."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})}),gn(Ri.SectionL3,{title:"textContent",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"String representing the longest textual content expected for the Tab. Used to prevent jiggle when selected."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"...buttonProps",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"Tab"})," forwards"," ",gn(Ri.Link,{href:"/input-button",children:gn("code",{children:"Button"})})," ","component API props, including HTML attributes. Styling API props are not forwarded."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<ButtonProps, 'variant' | 'size' | 'unstyled'>"})})]})})]}),gn(Ri.SectionL2,{title:"Styling API",children:[gn("p",{children:[gn("code",{children:"Tab"})," accepts the following props from the"," ",gn(Ri.Link,{href:"/using-components#presentational-components-styling-api",children:"presentational component styling API"}),"."]}),gn(Ri.SectionL3,{title:"variant",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:["Set to ",gn("code",{children:"custom"})," to remove theming styles and provide your own styling with ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'text' | 'tab' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'text'"})})]}),gn(Ri.Demo,{title:"variant: 'tab'",withSource:!0,children:gn("div",{role:"tablist",className:"flex",children:[gn(ii,{variant:"tab",children:"Share"}),gn(ii,{selected:!0,variant:"tab",children:"Import"}),gn(ii,{variant:"tab",children:"Export"})]})})]}),gn(Ri.SectionL3,{title:"size",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Set relative internal spacing and padding. Set to"," ",gn("code",{children:"'custom'"})," to provide your own sizing styles with"," ",gn("code",{children:"classes"}),"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"'md' | 'custom'"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"'md'"})})]})
+}),gn(Ri.SectionL3,{title:"unstyled",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Set to remove all styling."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]})})]})]}),gn(Ri.Section,{title:"TabList",intro:gn("p",{children:[gn("code",{children:"TabList"})," is a presentational component that provides a"," ",gn("code",{children:'role="tablist"'})," container and arrow-key navigation as outlined by"," ",gn("a",{href:"https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/",children:"WAI-ARIA authoring practices"}),"."]}),children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"TabList"}),gn(Ri.SectionL3,{children:[gn("p",{children:["This example demonstrates a full Tab pattern with"," ",gn("code",{children:"TabList"}),", ",gn("code",{children:"Tab"})," and some tabpanels. The tabpanels have been made focusable here as they contain no focusable elements: pressing ",gn("kbd",{
+children:"tab"})," when in the tablist will move focus to the active tabpanel. Tabs may be navigated with the left and right arrows."]}),gn(Ri.Demo,{withSource:!0,title:"Full Tab pattern example",children:gn("div",{children:[gn(li,{classes:"w-[400px] gap-x-6 my-4",children:[gn(ii,{"aria-controls":"profile-panel",textContent:"Profile",selected:"profile"===e,onClick:()=>n("profile"),children:"Profile"}),gn(ii,{"aria-controls":"notifications-panel",textContent:"Notifications",selected:"notifications"===e,onClick:()=>n("notifications"),children:"Notifications"}),gn(ii,{"aria-controls":"account-panel",textContent:"Account",selected:"account"===e,onClick:()=>n("account"),children:"Account"})]}),gn(xn,{classes:ee({hidden:"profile"!==e},"p-2 focus-visible:ring focus-visible:outline-none"),id:"profile-panel",role:"tabpanel",tabIndex:0,variant:"flat",children:"Profile"}),gn(xn,{classes:ee({hidden:"notifications"!==e},"p-2 focus-visible:ring focus-visible:outline-none"),id:"notifications-panel",role:"tabpanel",
+tabIndex:0,variant:"flat",children:"Notifications"}),gn(xn,{classes:ee({hidden:"account"!==e},"p-2 focus-visible:ring focus-visible:outline-none"),id:"account-panel",role:"tabpanel",tabIndex:0,variant:"flat",children:"Account"})]})})]})]}),gn(Ri.SectionL2,{title:"Component API",children:[gn("p",{children:[gn("code",{children:"TabList"})," accepts all standard"," ",gn(Ri.Link,{href:"/using-components#presentational-components-api",children:"presentational component props"}),"."]}),gn(Ri.SectionL3,{title:"vertical",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Indicates that the tablist should be laid out vertically. When set, arrow-key navigation using up and down arrows is enabled."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"false"})})]}),gn(Ri.Demo,{withSource:!0,title:"Vertical TabList",children:gn(li,{classes:"gap-y-2",vertical:!0,children:[gn(ii,{icon:Xn,onClick:()=>d("profile"),
+selected:"profile"===a,textContent:"Profile",children:"Profile"}),gn(ii,{icon:Rn,onClick:()=>d("notifications"),selected:"notifications"===a,textContent:"Notifications",children:"Notifications"}),gn(ii,{icon:Zn,onClick:()=>d("account"),selected:"account"===a,textContent:"Account",children:"Account"})]})})]}),gn(Ri.SectionL3,{title:"...htmlAttributes",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:[gn("code",{children:"TabList"})," accepts HTML attributes."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"Omit<JSX.HTMLAttributes<HTMLElement>, 'size'>"})})]})})]})]})]})},route:"/navigation-tab"},{title:"Slider",group:"transition",component:function(){return gn(Ri.Page,{title:"Slider",intro:gn(y,{children:gn("p",{children:[gn("code",{children:"Slider"})," is a transition component with a slide-down/slide-up transition on open/close."]})}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{componentName:"Slider"}),gn(Ri.SectionL3,{
+children:gn(Ri.Demo,{title:"Basic Slider",withSource:!0,children:gn(gl,{direction:"out",children:gn(xn,{children:gn(Cn,{children:"This is the content of the Slider"})})})})})]}),gn(Ri.SectionL2,{title:"Component API",children:gn("p",{children:[gn("code",{children:"Slider"})," accepts"," ",gn(Ri.Link,{href:"/using-components#transition-components-api",children:"transition component props"}),"."]})})]})})},route:"/transitions-slider"},{title:"useClickAway",group:"hooks",component:function(){return gn(Ri.Page,{title:"useClickAway",intro:gn("p",{children:[gn("code",{children:"useClickAway"})," is a hook to listen for click events on"," ",gn("code",{children:"document.body"}),". If an event","'","s target is outside the container element, it invokes a callback."]}),children:gn(Ri.Section,{children:[gn(Ri.SectionL2,{children:[gn(Ri.Usage,{symbolName:"useClickAway"}),gn(Ri.SectionL3,{children:gn(Ri.Demo,{withSource:!0,title:"Basic useClickAway",exampleFile:"use-click-away-basic"})})]}),gn(Ri.SectionL2,{
+title:"Hook arguments",children:[gn(Ri.SectionL3,{title:"container",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["A Ref to the DOM element used to evaluate if clicking happened"," ",'"',"away",'"',"."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"RefObject<HTMLElement | undefined>"})})]})}),gn(Ri.SectionL3,{title:"callback",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"The callback to be invoked when clicking away. The click event object is passed to it."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(e: Event) => void"})})]})}),gn(Ri.SectionL3,{title:"options",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Options to configure the hook","'","s behavior."]}),gn(Ri.InfoItem,{label:"type",children:["See"," ",gn(Ri.Link,{href:"#hook-options",children:"hook options"})," ","below for details."]})]})})]}),gn(Ri.SectionL2,{title:"Hook options",id:"hook-options",children:gn(Ri.SectionL3,{
+title:"enabled",children:[gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Allows the hook to be conditionally enabled or disabled, for example, if the container it handles is dynamically hidden or unmounted."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"boolean"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"true"})})]}),gn(Ri.Code,{content:"useClickAway(containerRef, callback, { enabled: false })"})]})})]})})},route:"/hooks-use-click-away"},{title:"lazy",group:"utilities",component:function(){return gn(Ri.Page,{title:"lazy",intro:gn("p",{children:["The ",gn("code",{children:"lazy"})," utility creates a component which is loaded asynchronously, displaying fallback content while loading and showing an error fallback if the component fails to load."]}),children:[gn(Ri.Section,{title:"API",children:[gn(Ri.SectionL2,{children:gn(Ri.Usage,{symbolName:"lazy"})}),gn(Ri.SectionL2,{title:"Parameters",children:[gn(Ri.SectionL3,{title:"displayName",
+children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Display name for the lazy wrapper component."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"string"})})]})}),gn(Ri.SectionL3,{title:"load",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:["Callback invoked on first render to load the component. This returns a promise resolving to the loaded component. A common use case is to use an ",gn("code",{children:"import(...)"})," expression to load the component."]}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"() => Promise<FunctionalComponent<P>>"})})]})}),gn(Ri.SectionL3,{title:"options",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Configuration for the lazy component"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"LazyOptions<P>"})})]})})]}),gn(Ri.SectionL2,{title:"LazyOptions",children:[gn(Ri.SectionL3,{title:"fallback",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",
+children:"Function that returns content to display while loading"}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"(props: P) => ComponentChildren"})})]})}),gn(Ri.SectionL3,{title:"errorFallback",children:gn(Ri.Info,{children:[gn(Ri.InfoItem,{label:"description",children:"Function that returns content to display if loading fails. If not provided a default error fallback is shown."}),gn(Ri.InfoItem,{label:"type",children:gn("code",{children:"((props: P, error: Error) => ComponentChildren) | undefined"})}),gn(Ri.InfoItem,{label:"default",children:gn("code",{children:"undefined"})})]})})]})]}),gn(Ri.Section,{title:"Examples",children:[gn(Ri.SectionL2,{title:"Basic usage",children:[gn("p",{children:"Lazy components start loading on first render, and show a fallback while loading."}),gn(Ri.Demo,{title:"Basic lazy component",exampleFile:"lazy-basic",withSource:!0})]}),gn(Ri.SectionL2,{title:"Error handling",children:[gn("p",{children:"If a component fails to load, the error fallback is displayed:"
+}),gn(Ri.Demo,{title:"Component with error state",exampleFile:"lazy-error-handling",withSource:!0})]})]})]})},route:"/utilities-lazy"}];function wl(e){return e?vl.filter((n=>n.group===e)):vl}function Il({children:e}){return gn("h2",{className:"text-slate-800 border-b border-stone-300 px-2 py-1 font-light text-lg",children:e})}function yl({title:e,children:n}){return gn("div",{className:"space-y-4",children:[gn("h3",{className:"mx-2 text-slate-700 font-semibold text-sm",children:e}),n]})}function xl({children:e}){return gn("ul",{className:"ml-2 space-y-2 border-l-2 border-stone-200",children:e})}function Sl({route:e}){var n,t;const[i]=Xe(null!==(n=e.route)&&void 0!==n?n:"");return gn("li",{className:"-ml-[2px]",children:[e.route&&gn(Ze,{href:null!==(t=e.route)&&void 0!==t?t:"",asChild:!0,children:gn(Zt,{classes:ee("pl-4 rounded-l-none w-full border-l-2 hover:border-l-brand",{"border-l-2 border-brand font-semibold":i,"border-transparent":!i}),children:e.title})}),!e.route&&gn("div",{
+className:"pl-4 w-full text-slate-5 font-light",children:e.title})]})}function Cl({baseURL:e="",extraRoutes:n=[],extraRoutesTitle:t="Playground"}){const i=wl(),[l]=$e();ue((()=>{const e=window.location.hash.replace(/^#/,"");if(e){const n=document.getElementById(e);n&&n.scrollIntoView()}else window.scrollTo(0,0)}),[l]),ue((()=>{var e;const n=i.find((({route:e})=>e===l));document.title=`${null!==(e=null==n?void 0:n.title)&&void 0!==e?e:"Page not found"}: Hypothesis Component Library`}),[l,i]);const o=n.map((e=>({...e,group:"custom"}))),r=gn(y,{children:i.concat(o).filter((e=>!!e.route)).map((e=>{var n;return gn(Qe,{path:e.route,children:null!==(n=e.component)&&void 0!==n?n:e.title},e.title)}))}),c=wl("prototype"),a=wl("hooks"),d=wl("utilities"),s=Object.keys(bl);return gn(Ke,{base:e,children:gn("div",{className:"w-full bg-stone-200",children:gn("div",{className:"max-w-[1300px] mx-auto",children:gn("div",{className:"md:grid md:grid-cols-[2fr_5fr]",children:[gn("div",{
+className:"md:h-screen md:sticky md:top-0 border-l border-stone-400 bg-stone-100",children:gn(jt,{borderless:!0,children:[gn("div",{className:"h-16 flex items-center",children:gn("h1",{className:"font-medium text-lg pl-6",children:gn(Zt,{href:e+"/",classes:"flex gap-x-3 text-stone-700 items-center",children:[gn(jn,{className:"text-brand w-6 h-6"}),"Component Library"]})})}),gn(yn,{children:gn(Ut,{classes:"bg-stone-400/10",children:gn("nav",{id:"nav",className:"pb-16 space-y-4 mr-4",children:[gn(Il,{children:"Foundations"}),gn(xl,{children:wl("foundations").map((e=>gn(Sl,{route:e},e.title)))}),gn(Il,{children:"Components"}),s.map((e=>gn(yl,{title:bl[e],children:gn(xl,{children:wl(e).map((e=>gn(Sl,{route:e},e.title)))})},e))),gn(Il,{children:"Hooks"}),gn(xl,{children:a.map((e=>gn(Sl,{route:e},e.title)))}),gn(Il,{children:"Utilities"}),gn(xl,{children:d.map((e=>gn(Sl,{route:e},e.title)))}),c.length>0&&gn(y,{children:[gn(Il,{children:"Prototypes"}),gn(xl,{children:c.map((e=>gn(Sl,{route:e},e.title)))})]
+}),n.length>0&&gn(y,{children:[gn(Il,{children:t}),gn(xl,{children:o.map((e=>gn(Sl,{route:e},e.title)))})]})]})})})]})}),gn("div",{className:"bg-white pb-16 border-x border-stone-400",children:gn(en,{children:[r,gn(Qe,{children:gn(Ri.Page,{title:":( Sorry",children:gn("h1",{className:"text-2xl",children:"Page not found"})})})]})})]})})})})}!function({...e}={}){const n=document.querySelector("#app");j(gn(Cl,{...e}),n)}({baseURL:"/ui-playground"});
+//# sourceMappingURL=ui-playground.bundle.js.map