hypothesis 1.892.0 → 1.896.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/build/boot.js +1 -1
  2. package/build/manifest.json +10 -10
  3. package/build/scripts/annotator.bundle.js +3 -3
  4. package/build/scripts/annotator.bundle.js.map +1 -1
  5. package/build/scripts/boot.bundle.js +1 -1
  6. package/build/scripts/boot.bundle.js.map +1 -1
  7. package/build/scripts/sidebar.bundle.js +3 -3
  8. package/build/scripts/sidebar.bundle.js.map +1 -1
  9. package/build/scripts/ui-playground.bundle.js +2 -2
  10. package/build/scripts/ui-playground.bundle.js.map +1 -1
  11. package/build/styles/katex.min.css +1 -1
  12. package/build/styles/katex.min.css.map +1 -1
  13. package/package.json +4 -3
package/build/scripts/ui-playground.bundle.js CHANGED
@@ -1,8 +1,8 @@
1
- function e(e){if(e.__esModule)return e;var i=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(e).forEach((function(n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})})),i}var i,n,l,t,r,o,u={},a={},m={},s=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function d(e,i){for(var n in i)e[n]=i[n];return e}function h(e){var i=e.parentNode;i&&i.removeChild(e)}function N(e,i,n){var l,t,r,o=arguments,u={};for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:u[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);if(null!=n&&(u.children=n),"function"==typeof e&&null!=e.defaultProps)for(r in e.defaultProps)void 0===u[r]&&(u[r]=e.defaultProps[r]);return b(e,u,l,t,null)}function b(e,n,l,t,r){var o={type:e,props:n,key:l,ref:t,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++i.__v:r};return null!=i.vnode&&i.vnode(o),o}function f(e){return e.children}function v(e,i){this.props=e,this.context=i}function p(e,i){if(null==i)return e.__?p(e.__,e.__.__k.indexOf(e)+1):null;for(var n;i<e.__k.length;i++)if(null!=(n=e.__k[i])&&null!=n.__e)return n.__e;return"function"==typeof e.type?p(e):null}function x(e){var i,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,i=0;i<e.__k.length;i++)if(null!=(n=e.__k[i])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return x(e)}}function D(e){(!e.__d&&(e.__d=!0)&&l.push(e)&&!E.__r++||r!==i.debounceRendering)&&((r=i.debounceRendering)||t)(E)}function E(){for(var e;E.__r=l.length;)e=l.sort((function(e,i){return e.__v.__b-i.__v.__b})),l=[],e.some((function(e){var i,n,l,t,r,o;e.__d&&(r=(t=(i=e).__v).__e,(o=i.__P)&&(n=[],(l=d({},t)).__v=t.__v+1,C(o,t,l,i.__n,void 0!==o.ownerSVGElement,null!=t.__h?[r]:null,n,null==r?p(t):r,t.__h),L(n,t),t.__e!=r&&x(t)))}))}function j(e,i,n,l,t,r,o,u,a,c){var d,h,N,v,x,D,E,j=l&&l.__k||s,_=j.length;for(n.__k=[],d=0;d<i.length;d++)if(null!=(v=n.__k[d]=null==(v=i[d])||"boolean"==typeof v?null:"string"==typeof v||"number"==typeof v||"bigint"==typeof v?b(null,v,null,null,v):Array.isArray(v)?b(f,{children:v},null,null,null):v.__b>0?b(v.type,v.props,v.key,null,v.__v):v)){if(v.__=n,v.__b=n.__b+1,null===(N=j[d])||N&&v.key==N.key&&v.type===N.type)j[d]=void 0;else for(h=0;h<_;h++){if((N=j[h])&&v.key==N.key&&v.type===N.type){j[h]=void 0;break}N=null}C(e,v,N=N||m,t,r,o,u,a,c),x=v.__e,(h=v.ref)&&N.ref!=h&&(E||(E=[]),N.ref&&E.push(N.ref,null,v),E.push(h,v.__c||x,v)),null!=x?(null==D&&(D=x),"function"==typeof v.type&&null!=v.__k&&v.__k===N.__k?v.__d=a=g(v,a,e):a=V(e,v,N,j,x,a),c||"option"!==n.type?"function"==typeof n.type&&(n.__d=a):e.value=""):a&&N.__e==a&&a.parentNode!=e&&(a=p(N))}for(n.__e=D,d=_;d--;)null!=j[d]&&("function"==typeof n.type&&null!=j[d].__e&&j[d].__e==n.__d&&(n.__d=p(l,d+1)),B(j[d],j[d]));if(E)for(d=0;d<E.length;d++)S(E[d],E[++d],E[++d])}function g(e,i,n){var l,t;for(l=0;l<e.__k.length;l++)(t=e.__k[l])&&(t.__=e,i="function"==typeof t.type?g(t,i,n):V(n,t,t,e.__k,t.__e,i));return i}function V(e,i,n,l,t,r){var o,u,a;if(void 0!==i.__d)o=i.__d,i.__d=void 0;else if(null==n||t!=r||null==t.parentNode)e:if(null==r||r.parentNode!==e)e.appendChild(t),o=null;else{for(u=r,a=0;(u=u.nextSibling)&&a<l.length;a+=2)if(u==t)break e;e.insertBefore(t,r),o=r}return void 0!==o?o:t.nextSibling}function _(e,i,n){"-"===i[0]?e.setProperty(i,n):e[i]=null==n?"":"number"!=typeof n||c.test(i)?n:n+"px"}function w(e,i,n,l,t){var r;e:if("style"===i)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof l&&(e.style.cssText=l=""),l)for(i in l)n&&i in n||_(e.style,i,"");if(n)for(i in n)l&&n[i]===l[i]||_(e.style,i,n[i])}else if("o"===i[0]&&"n"===i[1])r=i!==(i=i.replace(/Capture$/,"")),i=i.toLowerCase()in e?i.toLowerCase().slice(2):i.slice(2),e.l||(e.l={}),e.l[i+r]=n,n?l||e.addEventListener(i,r?k:y,r):e.removeEventListener(i,r?k:y,r);else if("dangerouslySetInnerHTML"!==i){if(t)i=i.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==i&&"list"!==i&&"form"!==i&&"tabIndex"!==i&&"download"!==i&&i in e)try{e[i]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null!=n&&(!1!==n||"a"===i[0]&&"r"===i[1])?e.setAttribute(i,n):e.removeAttribute(i))}}function y(e){this.l[e.type+!1](i.event?i.event(e):e)}function k(e){this.l[e.type+!0](i.event?i.event(e):e)}function C(e,n,l,t,r,o,u,a,c){var N,b,p,x,D,E,g,V,_,y,k,C=n.type;if(void 0!==n.constructor)return null;null!=l.__h&&(c=l.__h,a=n.__e=l.__e,n.__h=null,o=[a]),(N=i.__b)&&N(n);try{e:if("function"==typeof C){if(V=n.props,_=(N=C.contextType)&&t[N.__c],y=N?_?_.props.value:N.__:t,l.__c?g=(b=n.__c=l.__c).__=b.__E:("prototype"in C&&C.prototype.render?n.__c=b=new C(V,y):(n.__c=b=new v(V,y),b.constructor=C,b.render=I),_&&_.sub(b),b.props=V,b.state||(b.state={}),b.context=y,b.__n=t,p=b.__d=!0,b.__h=[]),null==b.__s&&(b.__s=b.state),null!=C.getDerivedStateFromProps&&(b.__s==b.state&&(b.__s=d({},b.__s)),d(b.__s,C.getDerivedStateFromProps(V,b.__s))),x=b.props,D=b.state,p)null==C.getDerivedStateFromProps&&null!=b.componentWillMount&&b.componentWillMount(),null!=b.componentDidMount&&b.__h.push(b.componentDidMount);else{if(null==C.getDerivedStateFromProps&&V!==x&&null!=b.componentWillReceiveProps&&b.componentWillReceiveProps(V,y),!b.__e&&null!=b.shouldComponentUpdate&&!1===b.shouldComponentUpdate(V,b.__s,y)||n.__v===l.__v){b.props=V,b.state=b.__s,n.__v!==l.__v&&(b.__d=!1),b.__v=n,n.__e=l.__e,n.__k=l.__k,n.__k.forEach((function(e){e&&(e.__=n)})),b.__h.length&&u.push(b);break e}null!=b.componentWillUpdate&&b.componentWillUpdate(V,b.__s,y),null!=b.componentDidUpdate&&b.__h.push((function(){b.componentDidUpdate(x,D,E)}))}b.context=y,b.props=V,b.state=b.__s,(N=i.__r)&&N(n),b.__d=!1,b.__v=n,b.__P=e,N=b.render(b.props,b.state,b.context),b.state=b.__s,null!=b.getChildContext&&(t=d(d({},t),b.getChildContext())),p||null==b.getSnapshotBeforeUpdate||(E=b.getSnapshotBeforeUpdate(x,D)),k=null!=N&&N.type===f&&null==N.key?N.props.children:N,j(e,Array.isArray(k)?k:[k],n,l,t,r,o,u,a,c),b.base=n.__e,n.__h=null,b.__h.length&&u.push(b),g&&(b.__E=b.__=null),b.__e=!1}else null==o&&n.__v===l.__v?(n.__k=l.__k,n.__e=l.__e):n.__e=function(e,i,n,l,t,r,o,u){var a,c,d,N,b=n.props,f=i.props,v=i.type,p=0;if("svg"===v&&(t=!0),null!=r)for(;p<r.length;p++)if((a=r[p])&&(a===e||(v?a.localName==v:3==a.nodeType))){e=a,r[p]=null;break}if(null==e){if(null===v)return document.createTextNode(f);e=t?document.createElementNS("http://www.w3.org/2000/svg",v):document.createElement(v,f.is&&f),r=null,u=!1}if(null===v)b===f||u&&e.data===f||(e.data=f);else{if(r=r&&s.slice.call(e.childNodes),c=(b=n.props||m).dangerouslySetInnerHTML,d=f.dangerouslySetInnerHTML,!u){if(null!=r)for(b={},N=0;N<e.attributes.length;N++)b[e.attributes[N].name]=e.attributes[N].value;(d||c)&&(d&&(c&&d.__html==c.__html||d.__html===e.innerHTML)||(e.innerHTML=d&&d.__html||""))}if(function(e,i,n,l,t){var r;for(r in n)"children"===r||"key"===r||r in i||w(e,r,null,n[r],l);for(r in i)t&&"function"!=typeof i[r]||"children"===r||"key"===r||"value"===r||"checked"===r||n[r]===i[r]||w(e,r,i[r],n[r],l)}(e,f,b,t,u),d)i.__k=[];else if(p=i.props.children,j(e,Array.isArray(p)?p:[p],i,n,l,t&&"foreignObject"!==v,r,o,e.firstChild,u),null!=r)for(p=r.length;p--;)null!=r[p]&&h(r[p]);u||("value"in f&&void 0!==(p=f.value)&&(p!==e.value||"progress"===v&&!p)&&w(e,"value",p,b.value,!1),"checked"in f&&void 0!==(p=f.checked)&&p!==e.checked&&w(e,"checked",p,b.checked,!1))}return e}(l.__e,n,l,t,r,o,u,c);(N=i.diffed)&&N(n)}catch(e){n.__v=null,(c||null!=o)&&(n.__e=a,n.__h=!!c,o[o.indexOf(a)]=null),i.__e(e,n,l)}}function L(e,n){i.__c&&i.__c(n,e),e.some((function(n){try{e=n.__h,n.__h=[],e.some((function(e){e.call(n)}))}catch(e){i.__e(e,n.__v)}}))}function S(e,n,l){try{"function"==typeof e?e(n):e.current=n}catch(e){i.__e(e,l)}}function B(e,n,l){var t,r,o;if(i.unmount&&i.unmount(e),(t=e.ref)&&(t.current&&t.current!==e.__e||S(t,null,n)),l||"function"==typeof e.type||(l=null!=(r=e.__e)),e.__e=e.__d=void 0,null!=(t=e.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount()}catch(e){i.__e(e,n)}t.base=t.__P=null}if(t=e.__k)for(o=0;o<t.length;o++)t[o]&&B(t[o],n,l);null!=r&&h(r)}function I(e,i,n){return this.constructor(e,n)}function P(e,n,l){var t,r,o;i.__&&i.__(e,n),r=(t="function"==typeof l)?null:l&&l.__k||n.__k,o=[],C(n,e=(!t&&l||n).__k=N(f,null,[e]),r||m,m,void 0!==n.ownerSVGElement,!t&&l?[l]:r?null:n.firstChild?s.slice.call(n.childNodes):null,o,!t&&l?l:r?r.__e:n.firstChild,t),L(o,e)}i={__e:function(e,i){for(var n,l,t;i=i.__;)if((n=i.__c)&&!n.__)try{if((l=n.constructor)&&null!=l.getDerivedStateFromError&&(n.setState(l.getDerivedStateFromError(e)),t=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),t=n.__d),t)return n.__E=n}catch(i){e=i}throw e},__v:0},n=function(e){return null!=e&&void 0===e.constructor},v.prototype.setState=function(e,i){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=d({},this.state),"function"==typeof e&&(e=e(d({},n),this.props)),e&&d(n,e),null!=e&&this.__v&&(i&&this.__h.push(i),D(this))},v.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),D(this))},v.prototype.render=f,l=[],t="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,E.__r=0,o=0,a.render=P,a.hydrate=function e(i,n){P(i,n,e)},a.createElement=N,a.h=N,a.Fragment=f,a.createRef=function(){return{current:null}},a.isValidElement=n,a.Component=v,a.cloneElement=function(e,i,n){var l,t,r,o=arguments,u=d({},e.props);for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:u[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);return null!=n&&(u.children=n),b(e.type,u,l||e.key,t||e.ref,null)},a.createContext=function(e,i){var n={__c:i="__cC"+o++,__:e,Consumer:function(e,i){return e.children(i)},Provider:function(e){var n,l;return this.getChildContext||(n=[],(l={})[i]=this,this.getChildContext=function(){return l},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(D)},this.sub=function(e){n.push(e);var i=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),i&&i.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},a.toChildArray=function e(i,n){return n=n||[],null==i||"boolean"==typeof i||(Array.isArray(i)?i.some((function(i){e(i,n)})):n.push(i)),n},a.options=i;var T,z={},M={},H={exports:{}};
1
+ function e(e){if(e.__esModule)return e;var i=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(e).forEach((function(n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})})),i}var i,n,l,t,r,o,u={},a={},m={},s=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function d(e,i){for(var n in i)e[n]=i[n];return e}function h(e){var i=e.parentNode;i&&i.removeChild(e)}function N(e,i,n){var l,t,r,o=arguments,u={};for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:u[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);if(null!=n&&(u.children=n),"function"==typeof e&&null!=e.defaultProps)for(r in e.defaultProps)void 0===u[r]&&(u[r]=e.defaultProps[r]);return b(e,u,l,t,null)}function b(e,n,l,t,r){var o={type:e,props:n,key:l,ref:t,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++i.__v:r};return null!=i.vnode&&i.vnode(o),o}function f(e){return e.children}function v(e,i){this.props=e,this.context=i}function p(e,i){if(null==i)return e.__?p(e.__,e.__.__k.indexOf(e)+1):null;for(var n;i<e.__k.length;i++)if(null!=(n=e.__k[i])&&null!=n.__e)return n.__e;return"function"==typeof e.type?p(e):null}function x(e){var i,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,i=0;i<e.__k.length;i++)if(null!=(n=e.__k[i])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return x(e)}}function D(e){(!e.__d&&(e.__d=!0)&&l.push(e)&&!E.__r++||r!==i.debounceRendering)&&((r=i.debounceRendering)||t)(E)}function E(){for(var e;E.__r=l.length;)e=l.sort((function(e,i){return e.__v.__b-i.__v.__b})),l=[],e.some((function(e){var i,n,l,t,r,o;e.__d&&(r=(t=(i=e).__v).__e,(o=i.__P)&&(n=[],(l=d({},t)).__v=t.__v+1,C(o,t,l,i.__n,void 0!==o.ownerSVGElement,null!=t.__h?[r]:null,n,null==r?p(t):r,t.__h),L(n,t),t.__e!=r&&x(t)))}))}function g(e,i,n,l,t,r,o,u,a,c){var d,h,N,v,x,D,E,g=l&&l.__k||s,_=g.length;for(n.__k=[],d=0;d<i.length;d++)if(null!=(v=n.__k[d]=null==(v=i[d])||"boolean"==typeof v?null:"string"==typeof v||"number"==typeof v||"bigint"==typeof v?b(null,v,null,null,v):Array.isArray(v)?b(f,{children:v},null,null,null):v.__b>0?b(v.type,v.props,v.key,null,v.__v):v)){if(v.__=n,v.__b=n.__b+1,null===(N=g[d])||N&&v.key==N.key&&v.type===N.type)g[d]=void 0;else for(h=0;h<_;h++){if((N=g[h])&&v.key==N.key&&v.type===N.type){g[h]=void 0;break}N=null}C(e,v,N=N||m,t,r,o,u,a,c),x=v.__e,(h=v.ref)&&N.ref!=h&&(E||(E=[]),N.ref&&E.push(N.ref,null,v),E.push(h,v.__c||x,v)),null!=x?(null==D&&(D=x),"function"==typeof v.type&&null!=v.__k&&v.__k===N.__k?v.__d=a=j(v,a,e):a=V(e,v,N,g,x,a),c||"option"!==n.type?"function"==typeof n.type&&(n.__d=a):e.value=""):a&&N.__e==a&&a.parentNode!=e&&(a=p(N))}for(n.__e=D,d=_;d--;)null!=g[d]&&("function"==typeof n.type&&null!=g[d].__e&&g[d].__e==n.__d&&(n.__d=p(l,d+1)),B(g[d],g[d]));if(E)for(d=0;d<E.length;d++)S(E[d],E[++d],E[++d])}function j(e,i,n){var l,t;for(l=0;l<e.__k.length;l++)(t=e.__k[l])&&(t.__=e,i="function"==typeof t.type?j(t,i,n):V(n,t,t,e.__k,t.__e,i));return i}function V(e,i,n,l,t,r){var o,u,a;if(void 0!==i.__d)o=i.__d,i.__d=void 0;else if(null==n||t!=r||null==t.parentNode)e:if(null==r||r.parentNode!==e)e.appendChild(t),o=null;else{for(u=r,a=0;(u=u.nextSibling)&&a<l.length;a+=2)if(u==t)break e;e.insertBefore(t,r),o=r}return void 0!==o?o:t.nextSibling}function _(e,i,n){"-"===i[0]?e.setProperty(i,n):e[i]=null==n?"":"number"!=typeof n||c.test(i)?n:n+"px"}function w(e,i,n,l,t){var r;e:if("style"===i)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof l&&(e.style.cssText=l=""),l)for(i in l)n&&i in n||_(e.style,i,"");if(n)for(i in n)l&&n[i]===l[i]||_(e.style,i,n[i])}else if("o"===i[0]&&"n"===i[1])r=i!==(i=i.replace(/Capture$/,"")),i=i.toLowerCase()in e?i.toLowerCase().slice(2):i.slice(2),e.l||(e.l={}),e.l[i+r]=n,n?l||e.addEventListener(i,r?k:y,r):e.removeEventListener(i,r?k:y,r);else if("dangerouslySetInnerHTML"!==i){if(t)i=i.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==i&&"list"!==i&&"form"!==i&&"tabIndex"!==i&&"download"!==i&&i in e)try{e[i]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null!=n&&(!1!==n||"a"===i[0]&&"r"===i[1])?e.setAttribute(i,n):e.removeAttribute(i))}}function y(e){this.l[e.type+!1](i.event?i.event(e):e)}function k(e){this.l[e.type+!0](i.event?i.event(e):e)}function C(e,n,l,t,r,o,u,a,c){var N,b,p,x,D,E,j,V,_,y,k,C=n.type;if(void 0!==n.constructor)return null;null!=l.__h&&(c=l.__h,a=n.__e=l.__e,n.__h=null,o=[a]),(N=i.__b)&&N(n);try{e:if("function"==typeof C){if(V=n.props,_=(N=C.contextType)&&t[N.__c],y=N?_?_.props.value:N.__:t,l.__c?j=(b=n.__c=l.__c).__=b.__E:("prototype"in C&&C.prototype.render?n.__c=b=new C(V,y):(n.__c=b=new v(V,y),b.constructor=C,b.render=I),_&&_.sub(b),b.props=V,b.state||(b.state={}),b.context=y,b.__n=t,p=b.__d=!0,b.__h=[]),null==b.__s&&(b.__s=b.state),null!=C.getDerivedStateFromProps&&(b.__s==b.state&&(b.__s=d({},b.__s)),d(b.__s,C.getDerivedStateFromProps(V,b.__s))),x=b.props,D=b.state,p)null==C.getDerivedStateFromProps&&null!=b.componentWillMount&&b.componentWillMount(),null!=b.componentDidMount&&b.__h.push(b.componentDidMount);else{if(null==C.getDerivedStateFromProps&&V!==x&&null!=b.componentWillReceiveProps&&b.componentWillReceiveProps(V,y),!b.__e&&null!=b.shouldComponentUpdate&&!1===b.shouldComponentUpdate(V,b.__s,y)||n.__v===l.__v){b.props=V,b.state=b.__s,n.__v!==l.__v&&(b.__d=!1),b.__v=n,n.__e=l.__e,n.__k=l.__k,n.__k.forEach((function(e){e&&(e.__=n)})),b.__h.length&&u.push(b);break e}null!=b.componentWillUpdate&&b.componentWillUpdate(V,b.__s,y),null!=b.componentDidUpdate&&b.__h.push((function(){b.componentDidUpdate(x,D,E)}))}b.context=y,b.props=V,b.state=b.__s,(N=i.__r)&&N(n),b.__d=!1,b.__v=n,b.__P=e,N=b.render(b.props,b.state,b.context),b.state=b.__s,null!=b.getChildContext&&(t=d(d({},t),b.getChildContext())),p||null==b.getSnapshotBeforeUpdate||(E=b.getSnapshotBeforeUpdate(x,D)),k=null!=N&&N.type===f&&null==N.key?N.props.children:N,g(e,Array.isArray(k)?k:[k],n,l,t,r,o,u,a,c),b.base=n.__e,n.__h=null,b.__h.length&&u.push(b),j&&(b.__E=b.__=null),b.__e=!1}else null==o&&n.__v===l.__v?(n.__k=l.__k,n.__e=l.__e):n.__e=function(e,i,n,l,t,r,o,u){var a,c,d,N,b=n.props,f=i.props,v=i.type,p=0;if("svg"===v&&(t=!0),null!=r)for(;p<r.length;p++)if((a=r[p])&&(a===e||(v?a.localName==v:3==a.nodeType))){e=a,r[p]=null;break}if(null==e){if(null===v)return document.createTextNode(f);e=t?document.createElementNS("http://www.w3.org/2000/svg",v):document.createElement(v,f.is&&f),r=null,u=!1}if(null===v)b===f||u&&e.data===f||(e.data=f);else{if(r=r&&s.slice.call(e.childNodes),c=(b=n.props||m).dangerouslySetInnerHTML,d=f.dangerouslySetInnerHTML,!u){if(null!=r)for(b={},N=0;N<e.attributes.length;N++)b[e.attributes[N].name]=e.attributes[N].value;(d||c)&&(d&&(c&&d.__html==c.__html||d.__html===e.innerHTML)||(e.innerHTML=d&&d.__html||""))}if(function(e,i,n,l,t){var r;for(r in n)"children"===r||"key"===r||r in i||w(e,r,null,n[r],l);for(r in i)t&&"function"!=typeof i[r]||"children"===r||"key"===r||"value"===r||"checked"===r||n[r]===i[r]||w(e,r,i[r],n[r],l)}(e,f,b,t,u),d)i.__k=[];else if(p=i.props.children,g(e,Array.isArray(p)?p:[p],i,n,l,t&&"foreignObject"!==v,r,o,e.firstChild,u),null!=r)for(p=r.length;p--;)null!=r[p]&&h(r[p]);u||("value"in f&&void 0!==(p=f.value)&&(p!==e.value||"progress"===v&&!p)&&w(e,"value",p,b.value,!1),"checked"in f&&void 0!==(p=f.checked)&&p!==e.checked&&w(e,"checked",p,b.checked,!1))}return e}(l.__e,n,l,t,r,o,u,c);(N=i.diffed)&&N(n)}catch(e){n.__v=null,(c||null!=o)&&(n.__e=a,n.__h=!!c,o[o.indexOf(a)]=null),i.__e(e,n,l)}}function L(e,n){i.__c&&i.__c(n,e),e.some((function(n){try{e=n.__h,n.__h=[],e.some((function(e){e.call(n)}))}catch(e){i.__e(e,n.__v)}}))}function S(e,n,l){try{"function"==typeof e?e(n):e.current=n}catch(e){i.__e(e,l)}}function B(e,n,l){var t,r,o;if(i.unmount&&i.unmount(e),(t=e.ref)&&(t.current&&t.current!==e.__e||S(t,null,n)),l||"function"==typeof e.type||(l=null!=(r=e.__e)),e.__e=e.__d=void 0,null!=(t=e.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount()}catch(e){i.__e(e,n)}t.base=t.__P=null}if(t=e.__k)for(o=0;o<t.length;o++)t[o]&&B(t[o],n,l);null!=r&&h(r)}function I(e,i,n){return this.constructor(e,n)}function P(e,n,l){var t,r,o;i.__&&i.__(e,n),r=(t="function"==typeof l)?null:l&&l.__k||n.__k,o=[],C(n,e=(!t&&l||n).__k=N(f,null,[e]),r||m,m,void 0!==n.ownerSVGElement,!t&&l?[l]:r?null:n.firstChild?s.slice.call(n.childNodes):null,o,!t&&l?l:r?r.__e:n.firstChild,t),L(o,e)}i={__e:function(e,i){for(var n,l,t;i=i.__;)if((n=i.__c)&&!n.__)try{if((l=n.constructor)&&null!=l.getDerivedStateFromError&&(n.setState(l.getDerivedStateFromError(e)),t=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),t=n.__d),t)return n.__E=n}catch(i){e=i}throw e},__v:0},n=function(e){return null!=e&&void 0===e.constructor},v.prototype.setState=function(e,i){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=d({},this.state),"function"==typeof e&&(e=e(d({},n),this.props)),e&&d(n,e),null!=e&&this.__v&&(i&&this.__h.push(i),D(this))},v.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),D(this))},v.prototype.render=f,l=[],t="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,E.__r=0,o=0,a.render=P,a.hydrate=function e(i,n){P(i,n,e)},a.createElement=N,a.h=N,a.Fragment=f,a.createRef=function(){return{current:null}},a.isValidElement=n,a.Component=v,a.cloneElement=function(e,i,n){var l,t,r,o=arguments,u=d({},e.props);for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:u[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);return null!=n&&(u.children=n),b(e.type,u,l||e.key,t||e.ref,null)},a.createContext=function(e,i){var n={__c:i="__cC"+o++,__:e,Consumer:function(e,i){return e.children(i)},Provider:function(e){var n,l;return this.getChildContext||(n=[],(l={})[i]=this,this.getChildContext=function(){return l},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(D)},this.sub=function(e){n.push(e);var i=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),i&&i.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},a.toChildArray=function e(i,n){return n=n||[],null==i||"boolean"==typeof i||(Array.isArray(i)?i.some((function(i){e(i,n)})):n.push(i)),n},a.options=i;var T,z={},M={},H={exports:{}};
2
2
  /*!
3
3
  Copyright (c) 2018 Jed Watson.
4
4
  Licensed under the MIT License (MIT), see
5
5
  http://jedwatson.github.io/classnames
6
6
  */
7
- T=H,function(){var e={}.hasOwnProperty;function i(){for(var n=[],l=0;l<arguments.length;l++){var t=arguments[l];if(t){var r=typeof t;if("string"===r||"number"===r)n.push(t);else if(Array.isArray(t)){if(t.length){var o=i.apply(null,t);o&&n.push(o)}}else if("object"===r)if(t.toString===Object.prototype.toString)for(var u in t)e.call(t,u)&&t[u]&&n.push(u);else n.push(t.toString())}}return n.join(" ")}T.exports?(i.default=i,T.exports=i):window.classNames=i}();var A,O,q,F=H.exports,U={},R={},$=a,W=0,G=[],Z=$.options.__b,K=$.options.__r,J=$.options.diffed,Y=$.options.__c,Q=$.options.unmount;function X(e,i){$.options.__h&&$.options.__h(O,e,W||i),W=0;var n=O.__H||(O.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function ee(e){return W=1,ie(se,e)}function ie(e,i,n){var l=X(A++,2);return l.t=e,l.__c||(l.__=[n?n(i):se(void 0,i),function(e){var i=l.t(l.__[0],e);l.__[0]!==i&&(l.__=[i,l.__[1]],l.__c.setState({}))}],l.__c=O),l.__}function ne(e,i){var n=X(A++,4);!$.options.__s&&me(n.__H,i)&&(n.__=e,n.__H=i,O.__h.push(n))}function le(e,i){var n=X(A++,7);return me(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}function te(){G.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(ue),e.__H.__h.forEach(ae),e.__H.__h=[]}catch(i){e.__H.__h=[],$.options.__e(i,e.__v)}})),G=[]}$.options.__b=function(e){O=null,Z&&Z(e)},$.options.__r=function(e){K&&K(e),A=0;var i=(O=e.__c).__H;i&&(i.__h.forEach(ue),i.__h.forEach(ae),i.__h=[])},$.options.diffed=function(e){J&&J(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==G.push(i)&&q===$.options.requestAnimationFrame||((q=$.options.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(l),oe&&cancelAnimationFrame(i),setTimeout(e)},l=setTimeout(n,100);oe&&(i=requestAnimationFrame(n))})(te)),O=void 0},$.options.__c=function(e,i){i.some((function(e){try{e.__h.forEach(ue),e.__h=e.__h.filter((function(e){return!e.__||ae(e)}))}catch(n){i.some((function(e){e.__h&&(e.__h=[])})),i=[],$.options.__e(n,e.__v)}})),Y&&Y(e,i)},$.options.unmount=function(e){Q&&Q(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(ue)}catch(e){$.options.__e(e,i.__v)}};var re,oe="function"==typeof requestAnimationFrame;function ue(e){var i=O;"function"==typeof e.__c&&e.__c(),O=i}function ae(e){var i=O;e.__c=e.__(),O=i}function me(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}function se(e,i){return"function"==typeof i?i(e):i}function ce(e,i,n,l,t){var r={};for(var o in i)"ref"!=o&&(r[o]=i[o]);var u,a,m={type:e,props:r,key:n,ref:i&&i.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++re.__v,__source:l,__self:t};if("function"==typeof e&&(u=e.defaultProps))for(a in u)void 0===r[a]&&(r[a]=u[a]);return re.vnode&&re.vnode(m),m}R.useState=ee,R.useReducer=ie,R.useEffect=function(e,i){var n=X(A++,3);!$.options.__s&&me(n.__H,i)&&(n.__=e,n.__H=i,O.__H.__h.push(n))},R.useLayoutEffect=ne,R.useRef=function(e){return W=5,le((function(){return{current:e}}),[])},R.useImperativeHandle=function(e,i,n){W=6,ne((function(){"function"==typeof e?e(i()):e&&(e.current=i())}),null==n?n:n.concat(e))},R.useMemo=le,R.useCallback=function(e,i){return W=8,le((function(){return e}),i)},R.useContext=function(e){var i=O.context[e.__c],n=X(A++,9);return n.__c=e,i?(null==n.__&&(n.__=!0,i.sub(O)),i.props.value):e.__},R.useDebugValue=function(e,i){$.options.useDebugValue&&$.options.useDebugValue(i?i(e):e)},R.useErrorBoundary=function(e){var i=X(A++,10),n=ee();return i.__=e,O.componentDidCatch||(O.componentDidCatch=function(e){i.__&&i.__(e),n[1](e)}),[n[0],function(){n[1](void 0)}]},re={__e:function(e,i){for(var n,l,t;i=i.__;)if((n=i.__c)&&!n.__)try{if((l=n.constructor)&&null!=l.getDerivedStateFromError&&(n.setState(l.getDerivedStateFromError(e)),t=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),t=n.__d),t)return n.__E=n}catch(i){e=i}throw e},__v:0},"function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout;var de=Object.freeze({__proto__:null,jsx:ce,jsxs:ce,jsxDEV:ce,Fragment:function(e){return e.children}}),he=e(de);Object.defineProperty(U,"__esModule",{value:!0}),U.SvgIcon=function({name:e,className:i="",inline:n=!1,title:l=""}){if(!pe[e])throw new Error(`Icon name "${e}" is not registered`);const t=pe[e],r=(0,fe.useRef)();(0,fe.useLayoutEffect)((()=>{const e=r.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,t]);const o={};l&&(o.title=l);return(0,ve.jsxDEV)("span",{className:(0,be.default)("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:t},ref:r,...o},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5},this)},U.registerIcons=function(e,{reset:i=!1}={}){i&&(pe={});Object.assign(pe,e)},U.availableIcons=function(){return pe};var Ne,be=(Ne=H.exports)&&Ne.__esModule?Ne:{default:Ne},fe=R,ve=he;let pe={};Object.defineProperty(M,"__esModule",{value:!0}),M.IconButton=function({className:e="Hyp-IconButton",...i}){const{icon:n}=i;return(0,Ee.jsxDEV)(ge,{className:e,...i,children:(0,Ee.jsxDEV)(De.SvgIcon,{name:n},void 0,!1,{fileName:je,lineNumber:100,columnNumber:7},this)},void 0,!1,{fileName:je,lineNumber:99,columnNumber:5},this)},M.LabeledButton=function({children:e,className:i="Hyp-LabeledButton",...n}){const{icon:l,iconPosition:t="left"}=n;return(0,Ee.jsxDEV)(ge,{className:i,...n,children:[l&&"left"===t&&(0,Ee.jsxDEV)(De.SvgIcon,{name:l},void 0,!1,{fileName:je,lineNumber:118,columnNumber:43},this),e,l&&"right"===t&&(0,Ee.jsxDEV)(De.SvgIcon,{name:l},void 0,!1,{fileName:je,lineNumber:120,columnNumber:44},this)]},void 0,!0,{fileName:je,lineNumber:117,columnNumber:5},this)},M.LinkButton=function(e){return(0,Ee.jsxDEV)(ge,{className:"Hyp-LinkButton",...e},void 0,!1,{fileName:je,lineNumber:131,columnNumber:10},this)};var xe=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),De=U,Ee=he,je="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function ge({buttonRef:e,classes:i,className:n,icon:l,iconPosition:t="left",size:r="medium",variant:o="normal",expanded:u,pressed:a,type:m="button",...s}){const c={"aria-expanded":u,"aria-pressed":a,"aria-label":s.title};return(0,Ee.jsxDEV)("button",{ref:e,className:(0,xe.default)(n,`${n}--${r}`,`${n}--${o}`,{[`${n}--icon-${t}`]:l},i),type:m,...c,...s},void 0,!1,{fileName:je,lineNumber:73,columnNumber:5},this)}var Ve={},_e=' <svg\n width="32"\n height="32"\n viewBox="-4 -4 39 39"\n aria-hidden="true"\n focusable="false"\n >\n <rect\n class="hyp-svg-checkbox--background"\n width="35"\n height="35"\n x="-2"\n y="-2"\n stroke="currentColor"\n fill="none"\n stroke-width="3"\n rx="5"\n ry="5"\n />\n <polyline\n class="hyp-svg-checkbox--checkmark"\n points="4,14 12,23 28,5"\n stroke="transparent"\n stroke-width="5"\n fill="none"\n />\n</svg>',we=e(Object.freeze({__proto__:null,default:_e}));Object.defineProperty(Ve,"__esModule",{value:!0}),Ve.Checkbox=Ie,Ve.LabeledCheckbox=function({children:e,id:i,containerClasses:n="",...l}){var t;return null!==(t=i)&&void 0!==t||(i=l.name),(0,Le.jsxDEV)("label",{htmlFor:i,className:(0,ke.default)("Hyp-LabeledCheckbox",n),children:[(0,Le.jsxDEV)(Ie,{id:i,...l},void 0,!1,{fileName:Se,lineNumber:96,columnNumber:7},this),(0,Le.jsxDEV)("span",{"data-testid":"label-text",children:e},void 0,!1,{fileName:Se,lineNumber:97,columnNumber:7},this)]},void 0,!0,{fileName:Se,lineNumber:92,columnNumber:5},this)};var ye=Be(we),ke=Be(H.exports),Ce=U,Le=he,Se="/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";function Be(e){return e&&e.__esModule?e:{default:e}}function Ie({classes:e="",inputRef:i,onToggle:n,onClick:l,...t}){return(0,Le.jsxDEV)(Le.Fragment,{children:[(0,Le.jsxDEV)("input",{className:(0,ke.default)("Hyp-Checkbox",e),ref:i,type:"checkbox",onClick:function(e){null==n||n(e.currentTarget.checked),null==l||l.call(this,e)},...t},void 0,!1,{fileName:Se,lineNumber:67,columnNumber:7},this),(0,Le.jsxDEV)(Ce.SvgIcon,{className:"hyp-svg-checkbox",name:"hyp-checkbox"},void 0,!1,{fileName:Se,lineNumber:74,columnNumber:7},this)]},void 0,!0)}(0,Ce.registerIcons)({"hyp-checkbox":ye.default});var Pe={},Te={};Object.defineProperty(Te,"__esModule",{value:!0}),Te.downcastRef=function(e){return e},Object.defineProperty(Pe,"__esModule",{value:!0}),Pe.Frame=function({children:e,classes:i="",containerRef:n}){return(0,He.jsxDEV)("div",{className:(0,ze.default)("Hyp-Frame",i),ref:(0,Me.downcastRef)(n),children:e},void 0,!1,{fileName:Ae,lineNumber:26,columnNumber:5},this)},Pe.Card=function({children:e,classes:i="",containerRef:n}){return(0,He.jsxDEV)("div",{className:(0,ze.default)("Hyp-Card",i),ref:(0,Me.downcastRef)(n),children:e},void 0,!1,{fileName:Ae,lineNumber:42,columnNumber:5},this)},Pe.Actions=function({children:e,direction:i="row",classes:n="",containerRef:l}){const t=`Hyp-Actions--${i}`;return(0,He.jsxDEV)("div",{className:(0,ze.default)(t,n),ref:(0,Me.downcastRef)(l),children:e},void 0,!1,{fileName:Ae,lineNumber:72,columnNumber:5},this)},Pe.Scrollbox=function({children:e,classes:i="",containerRef:n,withHeader:l=!1}){const t=l?"Hyp-Scrollbox--with-header":"Hyp-Scrollbox";return(0,He.jsxDEV)("div",{className:(0,ze.default)(t,i),ref:(0,Me.downcastRef)(n),children:e},void 0,!1,{fileName:Ae,lineNumber:101,columnNumber:5},this)};var ze=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Me=Te,He=he,Ae="/home/runner/work/frontend-shared/frontend-shared/src/components/containers.js";var Oe={},qe='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cancel"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8l3.536-3.536L8 8 4.464 4.464 8 8zm0 0l-3.536 3.536L8 8l3.536 3.536L8 8z"></path></g></svg>\n',Fe=e(Object.freeze({__proto__:null,default:qe}));Object.defineProperty(Oe,"__esModule",{value:!0}),Oe.Dialog=function({buttons:e,cancelLabel:i="Cancel",children:n,contentClass:l,icon:t,initialFocus:r,onCancel:o,role:u="dialog",title:a,withCancelButton:m=!0,withCloseButton:s=!0}){const c=Qe("dialog-description"),d=Qe("dialog-title"),h=(0,Re.useRef)(null);(0,Re.useEffect)((()=>{if(null!==r){const e=null==r?void 0:r.current;e&&!e.disabled?e.focus():h.current.focus()}}),[]),(0,Re.useLayoutEffect)((()=>{const e=h.current.querySelector("p");e&&(e.id=c,h.current.setAttribute("aria-describedby",c))}),[c]);const N=o&&m,b=o&&s,f=e||N;return(0,Ze.jsxDEV)("div",{"aria-labelledby":d,className:(0,Ue.default)("Hyp-Dialog",{"Hyp-Dialog--closeable":b},l),ref:h,role:u,tabIndex:-1,children:[(0,Ze.jsxDEV)("header",{children:[t&&(0,Ze.jsxDEV)("div",{className:"Hyp-Dialog__header-icon",children:(0,Ze.jsxDEV)(Ge.SvgIcon,{name:t,title:a,"data-testid":"header-icon"},void 0,!1,{fileName:Ke,lineNumber:141,columnNumber:13},this)},void 0,!1,{fileName:Ke,lineNumber:140,columnNumber:11},this),(0,Ze.jsxDEV)("h2",{className:"Hyp-Dialog__title",id:d,children:a},void 0,!1,{fileName:Ke,lineNumber:144,columnNumber:9},this),o&&s&&(0,Ze.jsxDEV)("div",{className:"Hyp-Dialog__close",children:(0,Ze.jsxDEV)(We.IconButton,{"data-testid":"close-button",icon:"hyp-cancel",title:"Close",onClick:o},void 0,!1,{fileName:Ke,lineNumber:149,columnNumber:13},this)},void 0,!1,{fileName:Ke,lineNumber:148,columnNumber:11},this)]},void 0,!0,{fileName:Ke,lineNumber:138,columnNumber:7},this),n,f&&(0,Ze.jsxDEV)("div",{className:"Hyp-Dialog__actions",children:[N&&(0,Ze.jsxDEV)(We.LabeledButton,{"data-testid":"cancel-button",onClick:o,children:i},void 0,!1,{fileName:Ke,lineNumber:162,columnNumber:13},this),e]},void 0,!0,{fileName:Ke,lineNumber:160,columnNumber:9},this)]},void 0,!0,{fileName:Ke,lineNumber:127,columnNumber:5},this)};var Ue=Je(H.exports),Re=R,$e=Je(Fe),We=M,Ge=U,Ze=he,Ke="/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";function Je(e){return e&&e.__esModule?e:{default:e}}(0,Ge.registerIcons)({"hyp-cancel":$e.default});let Ye=0;function Qe(e){const[i]=(0,Re.useState)((()=>(++Ye,`${e}-${Ye}`)));return i}var Xe={},ei={},ii={};Object.defineProperty(ii,"__esModule",{value:!0}),ii.normalizeKeyName=function(e){const i={Left:"ArrowLeft",Up:"ArrowUp",Down:"ArrowDown",Right:"ArrowRight",Spacebar:" ",Del:"Delete"};return i[e]?i[e]:e},Object.defineProperty(ei,"__esModule",{value:!0}),ei.useElementShouldClose=function(e,i,n){(0,ni.useEffect)((()=>{if(!i)return()=>{};const l=ti(document.body,["keydown"],(e=>{const i=e;"Escape"===(0,li.normalizeKeyName)(i.key)&&n()})),t=ti(document.body,["focus"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0}),r=ti(document.body,["mousedown","click"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0});return()=>{l(),r(),t()}}),[e,i,n])};var ni=R,li=ii;function ti(e,i,n,{useCapture:l=!1}={}){return i.forEach((i=>e.addEventListener(i,n,l))),()=>{i.forEach((i=>e.removeEventListener(i,n,l)))}}Object.defineProperty(Xe,"__esModule",{value:!0}),Xe.Modal=ci,Xe.ConfirmModal=function({message:e,confirmAction:i,onConfirm:n,onCancel:l,...t}){return(0,mi.jsxDEV)(ci,{onCancel:l,buttons:[(0,mi.jsxDEV)(ai.LabeledButton,{onClick:n,variant:"primary","data-testid":"confirm-button",children:i},"ok",!1,{fileName:si,lineNumber:74,columnNumber:9},this)],...t,children:(0,mi.jsxDEV)("p",{children:e},void 0,!1,{fileName:si,lineNumber:85,columnNumber:7},this)},void 0,!1,{fileName:si,lineNumber:71,columnNumber:5},this)};var ri=R,oi=ei,ui=Oe,ai=M,mi=he,si="/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";function ci({children:e,onCancel:i,...n}){const l=(0,ri.useRef)(null);return(0,oi.useElementShouldClose)(l,!0,(()=>{i&&i()})),(0,mi.jsxDEV)(mi.Fragment,{children:[(0,mi.jsxDEV)("div",{className:"Hyp-Modal__overlay"},void 0,!1,{fileName:si,lineNumber:37,columnNumber:7},this),(0,mi.jsxDEV)("div",{className:"Hyp-Modal",ref:l,children:(0,mi.jsxDEV)(ui.Dialog,{onCancel:i,...n,children:e},void 0,!1,{fileName:si,lineNumber:39,columnNumber:9},this)},void 0,!1,{fileName:si,lineNumber:38,columnNumber:7},this)]},void 0,!0)}var di={};Object.defineProperty(di,"__esModule",{value:!0}),di.Panel=function({children:e,icon:i,onClose:n,title:l}){const t=!!n;return(0,vi.jsxDEV)("div",{className:(0,hi.default)("Hyp-Panel",{"Hyp-Panel--closeable":t}),children:[(0,vi.jsxDEV)("header",{children:[i&&(0,vi.jsxDEV)("div",{className:"Hyp-Panel__header-icon",children:(0,vi.jsxDEV)(fi.SvgIcon,{name:i,title:l},void 0,!1,{fileName:pi,lineNumber:39,columnNumber:13},this)},void 0,!1,{fileName:pi,lineNumber:38,columnNumber:11},this),(0,vi.jsxDEV)("h2",{className:"Hyp-Panel__title",children:l},void 0,!1,{fileName:pi,lineNumber:42,columnNumber:9},this),t&&(0,vi.jsxDEV)("div",{className:"Hyp-Panel__close",children:(0,vi.jsxDEV)(bi.IconButton,{icon:"hyp-cancel",title:"Close",onClick:n},void 0,!1,{fileName:pi,lineNumber:45,columnNumber:13},this)},void 0,!1,{fileName:pi,lineNumber:44,columnNumber:11},this)]},void 0,!0,{fileName:pi,lineNumber:36,columnNumber:7},this),(0,vi.jsxDEV)("div",{className:"Hyp-Panel__content",children:e},void 0,!1,{fileName:pi,lineNumber:49,columnNumber:7},this)]},void 0,!0,{fileName:pi,lineNumber:31,columnNumber:5},this)};var hi=xi(H.exports),Ni=xi(Fe),bi=M,fi=U,vi=he,pi="/home/runner/work/frontend-shared/frontend-shared/src/components/Panel.js";function xi(e){return e&&e.__esModule?e:{default:e}}(0,fi.registerIcons)({"hyp-cancel":Ni.default});var Di={},Ei='<svg viewBox="0 0 64 64">\n <g stroke-width="6" stroke="currentColor" stroke-linecap="round">\n <line y1="16" y2="28" transform="translate(32,32) rotate(180)">\n <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.8;.65;.45;.3;.15;0" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(225)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".15;0;1;.8;.65;.45;.3;.15" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(270)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".3;.15;0;1;.8;.65;.45;.3" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(315)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".45;.3;.15;0;1;.85;.65;.45" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(0)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".65;.45;.3;.15;0;1;.8;.65;" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(45)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".8;.65;.45;.3;.15;0;1;.8" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(90)">\n <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.6;.45;.3;.15;0;1;" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(135)">\n <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.8;.65;.45;.3;.15;0" repeatCount="indefinite"></animate>\n </line>\n </g>\n</svg>',ji=e(Object.freeze({__proto__:null,default:Ei}));Object.defineProperty(Di,"__esModule",{value:!0}),Di.Spinner=function({classes:e="",size:i="medium"}){const n=`Hyp-Spinner--${i}`;return(0,wi.jsxDEV)(_i.SvgIcon,{name:"hyp-spinner",className:(0,gi.default)(n,e)},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js",lineNumber:27,columnNumber:5},this)};var gi=yi(H.exports),Vi=yi(ji),_i=U,wi=he;function yi(e){return e&&e.__esModule?e:{default:e}}(0,_i.registerIcons)({"hyp-spinner":Vi.default});var ki={};Object.defineProperty(ki,"__esModule",{value:!0}),ki.Table=function({accessibleLabel:e,classes:i,containerClasses:n,emptyItemsMessage:l,isLoading:t=!1,items:r,onSelectItem:o,onUseItem:u,renderItem:a,selectedItem:m,tableHeaders:s}){const c=(0,Li.useRef)([]),d=(0,Li.useRef)(null),h=(0,Li.useRef)(null),N=e=>{const i=c.current[r.indexOf(e)];i&&i.focus(),o(e)},b=e=>{let i=!1;switch(e.key){case"Enter":i=!0,m&&u(m);break;case"ArrowUp":i=!0,N(zi(r,m,-1));break;case"ArrowDown":i=!0,N(zi(r,m,1));break;default:i=!1}i&&(e.preventDefault(),e.stopPropagation())};return(0,Li.useEffect)((()=>{if(!m)return;const e=c.current[r.indexOf(m)],i=h.current,n=d.current;if(e&&i&&n){const l=i.offsetHeight,t=e.offsetTop-n.scrollTop;t>=n.clientHeight&&e.scrollIntoView(),t<=l&&n.scrollBy(0,t-l)}}),[r,m]),(0,Pi.jsxDEV)(Ii.Scrollbox,{withHeader:!0,classes:(0,Ci.default)("Hyp-Table-Scrollbox",n),containerRef:d,children:[(0,Pi.jsxDEV)("table",{"aria-label":e,className:(0,Ci.default)("Hyp-Table",i),tabIndex:0,role:"grid",onKeyDown:b,children:[(0,Pi.jsxDEV)("thead",{ref:(0,Si.downcastRef)(h),children:(0,Pi.jsxDEV)("tr",{children:s.map((({classes:e,label:i},n)=>(0,Pi.jsxDEV)("th",{className:(0,Ci.default)("Hyp-Table__header",e),scope:"col",children:i},`${i}-${n}`,!1,{fileName:Ti,lineNumber:180,columnNumber:15},this)))},void 0,!1,{fileName:Ti,lineNumber:178,columnNumber:11},this)},void 0,!1,{fileName:Ti,lineNumber:177,columnNumber:9},this),(0,Pi.jsxDEV)("tbody",{children:!t&&r.map(((e,i)=>(0,Pi.jsxDEV)("tr",{"aria-selected":m===e,className:(0,Ci.default)({"is-selected":m===e}),onMouseDown:()=>o(e),onClick:()=>o(e),onDblClick:()=>u(e),ref:e=>c.current[i]=e,tabIndex:-1,children:a(e,m===e)},i,!1,{fileName:Ti,lineNumber:193,columnNumber:15},this)))},void 0,!1,{fileName:Ti,lineNumber:190,columnNumber:9},this)]},void 0,!0,{fileName:Ti,lineNumber:170,columnNumber:7},this),t&&(0,Pi.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__loading",children:(0,Pi.jsxDEV)(Bi.Spinner,{size:"large"},void 0,!1,{fileName:Ti,lineNumber:212,columnNumber:11},this)},void 0,!1,{fileName:Ti,lineNumber:211,columnNumber:9},this),!t&&0===r.length&&l&&(0,Pi.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__message","data-testid":"empty-items-message",children:l},void 0,!1,{fileName:Ti,lineNumber:216,columnNumber:9},this)]},void 0,!0,{fileName:Ti,lineNumber:165,columnNumber:5},this)};var Ci=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Li=R,Si=Te,Bi=Di,Ii=Pe,Pi=he,Ti="/home/runner/work/frontend-shared/frontend-shared/src/components/Table.js";function zi(e,i,n){const l=i?e.indexOf(i):-1,t=l+n;return l<0||t<0?e[0]:t>=e.length?e[e.length-1]:e[t]}var Mi={};Object.defineProperty(Mi,"__esModule",{value:!0}),Mi.TextInput=function({classes:e="",inputRef:i,hasError:n=!1,type:l="text",...t}){return(0,Ai.jsxDEV)("input",{className:(0,Hi.default)("Hyp-TextInput",{"has-error":n},e),...t,ref:i,type:l},void 0,!1,{fileName:Oi,lineNumber:39,columnNumber:5},this)},Mi.TextInputWithButton=function({children:e,classes:i=""}){return(0,Ai.jsxDEV)("div",{className:(0,Hi.default)("Hyp-TextInputWithButton",i),children:e},void 0,!1,{fileName:Oi,lineNumber:67,columnNumber:5},this)};var Hi=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Ai=he,Oi="/home/runner/work/frontend-shared/frontend-shared/src/components/TextInput.js";var qi={};Object.defineProperty(qi,"__esModule",{value:!0}),qi.Thumbnail=function({children:e,classes:i="",isLoading:n=!1,placeholder:l="...",size:t="medium"}){const r=(0,Ui.toChildArray)(e).length?e:l;return(0,$i.jsxDEV)("div",{className:(0,Fi.default)("Hyp-Thumbnail",i),children:(0,$i.jsxDEV)("div",{className:"Hyp-Thumbnail__content",children:[n&&(0,$i.jsxDEV)(Ri.Spinner,{size:t},void 0,!1,{fileName:Wi,lineNumber:59,columnNumber:23},this),!n&&r]},void 0,!0,{fileName:Wi,lineNumber:58,columnNumber:7},this)},void 0,!1,{fileName:Wi,lineNumber:57,columnNumber:5},this)};var Fi=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Ui=a,Ri=Di,$i=he,Wi="/home/runner/work/frontend-shared/frontend-shared/src/components/Thumbnail.js";!function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"IconButton",{enumerable:!0,get:function(){return i.IconButton}}),Object.defineProperty(e,"LabeledButton",{enumerable:!0,get:function(){return i.LabeledButton}}),Object.defineProperty(e,"LinkButton",{enumerable:!0,get:function(){return i.LinkButton}}),Object.defineProperty(e,"LabeledCheckbox",{enumerable:!0,get:function(){return n.LabeledCheckbox}}),Object.defineProperty(e,"Checkbox",{enumerable:!0,get:function(){return n.Checkbox}}),Object.defineProperty(e,"Frame",{enumerable:!0,get:function(){return l.Frame}}),Object.defineProperty(e,"Card",{enumerable:!0,get:function(){return l.Card}}),Object.defineProperty(e,"Actions",{enumerable:!0,get:function(){return l.Actions}}),Object.defineProperty(e,"Scrollbox",{enumerable:!0,get:function(){return l.Scrollbox}}),Object.defineProperty(e,"Dialog",{enumerable:!0,get:function(){return t.Dialog}}),Object.defineProperty(e,"Modal",{enumerable:!0,get:function(){return r.Modal}}),Object.defineProperty(e,"ConfirmModal",{enumerable:!0,get:function(){return r.ConfirmModal}}),Object.defineProperty(e,"Panel",{enumerable:!0,get:function(){return o.Panel}}),Object.defineProperty(e,"Spinner",{enumerable:!0,get:function(){return u.Spinner}}),Object.defineProperty(e,"SvgIcon",{enumerable:!0,get:function(){return a.SvgIcon}}),Object.defineProperty(e,"registerIcons",{enumerable:!0,get:function(){return a.registerIcons}}),Object.defineProperty(e,"Table",{enumerable:!0,get:function(){return m.Table}}),Object.defineProperty(e,"TextInput",{enumerable:!0,get:function(){return s.TextInput}}),Object.defineProperty(e,"TextInputWithButton",{enumerable:!0,get:function(){return s.TextInputWithButton}}),Object.defineProperty(e,"Thumbnail",{enumerable:!0,get:function(){return c.Thumbnail}}),Object.defineProperty(e,"useElementShouldClose",{enumerable:!0,get:function(){return d.useElementShouldClose}}),Object.defineProperty(e,"normalizeKeyName",{enumerable:!0,get:function(){return h.normalizeKeyName}});var i=M,n=Ve,l=Pe,t=Oe,r=Xe,o=di,u=Di,a=U,m=ki,s=Mi,c=qi,d=ei,h=ii}(z);var Gi={},Zi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12L3 8l4-4M4 8h9-9z"></path></g></svg>\n'})),Ki=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4l4 4-4 4m3-4H3h9z"></path></g></svg>\n'})),Ji=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="Icon Icon--check"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L6 13 3 8"></path></g></svg>\n'})),Yi=e(Object.freeze({__proto__:null,default:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">\n <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />\n </g>\n</svg>\n'})),Qi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--edit"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4l1 1-9 9-2 1 1-2 9-9zm3-3l1 1-1 1-1-1 1-1z"></path></g></svg>\n'})),Xi=e(Object.freeze({__proto__:null,default:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <rect fill="#ffffff" stroke="none" width="17.14407" height="16.046612" x="3.8855932" y="3.9449153" />\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <path d="M0,2.00494659 C0,0.897645164 0.897026226,0 2.00494659,0 L21.9950534,0 C23.1023548,0 24,0.897026226 24,2.00494659 L24,21.9950534 C24,23.1023548 23.1029738,24 21.9950534,24 L2.00494659,24 C0.897645164,24 0,23.1029738 0,21.9950534 L0,2.00494659 Z M9,24 L12,28 L15,24 L9,24 Z M7.00811294,4 L4,4 L4,20 L7.00811294,20 L7.00811294,15.0028975 C7.00811294,12.004636 8.16824717,12.0097227 9,12 C10,12.0072451 11.0189302,12.0606714 11.0189302,14.003477 L11.0189302,20 L14.0270431,20 L14.0270431,13.1087862 C14.0270433,10 12,9.00309038 10,9.00309064 C8.01081726,9.00309091 8,9.00309086 7.00811294,11.0019317 L7.00811294,4 Z M19,19.9869002 C20.1045695,19.9869002 21,19.0944022 21,17.9934501 C21,16.892498 20.1045695,16 19,16 C17.8954305,16 17,16.892498 17,17.9934501 C17,19.0944022 17.8954305,19.9869002 19,19.9869002 Z" fill="currentColor"></path>\n </g>\n</svg>\n'})),en=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--profile"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15c0-2.761 3.134-5 7-5s7 2.239 7 5M8 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g></svg>\n'})),nn=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--trash"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 4h12l-2 11H4L2 4zM1 1h14H1z"></path></g></svg>\n'}));Object.defineProperty(Gi,"__esModule",{value:!0}),Gi.default=void 0;var ln=Nn(Zi),tn=Nn(Ki),rn=Nn(Fe),on=Nn(Ji),un=Nn(we),an=Nn(Yi),mn=Nn(Qi),sn=Nn(Xi),cn=Nn(en),dn=Nn(ji),hn=Nn(nn);function Nn(e){return e&&e.__esModule?e:{default:e}}var bn={"arrow-left":ln.default,"arrow-right":tn.default,cancel:rn.default,check:on.default,checkbox:un.default,collapsed:an.default,edit:mn.default,logo:sn.default,profile:cn.default,"hyp-spinner":dn.default,trash:hn.default};Gi.default=bn;var fn={},vn={},pn={},xn={},Dn={};Object.defineProperty(Dn,"__esModule",{value:!0}),Dn.jsxToString=function e(i){if("string"==typeof i||"number"==typeof i||"bigint"==typeof i)return i.toString();if("boolean"==typeof i)return"";if(i&&"type"in i){const l="string"==typeof(n=i.type)?n:n.displayName||n.name;let t=Object.entries(i.props).map((([e,i])=>{if("children"===e)return"";if("boolean"==typeof i)return i?e:"";var n;return`${e}=${"string"==typeof i?`"${n=i,n.replace(/"/g,'\\"')}"`:`{${i}}`}`})).join(" ").trim();t.length>0&&(t=" "+t);const r=i.props.children;if(r){let i=Array.isArray(r)?r.map(e).join("\n"):e(r);return i=function(e,i){const n=" ".repeat(i);return e.split("\n").map((e=>n+e)).join("\n")}(i,2),`<${l}${t}>\n${i}\n</${l}>`}return`<${l}${t} />`}return"";var n},Object.defineProperty(xn,"__esModule",{value:!0});var En=xn.default=void 0,jn=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),gn=a,Vn=R,_n=M,wn=Dn,yn=he,kn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/Library.js";function Cn({children:e,withSource:i=!1,style:n={},title:l}){const[t,r]=(0,Vn.useState)("demo"),o=(0,gn.toChildArray)(e).map(((e,i)=>(0,yn.jsxDEV)("li",{children:(0,yn.jsxDEV)("code",{children:(0,yn.jsxDEV)("pre",{children:(0,wn.jsxToString)(e)},void 0,!1,{fileName:kn,lineNumber:135,columnNumber:11},this)},void 0,!1,{fileName:kn,lineNumber:134,columnNumber:9},this)},i,!1,{fileName:kn,lineNumber:133,columnNumber:7},this)));return(0,yn.jsxDEV)("div",{className:"LibraryDemo",children:[l&&(0,yn.jsxDEV)("h4",{className:"LibraryDemo__header",children:l},void 0,!1,{fileName:kn,lineNumber:142,columnNumber:17},this),(0,yn.jsxDEV)("div",{className:"LibraryDemo__tabs",children:[(0,yn.jsxDEV)(_n.LabeledButton,{onClick:()=>r("demo"),pressed:"demo"===t,variant:"dark",children:"Demo"},void 0,!1,{fileName:kn,lineNumber:144,columnNumber:9},this),i&&(0,yn.jsxDEV)(_n.LabeledButton,{onClick:()=>r("source"),pressed:"source"===t,variant:"dark",children:"Source"},void 0,!1,{fileName:kn,lineNumber:152,columnNumber:11},this)]},void 0,!0,{fileName:kn,lineNumber:143,columnNumber:7},this),(0,yn.jsxDEV)("div",{className:"LibraryDemo__container",children:["demo"===t&&(0,yn.jsxDEV)("div",{className:"LibraryDemo__demo",style:n,children:(0,yn.jsxDEV)("div",{className:"LibraryDemo__demo-content",children:e},void 0,!1,{fileName:kn,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:kn,lineNumber:163,columnNumber:11},this),"source"===t&&(0,yn.jsxDEV)("div",{className:"LibraryDemo__source",children:(0,yn.jsxDEV)("ul",{children:o},void 0,!1,{fileName:kn,lineNumber:169,columnNumber:13},this)},void 0,!1,{fileName:kn,lineNumber:168,columnNumber:11},this)]},void 0,!0,{fileName:kn,lineNumber:161,columnNumber:7},this)]},void 0,!0,{fileName:kn,lineNumber:141,columnNumber:5},this)}var Ln={Page:function({children:e,title:i}){return(0,yn.jsxDEV)("section",{className:"LibraryPage",children:[(0,yn.jsxDEV)("h1",{className:"LibraryPage__heading",children:i},void 0,!1,{fileName:kn,lineNumber:52,columnNumber:7},this),e]},void 0,!0,{fileName:kn,lineNumber:51,columnNumber:5},this)},Pattern:function({children:e,title:i}){return(0,yn.jsxDEV)("section",{className:"LibraryPattern",children:[(0,yn.jsxDEV)("h2",{className:"LibraryPattern__heading",children:i},void 0,!1,{fileName:kn,lineNumber:66,columnNumber:7},this),e]},void 0,!0,{fileName:kn,lineNumber:65,columnNumber:5},this)},Example:function({children:e,title:i,variant:n="split"}){const l=(0,gn.toChildArray)(e),t=l.filter((e=>"object"==typeof e&&(null==e?void 0:e.type)===Cn)),r=l.filter((e=>!t.includes(e)));return(0,yn.jsxDEV)("div",{className:(0,jn.default)("LibraryExample",`LibraryExample--${n}`),children:[(0,yn.jsxDEV)("div",{className:"LibraryExample__content",children:[i&&(0,yn.jsxDEV)("h3",{className:"LibraryExample__heading",children:i},void 0,!1,{fileName:kn,lineNumber:103,columnNumber:19},this),r]},void 0,!0,{fileName:kn,lineNumber:102,columnNumber:7},this),(0,yn.jsxDEV)("div",{className:"LibraryExample__demos",children:t},void 0,!1,{fileName:kn,lineNumber:106,columnNumber:7},this)]},void 0,!0,{fileName:kn,lineNumber:101,columnNumber:5},this)},Demo:Cn};En=xn.default=Ln,Object.defineProperty(pn,"__esModule",{value:!0}),pn.default=function(){return(0,Bn.jsxDEV)(Sn.default.Page,{title:"Pattern Library",children:[(0,Bn.jsxDEV)("p",{children:"This pattern library demonstrates foundations, patterns and components that can be used in Hypothesis front-end applications."},void 0,!1,{fileName:In,lineNumber:6,columnNumber:7},this),(0,Bn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Foundations"},void 0,!1,{fileName:In,lineNumber:11,columnNumber:7},this),(0,Bn.jsxDEV)("p",{children:[(0,Bn.jsxDEV)("strong",{children:"Foundations"},void 0,!1,{fileName:In,lineNumber:14,columnNumber:9},this)," are the core design system elements—colors, spacing systems, typography—that define the underlying design fundamentals in Hypothesis UI."]},void 0,!0,{fileName:In,lineNumber:13,columnNumber:7},this),(0,Bn.jsxDEV)("p",{children:"They exist independently of implementation."},void 0,!1,{fileName:In,lineNumber:19,columnNumber:7},this),(0,Bn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Patterns"},void 0,!1,{fileName:In,lineNumber:21,columnNumber:7},this),(0,Bn.jsxDEV)("p",{children:[(0,Bn.jsxDEV)("strong",{children:"Patterns"},void 0,!1,{fileName:In,lineNumber:24,columnNumber:9},this)," are modular implementations of the design system ",(0,Bn.jsxDEV)("strong",{children:"foundations"},void 0,!1,{fileName:In,lineNumber:25,columnNumber:16},this),"—from the atomic to the complex. These implementations are in HTML and CSS."]},void 0,!0,{fileName:In,lineNumber:23,columnNumber:7},this),(0,Bn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Components"},void 0,!1,{fileName:In,lineNumber:29,columnNumber:7},this),(0,Bn.jsxDEV)("p",{children:[(0,Bn.jsxDEV)("strong",{children:"Components"},void 0,!1,{fileName:In,lineNumber:32,columnNumber:9},this)," are"," ",(0,Bn.jsxDEV)("a",{href:"https://preactjs.com/",children:"Preact"},void 0,!1,{fileName:In,lineNumber:33,columnNumber:9},this)," components that are built using underlying ",(0,Bn.jsxDEV)("strong",{children:"patterns"},void 0,!1,{fileName:In,lineNumber:34,columnNumber:26},this),"."]},void 0,!0,{fileName:In,lineNumber:31,columnNumber:7},this)]},void 0,!0,{fileName:In,lineNumber:5,columnNumber:5},this)};var Sn=function(e){return e&&e.__esModule?e:{default:e}}(xn),Bn=he,In="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js";var Pn={};Object.defineProperty(Pn,"__esModule",{value:!0}),Pn.default=function(){return(0,zn.jsxDEV)(Tn.default.Page,{title:"Colors",children:[(0,zn.jsxDEV)(Tn.default.Pattern,{title:"Brand red",children:(0,zn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:An},void 0,!1,{fileName:Mn,lineNumber:58,columnNumber:9},this)},void 0,!1,{fileName:Mn,lineNumber:57,columnNumber:7},this),(0,zn.jsxDEV)(Tn.default.Pattern,{title:"Greys",children:(0,zn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:On},void 0,!1,{fileName:Mn,lineNumber:64,columnNumber:9},this)},void 0,!1,{fileName:Mn,lineNumber:63,columnNumber:7},this),(0,zn.jsxDEV)(Tn.default.Pattern,{title:"State indicators",children:(0,zn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:qn},void 0,!1,{fileName:Mn,lineNumber:70,columnNumber:9},this)},void 0,!1,{fileName:Mn,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:Mn,lineNumber:56,columnNumber:5},this)};var Tn=function(e){return e&&e.__esModule?e:{default:e}}(xn),zn=he,Mn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";function Hn({colorName:e}){return(0,zn.jsxDEV)("div",{children:[(0,zn.jsxDEV)("div",{className:`hyp-u-bg-color--${e}`,style:"width:16rem;height:2rem;margin-right:1em"},void 0,!1,{fileName:Mn,lineNumber:31,columnNumber:7},this),(0,zn.jsxDEV)("p",{children:(0,zn.jsxDEV)("i",{children:e},void 0,!1,{fileName:Mn,lineNumber:36,columnNumber:9},this)},void 0,!1,{fileName:Mn,lineNumber:35,columnNumber:7},this)]},void 0,!0,{fileName:Mn,lineNumber:30,columnNumber:5},this)}const An=["brand"].map((e=>(0,zn.jsxDEV)(Hn,{colorName:e},e,!1,{fileName:Mn,lineNumber:43,columnNumber:3},void 0))),On=["white","grey-0","grey-1","grey-2","grey-3","grey-4","grey-5","grey-6","grey-7","grey-8","grey-9"].map((e=>(0,zn.jsxDEV)(Hn,{colorName:e},e,!1,{fileName:Mn,lineNumber:47,columnNumber:3},void 0))),qn=["success","notice","error"].map((e=>(0,zn.jsxDEV)(Hn,{colorName:e},e,!1,{fileName:Mn,lineNumber:51,columnNumber:3},void 0)));var Fn={};Object.defineProperty(Fn,"__esModule",{value:!0}),Fn.default=function(){const[e,i]=(0,Rn.useState)(!1),[n,l]=(0,Rn.useState)(!1),[t,r]=(0,Rn.useState)(!1);return(0,Gn.jsxDEV)(Wn.default.Page,{title:"Layout",children:[(0,Gn.jsxDEV)(Wn.default.Pattern,{title:"Spacing Units",children:[(0,Gn.jsxDEV)("p",{children:["Spacing units provide a way to apply predefined, consistent spacing dimensions between (margins) and around (padding) elements. Our spacing is based on a ",(0,Gn.jsxDEV)("code",{children:"1rem"},void 0,!1,{fileName:Zn,lineNumber:80,columnNumber:33},this)," foundational unit."]},void 0,!0,{fileName:Zn,lineNumber:77,columnNumber:9},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:["0","0.125rem","0.25rem","0.5rem","0.75rem","1rem (default unit)","1.5rem","2rem","4rem","8rem"].map(((e,i)=>(0,Gn.jsxDEV)("div",{className:`hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${i}`,children:[(0,Gn.jsxDEV)("div",{className:"hyp-u-bg-color--white",style:{paddingRight:"1rem"},children:(0,Gn.jsxDEV)("strong",{children:i},void 0,!1,{fileName:Zn,lineNumber:92,columnNumber:17},this)},void 0,!1,{fileName:Zn,lineNumber:88,columnNumber:15},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-bg-color--white hyp-u-stretch",style:{paddingLeft:"1rem"},children:(0,Gn.jsxDEV)("code",{children:e},void 0,!1,{fileName:Zn,lineNumber:98,columnNumber:17},this)},void 0,!1,{fileName:Zn,lineNumber:94,columnNumber:15},this)]},i,!0,{fileName:Zn,lineNumber:84,columnNumber:13},this)))},void 0,!1,{fileName:Zn,lineNumber:82,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:76,columnNumber:7},this),(0,Gn.jsxDEV)(Wn.default.Pattern,{title:"Horizontal spacing",children:[(0,Gn.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children."},void 0,!1,{fileName:Zn,lineNumber:106,columnNumber:9},this),(0,Gn.jsxDEV)("p",{children:["The default spacing unit used by"," ",(0,Gn.jsxDEV)("code",{children:".hyp-u-horizontal-spacing"},void 0,!1,{fileName:Zn,lineNumber:113,columnNumber:11},this)," and mixins is 3, marked with an asterisk below."]},void 0,!0,{fileName:Zn,lineNumber:111,columnNumber:9},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:(0,Gn.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-vertical-spacing",children:[(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:0},void 0,!1,{fileName:Zn,lineNumber:119,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:1},void 0,!1,{fileName:Zn,lineNumber:120,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:2},void 0,!1,{fileName:Zn,lineNumber:121,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:3,defaultSize:!0},void 0,!1,{fileName:Zn,lineNumber:122,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:4},void 0,!1,{fileName:Zn,lineNumber:123,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:5},void 0,!1,{fileName:Zn,lineNumber:124,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:6},void 0,!1,{fileName:Zn,lineNumber:125,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:7},void 0,!1,{fileName:Zn,lineNumber:126,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:8},void 0,!1,{fileName:Zn,lineNumber:127,columnNumber:13},this),(0,Gn.jsxDEV)(Yn,{direction:"horizontal",size:9},void 0,!1,{fileName:Zn,lineNumber:128,columnNumber:13},this)]},void 0,!0,{fileName:Zn,lineNumber:118,columnNumber:11},this)},void 0,!1,{fileName:Zn,lineNumber:117,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:105,columnNumber:7},this),(0,Gn.jsxDEV)(Wn.default.Pattern,{title:"Vertical spacing",children:[(0,Gn.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust vertical spacing between an element's immediate children."},void 0,!1,{fileName:Zn,lineNumber:134,columnNumber:9},this),(0,Gn.jsxDEV)("p",{children:["The default spacing unit used by ",(0,Gn.jsxDEV)("code",{children:".hyp-u-vertical-spacing"},void 0,!1,{fileName:Zn,lineNumber:140,columnNumber:44},this)," ","and mixins is 5, marked with an asterisk below."]},void 0,!0,{fileName:Zn,lineNumber:139,columnNumber:9},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing--7",children:[(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:0},void 0,!1,{fileName:Zn,lineNumber:144,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:1},void 0,!1,{fileName:Zn,lineNumber:145,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:2},void 0,!1,{fileName:Zn,lineNumber:146,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:3},void 0,!1,{fileName:Zn,lineNumber:147,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:4},void 0,!1,{fileName:Zn,lineNumber:148,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:5,defaultSize:!0},void 0,!1,{fileName:Zn,lineNumber:149,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:6},void 0,!1,{fileName:Zn,lineNumber:150,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:7},void 0,!1,{fileName:Zn,lineNumber:151,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:8},void 0,!1,{fileName:Zn,lineNumber:152,columnNumber:11},this),(0,Gn.jsxDEV)(Yn,{direction:"vertical",size:9},void 0,!1,{fileName:Zn,lineNumber:153,columnNumber:11},this)]},void 0,!0,{fileName:Zn,lineNumber:143,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:133,columnNumber:7},this),(0,Gn.jsxDEV)(Wn.default.Pattern,{title:"Positioning and Overlay",children:[(0,Gn.jsxDEV)(Wn.default.Example,{title:"Centering in the viewport",children:[(0,Gn.jsxDEV)("p",{children:["The ",(0,Gn.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:Zn,lineNumber:160,columnNumber:17},this)," layout pattern centers an element both horizontally and vertically within the entire viewport."]},void 0,!0,{fileName:Zn,lineNumber:159,columnNumber:11},this),(0,Gn.jsxDEV)(Wn.default.Demo,{children:(0,Gn.jsxDEV)("div",{children:[(0,Gn.jsxDEV)($n.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:Zn,lineNumber:165,columnNumber:15},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-fixed-centered",style:"width:450px;"+(e?"visibility:visible":"visibility:hidden"),children:(0,Gn.jsxDEV)("div",{className:"hyp-card",children:[(0,Gn.jsxDEV)("p",{children:"This is a card that is centered vertically and horizontally in the current viewport."},void 0,!1,{fileName:Zn,lineNumber:178,columnNumber:19},this),(0,Gn.jsxDEV)("div",{className:"hyp-actions",children:(0,Gn.jsxDEV)($n.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:Zn,lineNumber:183,columnNumber:21},this)},void 0,!1,{fileName:Zn,lineNumber:182,columnNumber:19},this)]},void 0,!0,{fileName:Zn,lineNumber:177,columnNumber:17},this)},void 0,!1,{fileName:Zn,lineNumber:171,columnNumber:15},this)]},void 0,!0,{fileName:Zn,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:Zn,lineNumber:163,columnNumber:11},this)]},void 0,!0,{fileName:Zn,lineNumber:158,columnNumber:9},this),(0,Gn.jsxDEV)(Wn.default.Example,{title:"Full-screen overlay",children:[(0,Gn.jsxDEV)("p",{children:["The ",(0,Gn.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:Zn,lineNumber:198,columnNumber:17},this)," layout pattern provides a full-viewport, semi-opaque overlay that obscures UI interactions in the viewport below. It is intended for use as a backdrop for modals, e.g."]},void 0,!0,{fileName:Zn,lineNumber:197,columnNumber:11},this),(0,Gn.jsxDEV)(Wn.default.Demo,{children:(0,Gn.jsxDEV)("div",{children:[(0,Gn.jsxDEV)($n.LabeledButton,{variant:"primary",onClick:()=>l(!0),children:"Show example"},void 0,!1,{fileName:Zn,lineNumber:204,columnNumber:15},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-overlay",style:n?"visibility:visible":"visibility:hidden",children:(0,Gn.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,Gn.jsxDEV)($n.LabeledButton,{onClick:()=>l(!1),children:"Hide example"},void 0,!1,{fileName:Zn,lineNumber:217,columnNumber:19},this)},void 0,!1,{fileName:Zn,lineNumber:216,columnNumber:17},this)},void 0,!1,{fileName:Zn,lineNumber:210,columnNumber:15},this)]},void 0,!0,{fileName:Zn,lineNumber:203,columnNumber:13},this)},void 0,!1,{fileName:Zn,lineNumber:202,columnNumber:11},this)]},void 0,!0,{fileName:Zn,lineNumber:196,columnNumber:9},this),(0,Gn.jsxDEV)(Wn.default.Example,{title:"Full-screen overlay with fixed-centered content",children:[(0,Gn.jsxDEV)("p",{children:["This shows an example of combining the ",(0,Gn.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:Zn,lineNumber:228,columnNumber:52},this)," and"," ",(0,Gn.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:Zn,lineNumber:229,columnNumber:13},this)," patterns."]},void 0,!0,{fileName:Zn,lineNumber:227,columnNumber:11},this),(0,Gn.jsxDEV)(Wn.default.Demo,{children:(0,Gn.jsxDEV)("div",{children:[(0,Gn.jsxDEV)($n.LabeledButton,{variant:"primary",onClick:()=>r(!0),children:"Show example"},void 0,!1,{fileName:Zn,lineNumber:233,columnNumber:15},this),(0,Gn.jsxDEV)("div",{className:"hyp-u-overlay",style:t?"visibility:visible":"visibility:hidden",children:(0,Gn.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,Gn.jsxDEV)("div",{className:"hyp-card",style:"width:450px",children:[(0,Gn.jsxDEV)("div",{children:"This is content in a fixed-centered card of 450px width over a full-screen overlay."},void 0,!1,{fileName:Zn,lineNumber:247,columnNumber:21},this),(0,Gn.jsxDEV)("div",{className:"hyp-actions",children:(0,Gn.jsxDEV)($n.LabeledButton,{variant:"primary",onClick:()=>r(!1),children:"Hide example"},void 0,!1,{fileName:Zn,lineNumber:252,columnNumber:23},this)},void 0,!1,{fileName:Zn,lineNumber:251,columnNumber:21},this)]},void 0,!0,{fileName:Zn,lineNumber:246,columnNumber:19},this)},void 0,!1,{fileName:Zn,lineNumber:245,columnNumber:17},this)},void 0,!1,{fileName:Zn,lineNumber:239,columnNumber:15},this)]},void 0,!0,{fileName:Zn,lineNumber:232,columnNumber:13},this)},void 0,!1,{fileName:Zn,lineNumber:231,columnNumber:11},this)]},void 0,!0,{fileName:Zn,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:157,columnNumber:7},this)]},void 0,!0,{fileName:Zn,lineNumber:75,columnNumber:5},this)};var Un=Kn(H.exports),Rn=R,$n=z,Wn=Kn(xn),Gn=he,Zn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";function Kn(e){return e&&e.__esModule?e:{default:e}}function Jn(){return(0,Gn.jsxDEV)("div",{className:"hyp-u-bg-color--grey-4",style:{width:"2rem",height:"2rem"}},void 0,!1,{fileName:Zn,lineNumber:9,columnNumber:5},this)}function Yn({direction:e,size:i,defaultSize:n=!1}){const l="vertical"===e?"hyp-u-layout-column":"hyp-u-layout-row",t="vertical"===e?"hyp-u-vertical-spacing":"hyp-u-horizontal-spacing",r=`${t}--${i}`;return(0,Gn.jsxDEV)("div",{className:(0,Un.default)(l,t),children:[n?(0,Gn.jsxDEV)("div",{children:(0,Gn.jsxDEV)("strong",{children:[i,"*"]},void 0,!0,{fileName:Zn,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:Zn,lineNumber:36,columnNumber:9},this):(0,Gn.jsxDEV)("div",{children:i},void 0,!1,{fileName:Zn,lineNumber:40,columnNumber:9},this),(0,Gn.jsxDEV)("div",{className:(0,Un.default)(l,r,"hyp-u-border"),children:[(0,Gn.jsxDEV)(Jn,{},void 0,!1,{fileName:Zn,lineNumber:43,columnNumber:9},this),(0,Gn.jsxDEV)(Jn,{},void 0,!1,{fileName:Zn,lineNumber:44,columnNumber:9},this),(0,Gn.jsxDEV)(Jn,{},void 0,!1,{fileName:Zn,lineNumber:45,columnNumber:9},this),(0,Gn.jsxDEV)(Jn,{},void 0,!1,{fileName:Zn,lineNumber:46,columnNumber:9},this),(0,Gn.jsxDEV)(Jn,{},void 0,!1,{fileName:Zn,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:42,columnNumber:7},this),"horizontal"===e&&(0,Gn.jsxDEV)("div",{children:(0,Gn.jsxDEV)("code",{children:[".",r]},void 0,!0,{fileName:Zn,lineNumber:51,columnNumber:11},this)},void 0,!1,{fileName:Zn,lineNumber:50,columnNumber:9},this)]},void 0,!0,{fileName:Zn,lineNumber:34,columnNumber:5},this)}var Qn={};Object.defineProperty(Qn,"__esModule",{value:!0}),Qn.default=function(){return(0,il.jsxDEV)(el.default.Page,{title:"Forms",children:[(0,il.jsxDEV)(el.default.Pattern,{title:"Checkbox",children:[(0,il.jsxDEV)("p",{children:["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ",(0,il.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:nl,lineNumber:10,columnNumber:44},this),"."]},void 0,!0,{fileName:nl,lineNumber:8,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Checkbox",children:[(0,il.jsxDEV)("p",{children:["This example shows an ",(0,il.jsxDEV)("code",{children:'input type="checkbox"'},void 0,!1,{fileName:nl,lineNumber:14,columnNumber:35},this)," ","element with the ",(0,il.jsxDEV)("code",{children:"checkbox"},void 0,!1,{fileName:nl,lineNumber:15,columnNumber:30},this)," pattern applied, both unchecked and checked."]},void 0,!0,{fileName:nl,lineNumber:13,columnNumber:11},this),(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing",children:[(0,il.jsxDEV)("div",{children:[(0,il.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:nl,lineNumber:21,columnNumber:17},this),(0,il.jsxDEV)(Xn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:nl,lineNumber:22,columnNumber:17},this)]},void 0,!0,{fileName:nl,lineNumber:20,columnNumber:15},this),(0,il.jsxDEV)("div",{children:[(0,il.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox",checked:!0},void 0,!1,{fileName:nl,lineNumber:26,columnNumber:17},this),(0,il.jsxDEV)(Xn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:nl,lineNumber:27,columnNumber:17},this)]},void 0,!0,{fileName:nl,lineNumber:25,columnNumber:15},this)]},void 0,!0,{fileName:nl,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:nl,lineNumber:12,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Checkbox with label",children:(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("label",{className:"hyp-label",children:[(0,il.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:nl,lineNumber:36,columnNumber:15},this),(0,il.jsxDEV)(Xn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:nl,lineNumber:37,columnNumber:15},this),(0,il.jsxDEV)("span",{children:"Click me, please"},void 0,!1,{fileName:nl,lineNumber:38,columnNumber:15},this)]},void 0,!0,{fileName:nl,lineNumber:35,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:34,columnNumber:11},this)},void 0,!1,{fileName:nl,lineNumber:33,columnNumber:9},this)]},void 0,!0,{fileName:nl,lineNumber:7,columnNumber:7},this),(0,il.jsxDEV)(el.default.Pattern,{title:"Text inputs",children:[(0,il.jsxDEV)("p",{children:["A pattern for ",(0,il.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:nl,lineNumber:46,columnNumber:25},this)]},void 0,!0,{fileName:nl,lineNumber:45,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Basic text input",children:(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("input",{className:"hyp-text-input",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:nl,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:nl,lineNumber:48,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Text input in an error state",children:(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("input",{className:"hyp-text-input has-error",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:nl,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:59,columnNumber:11},this)},void 0,!1,{fileName:nl,lineNumber:58,columnNumber:9},this)]},void 0,!0,{fileName:nl,lineNumber:44,columnNumber:7},this),(0,il.jsxDEV)(el.default.Pattern,{title:"Text input with button",children:[(0,il.jsxDEV)("p",{children:"A pattern that pairs a text input field with an icon-only button. Use a dark-variant button to match the standard pattern here."},void 0,!1,{fileName:nl,lineNumber:70,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Text input with a dark-variant IconButton",children:(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("div",{style:{width:"300px"},children:(0,il.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,il.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:nl,lineNumber:78,columnNumber:17},this),(0,il.jsxDEV)(Xn.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:nl,lineNumber:79,columnNumber:17},this)]},void 0,!0,{fileName:nl,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:nl,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:75,columnNumber:11},this)},void 0,!1,{fileName:nl,lineNumber:74,columnNumber:9},this),(0,il.jsxDEV)(el.default.Example,{title:"Text input and button in an error state",children:(0,il.jsxDEV)(el.default.Demo,{withSource:!0,children:(0,il.jsxDEV)("div",{style:{width:"300px"},children:(0,il.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,il.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com",className:"has-error"},void 0,!1,{fileName:nl,lineNumber:89,columnNumber:17},this),(0,il.jsxDEV)(Xn.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:nl,lineNumber:94,columnNumber:17},this)]},void 0,!0,{fileName:nl,lineNumber:88,columnNumber:15},this)},void 0,!1,{fileName:nl,lineNumber:87,columnNumber:13},this)},void 0,!1,{fileName:nl,lineNumber:86,columnNumber:11},this)},void 0,!1,{fileName:nl,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:nl,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:nl,lineNumber:6,columnNumber:5},this)};var Xn=z,el=function(e){return e&&e.__esModule?e:{default:e}}(xn),il=he,nl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js";var ll={},tl={};Object.defineProperty(tl,"__esModule",{value:!0}),tl.SampleListElements=function(){return(0,rl.jsxDEV)(rl.Fragment,{children:[(0,rl.jsxDEV)("li",{children:"Alpha"},void 0,!1,{fileName:ol,lineNumber:12,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Bravo"},void 0,!1,{fileName:ol,lineNumber:13,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Charlie"},void 0,!1,{fileName:ol,lineNumber:14,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Delta"},void 0,!1,{fileName:ol,lineNumber:15,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Echo"},void 0,!1,{fileName:ol,lineNumber:16,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Foxtrot"},void 0,!1,{fileName:ol,lineNumber:17,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Golf"},void 0,!1,{fileName:ol,lineNumber:18,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Hotel"},void 0,!1,{fileName:ol,lineNumber:19,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"India"},void 0,!1,{fileName:ol,lineNumber:20,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Juliett"},void 0,!1,{fileName:ol,lineNumber:21,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Kilo"},void 0,!1,{fileName:ol,lineNumber:22,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Lima"},void 0,!1,{fileName:ol,lineNumber:23,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Mike"},void 0,!1,{fileName:ol,lineNumber:24,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"November"},void 0,!1,{fileName:ol,lineNumber:25,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Oscar"},void 0,!1,{fileName:ol,lineNumber:26,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Papa"},void 0,!1,{fileName:ol,lineNumber:27,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Quebec"},void 0,!1,{fileName:ol,lineNumber:28,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Romeo"},void 0,!1,{fileName:ol,lineNumber:29,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Sierra"},void 0,!1,{fileName:ol,lineNumber:30,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Tango"},void 0,!1,{fileName:ol,lineNumber:31,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Uniform"},void 0,!1,{fileName:ol,lineNumber:32,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Victor"},void 0,!1,{fileName:ol,lineNumber:33,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Whiskey"},void 0,!1,{fileName:ol,lineNumber:34,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"XRay"},void 0,!1,{fileName:ol,lineNumber:35,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Yankee"},void 0,!1,{fileName:ol,lineNumber:36,columnNumber:7},this),(0,rl.jsxDEV)("li",{children:"Zulu"},void 0,!1,{fileName:ol,lineNumber:37,columnNumber:7},this)]},void 0,!0)},tl.SampleTableBody=function(){return(0,rl.jsxDEV)("tbody",{children:[(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:ol,lineNumber:46,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:ol,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:45,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:ol,lineNumber:50,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:ol,lineNumber:51,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:49,columnNumber:7},this),(0,rl.jsxDEV)("tr",{className:"is-selected",children:[(0,rl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:ol,lineNumber:54,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:ol,lineNumber:55,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:53,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:ol,lineNumber:58,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:ol,lineNumber:59,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:57,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:ol,lineNumber:62,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:ol,lineNumber:63,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:61,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:ol,lineNumber:66,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Katydid Lozenges Moebius"},void 0,!1,{fileName:ol,lineNumber:67,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:65,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:ol,lineNumber:70,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:ol,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:69,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:ol,lineNumber:74,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:ol,lineNumber:75,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:73,columnNumber:7},this),(0,rl.jsxDEV)("tr",{children:[(0,rl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:ol,lineNumber:78,columnNumber:9},this),(0,rl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:ol,lineNumber:79,columnNumber:9},this)]},void 0,!0,{fileName:ol,lineNumber:77,columnNumber:7},this)]},void 0,!0,{fileName:ol,lineNumber:44,columnNumber:5},this)},tl.LoremIpsum=function(){return(0,rl.jsxDEV)("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."},void 0,!1,{fileName:ol,lineNumber:92,columnNumber:5},this)},tl.sampleTableContent=function(){return{tableHeaders:[{label:"Name"},{label:"Last modified"}],items:[{displayName:"Persnickety.pdf",updated:"Jul 28, 2021"},{displayName:"Albumen.pdf",updated:"Jul 20, 2021"},{displayName:"Yams-and-sauce.pdf",updated:"Aug 04, 2021"},{displayName:"Coneflowers-and-their-allies.pdf",updated:"Aug 01, 2021"},{displayName:"Dollars-and-sense.pdf",updated:"Aug 22, 2021"},{displayName:"Mendicant Friars.PDF",updated:"Jul 20, 2021"},{displayName:"Paleogeography.pdf",updated:"Aug 04, 2021"},{displayName:"Foregone conclusions.pdf",updated:"Aug 01, 2021"},{displayName:"Forklifts-and-bananas.pdf",updated:"Aug 01, 2021"},{displayName:"Coracles.pdf",updated:"Aug 05, 2021"}]}};var rl=he,ol="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/samples.js";Object.defineProperty(ll,"__esModule",{value:!0}),ll.default=function(){const[e,i]=(0,ul.useState)(!1);return(0,cl.jsxDEV)(ml.default.Page,{title:"Containers",children:[(0,cl.jsxDEV)(ml.default.Pattern,{title:"Frame",children:[(0,cl.jsxDEV)(ml.default.Example,{title:"Basic frame",children:[(0,cl.jsxDEV)("p",{children:["A ",(0,cl.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:dl,lineNumber:15,columnNumber:15},this)," provides a border, background, padding and vertical spacing of immediate children."]},void 0,!0,{fileName:dl,lineNumber:14,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-frame",children:[(0,cl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:dl,lineNumber:20,columnNumber:15},this),(0,cl.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:dl,lineNumber:21,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:13,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Using frames with the 'clean' theme",children:[(0,cl.jsxDEV)("p",{children:"Clean-theme styling removes borders from frames."},void 0,!1,{fileName:dl,lineNumber:30,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"theme-clean",children:(0,cl.jsxDEV)("div",{className:"hyp-frame",children:[(0,cl.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:dl,lineNumber:34,columnNumber:17},this),(0,cl.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:dl,lineNumber:37,columnNumber:17},this)]},void 0,!0,{fileName:dl,lineNumber:33,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:dl,lineNumber:12,columnNumber:7},this),(0,cl.jsxDEV)(ml.default.Pattern,{title:"Card",children:[(0,cl.jsxDEV)(ml.default.Example,{title:"Basic card",children:[(0,cl.jsxDEV)("p",{children:["A ",(0,cl.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:dl,lineNumber:50,columnNumber:15},this)," is a frame with a shadow and hover-shadow effect that fills available horizontal space. It extends ",(0,cl.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:dl,lineNumber:51,columnNumber:63},this),"."]},void 0,!0,{fileName:dl,lineNumber:49,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-card",children:[(0,cl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:dl,lineNumber:56,columnNumber:15},this),(0,cl.jsxDEV)("p",{children:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},void 0,!1,{fileName:dl,lineNumber:60,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:54,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:48,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Card with no hover",children:[(0,cl.jsxDEV)("p",{children:"A card's hover can be disabled by using a modifying class."},void 0,!1,{fileName:dl,lineNumber:69,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-card--no-hover",children:(0,cl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:dl,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:70,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:68,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Card example with actions",children:[(0,cl.jsxDEV)("p",{children:"This example shows a card with some available actions."},void 0,!1,{fileName:dl,lineNumber:81,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-card",children:[(0,cl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:dl,lineNumber:84,columnNumber:15},this),(0,cl.jsxDEV)("div",{className:"hyp-actions",children:[(0,cl.jsxDEV)(al.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:dl,lineNumber:86,columnNumber:17},this),(0,cl.jsxDEV)(al.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:dl,lineNumber:87,columnNumber:17},this),(0,cl.jsxDEV)(al.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:dl,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:dl,lineNumber:85,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:83,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:82,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:80,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Using cards with the 'clean' theme",children:[(0,cl.jsxDEV)("p",{children:"Clean-theme styling removes hover shadows and borders."},void 0,!1,{fileName:dl,lineNumber:95,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"theme-clean",children:(0,cl.jsxDEV)("div",{className:"hyp-card",children:[(0,cl.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:dl,lineNumber:99,columnNumber:17},this),(0,cl.jsxDEV)("div",{className:"hyp-actions",children:[(0,cl.jsxDEV)(al.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:dl,lineNumber:104,columnNumber:19},this),(0,cl.jsxDEV)(al.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:dl,lineNumber:105,columnNumber:19},this),(0,cl.jsxDEV)(al.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:dl,lineNumber:106,columnNumber:19},this)]},void 0,!0,{fileName:dl,lineNumber:103,columnNumber:17},this)]},void 0,!0,{fileName:dl,lineNumber:98,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:97,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:96,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:94,columnNumber:9},this)]},void 0,!0,{fileName:dl,lineNumber:47,columnNumber:7},this),(0,cl.jsxDEV)(ml.default.Pattern,{title:"Actions",children:[(0,cl.jsxDEV)("p",{children:["The ",(0,cl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:dl,lineNumber:116,columnNumber:15},this)," pattern lays out a set of items, typically buttons, in a row (default) or column, with spacing."," "]},void 0,!0,{fileName:dl,lineNumber:115,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Horizontal (default) layout",children:[(0,cl.jsxDEV)("p",{children:["These examples show ",(0,cl.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:dl,lineNumber:121,columnNumber:33},this)," used in its default layout (horizontal) with ",(0,cl.jsxDEV)("code",{children:"LabeledButton"},void 0,!1,{fileName:dl,lineNumber:122,columnNumber:31},this)," and"," ",(0,cl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:dl,lineNumber:123,columnNumber:13},this)," components."]},void 0,!0,{fileName:dl,lineNumber:120,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-actions",children:[(0,cl.jsxDEV)(al.LabeledButton,{icon:"profile",children:"User"},void 0,!1,{fileName:dl,lineNumber:127,columnNumber:15},this),(0,cl.jsxDEV)(al.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:dl,lineNumber:128,columnNumber:15},this),(0,cl.jsxDEV)(al.LabeledButton,{icon:"trash",children:"Delete"},void 0,!1,{fileName:dl,lineNumber:129,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:126,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:125,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-actions",children:[(0,cl.jsxDEV)(al.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:dl,lineNumber:135,columnNumber:15},this),(0,cl.jsxDEV)(al.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:dl,lineNumber:136,columnNumber:15},this),(0,cl.jsxDEV)(al.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:dl,lineNumber:137,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:134,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:133,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:119,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Columnar layout",children:(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,cl.jsxDEV)(al.LabeledButton,{children:"User"},void 0,!1,{fileName:dl,lineNumber:145,columnNumber:15},this),(0,cl.jsxDEV)(al.LabeledButton,{children:"Edit"},void 0,!1,{fileName:dl,lineNumber:146,columnNumber:15},this),(0,cl.jsxDEV)(al.LabeledButton,{children:"Delete"},void 0,!1,{fileName:dl,lineNumber:147,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:144,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:143,columnNumber:11},this)},void 0,!1,{fileName:dl,lineNumber:142,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Columnar layout, filling space",children:[(0,cl.jsxDEV)("p",{children:["This example shows buttons stretching to fill available space in"," ",(0,cl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:dl,lineNumber:155,columnNumber:13},this),"."]},void 0,!0,{fileName:dl,lineNumber:153,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{style:"width:300px",children:(0,cl.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,cl.jsxDEV)(al.LabeledButton,{variant:"primary",children:"Do this"},void 0,!1,{fileName:dl,lineNumber:160,columnNumber:17},this),(0,cl.jsxDEV)(al.LabeledButton,{variant:"primary",children:"No, this!"},void 0,!1,{fileName:dl,lineNumber:161,columnNumber:17},this),(0,cl.jsxDEV)(al.LabeledButton,{variant:"primary",children:"Maybe this?"},void 0,!1,{fileName:dl,lineNumber:162,columnNumber:17},this)]},void 0,!0,{fileName:dl,lineNumber:159,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:158,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:157,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:152,columnNumber:9},this)]},void 0,!0,{fileName:dl,lineNumber:114,columnNumber:7},this),(0,cl.jsxDEV)(ml.default.Pattern,{title:"Modal",children:(0,cl.jsxDEV)(ml.default.Example,{title:"Responsive modal container",children:[(0,cl.jsxDEV)("p",{children:["This pattern makes use of the ",(0,cl.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:dl,lineNumber:172,columnNumber:43},this)," pattern. It responsively positions and sizes a container in the viewport to hold modal content."]},void 0,!0,{fileName:dl,lineNumber:171,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{children:[(0,cl.jsxDEV)(al.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:dl,lineNumber:178,columnNumber:15},this),(0,cl.jsxDEV)("div",{className:"hyp-u-overlay",style:{visibility:e?"visible":"hidden"},children:(0,cl.jsxDEV)("div",{className:"hyp-modal",children:(0,cl.jsxDEV)("div",{className:"hyp-card",children:[(0,cl.jsxDEV)("div",{children:(0,cl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue bibendum ipsum, ut euismod eros. Morbi sit amet sollicitudin diam. Cras tristique dui at nulla gravida, non sodales velit tincidunt. Pellentesque pharetra elit ac risus porta, vel vestibulum odio consectetur. Aliquam convallis augue ex, vitae aliquet enim varius id. Integer porttitor erat non nisi posuere, a tempus felis ultrices. In hac habitasse platea dictumst. Donec ut justo at odio pharetra laoreet ac consectetur elit."},void 0,!1,{fileName:dl,lineNumber:191,columnNumber:23},this)},void 0,!1,{fileName:dl,lineNumber:190,columnNumber:21},this),(0,cl.jsxDEV)("div",{className:"hyp-actions",children:(0,cl.jsxDEV)(al.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:dl,lineNumber:205,columnNumber:23},this)},void 0,!1,{fileName:dl,lineNumber:204,columnNumber:21},this)]},void 0,!0,{fileName:dl,lineNumber:189,columnNumber:19},this)},void 0,!1,{fileName:dl,lineNumber:188,columnNumber:17},this)},void 0,!1,{fileName:dl,lineNumber:184,columnNumber:15},this)]},void 0,!0,{fileName:dl,lineNumber:177,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:176,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:170,columnNumber:9},this)},void 0,!1,{fileName:dl,lineNumber:169,columnNumber:7},this),(0,cl.jsxDEV)(ml.default.Pattern,{title:"Scrollbox",children:[(0,cl.jsxDEV)("p",{children:[(0,cl.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:dl,lineNumber:222,columnNumber:11},this)," is a CSS-only pattern that provides scroll-hint affordances for overflowing content (shadows). It sets its own"," ",(0,cl.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:dl,lineNumber:224,columnNumber:11},this)," scrolling context, but authors need to define bounding dimensions."]},void 0,!0,{fileName:dl,lineNumber:221,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"List in a scrollbox",children:[(0,cl.jsxDEV)("p",{children:["This example shows an overflowing ",(0,cl.jsxDEV)("code",{children:"ul"},void 0,!1,{fileName:dl,lineNumber:229,columnNumber:47},this)," in a"," ",(0,cl.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:dl,lineNumber:230,columnNumber:13},this),"."]},void 0,!0,{fileName:dl,lineNumber:228,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,cl.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,cl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,cl.jsxDEV)(sl.SampleListElements,{},void 0,!1,{fileName:dl,lineNumber:236,columnNumber:19},this)},void 0,!1,{fileName:dl,lineNumber:235,columnNumber:17},this)},void 0,!1,{fileName:dl,lineNumber:234,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:233,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:232,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:227,columnNumber:9},this),(0,cl.jsxDEV)(ml.default.Example,{title:"Scrollbox with header offset",children:[(0,cl.jsxDEV)("p",{children:["The ",(0,cl.jsxDEV)("code",{children:"scrollbox--with-header"},void 0,!1,{fileName:dl,lineNumber:245,columnNumber:17},this)," pattern offsets the top scroll-hinting shadow to accommodate one header-like element with a touch-target height (currently 44px)."]},void 0,!0,{fileName:dl,lineNumber:244,columnNumber:11},this),(0,cl.jsxDEV)(ml.default.Demo,{withSource:!0,children:(0,cl.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,cl.jsxDEV)("div",{className:"hyp-scrollbox--with-header",children:[(0,cl.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,cl.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:(0,cl.jsxDEV)("strong",{children:"NATO Phonetic Alphabet"},void 0,!1,{fileName:dl,lineNumber:255,columnNumber:21},this)},void 0,!1,{fileName:dl,lineNumber:254,columnNumber:19},this)},void 0,!1,{fileName:dl,lineNumber:253,columnNumber:17},this),(0,cl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,cl.jsxDEV)(sl.SampleListElements,{},void 0,!1,{fileName:dl,lineNumber:259,columnNumber:19},this)},void 0,!1,{fileName:dl,lineNumber:258,columnNumber:17},this)]},void 0,!0,{fileName:dl,lineNumber:252,columnNumber:15},this)},void 0,!1,{fileName:dl,lineNumber:251,columnNumber:13},this)},void 0,!1,{fileName:dl,lineNumber:250,columnNumber:11},this)]},void 0,!0,{fileName:dl,lineNumber:243,columnNumber:9},this)]},void 0,!0,{fileName:dl,lineNumber:220,columnNumber:7},this)]},void 0,!0,{fileName:dl,lineNumber:11,columnNumber:5},this)};var ul=R,al=z,ml=function(e){return e&&e.__esModule?e:{default:e}}(xn),sl=tl,cl=he,dl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js";var hl={};Object.defineProperty(hl,"__esModule",{value:!0}),hl.default=function(){return(0,fl.jsxDEV)(bl.default.Page,{title:"Panels",children:[(0,fl.jsxDEV)("p",{children:["The ",(0,fl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:vl,lineNumber:8,columnNumber:13},this)," pattern is used by several components:"," ",(0,fl.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:vl,lineNumber:9,columnNumber:9},this),", ",(0,fl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:vl,lineNumber:9,columnNumber:29},this),", ",(0,fl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:vl,lineNumber:9,columnNumber:50},this),", e.g."]},void 0,!0,{fileName:vl,lineNumber:7,columnNumber:7},this),(0,fl.jsxDEV)(bl.default.Pattern,{title:"Panel",children:[(0,fl.jsxDEV)("p",{children:["A panel is a card with a header and affordances for a close button. Use the ",(0,fl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:vl,lineNumber:14,columnNumber:19},this)," modifier when using"," ",(0,fl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:vl,lineNumber:15,columnNumber:11},this)," with an icon-only close button."]},void 0,!0,{fileName:vl,lineNumber:12,columnNumber:9},this),(0,fl.jsxDEV)(bl.default.Example,{title:"Panel with no header",children:[(0,fl.jsxDEV)("p",{children:["This is in a panel that has no header. A header is not required, but you are encouraged to use ",(0,fl.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:vl,lineNumber:20,columnNumber:39},this)," in that case. Note that a ",(0,fl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:vl,lineNumber:21,columnNumber:15},this)," will currently fill all available space. The containing element has been set to ",(0,fl.jsxDEV)("code",{children:"max-width: 400px"},void 0,!1,{fileName:vl,lineNumber:22,columnNumber:48},this)," ","here."]},void 0,!0,{fileName:vl,lineNumber:18,columnNumber:11},this),(0,fl.jsxDEV)(bl.default.Demo,{withSource:!0,children:(0,fl.jsxDEV)("div",{style:{maxWidth:"400px"},children:(0,fl.jsxDEV)("div",{className:"hyp-panel",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"},void 0,!1,{fileName:vl,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:vl,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:vl,lineNumber:25,columnNumber:11},this)]},void 0,!0,{fileName:vl,lineNumber:17,columnNumber:9},this),(0,fl.jsxDEV)(bl.default.Example,{title:"Panel with title but no close button",children:[(0,fl.jsxDEV)("p",{children:"This example shows a panel with header and content, but no close affordances."},void 0,!1,{fileName:vl,lineNumber:38,columnNumber:11},this),(0,fl.jsxDEV)(bl.default.Demo,{withSource:!0,children:(0,fl.jsxDEV)("div",{className:"hyp-panel",children:[(0,fl.jsxDEV)("header",{children:(0,fl.jsxDEV)("h2",{className:"hyp-panel__title",children:"This is a panel title in a panel header"},void 0,!1,{fileName:vl,lineNumber:45,columnNumber:17},this)},void 0,!1,{fileName:vl,lineNumber:44,columnNumber:15},this),(0,fl.jsxDEV)("div",{children:"This is panel content. There is a header but no close affordance."},void 0,!1,{fileName:vl,lineNumber:49,columnNumber:15},this)]},void 0,!0,{fileName:vl,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:vl,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:vl,lineNumber:37,columnNumber:9},this),(0,fl.jsxDEV)(bl.default.Example,{title:"Closeable panel",children:[(0,fl.jsxDEV)("p",{children:["This example shows a panel pattern with a ",(0,fl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:vl,lineNumber:59,columnNumber:55},this)," ","close button, using the ",(0,fl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:vl,lineNumber:60,columnNumber:37},this)," modifier."]},void 0,!0,{fileName:vl,lineNumber:58,columnNumber:11},this),(0,fl.jsxDEV)(bl.default.Demo,{withSource:!0,children:(0,fl.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,fl.jsxDEV)("header",{children:[(0,fl.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title on a closeable panel"},void 0,!1,{fileName:vl,lineNumber:65,columnNumber:17},this),(0,fl.jsxDEV)("div",{className:"hyp-panel__close",children:(0,fl.jsxDEV)(Nl.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:vl,lineNumber:69,columnNumber:19},this)},void 0,!1,{fileName:vl,lineNumber:68,columnNumber:17},this)]},void 0,!0,{fileName:vl,lineNumber:64,columnNumber:15},this),(0,fl.jsxDEV)("div",{children:["This is panel content in a panel, using ",(0,fl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:vl,lineNumber:73,columnNumber:57},this),"."]},void 0,!0,{fileName:vl,lineNumber:72,columnNumber:15},this)]},void 0,!0,{fileName:vl,lineNumber:63,columnNumber:13},this)},void 0,!1,{fileName:vl,lineNumber:62,columnNumber:11},this)]},void 0,!0,{fileName:vl,lineNumber:57,columnNumber:9},this),(0,fl.jsxDEV)(bl.default.Example,{title:"Panel with actions",children:[(0,fl.jsxDEV)("p",{children:["It is common to render some ",(0,fl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:vl,lineNumber:82,columnNumber:41},this)," within a panel."]},void 0,!0,{fileName:vl,lineNumber:81,columnNumber:11},this),(0,fl.jsxDEV)(bl.default.Demo,{withSource:!0,children:(0,fl.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,fl.jsxDEV)("header",{children:[(0,fl.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title"},void 0,!1,{fileName:vl,lineNumber:87,columnNumber:17},this),(0,fl.jsxDEV)("div",{className:"hyp-panel__close",children:(0,fl.jsxDEV)(Nl.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:vl,lineNumber:89,columnNumber:19},this)},void 0,!1,{fileName:vl,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:vl,lineNumber:86,columnNumber:15},this),(0,fl.jsxDEV)("div",{children:"This is panel content in a panel that also has some available actions."},void 0,!1,{fileName:vl,lineNumber:92,columnNumber:15},this),(0,fl.jsxDEV)("div",{className:"hyp-actions",children:[(0,fl.jsxDEV)(Nl.LabeledButton,{title:"Cancel",children:"Cancel"},void 0,!1,{fileName:vl,lineNumber:97,columnNumber:17},this),(0,fl.jsxDEV)(Nl.LabeledButton,{title:"Try again",variant:"primary",children:"Try again"},void 0,!1,{fileName:vl,lineNumber:98,columnNumber:17},this)]},void 0,!0,{fileName:vl,lineNumber:96,columnNumber:15},this)]},void 0,!0,{fileName:vl,lineNumber:85,columnNumber:13},this)},void 0,!1,{fileName:vl,lineNumber:84,columnNumber:11},this)]},void 0,!0,{fileName:vl,lineNumber:80,columnNumber:9},this)]},void 0,!0,{fileName:vl,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:vl,lineNumber:6,columnNumber:5},this)};var Nl=z,bl=function(e){return e&&e.__esModule?e:{default:e}}(xn),fl=he,vl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelPatterns.js";var pl={};Object.defineProperty(pl,"__esModule",{value:!0}),pl.default=function(){return(0,El.jsxDEV)(Dl.default.Page,{title:"Spinners",children:[(0,El.jsxDEV)("p",{children:["The ",(0,El.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:jl,lineNumber:8,columnNumber:13},this)," pattern can be used to show loading states. It is an animated SVG."]},void 0,!0,{fileName:jl,lineNumber:7,columnNumber:7},this),(0,El.jsxDEV)(Dl.default.Pattern,{title:"Spinner",children:[(0,El.jsxDEV)("p",{children:["The spinner is ",(0,El.jsxDEV)("code",{children:"em-sized"},void 0,!1,{fileName:jl,lineNumber:13,columnNumber:26},this),"; it renders at ",(0,El.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:jl,lineNumber:13,columnNumber:63},this)," ","square, by default. Other relative sizes are available as shown. For manual sizing control, adjust the font-size of a parent element. Spinners have a default foreground color, which may be overridden with utility classes."]},void 0,!0,{fileName:jl,lineNumber:12,columnNumber:9},this),(0,El.jsxDEV)(Dl.default.Example,{title:"Default size",children:[(0,El.jsxDEV)("p",{children:["At its default size, the spinner is ",(0,El.jsxDEV)("code",{children:"2em"},void 0,!1,{fileName:jl,lineNumber:21,columnNumber:49},this)," square."]},void 0,!0,{fileName:jl,lineNumber:20,columnNumber:11},this),(0,El.jsxDEV)(Dl.default.Demo,{withSource:!0,children:(0,El.jsxDEV)(xl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:jl,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:jl,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:jl,lineNumber:19,columnNumber:9},this),(0,El.jsxDEV)(Dl.default.Example,{title:"Small size",children:[(0,El.jsxDEV)("p",{children:["Small spinners are ",(0,El.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:jl,lineNumber:29,columnNumber:32},this)," square and can be used inline."]},void 0,!0,{fileName:jl,lineNumber:28,columnNumber:11},this),(0,El.jsxDEV)(Dl.default.Demo,{withSource:!0,children:(0,El.jsxDEV)(xl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:jl,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:jl,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:jl,lineNumber:27,columnNumber:9},this),(0,El.jsxDEV)(Dl.default.Example,{title:"Large size",children:[(0,El.jsxDEV)("p",{children:["Large spinners are ",(0,El.jsxDEV)("code",{children:"4em"},void 0,!1,{fileName:jl,lineNumber:37,columnNumber:32},this)," square."]},void 0,!0,{fileName:jl,lineNumber:36,columnNumber:11},this),(0,El.jsxDEV)(Dl.default.Demo,{withSource:!0,children:(0,El.jsxDEV)(xl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--large"},void 0,!1,{fileName:jl,lineNumber:40,columnNumber:13},this)},void 0,!1,{fileName:jl,lineNumber:39,columnNumber:11},this)]},void 0,!0,{fileName:jl,lineNumber:35,columnNumber:9},this),(0,El.jsxDEV)(Dl.default.Example,{title:"Changing color",children:[(0,El.jsxDEV)("p",{children:"The color of the spinner may be changed by use of utility classes."},void 0,!1,{fileName:jl,lineNumber:45,columnNumber:11},this),(0,El.jsxDEV)(Dl.default.Demo,{withSource:!0,children:(0,El.jsxDEV)(xl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner hyp-u-color--brand"},void 0,!1,{fileName:jl,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:jl,lineNumber:48,columnNumber:11},this)]},void 0,!0,{fileName:jl,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:jl,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:jl,lineNumber:6,columnNumber:5},this)};var xl=z,Dl=function(e){return e&&e.__esModule?e:{default:e}}(xn),El=he,jl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js";var gl={};Object.defineProperty(gl,"__esModule",{value:!0}),gl.default=function(){return(0,wl.jsxDEV)(Vl.default.Page,{title:"Tables",children:[(0,wl.jsxDEV)("p",{children:["These ",(0,wl.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:yl,lineNumber:9,columnNumber:15},this)," patterns support a basic table layout that adapts to available space. They are intended for simpler tabular display: maximum 2 or possibly 3 columns. Remember that"," ",(0,wl.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:yl,lineNumber:12,columnNumber:9},this)," content needs to be usable in tight and narrow spaces."]},void 0,!0,{fileName:yl,lineNumber:8,columnNumber:7},this),(0,wl.jsxDEV)(Vl.default.Pattern,{title:"Table",children:[(0,wl.jsxDEV)(Vl.default.Example,{title:"Basic table",variant:"wide",children:[(0,wl.jsxDEV)("p",{children:["By default, a ",(0,wl.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:yl,lineNumber:18,columnNumber:27},this)," will fill available horizontal space, and will use whatever height is needed to render its rows."," ",(0,wl.jsxDEV)("code",{children:"tr.is-selected"},void 0,!1,{fileName:yl,lineNumber:20,columnNumber:13},this)," styles a row as selected."]},void 0,!0,{fileName:yl,lineNumber:17,columnNumber:11},this),(0,wl.jsxDEV)(Vl.default.Demo,{withSource:!0,children:(0,wl.jsxDEV)("table",{className:"hyp-table",children:[(0,wl.jsxDEV)("thead",{children:(0,wl.jsxDEV)("tr",{children:[(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:yl,lineNumber:27,columnNumber:19},this),(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:yl,lineNumber:30,columnNumber:19},this)]},void 0,!0,{fileName:yl,lineNumber:26,columnNumber:17},this)},void 0,!1,{fileName:yl,lineNumber:25,columnNumber:15},this),(0,wl.jsxDEV)(_l.SampleTableBody,{},void 0,!1,{fileName:yl,lineNumber:35,columnNumber:15},this)]},void 0,!0,{fileName:yl,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:yl,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:yl,lineNumber:16,columnNumber:9},this),(0,wl.jsxDEV)(Vl.default.Example,{title:"Adjusting column widths",children:[(0,wl.jsxDEV)("p",{children:["Table column widths may be adjusted by styling ",(0,wl.jsxDEV)("code",{children:"thead th"},void 0,!1,{fileName:yl,lineNumber:42,columnNumber:60},this)," ","elements. In this example, the column widths are set to 30% and 70%."]},void 0,!0,{fileName:yl,lineNumber:41,columnNumber:11},this),(0,wl.jsxDEV)(Vl.default.Demo,{withSource:!0,children:(0,wl.jsxDEV)("table",{className:"hyp-table",children:[(0,wl.jsxDEV)("thead",{children:(0,wl.jsxDEV)("tr",{children:[(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:30%",children:"Column A"},void 0,!1,{fileName:yl,lineNumber:49,columnNumber:19},this),(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:70%",children:"Column B"},void 0,!1,{fileName:yl,lineNumber:56,columnNumber:19},this)]},void 0,!0,{fileName:yl,lineNumber:48,columnNumber:17},this)},void 0,!1,{fileName:yl,lineNumber:47,columnNumber:15},this),(0,wl.jsxDEV)(_l.SampleTableBody,{},void 0,!1,{fileName:yl,lineNumber:65,columnNumber:15},this)]},void 0,!0,{fileName:yl,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:yl,lineNumber:45,columnNumber:11},this)]},void 0,!0,{fileName:yl,lineNumber:40,columnNumber:9},this),(0,wl.jsxDEV)(Vl.default.Example,{title:"Constraining with a scrollbox",children:[(0,wl.jsxDEV)("p",{children:["In this example, the ",(0,wl.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:yl,lineNumber:72,columnNumber:34},this)," is constrained within a"," ",(0,wl.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:yl,lineNumber:73,columnNumber:13},this)," with a ",(0,wl.jsxDEV)("code",{children:"max-height"},void 0,!1,{fileName:yl,lineNumber:73,columnNumber:43},this),"."]},void 0,!0,{fileName:yl,lineNumber:71,columnNumber:11},this),(0,wl.jsxDEV)(Vl.default.Demo,{withSource:!0,children:(0,wl.jsxDEV)("div",{style:"max-height:250px",className:"hyp-scrollbox--with-header",children:(0,wl.jsxDEV)("table",{className:"hyp-table",children:[(0,wl.jsxDEV)("thead",{children:(0,wl.jsxDEV)("tr",{children:[(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:yl,lineNumber:83,columnNumber:21},this),(0,wl.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:yl,lineNumber:86,columnNumber:21},this)]},void 0,!0,{fileName:yl,lineNumber:82,columnNumber:19},this)},void 0,!1,{fileName:yl,lineNumber:81,columnNumber:17},this),(0,wl.jsxDEV)(_l.SampleTableBody,{},void 0,!1,{fileName:yl,lineNumber:91,columnNumber:17},this)]},void 0,!0,{fileName:yl,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:yl,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:yl,lineNumber:75,columnNumber:11},this)]},void 0,!0,{fileName:yl,lineNumber:70,columnNumber:9},this)]},void 0,!0,{fileName:yl,lineNumber:15,columnNumber:7},this)]},void 0,!0,{fileName:yl,lineNumber:7,columnNumber:5},this)};var Vl=function(e){return e&&e.__esModule?e:{default:e}}(xn),_l=tl,wl=he,yl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TablePatterns.js";var kl={};Object.defineProperty(kl,"__esModule",{value:!0}),kl.default=function(){return(0,Sl.jsxDEV)(Ll.default.Page,{title:"Thumbnails",children:[(0,Sl.jsxDEV)("p",{children:["The ",(0,Sl.jsxDEV)("code",{children:"thumbnail"},void 0,!1,{fileName:Bl,lineNumber:8,columnNumber:13},this)," pattern is for displaying thumbnail or other images in a frame of constrained size. It provides a variant for displaying a placeholder (when there is no image to render) or a loading state."]},void 0,!0,{fileName:Bl,lineNumber:7,columnNumber:7},this),(0,Sl.jsxDEV)("p",{children:"The thumbnail will fill the available space in the parent (100%), but will constrain the image dimensions within that space, retaining aspect ratio. It will retain its dimensions even when empty or in loading state."},void 0,!1,{fileName:Bl,lineNumber:13,columnNumber:7},this),(0,Sl.jsxDEV)(Ll.default.Pattern,{title:"Thumbnail",children:[(0,Sl.jsxDEV)("p",{children:"These examples show a thumbnail that is contained within a parent container sized to 250x175px."},void 0,!1,{fileName:Bl,lineNumber:20,columnNumber:9},this),(0,Sl.jsxDEV)(Ll.default.Example,{title:"Thumbnail with content",children:(0,Sl.jsxDEV)(Ll.default.Demo,{withSource:!0,children:(0,Sl.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:Bl,lineNumber:29,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:28,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:Bl,lineNumber:25,columnNumber:11},this)},void 0,!1,{fileName:Bl,lineNumber:24,columnNumber:9},this),(0,Sl.jsxDEV)(Ll.default.Example,{title:"Thumbnail with placeholder",children:(0,Sl.jsxDEV)(Ll.default.Demo,{withSource:!0,children:(0,Sl.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:Bl,lineNumber:41,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:40,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:39,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:38,columnNumber:13},this)},void 0,!1,{fileName:Bl,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:Bl,lineNumber:36,columnNumber:9},this),(0,Sl.jsxDEV)(Ll.default.Example,{title:"thumbnail in loading state",children:(0,Sl.jsxDEV)(Ll.default.Demo,{withSource:!0,children:(0,Sl.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)(Cl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:Bl,lineNumber:53,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:52,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:51,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:Bl,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:Bl,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:Bl,lineNumber:19,columnNumber:7},this),(0,Sl.jsxDEV)(Ll.default.Pattern,{title:"Thumbnail in smaller dimensions",children:[(0,Sl.jsxDEV)("p",{children:"These examples show all three states of a thumnbail in a smaller space: 150x100px."},void 0,!1,{fileName:Bl,lineNumber:62,columnNumber:9},this),(0,Sl.jsxDEV)(Ll.default.Example,{title:"All three states shown",children:(0,Sl.jsxDEV)(Ll.default.Demo,{withSource:!0,children:[(0,Sl.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)("img",{src:"http://placekitten.com/100/150",alt:"kitty"},void 0,!1,{fileName:Bl,lineNumber:71,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:70,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:69,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:68,columnNumber:13},this),(0,Sl.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)("span",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:Bl,lineNumber:79,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:78,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:76,columnNumber:13},this),(0,Sl.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)(Cl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:Bl,lineNumber:87,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:86,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:85,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:84,columnNumber:13},this)]},void 0,!0,{fileName:Bl,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:Bl,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:Bl,lineNumber:61,columnNumber:7},this),(0,Sl.jsxDEV)(Ll.default.Pattern,{title:"Thumbnails: aspect ratio",children:[(0,Sl.jsxDEV)("p",{children:"An image in a thumnbail is constrained to the available space, and retains aspect ratio."},void 0,!1,{fileName:Bl,lineNumber:96,columnNumber:9},this),(0,Sl.jsxDEV)(Ll.default.Example,{title:"Thumbnail showing retention of image aspect ratio",children:(0,Sl.jsxDEV)(Ll.default.Demo,{withSource:!0,children:(0,Sl.jsxDEV)("div",{style:"width: 175px; height: 250px",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Sl.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Sl.jsxDEV)("img",{src:"http://placekitten.com/350/250",alt:"kitty"},void 0,!1,{fileName:Bl,lineNumber:105,columnNumber:19},this)},void 0,!1,{fileName:Bl,lineNumber:104,columnNumber:17},this)},void 0,!1,{fileName:Bl,lineNumber:103,columnNumber:15},this)},void 0,!1,{fileName:Bl,lineNumber:102,columnNumber:13},this)},void 0,!1,{fileName:Bl,lineNumber:101,columnNumber:11},this)},void 0,!1,{fileName:Bl,lineNumber:100,columnNumber:9},this)]},void 0,!0,{fileName:Bl,lineNumber:95,columnNumber:7},this)]},void 0,!0,{fileName:Bl,lineNumber:6,columnNumber:5},this)};var Cl=z,Ll=function(e){return e&&e.__esModule?e:{default:e}}(xn),Sl=he,Bl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailPatterns.js";var Il={};Object.defineProperty(Il,"__esModule",{value:!0}),Il.default=function(){return(0,zl.jsxDEV)(Tl.default.Page,{title:"Buttons",children:[(0,zl.jsxDEV)("p",{children:["Button components support the following ",(0,zl.jsxDEV)("strong",{children:"variants"},void 0,!1,{fileName:Ml,lineNumber:8,columnNumber:49},this),":"]},void 0,!0,{fileName:Ml,lineNumber:7,columnNumber:7},this),(0,zl.jsxDEV)("ul",{children:[(0,zl.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:Ml,lineNumber:11,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Primary: For indicating that a button represents a primary action"},void 0,!1,{fileName:Ml,lineNumber:12,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Dark: For rendering a button on a grey background"},void 0,!1,{fileName:Ml,lineNumber:15,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Light: This variant should only be used for non-critical buttons on white backgrounds (low contrast)."},void 0,!1,{fileName:Ml,lineNumber:16,columnNumber:9},this)]},void 0,!0,{fileName:Ml,lineNumber:10,columnNumber:7},this),(0,zl.jsxDEV)("p",{children:"In addition, a button may be in one of four states, which are represented in their variant examples, left to right:"},void 0,!1,{fileName:Ml,lineNumber:21,columnNumber:7},this),(0,zl.jsxDEV)("ul",{children:[(0,zl.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:Ml,lineNumber:26,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Pressed"},void 0,!1,{fileName:Ml,lineNumber:27,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Expanded"},void 0,!1,{fileName:Ml,lineNumber:28,columnNumber:9},this),(0,zl.jsxDEV)("li",{children:"Disabled"},void 0,!1,{fileName:Ml,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:Ml,lineNumber:25,columnNumber:7},this),(0,zl.jsxDEV)(Tl.default.Pattern,{title:"IconButton",children:[(0,zl.jsxDEV)("p",{children:"A button containing an icon and no other content."},void 0,!1,{fileName:Ml,lineNumber:33,columnNumber:9},this),(0,zl.jsxDEV)(Tl.default.Example,{title:"Basic use and sizes",children:[(0,zl.jsxDEV)("p",{children:["The optional ",(0,zl.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:Ml,lineNumber:36,columnNumber:26},this)," property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at ",(0,zl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:Ml,lineNumber:39,columnNumber:13},this),". The default sizing is ",(0,zl.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:Ml,lineNumber:39,columnNumber:53},this),"."]},void 0,!0,{fileName:Ml,lineNumber:35,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{withSource:!0,children:[(0,zl.jsxDEV)(Pl.IconButton,{icon:"edit",title:"Edit",size:"small"},void 0,!1,{fileName:Ml,lineNumber:42,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"edit",title:"Edit",size:"medium"},void 0,!1,{fileName:Ml,lineNumber:43,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"edit",title:"Edit",size:"large"},void 0,!1,{fileName:Ml,lineNumber:44,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:41,columnNumber:11},this)]},void 0,!0,{fileName:Ml,lineNumber:34,columnNumber:9},this),(0,zl.jsxDEV)(Tl.default.Example,{title:"Variants",variant:"wide",children:[(0,zl.jsxDEV)("h4",{children:"Dark variant"},void 0,!1,{fileName:Ml,lineNumber:49,columnNumber:11},this),(0,zl.jsxDEV)("p",{children:["The ",(0,zl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:Ml,lineNumber:51,columnNumber:17},this)," dark variant is for use on darker (light grey vs. white) backgrounds. Note that this button, unlike other"," ",(0,zl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:Ml,lineNumber:53,columnNumber:13},this),"s, has a background color. This is to allow for a use case in which the dark ",(0,zl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:Ml,lineNumber:54,columnNumber:46},this)," is initially fixed on a grey background but floats on top of content when scrolled."]},void 0,!0,{fileName:Ml,lineNumber:50,columnNumber:11},this),(0,zl.jsxDEV)("h4",{children:"Light variant"},void 0,!1,{fileName:Ml,lineNumber:58,columnNumber:11},this),(0,zl.jsxDEV)("p",{children:"This variant should only be used for non-critical icons on white backgrounds (low contrast)."},void 0,!1,{fileName:Ml,lineNumber:59,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Default",withSource:!0,children:[(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation"},void 0,!1,{fileName:Ml,lineNumber:64,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0},void 0,!1,{fileName:Ml,lineNumber:65,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0},void 0,!1,{fileName:Ml,lineNumber:66,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0},void 0,!1,{fileName:Ml,lineNumber:67,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:63,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Primary",withSource:!0,children:[(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",variant:"primary"},void 0,!1,{fileName:Ml,lineNumber:71,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"primary"},void 0,!1,{fileName:Ml,lineNumber:76,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"primary"},void 0,!1,{fileName:Ml,lineNumber:82,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"primary"},void 0,!1,{fileName:Ml,lineNumber:88,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:70,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Dark",withSource:!0,children:[(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",variant:"dark"},void 0,!1,{fileName:Ml,lineNumber:97,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"dark"},void 0,!1,{fileName:Ml,lineNumber:98,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"dark"},void 0,!1,{fileName:Ml,lineNumber:104,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"dark"},void 0,!1,{fileName:Ml,lineNumber:110,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:96,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Light",withSource:!0,children:[(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",variant:"light"},void 0,!1,{fileName:Ml,lineNumber:119,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"light"},void 0,!1,{fileName:Ml,lineNumber:124,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"light"},void 0,!1,{fileName:Ml,lineNumber:130,columnNumber:13},this),(0,zl.jsxDEV)(Pl.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"light"},void 0,!1,{fileName:Ml,lineNumber:136,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:118,columnNumber:11},this)]},void 0,!0,{fileName:Ml,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:Ml,lineNumber:32,columnNumber:7},this),(0,zl.jsxDEV)(Tl.default.Pattern,{title:"LabeledButton",children:[(0,zl.jsxDEV)("p",{children:"A button with content and, optionally, an icon."},void 0,!1,{fileName:Ml,lineNumber:147,columnNumber:9},this),(0,zl.jsxDEV)(Tl.default.Example,{title:"Basic use and sizes",children:[(0,zl.jsxDEV)("p",{children:["The optional ",(0,zl.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:Ml,lineNumber:150,columnNumber:26},this)," property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at ",(0,zl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:Ml,lineNumber:153,columnNumber:13},this),". The default sizing is ",(0,zl.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:Ml,lineNumber:153,columnNumber:53},this),"."]},void 0,!0,{fileName:Ml,lineNumber:149,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Label only",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{size:"small",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:156,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:157,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{size:"large",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:158,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:155,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Label, icon",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",size:"small",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:162,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:165,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",size:"large",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:166,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:161,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Label, icon on right",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",size:"small",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:172,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:175,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"profile",size:"large",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:Ml,lineNumber:178,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:171,columnNumber:11},this)]},void 0,!0,{fileName:Ml,lineNumber:148,columnNumber:9},this),(0,zl.jsxDEV)(Tl.default.Example,{title:"Variants",variant:"wide",children:[(0,zl.jsxDEV)(Tl.default.Demo,{title:"Default",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:186,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",pressed:!0,children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:187,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",expanded:!0,children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:190,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",disabled:!0,children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:193,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:185,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Primary",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:199,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:202,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:205,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:208,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:198,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Dark",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",variant:"dark",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:214,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",pressed:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:217,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",expanded:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:220,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LabeledButton,{icon:"edit",disabled:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:Ml,lineNumber:223,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:213,columnNumber:11},this)]},void 0,!0,{fileName:Ml,lineNumber:184,columnNumber:9},this)]},void 0,!0,{fileName:Ml,lineNumber:146,columnNumber:7},this),(0,zl.jsxDEV)(Tl.default.Pattern,{title:"LinkButton",children:[(0,zl.jsxDEV)("p",{children:"A button styled to look like a link (anchor tag)."},void 0,!1,{fileName:Ml,lineNumber:231,columnNumber:9},this),(0,zl.jsxDEV)(Tl.default.Example,{title:"Variants",children:[(0,zl.jsxDEV)(Tl.default.Demo,{title:"Default",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LinkButton,{children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:235,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:236,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:237,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:238,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:234,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Primary",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LinkButton,{variant:"primary",children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:242,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"primary",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:243,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"primary",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:246,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"primary",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:249,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:241,columnNumber:11},this),(0,zl.jsxDEV)(Tl.default.Demo,{title:"Dark",withSource:!0,children:[(0,zl.jsxDEV)(Pl.LinkButton,{variant:"dark",children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:255,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"dark",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:256,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"dark",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:259,columnNumber:13},this),(0,zl.jsxDEV)(Pl.LinkButton,{variant:"dark",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:Ml,lineNumber:262,columnNumber:13},this)]},void 0,!0,{fileName:Ml,lineNumber:254,columnNumber:11},this)]},void 0,!0,{fileName:Ml,lineNumber:233,columnNumber:9},this)]},void 0,!0,{fileName:Ml,lineNumber:230,columnNumber:7},this)]},void 0,!0,{fileName:Ml,lineNumber:6,columnNumber:5},this)};var Pl=z,Tl=function(e){return e&&e.__esModule?e:{default:e}}(xn),zl=he,Ml="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js";var Hl={};Object.defineProperty(Hl,"__esModule",{value:!0}),Hl.default=function(){return(0,Fl.jsxDEV)(Ol.default.Page,{title:"Containers",children:[(0,Fl.jsxDEV)(Ol.default.Pattern,{title:"Frame",children:(0,Fl.jsxDEV)(Ol.default.Example,{title:"Laying out content in a Frame",children:[(0,Fl.jsxDEV)("p",{children:["The ",(0,Fl.jsxDEV)("code",{children:"Frame"},void 0,!1,{fileName:Ul,lineNumber:12,columnNumber:17},this)," component renders content inside of a"," ",(0,Fl.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:Ul,lineNumber:13,columnNumber:13},this)," design pattern."]},void 0,!0,{fileName:Ul,lineNumber:11,columnNumber:11},this),(0,Fl.jsxDEV)(Ol.default.Demo,{withSource:!0,children:(0,Fl.jsxDEV)(Al.Frame,{children:[(0,Fl.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:Ul,lineNumber:17,columnNumber:15},this),(0,Fl.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:Ul,lineNumber:18,columnNumber:15},this)]},void 0,!0,{fileName:Ul,lineNumber:16,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:15,columnNumber:11},this)]},void 0,!0,{fileName:Ul,lineNumber:10,columnNumber:9},this)},void 0,!1,{fileName:Ul,lineNumber:9,columnNumber:7},this),(0,Fl.jsxDEV)(Ol.default.Pattern,{title:"Card",children:[(0,Fl.jsxDEV)("p",{children:["The ",(0,Fl.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:Ul,lineNumber:26,columnNumber:15},this)," component pattern provides a card-like layout using the ",(0,Fl.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:Ul,lineNumber:27,columnNumber:21},this)," pattern."]},void 0,!0,{fileName:Ul,lineNumber:25,columnNumber:9},this),(0,Fl.jsxDEV)(Ol.default.Example,{title:"Laying out content in a Card",children:(0,Fl.jsxDEV)(Ol.default.Demo,{withSource:!0,children:(0,Fl.jsxDEV)(Al.Card,{children:[(0,Fl.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Ul,lineNumber:32,columnNumber:15},this),(0,Fl.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Ul,lineNumber:33,columnNumber:15},this)]},void 0,!0,{fileName:Ul,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:Ul,lineNumber:29,columnNumber:9},this),(0,Fl.jsxDEV)(Ol.default.Example,{title:"Overriding styles",children:[(0,Fl.jsxDEV)("p",{children:["This example shows overriding the background color of a"," ",(0,Fl.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:Ul,lineNumber:40,columnNumber:13},this)," using a utility class."]},void 0,!0,{fileName:Ul,lineNumber:38,columnNumber:11},this),(0,Fl.jsxDEV)(Ol.default.Demo,{withSource:!0,children:(0,Fl.jsxDEV)(Al.Card,{classes:"hyp-u-bg-color--grey-3",children:[(0,Fl.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Ul,lineNumber:44,columnNumber:15},this),(0,Fl.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Ul,lineNumber:45,columnNumber:15},this)]},void 0,!0,{fileName:Ul,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:Ul,lineNumber:37,columnNumber:9},this)]},void 0,!0,{fileName:Ul,lineNumber:24,columnNumber:7},this),(0,Fl.jsxDEV)(Ol.default.Pattern,{title:"Actions",children:[(0,Fl.jsxDEV)("p",{children:["The ",(0,Fl.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:Ul,lineNumber:53,columnNumber:15},this)," component pattern lays out actions (buttons)."]},void 0,!0,{fileName:Ul,lineNumber:52,columnNumber:9},this),(0,Fl.jsxDEV)(Ol.default.Example,{title:"Laying out buttons with Actions",children:(0,Fl.jsxDEV)(Ol.default.Demo,{withSource:!0,children:(0,Fl.jsxDEV)(Al.Actions,{children:[(0,Fl.jsxDEV)(Al.LabeledButton,{children:"Cancel"},void 0,!1,{fileName:Ul,lineNumber:59,columnNumber:15},this),(0,Fl.jsxDEV)(Al.LabeledButton,{children:"Maybe"},void 0,!1,{fileName:Ul,lineNumber:60,columnNumber:15},this),(0,Fl.jsxDEV)(Al.LabeledButton,{variant:"primary",children:"OK"},void 0,!1,{fileName:Ul,lineNumber:61,columnNumber:15},this)]},void 0,!0,{fileName:Ul,lineNumber:58,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:57,columnNumber:11},this)},void 0,!1,{fileName:Ul,lineNumber:56,columnNumber:9},this),(0,Fl.jsxDEV)(Ol.default.Example,{title:"Laying out buttons vertically with Actions",children:(0,Fl.jsxDEV)(Ol.default.Demo,{withSource:!0,children:(0,Fl.jsxDEV)(Al.Actions,{direction:"column",children:[(0,Fl.jsxDEV)(Al.LabeledButton,{children:"This is one option"},void 0,!1,{fileName:Ul,lineNumber:69,columnNumber:15},this),(0,Fl.jsxDEV)(Al.LabeledButton,{children:"This is another option"},void 0,!1,{fileName:Ul,lineNumber:70,columnNumber:15},this),(0,Fl.jsxDEV)(Al.LabeledButton,{variant:"primary",children:"This is the best option"},void 0,!1,{fileName:Ul,lineNumber:71,columnNumber:15},this)]},void 0,!0,{fileName:Ul,lineNumber:68,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:Ul,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:Ul,lineNumber:51,columnNumber:7},this),(0,Fl.jsxDEV)(Ol.default.Pattern,{title:"Scrollbox",children:[(0,Fl.jsxDEV)("p",{children:["The ",(0,Fl.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:Ul,lineNumber:81,columnNumber:15},this)," component is a container for (potentially-) overflowing content. It provides a scroll context and is styled with the ",(0,Fl.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:Ul,lineNumber:83,columnNumber:15},this)," pattern."]},void 0,!0,{fileName:Ul,lineNumber:80,columnNumber:9},this),(0,Fl.jsxDEV)(Ol.default.Example,{variant:"wide",children:[(0,Fl.jsxDEV)("p",{children:["A ",(0,Fl.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:Ul,lineNumber:87,columnNumber:15},this)," will fill its available space. Constraints to that space need to be applied to a parent element. Here a parent element is set to a width and height."]},void 0,!0,{fileName:Ul,lineNumber:86,columnNumber:11},this),(0,Fl.jsxDEV)(Ol.default.Demo,{title:"Basic scrollbox",withSource:!0,children:(0,Fl.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,Fl.jsxDEV)(Al.Scrollbox,{children:(0,Fl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,Fl.jsxDEV)(ql.SampleListElements,{},void 0,!1,{fileName:Ul,lineNumber:95,columnNumber:19},this)},void 0,!1,{fileName:Ul,lineNumber:94,columnNumber:17},this)},void 0,!1,{fileName:Ul,lineNumber:93,columnNumber:15},this)},void 0,!1,{fileName:Ul,lineNumber:92,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:91,columnNumber:11},this),(0,Fl.jsxDEV)(Ol.default.Demo,{title:"Scrollbox with header",withSource:!0,children:(0,Fl.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,Fl.jsxDEV)(Al.Scrollbox,{withHeader:!0,children:[(0,Fl.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,Fl.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:"NATO Alphabet"},void 0,!1,{fileName:Ul,lineNumber:104,columnNumber:19},this)},void 0,!1,{fileName:Ul,lineNumber:103,columnNumber:17},this),(0,Fl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,Fl.jsxDEV)(ql.SampleListElements,{},void 0,!1,{fileName:Ul,lineNumber:109,columnNumber:19},this)},void 0,!1,{fileName:Ul,lineNumber:108,columnNumber:17},this)]},void 0,!0,{fileName:Ul,lineNumber:102,columnNumber:15},this)},void 0,!1,{fileName:Ul,lineNumber:101,columnNumber:13},this)},void 0,!1,{fileName:Ul,lineNumber:100,columnNumber:11},this)]},void 0,!0,{fileName:Ul,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:Ul,lineNumber:79,columnNumber:7},this)]},void 0,!0,{fileName:Ul,lineNumber:8,columnNumber:5},this)};var Al=z,Ol=function(e){return e&&e.__esModule?e:{default:e}}(xn),ql=tl,Fl=he,Ul="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js";var Rl={};Object.defineProperty(Rl,"__esModule",{value:!0}),Rl.default=function(){return(0,Jl.jsxDEV)(Gl.default.Page,{title:"Dialogs",children:[(0,Jl.jsxDEV)(Gl.default.Pattern,{title:"Dialog",children:[(0,Jl.jsxDEV)("p",{children:["A ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:229,columnNumber:13},this)," prompts for user interaction and will take focus when opened."]},void 0,!0,{fileName:Yl,lineNumber:228,columnNumber:9},this),(0,Jl.jsxDEV)("p",{children:["Use a ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:233,columnNumber:17},this)," when you want to route focus. Consider using a ",(0,Jl.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:Yl,lineNumber:234,columnNumber:13},this)," for presenting panel-styled content that does not require grabbing focus."]},void 0,!0,{fileName:Yl,lineNumber:232,columnNumber:9},this),(0,Jl.jsxDEV)("p",{children:[(0,Jl.jsxDEV)("code",{children:"Dialogs"},void 0,!1,{fileName:Yl,lineNumber:238,columnNumber:11},this)," are styled using the ",(0,Jl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:Yl,lineNumber:238,columnNumber:53},this)," pattern."]},void 0,!0,{fileName:Yl,lineNumber:237,columnNumber:9},this),(0,Jl.jsxDEV)(Gl.default.Example,{title:"Setting initial focus",children:[(0,Jl.jsxDEV)("p",{children:["This example shows a dismiss-able ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:242,columnNumber:47},this)," with an explicitly-provided element (",(0,Jl.jsxDEV)("code",{children:"ref"},void 0,!1,{fileName:Yl,lineNumber:243,columnNumber:42},this),") that should take initial focus: a text ",(0,Jl.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:Yl,lineNumber:244,columnNumber:35},this),". The highlighted outline is added here by using ",(0,Jl.jsxDEV)("code",{children:".hyp-u-focus-outline"},void 0,!1,{fileName:Yl,lineNumber:245,columnNumber:33},this)," on the"," ",(0,Jl.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:Yl,lineNumber:246,columnNumber:13},this)," element."]},void 0,!0,{fileName:Yl,lineNumber:241,columnNumber:11},this),(0,Jl.jsxDEV)("p",{children:["In some cases, you might need finer control over which element is focused when the ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:250,columnNumber:30},this)," or ",(0,Jl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Yl,lineNumber:250,columnNumber:53},this)," is opened. This might arise if you have nested components within a"," ",(0,Jl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Yl,lineNumber:252,columnNumber:13},this)," or ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:252,columnNumber:35},this),", or there is complex logic about focus. Setting the ",(0,Jl.jsxDEV)("code",{children:"initialFocus"},void 0,!1,{fileName:Yl,lineNumber:253,columnNumber:38},this)," prop to"," ",(0,Jl.jsxDEV)("code",{children:"null"},void 0,!1,{fileName:Yl,lineNumber:254,columnNumber:13},this)," will opt out of automatic focus handling."]},void 0,!0,{fileName:Yl,lineNumber:248,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{children:(0,Jl.jsxDEV)(Ql,{},void 0,!1,{fileName:Yl,lineNumber:258,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:257,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:240,columnNumber:9},this),(0,Jl.jsxDEV)(Gl.default.Example,{title:"Dialog with no cancel or close button",children:[(0,Jl.jsxDEV)("p",{children:["By default, a ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:264,columnNumber:27},this)," will render both a close button (x) and a Cancel button if an ",(0,Jl.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:Yl,lineNumber:265,columnNumber:43},this)," callback is provided, but this can be overridden with the"," ",(0,Jl.jsxDEV)("code",{children:"withCancelButton"},void 0,!1,{fileName:Yl,lineNumber:267,columnNumber:13},this)," and ",(0,Jl.jsxDEV)("code",{children:"withCloseButton"},void 0,!1,{fileName:Yl,lineNumber:267,columnNumber:47},this)," ","boolean props for the cancel button and close button, respectively."]},void 0,!0,{fileName:Yl,lineNumber:263,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{title:"Dialog with no Cancel button",children:(0,Jl.jsxDEV)(Xl,{},void 0,!1,{fileName:Yl,lineNumber:271,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:270,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{title:"Dialog with no Close button",children:(0,Jl.jsxDEV)(et,{},void 0,!1,{fileName:Yl,lineNumber:275,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:274,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:262,columnNumber:9},this)]},void 0,!0,{fileName:Yl,lineNumber:227,columnNumber:7},this),(0,Jl.jsxDEV)(Gl.default.Pattern,{title:"Modal",children:[(0,Jl.jsxDEV)("p",{children:["A ",(0,Jl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Yl,lineNumber:282,columnNumber:13},this)," is a type of ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:282,columnNumber:45},this)," that centers on the screen and obscures the background with an overlay."]},void 0,!0,{fileName:Yl,lineNumber:281,columnNumber:9},this),(0,Jl.jsxDEV)(Gl.default.Example,{title:"Basic usage",children:[(0,Jl.jsxDEV)("p",{children:"Close the modal by clicking the close (X) button, the cancel button or clicking anywhere outside of it."},void 0,!1,{fileName:Yl,lineNumber:286,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{children:(0,Jl.jsxDEV)(it,{},void 0,!1,{fileName:Yl,lineNumber:291,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:290,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:285,columnNumber:9},this),(0,Jl.jsxDEV)(Gl.default.Example,{title:"Handling content overflow",children:[(0,Jl.jsxDEV)("p",{children:"Modals that may contain a lot of content may need to handle overflow (i.e. make their content scrollable) so that the modal height doesn't exceed available viewport space."},void 0,!1,{fileName:Yl,lineNumber:296,columnNumber:11},this),(0,Jl.jsxDEV)("p",{children:["To make something in a modal scroll-able, apply"," ",(0,Jl.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:Yl,lineNumber:303,columnNumber:13},this)," to the element you wish to contain. This element needs to be an immediate-child element of the"," ",(0,Jl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Yl,lineNumber:305,columnNumber:13},this),"."]},void 0,!0,{fileName:Yl,lineNumber:301,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{children:(0,Jl.jsxDEV)(nt,{},void 0,!1,{fileName:Yl,lineNumber:308,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:307,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:295,columnNumber:9},this)]},void 0,!0,{fileName:Yl,lineNumber:280,columnNumber:7},this),(0,Jl.jsxDEV)(Gl.default.Pattern,{title:"ConfirmModal",children:[(0,Jl.jsxDEV)("p",{children:[(0,Jl.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:Yl,lineNumber:315,columnNumber:11},this)," is intended to mirror the functionality of"," ",(0,Jl.jsxDEV)("code",{children:"window.confirm"},void 0,!1,{fileName:Yl,lineNumber:316,columnNumber:11},this),"."]},void 0,!0,{fileName:Yl,lineNumber:314,columnNumber:9},this),(0,Jl.jsxDEV)(Gl.default.Example,{children:[(0,Jl.jsxDEV)("p",{children:[(0,Jl.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:Yl,lineNumber:320,columnNumber:13},this)," prompts the user for a boolean yes/no input. Close and cancel are considered no."]},void 0,!0,{fileName:Yl,lineNumber:319,columnNumber:11},this),(0,Jl.jsxDEV)("p",{children:["Handlers need to be provided for what to do on yes (",(0,Jl.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:Yl,lineNumber:325,columnNumber:13},this),") and no/cancel (",(0,Jl.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:Yl,lineNumber:325,columnNumber:52},this),"). Typically, both would (also) close the modal, though in this example, the ",(0,Jl.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:Yl,lineNumber:327,columnNumber:26},this)," handler does not close the modal."]},void 0,!0,{fileName:Yl,lineNumber:323,columnNumber:11},this),(0,Jl.jsxDEV)(Gl.default.Demo,{children:(0,Jl.jsxDEV)(lt,{},void 0,!1,{fileName:Yl,lineNumber:331,columnNumber:13},this)},void 0,!1,{fileName:Yl,lineNumber:330,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:318,columnNumber:9},this)]},void 0,!0,{fileName:Yl,lineNumber:313,columnNumber:7},this)]},void 0,!0,{fileName:Yl,lineNumber:226,columnNumber:5},this)};var $l=a,Wl=R,Gl=function(e){return e&&e.__esModule?e:{default:e}}(xn),Zl=z,Kl=tl,Jl=he,Yl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";function Ql(){const[e,i]=(0,Wl.useState)(!1),n=(0,$l.createRef)(),l=[(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>alert("You chose maybe"),children:"Maybe"},"maybe",!1,{fileName:Yl,lineNumber:23,columnNumber:5},this),(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>alert("You chose yep"),variant:"primary",children:"Do it!"},"yep",!1,{fileName:Yl,lineNumber:26,columnNumber:5},this)];return e?(0,Jl.jsxDEV)(Zl.Dialog,{buttons:l,icon:"edit",initialFocus:n,onCancel:()=>i(!1),title:"This is a Dialog",children:[(0,Jl.jsxDEV)("p",{children:["This is a ",(0,Jl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Yl,lineNumber:54,columnNumber:21},this),", with initial focus on a"," ",(0,Jl.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:Yl,lineNumber:55,columnNumber:11},this)," component input."]},void 0,!0,{fileName:Yl,lineNumber:53,columnNumber:9},this),(0,Jl.jsxDEV)(Zl.TextInputWithButton,{children:[(0,Jl.jsxDEV)(Zl.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:Yl,lineNumber:58,columnNumber:11},this),(0,Jl.jsxDEV)(Zl.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:Yl,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:Yl,lineNumber:46,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Yl,lineNumber:37,columnNumber:7},this)}function Xl(){const[e,i]=(0,Wl.useState)(!1);return e?(0,Jl.jsxDEV)(Zl.Dialog,{icon:"edit",onCancel:()=>i(!1),title:"Dialog: No cancel button",withCancelButton:!1,children:(0,Jl.jsxDEV)("p",{children:"This is a Dialog that has a close button but no Cancel button."},void 0,!1,{fileName:Yl,lineNumber:86,columnNumber:9},this)},void 0,!1,{fileName:Yl,lineNumber:80,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Yl,lineNumber:71,columnNumber:7},this)}function et(){const[e,i]=(0,Wl.useState)(!1);return e?(0,Jl.jsxDEV)(Zl.Dialog,{icon:"edit",onCancel:()=>i(!1),title:"Dialog: no close button",withCloseButton:!1,children:(0,Jl.jsxDEV)("p",{children:"This is a Dialog that has a Cancel button but no close button."},void 0,!1,{fileName:Yl,lineNumber:112,columnNumber:9},this)},void 0,!1,{fileName:Yl,lineNumber:106,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Yl,lineNumber:97,columnNumber:7},this)}function it(){const[e,i]=(0,Wl.useState)(!1),n=(0,$l.createRef)(),l=[(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:Yl,lineNumber:123,columnNumber:5},this)];return e?(0,Jl.jsxDEV)(Zl.Modal,{buttons:l,initialFocus:n,onCancel:()=>i(!1),title:"Sample Modal",children:[(0,Jl.jsxDEV)("p",{children:["This is a ",(0,Jl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Yl,lineNumber:150,columnNumber:21},this),", with initial focus on a"," ",(0,Jl.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:Yl,lineNumber:151,columnNumber:11},this)," component input."]},void 0,!0,{fileName:Yl,lineNumber:149,columnNumber:9},this),(0,Jl.jsxDEV)(Zl.TextInputWithButton,{children:[(0,Jl.jsxDEV)(Zl.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:Yl,lineNumber:154,columnNumber:11},this),(0,Jl.jsxDEV)(Zl.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:Yl,lineNumber:155,columnNumber:11},this)]},void 0,!0,{fileName:Yl,lineNumber:153,columnNumber:9},this)]},void 0,!0,{fileName:Yl,lineNumber:143,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Modal Example"},void 0,!1,{fileName:Yl,lineNumber:134,columnNumber:7},this)}function nt(){const[e,i]=(0,Wl.useState)(!1),n=[(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:Yl,lineNumber:166,columnNumber:5},this)];return e?(0,Jl.jsxDEV)(Zl.Modal,{buttons:n,onCancel:()=>i(!1),title:"Modal with overflowing content",children:(0,Jl.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,Jl.jsxDEV)(Kl.LoremIpsum,{},void 0,!1,{fileName:Yl,lineNumber:192,columnNumber:11},this)},void 0,!1,{fileName:Yl,lineNumber:191,columnNumber:9},this)},void 0,!1,{fileName:Yl,lineNumber:186,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Long Modal"},void 0,!1,{fileName:Yl,lineNumber:177,columnNumber:7},this)}function lt(){const[e,i]=(0,Wl.useState)(!1);return e?(0,Jl.jsxDEV)(Zl.ConfirmModal,{confirmAction:"OK",message:"Are you sure you want to take out a second mortgage?",onCancel:()=>i(!1),onConfirm:()=>alert("ok"),title:"Confirm this"},void 0,!1,{fileName:Yl,lineNumber:213,columnNumber:7},this):(0,Jl.jsxDEV)(Zl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show ConfirmModal Example"},void 0,!1,{fileName:Yl,lineNumber:204,columnNumber:7},this)}var tt={};Object.defineProperty(tt,"__esModule",{value:!0}),tt.default=function(){const[e,i]=(0,rt.useState)(!0),[n,l]=(0,rt.useState)(!1),[t,r]=(0,rt.useState)(!0);return(0,at.jsxDEV)(ut.default.Page,{title:"Forms",children:[(0,at.jsxDEV)(ut.default.Pattern,{title:"LabeledCheckbox",children:[(0,at.jsxDEV)(ut.default.Example,{title:"Unchecked (default)",children:[(0,at.jsxDEV)("div",{style:"font-size: 2em",children:[n&&"🍉"," "]},void 0,!0,{fileName:mt,lineNumber:19,columnNumber:11},this),(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.LabeledCheckbox,{checked:n,name:"test-alternative",onToggle:e=>l(e),children:"I want a watermelon"},void 0,!1,{fileName:mt,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:mt,lineNumber:18,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"Checked",children:[(0,at.jsxDEV)("div",{style:"font-size: 2em",children:e&&"🥪"},void 0,!1,{fileName:mt,lineNumber:35,columnNumber:11},this),(0,at.jsxDEV)(ut.default.Demo,{style:{width:"300px"},withSource:!0,children:(0,at.jsxDEV)(ot.LabeledCheckbox,{name:"test",checked:e,onToggle:e=>i(e),children:"I want a sandwich"},void 0,!1,{fileName:mt,lineNumber:37,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:36,columnNumber:11},this)]},void 0,!0,{fileName:mt,lineNumber:34,columnNumber:9},this)]},void 0,!0,{fileName:mt,lineNumber:17,columnNumber:7},this),(0,at.jsxDEV)(ut.default.Pattern,{title:"TextInput",children:[(0,at.jsxDEV)("p",{children:["The ",(0,at.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:mt,lineNumber:50,columnNumber:15},this)," component is a basic wrapper around an",(0,at.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:mt,lineNumber:51,columnNumber:11},this)," field."]},void 0,!0,{fileName:mt,lineNumber:49,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"Basic usage",children:(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.TextInput,{name:"my-input"},void 0,!1,{fileName:mt,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:54,columnNumber:11},this)},void 0,!1,{fileName:mt,lineNumber:53,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"As type='url'",children:[(0,at.jsxDEV)("p",{children:[(0,at.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:mt,lineNumber:61,columnNumber:13},this)," renders an ",(0,at.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:mt,lineNumber:61,columnNumber:47},this)," field of"," ",(0,at.jsxDEV)("code",{children:'type="text"'},void 0,!1,{fileName:mt,lineNumber:62,columnNumber:13},this)," by default, but text-like `type` values are also supported (",(0,at.jsxDEV)("code",{children:"email"},void 0,!1,{fileName:mt,lineNumber:63,columnNumber:40},this),", ",(0,at.jsxDEV)("code",{children:"search"},void 0,!1,{fileName:mt,lineNumber:63,columnNumber:60},this),","," ",(0,at.jsxDEV)("code",{children:"url"},void 0,!1,{fileName:mt,lineNumber:64,columnNumber:13},this),")."]},void 0,!0,{fileName:mt,lineNumber:60,columnNumber:11},this),(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.TextInput,{name:"my-input",type:"url"},void 0,!1,{fileName:mt,lineNumber:67,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:66,columnNumber:11},this)]},void 0,!0,{fileName:mt,lineNumber:59,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"Error state",children:(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.TextInput,{name:"my-input",hasError:!0},void 0,!1,{fileName:mt,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:72,columnNumber:11},this)},void 0,!1,{fileName:mt,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:mt,lineNumber:48,columnNumber:7},this),(0,at.jsxDEV)(ut.default.Pattern,{title:"TextInputWithButton",children:[(0,at.jsxDEV)("p",{children:["This component wraps the ",(0,at.jsxDEV)("code",{children:"text-input-with-button"},void 0,!1,{fileName:mt,lineNumber:80,columnNumber:36},this)," pattern: a text input on the left with an associated icon-only button on the right."]},void 0,!0,{fileName:mt,lineNumber:79,columnNumber:9},this),(0,at.jsxDEV)("p",{children:["Current usage favors the ",(0,at.jsxDEV)("code",{children:"dark"},void 0,!1,{fileName:mt,lineNumber:85,columnNumber:36},this)," variant of"," ",(0,at.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:mt,lineNumber:86,columnNumber:11},this),"."]},void 0,!0,{fileName:mt,lineNumber:84,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"Basic usage",children:(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.TextInputWithButton,{children:[(0,at.jsxDEV)(ot.TextInput,{name:"my-input"},void 0,!1,{fileName:mt,lineNumber:91,columnNumber:15},this),(0,at.jsxDEV)(ot.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:mt,lineNumber:92,columnNumber:15},this)]},void 0,!0,{fileName:mt,lineNumber:90,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:89,columnNumber:11},this)},void 0,!1,{fileName:mt,lineNumber:88,columnNumber:9},this),(0,at.jsxDEV)(ut.default.Example,{title:"Error state",children:(0,at.jsxDEV)(ut.default.Demo,{withSource:!0,children:(0,at.jsxDEV)(ot.TextInputWithButton,{children:[(0,at.jsxDEV)(ot.TextInput,{name:"my-input",hasError:t},void 0,!1,{fileName:mt,lineNumber:100,columnNumber:15},this),(0,at.jsxDEV)(ot.IconButton,{icon:"arrow-right",variant:"dark",title:"go",onClick:()=>r(!t)},void 0,!1,{fileName:mt,lineNumber:101,columnNumber:15},this)]},void 0,!0,{fileName:mt,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:mt,lineNumber:98,columnNumber:11},this)},void 0,!1,{fileName:mt,lineNumber:97,columnNumber:9},this)]},void 0,!0,{fileName:mt,lineNumber:78,columnNumber:7},this)]},void 0,!0,{fileName:mt,lineNumber:16,columnNumber:5},this)};var rt=R,ot=z,ut=function(e){return e&&e.__esModule?e:{default:e}}(xn),at=he,mt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormComponents.js";var st={};Object.defineProperty(st,"__esModule",{value:!0}),st.default=function(){return(0,ht.jsxDEV)(dt.default.Page,{title:"Panel",children:(0,ht.jsxDEV)(dt.default.Pattern,{title:"Panel",children:[(0,ht.jsxDEV)(dt.default.Example,{title:"Basic usage",children:(0,ht.jsxDEV)(dt.default.Demo,{withSource:!0,children:(0,ht.jsxDEV)(ct.Panel,{title:"Basic panel",children:(0,ht.jsxDEV)("p",{children:"Here is a panel with no close button and very simple content."},void 0,!1,{fileName:Nt,lineNumber:11,columnNumber:15},this)},void 0,!1,{fileName:Nt,lineNumber:10,columnNumber:13},this)},void 0,!1,{fileName:Nt,lineNumber:9,columnNumber:11},this)},void 0,!1,{fileName:Nt,lineNumber:8,columnNumber:9},this),(0,ht.jsxDEV)(dt.default.Example,{title:"With close button",children:(0,ht.jsxDEV)(dt.default.Demo,{withSource:!0,children:(0,ht.jsxDEV)(ct.Panel,{title:"Basic panel with close button",onClose:()=>alert("close clicked"),children:[(0,ht.jsxDEV)("p",{children:"Here is a panel with very basic content and a close button."},void 0,!1,{fileName:Nt,lineNumber:23,columnNumber:15},this),(0,ht.jsxDEV)("p",{children:["Providing an ",(0,ht.jsxDEV)("code",{children:"onClose"},void 0,!1,{fileName:Nt,lineNumber:25,columnNumber:30},this)," function will cause a close button to render."]},void 0,!0,{fileName:Nt,lineNumber:24,columnNumber:15},this)]},void 0,!0,{fileName:Nt,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:Nt,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:Nt,lineNumber:17,columnNumber:9},this),(0,ht.jsxDEV)(dt.default.Example,{title:"With header icon",children:(0,ht.jsxDEV)(dt.default.Demo,{withSource:!0,children:(0,ht.jsxDEV)(ct.Panel,{icon:"edit",title:"Panel with optional heading icon",onClose:()=>alert("close clicked"),children:"This panel has an optional icon in the header."},void 0,!1,{fileName:Nt,lineNumber:34,columnNumber:13},this)},void 0,!1,{fileName:Nt,lineNumber:33,columnNumber:11},this)},void 0,!1,{fileName:Nt,lineNumber:32,columnNumber:9},this),(0,ht.jsxDEV)(dt.default.Example,{title:"Clean theme",children:(0,ht.jsxDEV)(dt.default.Demo,{withSource:!0,children:(0,ht.jsxDEV)("div",{className:"theme-clean",style:"width:100%",children:(0,ht.jsxDEV)(ct.Panel,{icon:"edit",title:"Panel with clean-theme styling",onClose:()=>alert("close clicked"),children:"This panel has an optional icon in the header."},void 0,!1,{fileName:Nt,lineNumber:47,columnNumber:15},this)},void 0,!1,{fileName:Nt,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:Nt,lineNumber:45,columnNumber:11},this)},void 0,!1,{fileName:Nt,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:Nt,lineNumber:7,columnNumber:7},this)},void 0,!1,{fileName:Nt,lineNumber:6,columnNumber:5},this)};var ct=z,dt=function(e){return e&&e.__esModule?e:{default:e}}(xn),ht=he,Nt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelComponents.js";var bt={};Object.defineProperty(bt,"__esModule",{value:!0}),bt.default=function(){return(0,pt.jsxDEV)(vt.default.Page,{title:"Spinner",children:[(0,pt.jsxDEV)("p",{children:["The ",(0,pt.jsxDEV)("code",{children:"Spinner"},void 0,!1,{fileName:xt,lineNumber:8,columnNumber:13},this)," component is based on the ",(0,pt.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:xt,lineNumber:8,columnNumber:60},this)," ","pattern and renders an animated SVG."]},void 0,!0,{fileName:xt,lineNumber:7,columnNumber:7},this),(0,pt.jsxDEV)(vt.default.Pattern,{title:"Spinner",children:[(0,pt.jsxDEV)(vt.default.Example,{title:"Basic usage",children:(0,pt.jsxDEV)(vt.default.Demo,{withSource:!0,children:(0,pt.jsxDEV)(ft.Spinner,{},void 0,!1,{fileName:xt,lineNumber:14,columnNumber:13},this)},void 0,!1,{fileName:xt,lineNumber:13,columnNumber:11},this)},void 0,!1,{fileName:xt,lineNumber:12,columnNumber:9},this),(0,pt.jsxDEV)(vt.default.Example,{title:"Small size",children:(0,pt.jsxDEV)(vt.default.Demo,{withSource:!0,children:(0,pt.jsxDEV)(ft.Spinner,{size:"small"},void 0,!1,{fileName:xt,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:xt,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:xt,lineNumber:17,columnNumber:9},this),(0,pt.jsxDEV)(vt.default.Example,{title:"Large size",children:(0,pt.jsxDEV)(vt.default.Demo,{withSource:!0,children:(0,pt.jsxDEV)(ft.Spinner,{size:"large"},void 0,!1,{fileName:xt,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:xt,lineNumber:23,columnNumber:11},this)},void 0,!1,{fileName:xt,lineNumber:22,columnNumber:9},this)]},void 0,!0,{fileName:xt,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:xt,lineNumber:6,columnNumber:5},this)};var ft=z,vt=function(e){return e&&e.__esModule?e:{default:e}}(xn),pt=he,xt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js";var Dt={};Object.defineProperty(Dt,"__esModule",{value:!0}),Dt.default=function(){return(0,_t.jsxDEV)(gt.default.Page,{title:"Table",children:(0,_t.jsxDEV)(gt.default.Pattern,{title:"Table",children:[(0,_t.jsxDEV)(Lt,{},void 0,!1,{fileName:wt,lineNumber:155,columnNumber:9},this),(0,_t.jsxDEV)(St,{},void 0,!1,{fileName:wt,lineNumber:156,columnNumber:9},this),(0,_t.jsxDEV)(Bt,{},void 0,!1,{fileName:wt,lineNumber:157,columnNumber:9},this)]},void 0,!0,{fileName:wt,lineNumber:154,columnNumber:7},this)},void 0,!1,{fileName:wt,lineNumber:153,columnNumber:5},this)};var Et=R,jt=z,gt=function(e){return e&&e.__esModule?e:{default:e}}(xn),Vt=tl,_t=he,wt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";const yt=e=>(0,_t.jsxDEV)(_t.Fragment,{children:[(0,_t.jsxDEV)("td",{children:e.displayName},void 0,!1,{fileName:wt,lineNumber:11,columnNumber:5},void 0),(0,_t.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:wt,lineNumber:12,columnNumber:5},void 0)]},void 0,!0),{tableHeaders:kt,items:Ct}=(0,Vt.sampleTableContent)();function Lt(){const[e,i]=(0,Et.useState)(!1),[n,l]=(0,Et.useState)(null);return(0,_t.jsxDEV)(gt.default.Example,{title:"Basic Table",variant:"wide",children:[(0,_t.jsxDEV)("p",{children:["A ",(0,_t.jsxDEV)("code",{children:"Table"},void 0,!1,{fileName:wt,lineNumber:34,columnNumber:11},this)," will fill available space if none of its ancestors apply any constraints on height or width. It will fill 100% of its available space horizontally, and take up all the vertical space it needs. In this case, it will change vertical size during loading."]},void 0,!0,{fileName:wt,lineNumber:33,columnNumber:7},this),(0,_t.jsxDEV)(gt.default.Demo,{children:[(0,_t.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,_t.jsxDEV)(jt.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:wt,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:wt,lineNumber:40,columnNumber:9},this),(0,_t.jsxDEV)(jt.Table,{accessibleLabel:"File list",isLoading:e,items:Ct,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>yt(e),tableHeaders:kt},void 0,!1,{fileName:wt,lineNumber:45,columnNumber:9},this)]},void 0,!0,{fileName:wt,lineNumber:39,columnNumber:7},this)]},void 0,!0,{fileName:wt,lineNumber:32,columnNumber:5},this)}function St(){const[e,i]=(0,Et.useState)(!1),[n,l]=(0,Et.useState)(Ct[Ct.length-1]);return(0,_t.jsxDEV)(gt.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,_t.jsxDEV)("p",{children:[(0,_t.jsxDEV)("code",{children:"Tables"},void 0,!1,{fileName:wt,lineNumber:69,columnNumber:9},this)," render inside of a ",(0,_t.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:wt,lineNumber:69,columnNumber:48},this)," container component, which gives the table a scroll context and allows it to scroll if it overflows. Apply height/width constraints to an appropriate parent elements to enable this. Height will not change when loading."]},void 0,!0,{fileName:wt,lineNumber:68,columnNumber:7},this),(0,_t.jsxDEV)("p",{children:["In this example, the last item in the table is pre-selected. Also in this example: an additional style is added to the first ",(0,_t.jsxDEV)("code",{children:"td"},void 0,!1,{fileName:wt,lineNumber:76,columnNumber:65},this)," ","in each row to make its foreground color different (NB: the example here would not meet ARIA contrast requirements). This demonstrates style extension/override."]},void 0,!0,{fileName:wt,lineNumber:74,columnNumber:7},this),(0,_t.jsxDEV)(gt.default.Demo,{withSource:!0,children:[(0,_t.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,_t.jsxDEV)(jt.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:wt,lineNumber:83,columnNumber:11},this)},void 0,!1,{fileName:wt,lineNumber:82,columnNumber:9},this),(0,_t.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-padding--3",style:"max-height:300px;height:300px;",children:(0,_t.jsxDEV)(jt.Table,{accessibleLabel:"File list",isLoading:e,items:e?[]:Ct,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>(e=>(0,_t.jsxDEV)(_t.Fragment,{children:[(0,_t.jsxDEV)("td",{className:"hyp-u-color--grey-6",children:e.displayName},void 0,!1,{fileName:wt,lineNumber:18,columnNumber:5},void 0),(0,_t.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:wt,lineNumber:19,columnNumber:5},void 0)]},void 0,!0))(e),tableHeaders:kt},void 0,!1,{fileName:wt,lineNumber:91,columnNumber:11},this)},void 0,!1,{fileName:wt,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:wt,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:wt,lineNumber:67,columnNumber:5},this)}function Bt(){const[e,i]=(0,Et.useState)(!1),n=[],[l,t]=(0,Et.useState)(n[n.length-1]),r=(0,_t.jsxDEV)("p",{children:["There are no files available to show."," ",(0,_t.jsxDEV)("a",{href:"https://www.example.com",children:"Learn more."},void 0,!1,{fileName:wt,lineNumber:117,columnNumber:7},this)]},void 0,!0,{fileName:wt,lineNumber:115,columnNumber:5},this);return(0,_t.jsxDEV)(gt.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,_t.jsxDEV)("p",{children:["This Table has no items (it is empty). When not in loading state, the provided ",(0,_t.jsxDEV)("code",{children:"emptyItemsMessage"},void 0,!1,{fileName:wt,lineNumber:125,columnNumber:18},this)," will render centered in the table."]},void 0,!0,{fileName:wt,lineNumber:123,columnNumber:7},this),(0,_t.jsxDEV)(gt.default.Demo,{withSource:!0,children:[(0,_t.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,_t.jsxDEV)(jt.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:wt,lineNumber:130,columnNumber:11},this)},void 0,!1,{fileName:wt,lineNumber:129,columnNumber:9},this),(0,_t.jsxDEV)(jt.Table,{accessibleLabel:"File list",emptyItemsMessage:r,isLoading:e,items:n,selectedItem:l,onSelectItem:e=>t(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>yt(e),tableHeaders:kt},void 0,!1,{fileName:wt,lineNumber:135,columnNumber:9},this)]},void 0,!0,{fileName:wt,lineNumber:128,columnNumber:7},this)]},void 0,!0,{fileName:wt,lineNumber:122,columnNumber:5},this)}var It={};Object.defineProperty(It,"__esModule",{value:!0}),It.default=function(){return(0,zt.jsxDEV)(Tt.default.Page,{title:"Thumbnail",children:[(0,zt.jsxDEV)(Tt.default.Pattern,{title:"Thumbnail",children:[(0,zt.jsxDEV)("p",{children:["The ",(0,zt.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:Mt,lineNumber:9,columnNumber:15},this)," component handles rendering a thumbnail or other image, and provides a loading state and an empty (placeholder) state. If ",(0,zt.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:Mt,lineNumber:11,columnNumber:21},this)," has no content, it will render a placeholder. If its ",(0,zt.jsxDEV)("code",{children:"isLoading"},void 0,!1,{fileName:Mt,lineNumber:12,columnNumber:31},this)," prop is set to"," ",(0,zt.jsxDEV)("code",{children:"true"},void 0,!1,{fileName:Mt,lineNumber:13,columnNumber:11},this),", it will render a loading state."]},void 0,!0,{fileName:Mt,lineNumber:8,columnNumber:9},this),(0,zt.jsxDEV)("p",{children:"The following examples are rendered within a parent container sized to 250x175px. The Thumbnail will fill, but not exceed, the available space."},void 0,!1,{fileName:Mt,lineNumber:15,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Empty thumbnail with default placeholder",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{},void 0,!1,{fileName:Mt,lineNumber:24,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:23,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:22,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:21,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Thumbnail with image content",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{children:(0,zt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:Mt,lineNumber:33,columnNumber:17},this)},void 0,!1,{fileName:Mt,lineNumber:32,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:29,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Empty thumbnail in loading state",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{isLoading:!0},void 0,!1,{fileName:Mt,lineNumber:42,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:41,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:40,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:39,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Thumbnail in loading state",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{isLoading:!0,children:(0,zt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:Mt,lineNumber:51,columnNumber:17},this)},void 0,!1,{fileName:Mt,lineNumber:50,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:48,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:47,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Empty thumbnail with custom placeholder",children:[(0,zt.jsxDEV)("p",{children:"Placeholder can be any JSX"},void 0,!1,{fileName:Mt,lineNumber:58,columnNumber:11},this),(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{placeholder:"!"},void 0,!1,{fileName:Mt,lineNumber:61,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:Mt,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:Mt,lineNumber:7,columnNumber:7},this),(0,zt.jsxDEV)(Tt.default.Pattern,{title:"Thumbnail (smaller)",children:[(0,zt.jsxDEV)("p",{children:"These examples are within a 100x150px parent."},void 0,!1,{fileName:Mt,lineNumber:68,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Smaller loading spinner",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{isLoading:!0,size:"small"},void 0,!1,{fileName:Mt,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:70,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:69,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Constrained image proportions",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{size:"small",children:(0,zt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:Mt,lineNumber:81,columnNumber:17},this)},void 0,!1,{fileName:Mt,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:79,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:78,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:77,columnNumber:9},this),(0,zt.jsxDEV)(Tt.default.Example,{title:"Constrained image proportions: placeholder",children:(0,zt.jsxDEV)(Tt.default.Demo,{withSource:!0,children:(0,zt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,zt.jsxDEV)(Pt.Thumbnail,{size:"small"},void 0,!1,{fileName:Mt,lineNumber:90,columnNumber:15},this)},void 0,!1,{fileName:Mt,lineNumber:89,columnNumber:13},this)},void 0,!1,{fileName:Mt,lineNumber:88,columnNumber:11},this)},void 0,!1,{fileName:Mt,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:Mt,lineNumber:67,columnNumber:7},this)]},void 0,!0,{fileName:Mt,lineNumber:6,columnNumber:5},this)};var Pt=z,Tt=function(e){return e&&e.__esModule?e:{default:e}}(xn),zt=he,Mt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailComponents.js";Object.defineProperty(vn,"__esModule",{value:!0}),vn.getRoutes=function(e){if(e)return nr.filter((i=>i.group===e));return nr};var Ht=ir(pn),At=ir(Pn),Ot=ir(Fn),qt=ir(Qn),Ft=ir(ll),Ut=ir(hl),Rt=ir(pl),$t=ir(gl),Wt=ir(kl),Gt=ir(Il),Zt=ir(Hl),Kt=ir(Rl),Jt=ir(tt),Yt=ir(st),Qt=ir(bt),Xt=ir(Dt),er=ir(It);function ir(e){return e&&e.__esModule?e:{default:e}}const nr=[{route:/^\/?$/,title:"Home",component:Ht.default,group:"home"},{route:"/foundations-colors",title:"Colors",component:At.default,group:"foundations"},{route:"/foundations-layout",title:"Layout",component:Ot.default,group:"foundations"},{route:"/patterns-containers",title:"Containers",component:Ft.default,group:"patterns"},{route:"/patterns-forms",title:"Forms",component:qt.default,group:"patterns"},{route:"/patterns-panels",title:"Panels",component:Ut.default,group:"patterns"},{route:"/patterns-spinners",title:"Spinners",component:Rt.default,group:"patterns"},{route:"/patterns-tables",title:"Tables",component:$t.default,group:"patterns"},{route:"/patterns-thumbnails",title:"Thumbnails",component:Wt.default,group:"patterns"},{route:"/components-buttons",title:"Buttons",component:Gt.default,group:"components"},{route:"/components-containers",title:"Containers",component:Zt.default,group:"components"},{route:"/components-dialogs",title:"Dialogs",component:Kt.default,group:"components"},{route:"/components-forms",title:"Forms",component:Jt.default,group:"components"},{route:"/components-panel",title:"Panel",component:Yt.default,group:"components"},{route:"/components-spinner",title:"Spinner",component:Qt.default,group:"components"},{route:"/components-table",title:"Table",component:Xt.default,group:"components"},{route:"/components-thumbnail",title:"Thumbnail",component:er.default,group:"components"}];var lr={};Object.defineProperty(lr,"__esModule",{value:!0}),lr.useRoute=function(e,i){const[n,l]=(0,tr.useState)((()=>rr(e))),t=(0,tr.useMemo)((()=>i.find((e=>n.match(e.route)))),[n,i]),r=`${t.title}: Hypothesis UI playground`;(0,tr.useEffect)((()=>{document.title=r}),[r]),(0,tr.useEffect)((()=>{const i=()=>{l(rr(e))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}}),[e]);return[t,(i,n)=>{i.preventDefault(),history.pushState({},r,e+n),l(n)}]};var tr=R;function rr(e){return location.pathname.slice(e.length)}Object.defineProperty(fn,"__esModule",{value:!0}),fn.default=function({baseURL:e="/ui-playground",extraRoutes:i=[]}){const n=(0,ar.getRoutes)().concat(i),[l,t]=(0,mr.useRoute)(e,n),r=l?(0,sr.jsxDEV)(l.component,{},void 0,!1,{fileName:cr,lineNumber:34,columnNumber:5},this):(0,sr.jsxDEV)(sr.Fragment,{children:[(0,sr.jsxDEV)("h1",{className:"heading",children:":("},void 0,!1,{fileName:cr,lineNumber:37,columnNumber:7},this),(0,sr.jsxDEV)("p",{children:"Page not found."},void 0,!1,{fileName:cr,lineNumber:38,columnNumber:7},this)]},void 0,!0),o=[{title:"Foundations",routes:(0,ar.getRoutes)("foundations")},{title:"Patterns",routes:(0,ar.getRoutes)("patterns")},{title:"Common Components",routes:(0,ar.getRoutes)("components")}];i.length&&o.push({title:"Application Patterns",routes:i});return(0,sr.jsxDEV)("main",{className:"PlaygroundApp",children:[(0,sr.jsxDEV)("div",{className:"PlaygroundApp__sidebar",children:[(0,sr.jsxDEV)("div",{className:"PlaygroundApp__sidebar-home",children:(0,sr.jsxDEV)("a",{href:e,onClick:e=>t(e,"/"),children:(0,sr.jsxDEV)(ur.SvgIcon,{name:"logo"},void 0,!1,{fileName:cr,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:cr,lineNumber:56,columnNumber:11},this)},void 0,!1,{fileName:cr,lineNumber:55,columnNumber:9},this),o.map((e=>(0,sr.jsxDEV)("div",{children:[(0,sr.jsxDEV)("h2",{children:e.title},void 0,!1,{fileName:cr,lineNumber:62,columnNumber:13},this),(0,sr.jsxDEV)("ul",{children:e.routes.map((({route:e,title:i})=>(0,sr.jsxDEV)("li",{children:(0,sr.jsxDEV)("a",{className:(0,or.default)("PlaygroundApp__nav-item",{"is-active":l.route===e}),href:`${e}`,onClick:i=>t(i,e),children:i},void 0,!1,{fileName:cr,lineNumber:66,columnNumber:19},this)},i,!1,{fileName:cr,lineNumber:65,columnNumber:17},this)))},void 0,!1,{fileName:cr,lineNumber:63,columnNumber:13},this)]},e.title,!0,{fileName:cr,lineNumber:61,columnNumber:11},this)))]},void 0,!0,{fileName:cr,lineNumber:54,columnNumber:7},this),(0,sr.jsxDEV)("div",{className:"PlaygroundApp__content",children:r},void 0,!1,{fileName:cr,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:cr,lineNumber:53,columnNumber:5},this)};var or=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),ur=U,ar=vn,mr=lr,sr=he,cr="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js";Object.defineProperty(u,"__esModule",{value:!0});var dr=u.startApp=function({baseURL:e="",extraRoutes:i=[],icons:n={}}={}){const l={...br.default,...n};(0,Nr.registerIcons)(l);const t=document.querySelector("#app");(0,hr.render)((0,vr.jsxDEV)(fr.default,{baseURL:e,extraRoutes:i},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/index.js",lineNumber:34,columnNumber:5},this),t)},hr=a,Nr=z,br=pr(Gi),fr=pr(fn),vr=he;function pr(e){return e&&e.__esModule?e:{default:e}}var xr,Dr,Er,jr=0,gr=[],Vr=re.__b,_r=re.__r,wr=re.diffed,yr=re.__c,kr=re.unmount;function Cr(e,i){re.__h&&re.__h(Dr,e,jr||i),jr=0;var n=Dr.__H||(Dr.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function Lr(e){return jr=5,function(e,i){var n=Cr(xr++,7);return Tr(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}((function(){return{current:e}}),[])}function Sr(){gr.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(Ir),e.__H.__h.forEach(Pr),e.__H.__h=[]}catch(i){e.__H.__h=[],re.__e(i,e.__v)}})),gr=[]}re.__b=function(e){Dr=null,Vr&&Vr(e)},re.__r=function(e){_r&&_r(e),xr=0;var i=(Dr=e.__c).__H;i&&(i.__h.forEach(Ir),i.__h.forEach(Pr),i.__h=[])},re.diffed=function(e){wr&&wr(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==gr.push(i)&&Er===re.requestAnimationFrame||((Er=re.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(l),Br&&cancelAnimationFrame(i),setTimeout(e)},l=setTimeout(n,100);Br&&(i=requestAnimationFrame(n))})(Sr)),Dr=void 0},re.__c=function(e,i){i.some((function(e){try{e.__h.forEach(Ir),e.__h=e.__h.filter((function(e){return!e.__||Pr(e)}))}catch(n){i.some((function(e){e.__h&&(e.__h=[])})),i=[],re.__e(n,e.__v)}})),yr&&yr(e,i)},re.unmount=function(e){kr&&kr(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(Ir)}catch(e){re.__e(e,i.__v)}};var Br="function"==typeof requestAnimationFrame;function Ir(e){var i=Dr;"function"==typeof e.__c&&e.__c(),Dr=i}function Pr(e){var i=Dr;e.__c=e.__(),Dr=i}function Tr(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}let zr={};function Mr({name:e,className:i="",inline:n=!1,title:l=""}){if(!zr[e])throw new Error(`Icon name "${e}" is not registered`);const t=zr[e],r=Lr();!function(e,i){var n=Cr(xr++,4);!re.__s&&Tr(n.__H,i)&&(n.__=e,n.__H=i,Dr.__h.push(n))}((()=>{const e=r.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,t]);const o={};return l&&(o.title=l),ce("span",{className:F("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:t},ref:r,...o},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5})}function Hr(e,{reset:i=!1}={}){i&&(zr={}),Object.assign(zr,e)}var Ar="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function Or({buttonRef:e,classes:i,className:n,icon:l,iconPosition:t="left",size:r="medium",variant:o="normal",expanded:u,pressed:a,type:m="button",...s}){const c={"aria-expanded":u,"aria-pressed":a,"aria-label":s.title};return ce("button",{ref:e,className:F(n,`${n}--${r}`,`${n}--${o}`,{[`${n}--icon-${t}`]:l},i),type:m,...c,...s},void 0,!1,{fileName:Ar,lineNumber:73,columnNumber:5})}function qr({className:e="Hyp-IconButton",...i}){const{icon:n}=i;return ce(Or,{className:e,...i,children:ce(Mr,{name:n},void 0,!1,{fileName:Ar,lineNumber:100,columnNumber:7})},void 0,!1,{fileName:Ar,lineNumber:99,columnNumber:5})}function Fr({children:e,className:i="Hyp-LabeledButton",...n}){const{icon:l,iconPosition:t="left"}=n;return ce(Or,{className:i,...n,children:[l&&"left"===t&&ce(Mr,{name:l},void 0,!1,{fileName:Ar,lineNumber:118,columnNumber:43}),e,l&&"right"===t&&ce(Mr,{name:l},void 0,!1,{fileName:Ar,lineNumber:120,columnNumber:44})]},void 0,!0,{fileName:Ar,lineNumber:117,columnNumber:5})}function Ur(e){return ce(Or,{className:"Hyp-LinkButton",...e},void 0,!1,{fileName:Ar,lineNumber:131,columnNumber:10})}Hr({"hyp-checkbox":_e}),Hr({"hyp-cancel":qe}),Hr({"hyp-cancel":qe}),Hr({"hyp-spinner":Ei});var Rr='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cancel"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8l3.536-3.536L8 8 4.464 4.464 8 8zm0 0l-3.536 3.536L8 8l3.536 3.536L8 8z"></path></g></svg>\n';dr({baseURL:"/ui-playground",extraRoutes:[{route:"/buttons",title:"Buttons",component:function(){return ce(En.Page,{title:"Buttons",children:[ce(En.Pattern,{title:"PublishControlButton",children:[ce("p",{children:["Customizes ",ce("code",{children:"LabeledButton"})," styling to disable"," ",ce("code",{children:"border-radius"})," on the right side. This makes the publish button fit with a drop-down menu next to it."]}),ce(En.Example,{title:"Basic usage",children:ce(En.Demo,{withSource:!0,children:ce(Fr,{classes:"PublishControlButton",variant:"primary",children:"Publish to My Group"})})})]}),ce(En.Pattern,{title:"InlineLinkButton",children:[ce("p",{children:["Customizes ",ce("code",{children:"LinkButton"})," styling to position inline; dark variant always has underline."]}),ce(En.Example,{title:"Basic usage",children:ce(En.Demo,{withSource:!0,children:ce(Ur,{classes:"InlineLinkButton",children:"Log in"})})}),ce(En.Example,{title:"Dark variant, customized with underline",children:ce(En.Demo,{withSource:!0,children:ce(Ur,{classes:"InlineLinkButton InlineLinkButton--underlined",variant:"dark",children:"Log in"})})})]}),ce(En.Pattern,{title:"Non-Responsive IconButton",children:[ce("p",{children:"An icon-only button overriding responsive affordances to fit in specific or tight spaces. These buttons do not have a minimum size (for tap-target size) applied for touch-screen/narrow viewports."}),ce(En.Example,{variant:"wide",title:"Sizes (medium is default)",children:ce(En.Demo,{withSource:!0,children:[ce(qr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"small"}),ce(qr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"medium"}),ce(qr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"large"})]})})]}),ce(En.Pattern,{title:"PaginationPageButton",children:[ce("p",{children:["Style customization for ",ce("code",{children:"LabeledButton"})," that gives it asymmetrical padding to fit well as pagination controls in the Notebook."]}),ce(En.Example,{title:"Page numbers",children:ce(En.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[ce(Fr,{classes:"PaginationPageButton",variant:"dark",children:"9"}),ce(Fr,{classes:"PaginationPageButton",variant:"dark",pressed:!0,children:"10"}),ce(Fr,{classes:"PaginationPageButton",variant:"dark",children:"11"})]})}),ce(En.Example,{title:"Navigation buttons",children:ce(En.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[ce(Fr,{classes:"PaginationPageButton",icon:"arrow-left",variant:"dark",children:"Prev"}),ce(Fr,{classes:"PaginationPageButton",icon:"arrow-right",iconPosition:"right",variant:"dark",children:"Next"})]})})]})]})},group:"components"}],icons:{add:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--plus"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8V3v5H3h5zm0 0v5-5h5-5z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',annotate:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M15 0c.27 0 .505.099.703.297A.961.961 0 0116 1v15l-4-3H1a.974.974 0 01-.703-.29A.953.953 0 010 12V1C0 .719.096.482.29.29A.966.966 0 011 0h14zM7 3l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C4.156 5.229 4 6 4 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188C4.729 8.854 5.082 9 5.5 9c.417 0 .77-.146 1.063-.438C6.854 8.271 7 7.918 7 7.5c0-.417-.146-.77-.438-1.063A1.447 1.447 0 005.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L7 4V3zm5 0l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C9.156 5.229 9 6 9 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188c.291.291.645.437 1.062.437.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.447 1.447 0 0010.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L12 4V3z"/>\n</svg>\n',"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12L3 8l4-4M4 8h9-9z"></path></g></svg>\n',"arrow-right":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4l4 4-4 4m3-4H3h9z"></path></g></svg>\n',cancel:Rr,"caret-right":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--caret-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4l4 4-4 4"></path></g></svg>\n',"cc-std":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-std"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.985 0c2.238 0 4.143.781 5.715 2.343a7.694 7.694 0 011.714 2.579C15.804 5.888 16 6.914 16 8a8.164 8.164 0 01-.579 3.078 7.344 7.344 0 01-1.707 2.536 8.222 8.222 0 01-2.657 1.772c-.99.41-2.014.614-3.071.614a7.775 7.775 0 01-3.036-.607 8.047 8.047 0 01-2.6-1.757A7.846 7.846 0 010 8c0-1.057.202-2.074.607-3.05A8.033 8.033 0 012.371 2.33C3.895.777 5.766 0 7.985 0zm.03 1.443c-1.83 0-3.367.638-4.615 1.914a6.878 6.878 0 00-1.45 2.15A6.301 6.301 0 001.443 8c0 .858.168 1.684.507 2.479a6.627 6.627 0 001.45 2.129 6.593 6.593 0 002.129 1.428c.79.329 1.619.493 2.485.493.857 0 1.688-.166 2.494-.5a6.91 6.91 0 002.178-1.442c1.247-1.22 1.871-2.748 1.871-4.586a6.57 6.57 0 00-.486-2.515 6.397 6.397 0 00-1.413-2.114C11.37 2.086 9.824 1.443 8.014 1.443zm-.1 5.229l-1.073.557c-.114-.238-.254-.405-.42-.5a.95.95 0 00-.465-.143c-.714 0-1.072.472-1.072 1.415 0 .428.09.77.271 1.028.181.257.448.386.8.386.467 0 .796-.229.987-.686l.985.5a2.35 2.35 0 01-2.1 1.257c-.714 0-1.29-.218-1.729-.657-.438-.438-.657-1.047-.657-1.828 0-.762.222-1.367.665-1.814.442-.448 1.002-.672 1.678-.672.991 0 1.7.385 2.13 1.157zm4.613 0l-1.057.557c-.114-.238-.255-.405-.421-.5a.972.972 0 00-.479-.143c-.714 0-1.072.472-1.072 1.415 0 .428.091.77.272 1.028.18.257.447.386.8.386.466 0 .795-.229.985-.686l1 .5c-.218.39-.514.698-.885.922a2.308 2.308 0 01-1.214.335c-.724 0-1.302-.218-1.735-.657-.434-.438-.65-1.047-.65-1.828 0-.762.22-1.367.664-1.814.442-.448 1.002-.672 1.678-.672.99 0 1.696.385 2.114 1.157z"></path></g></svg>\n',"cc-zero":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-zero"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.983 0c2.238 0 4.148.78 5.72 2.342a7.662 7.662 0 011.715 2.582c.39.962.582 1.99.582 3.076a8.13 8.13 0 01-.583 3.087 7.262 7.262 0 01-1.703 2.526 8.213 8.213 0 01-2.655 1.77c-.99.41-2.018.617-3.076.617a7.902 7.902 0 01-3.042-.6 8.301 8.301 0 01-2.6-1.759A8.087 8.087 0 01.6 11.042 7.84 7.84 0 010 8c0-1.057.2-2.07.6-3.042a8.12 8.12 0 011.77-2.633C3.893.772 5.764 0 7.983 0zm.034 1.44c-1.829 0-3.369.64-4.616 1.915a6.962 6.962 0 00-1.457 2.157 6.388 6.388 0 000 4.969 6.83 6.83 0 003.585 3.558c.79.324 1.62.487 2.488.487.857 0 1.681-.165 2.482-.498a6.88 6.88 0 002.184-1.446C13.931 11.364 14.56 9.838 14.56 8a6.57 6.57 0 00-.487-2.515 6.418 6.418 0 00-1.418-2.118C11.37 2.081 9.826 1.44 8.017 1.44zM8 3.395c2.641 0 3.305 2.492 3.305 4.605 0 2.113-.664 4.605-3.305 4.605S4.694 10.113 4.694 8l.007-.355c.073-2.027.804-4.25 3.299-4.25zm1.316 3.227L7.35 10.017c-.274.412-.083.645.219.774l.135.044c.091.022.19.034.297.034 1.357 0 1.422-1.938 1.422-2.869l-.007-.409a7.282 7.282 0 00-.06-.72l-.04-.25zM8 5.132c-1.258 0-1.406 1.66-1.421 2.646L6.577 8c0 .24.005.544.035.865l.027.244 1.759-3.232c.182-.316.09-.542-.101-.706A1.222 1.222 0 008 5.13z"></path></g></svg>\n',"collapse-menu":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M7.456 4.212a.804.804 0 0 1 1.088 0l6.23 5.867c.301.283.301.742 0 1.025l-.726.684a.804.804 0 0 1-1.087.001L8 7.139l-4.961 4.65a.804.804 0 0 1-1.087-.001l-.727-.684a.695.695 0 0 1 0-1.025l6.23-5.867z"/>\n</svg>',collapsed:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">\n <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />\n </g>\n</svg>\n',copy:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--copy"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 15H1V5h3m11-4v10H7V1h8z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',cursor:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="10px" height="30px" viewBox="0 0 10 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n \x3c!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --\x3e\n <title>Shape</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g transform="translate(-239.000000, -73.000000)" fill-rule="nonzero" fill="#000000">\n <g transform="translate(1.000000, 1.000000)">\n <path d="M243.3125,75.186875 C243.3125,73.535 243.3125,72.625 246.434687,72.625 L248,72.625 L248,72 L246.434687,72 C244.324375,72 243.402813,72.4684375 243,73.183125 C242.597187,72.4684375 241.675625,72 239.565313,72 L238,72 L238,72.625 L239.565313,72.625 C242.6875,72.6246875 242.6875,73.5346875 242.6875,75.186875 L242.6875,82 L242.6875,86.6875 L240.929375,86.6875 L240.929375,87.3125 L242.6875,87.3125 L242.6875,92 L242.6875,98.5434375 C242.6875,100.187188 242.6875,101.375 239.565313,101.375 L238,101.375 L238,102 L239.565313,102 C241.675625,102 242.5975,101.442813 243,100.6525 C243.402813,101.442813 244.324375,102 246.434687,102 L248,102 L248,101.375 L246.434687,101.375 C243.3125,101.374688 243.3125,100.187188 243.3125,98.5434375 L243.3125,91.9996875 L243.3125,87.3121875 L245.070312,87.3121875 L245.070312,86.6871875 L243.3125,86.6871875 L243.3125,81.9996875 L243.3125,75.186875 Z"></path>\n </g>\n </g>\n </g>\n</svg>\n',edit:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--edit"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4l1 1-9 9-2 1 1-2 9-9zm3-3l1 1-1 1-1-1 1-1z"></path></g></svg>\n',email:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--email"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 3v10h14V3H1zm0 0l7 6 7-6H1z"></path></g></svg>\n',"expand-menu":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M7.456 11.788L1.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"/>\n</svg>',error:Rr,external:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--external"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3h6v6m-1-5l-9 9 9-9z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',facebook:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--social-facebook"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" 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"></path></g></svg>\n',flag:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--flag"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9v6V1h12l-4 4 4 4H3z"></path></g></svg>\n',"flag--active":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--flag-filled"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2 1a1 1 0 01.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 01-1.993.117L2 15V1z"></path></g></svg>\n',"format-bold":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-bold"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M8.661 16c.805 0 1.536-.117 2.193-.351a4.953 4.953 0 001.69-.993c.47-.428.831-.947 1.081-1.557s.375-1.287.375-2.03c0-.29-.038-.588-.114-.893a4.123 4.123 0 00-.325-.87 3.937 3.937 0 00-.495-.754 4.412 4.412 0 00-.604-.597c-.17-.126-.17-.264 0-.412.381-.335.699-.772.953-1.311.254-.54.382-1.062.382-1.568 0-.64-.132-1.244-.394-1.813a4.628 4.628 0 00-1.081-1.484c-.458-.42-1-.753-1.627-.999A5.531 5.531 0 008.66 0h-6.14a.534.534 0 00-.362.14A.415.415 0 002 .456v15.086c0 .119.053.225.159.318.106.093.227.139.362.139h6.14zm-.127-9.852H5.826c-.17 0-.254-.075-.254-.223V3.437c0-.157.085-.235.254-.235h2.708c.45 0 .847.145 1.195.435.347.29.521.633.521 1.027 0 .394-.174.74-.521 1.038a1.784 1.784 0 01-1.195.446zm0 6.65H5.826c-.17 0-.254-.075-.254-.223v-2.99c0-.157.085-.235.254-.235h2.708c.56 0 1.004.177 1.335.53.33.353.495.75.495 1.188 0 .454-.165.856-.495 1.205-.33.35-.776.525-1.335.525z"></path></g></svg>\n',"format-functions":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-latex"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M13.392 16c.158 0 .299-.036.423-.108.123-.073.185-.155.185-.248v-1.778c0-.099-.062-.183-.185-.252a.848.848 0 00-.423-.104H6.85c-.138 0-.227-.028-.267-.083-.04-.055-.04-.105 0-.152l5.533-5.101c.158-.14.223-.265.193-.378a.755.755 0 00-.193-.325L6.88 2.707c-.04-.046-.042-.094-.007-.143.034-.05.13-.074.289-.074h6.17a.782.782 0 00.416-.108c.119-.073.178-.155.178-.248V.356c0-.093-.06-.175-.178-.248A.782.782 0 0013.333 0H2.905c-.158 0-.3.036-.423.108-.124.073-.185.155-.185.248v1.943c0 .128.037.236.11.326l.171.204 5.31 4.815c.04.047.065.106.075.178a.221.221 0 01-.074.195l-5.622 5.154c-.04.047-.094.113-.163.2A.512.512 0 002 13.7v1.943c0 .093.062.175.185.248a.822.822 0 00.423.108h10.784z"></path></g></svg>\n',"format-italic":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-italic"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M10.61 16c.12 0 .23-.046.329-.14a.633.633 0 00.191-.317l.457-2.176a.348.348 0 00-.064-.313.336.336 0 00-.276-.133H8.845c-.142-.008-.198-.086-.17-.235l1.892-9.372c.035-.149.124-.223.266-.223H13a.49.49 0 00.335-.14.62.62 0 00.196-.318L13.99.457a.542.542 0 00.011-.1.337.337 0 00-.085-.223.336.336 0 00-.276-.134H5.805a.49.49 0 00-.335.14.62.62 0 00-.196.317l-.457 2.176a.353.353 0 00.069.318c.074.093.168.14.281.14h2.18c.141 0 .198.074.17.223l-1.893 9.372c-.028.156-.113.235-.255.235H2.967a.489.489 0 00-.324.133.59.59 0 00-.197.313l-.435 2.176a.542.542 0 00-.011.1c0 .082.025.156.074.223.071.09.16.134.266.134h8.27z"></path></g></svg>\n',"format-list-numbered":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-ordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.748 11.5c.227 0 .443.034.646.103.203.069.381.164.534.286.155.123.276.267.364.432.089.168.134.35.134.543 0 .17-.042.333-.124.484a1.384 1.384 0 01-.19.269l-.062.061.047.035c.047.041.09.086.13.134l.058.075.075.122c.093.172.14.352.14.538 0 .201-.048.39-.143.566a1.44 1.44 0 01-.384.45c-.16.125-.344.223-.554.294-.21.072-.434.108-.67.108-.237 0-.461-.036-.671-.108a1.871 1.871 0 01-.555-.295 1.42 1.42 0 01-.382-.45 1.178 1.178 0 01-.132-.417L1 14.582l.002-.078.01-.05a.249.249 0 01.077-.111.283.283 0 01.121-.06l.07-.008h.708l.05.007c.044.01.084.028.12.056a.24.24 0 01.089.133l.006.054v.047l.005.077a.279.279 0 00.112.186c.088.066.213.101.378.101a.615.615 0 00.376-.102.29.29 0 00.12-.252.29.29 0 00-.12-.252.538.538 0 00-.262-.096l-.114-.007h-.1l-.051-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.053.001-.57.01-.05a.249.249 0 01.078-.112.283.283 0 01.121-.06l.07-.008h.076l.112-.006a.454.454 0 00.224-.086.26.26 0 00.104-.222.246.246 0 00-.103-.213.533.533 0 00-.329-.09.527.527 0 00-.324.09.24.24 0 00-.098.148l-.006.065-.002.11-.01.05a.249.249 0 01-.081.112.292.292 0 01-.12.059l-.066.007h-.712l-.052-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.054v-.096l.008-.135c.018-.141.062-.275.132-.402.091-.164.213-.307.366-.43.152-.122.33-.217.533-.286.203-.069.418-.103.645-.103zM15 13a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2.777 5.5c.234 0 .454.034.66.101.207.068.389.164.544.288.156.124.28.27.372.437.093.17.14.355.14.551 0 .19-.049.37-.145.542-.07.123-.156.237-.258.34l-.108.1L2.71 8.932l1.52.001.053.006c.044.01.084.029.12.056.047.036.078.08.091.132l.007.054-.002.59-.01.05a.25.25 0 01-.083.113.298.298 0 01-.121.059L4.216 10H1.27l-.053-.007a.298.298 0 01-.122-.059.246.246 0 01-.089-.132L1 9.748v-.711l.004-.05a.26.26 0 01.04-.115l.034-.043.035-.033L3.04 7.167l.036-.036a.98.98 0 00.08-.114.295.295 0 00.055-.145.27.27 0 00-.099-.21c-.068-.062-.167-.094-.303-.094-.163 0-.285.032-.369.093a.244.244 0 00-.103.147l-.006.064-.002.123-.01.052a.25.25 0 01-.084.112.298.298 0 01-.12.058l-.069.008h-.726l-.053-.007a.298.298 0 01-.121-.059.246.246 0 01-.09-.132l-.006-.054V6.87l.01-.137c.017-.143.063-.28.135-.407.094-.167.22-.313.379-.437.157-.123.339-.219.544-.287.206-.067.425-.101.658-.101zM15 7a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM3.237 0l.052.008c.044.01.084.031.12.061a.248.248 0 01.083.132l.006.052-.004 3.167.744.001.051.007c.044.01.084.03.119.058.044.036.074.08.086.132l.006.053-.001.595-.01.05a.278.278 0 01-.197.176l-.07.008H1.29l-.051-.008a.287.287 0 01-.12-.061.248.248 0 01-.084-.132l-.006-.052.001-.596.01-.05a.247.247 0 01.077-.113.28.28 0 01.12-.06l.069-.008.932.002.003-1.959-.796.629-.068.037a.295.295 0 01-.196-.002.25.25 0 01-.172-.179L1 1.881v-.587l.007-.089.015-.075a.345.345 0 01.073-.132l.06-.059.83-.758.04-.036A.994.994 0 012.139.07a.498.498 0 01.183-.062L2.428 0h.809zM15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8z"></path></g></svg>\n',"format-list-unordered":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-unordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8zm0 6a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM2 12a2 2 0 110 4 2 2 0 010-4zm13 1a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2 6a2 2 0 110 4 2 2 0 010-4zm0-6a2 2 0 110 4 2 2 0 010-4z"></path></g></svg>\n',"format-quote":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-quote"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.701 14c.38 0 .659-.085.837-.255.177-.17.328-.343.45-.52l2.408-3.25c.246-.328.445-.725.598-1.19a4.69 4.69 0 00.23-1.475V2.775a.752.752 0 00-.23-.539A.713.713 0 006.47 2H1.947a.713.713 0 00-.524.236.752.752 0 00-.23.539v4.649c0 .214.077.396.23.548a.726.726 0 00.524.226h.901c.123 0 .23.054.322.161.092.107.101.224.028.35l-2.041 3.817c-.196.365-.208.702-.037 1.011.172.309.447.463.827.463h.754zm7.795 0c.367 0 .64-.085.818-.255.178-.17.328-.343.45-.52l2.409-3.25c.257-.328.46-.725.606-1.19A4.87 4.87 0 0015 7.31V2.775a.752.752 0 00-.23-.539.713.713 0 00-.524-.236H9.742a.703.703 0 00-.533.236.767.767 0 00-.22.539v4.649c0 .214.076.396.23.548a.726.726 0 00.523.226h.9c.123 0 .228.054.313.161.086.107.092.224.019.35L8.95 12.526c-.208.365-.223.702-.045 1.011.177.309.456.463.836.463h.754z"></path></g></svg>\n',groups:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--groups"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15a3 3 0 0 1 6 0m2-4a3 3 0 0 1 6 0M4 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>\n',help:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--help"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4c0-1.657 1.79-3 4-3s4 1.343 4 3-1.79 3-4 3m0 0v2-2zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>\n',highlight:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15H1h11zm-.5-6v2l-1 1v-2l1-1zm.5-7v6h-2V2h2zm0-1h-2 2zm0 8h-2 2z"></path></g></svg>\n',image:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--image"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 1v14H1V1h14zM1 15l3-8 4 6 3-4 4 6m-4-9a1 1 0 110-2 1 1 0 010 2z"></path></g></svg>\n',leave:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M8 0c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm0 14.452A6.45 6.45 0 0 0 14.452 8 6.45 6.45 0 0 0 8 1.548 6.45 6.45 0 0 0 1.548 8 6.45 6.45 0 0 0 8 14.452zm3.284-8.458L9.277 8l2.007 2.006a.387.387 0 0 1 0 .549l-.73.729a.387.387 0 0 1-.548 0L8 9.277l-2.006 2.007a.387.387 0 0 1-.549 0l-.729-.73a.387.387 0 0 1 0-.548L6.723 8 4.716 5.994a.387.387 0 0 1 0-.549l.73-.729a.387.387 0 0 1 .548 0L8 6.723l2.006-2.007a.387.387 0 0 1 .549 0l.729.73a.387.387 0 0 1 0 .548z"/>\n</svg>',link:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--link"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.069 3.042l1.057-1.274c1.193-1.106 3.035-.938 4.046 0 1.012.94 1.193 2.649 0 3.755L11.046 9.17m0 0c-1.193 1.107-2.853 1.107-4.046 0m-.069 3.788l-1.057 1.274c-1.193 1.106-3.035.938-4.046 0-1.012-.94-1.193-2.649 0-3.755L4.954 6.83m0 0C6.147 5.723 7.807 5.723 9 6.8"></path></g></svg>\n',lock:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="48px" height="56px" viewBox="0 0 48 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g fill="currentColor">\n <rect x="0" y="24" width="48" height="32"></rect>\n <path d="M24,0 C24,0 8,0 8,16 L8,32 L16,32 L16,16.0000004 C16,8 24,8 24,8 C24,8 32,8 32,16 L32,32 L40,32 L40,16 C40,0 24,0 24,0 Z"></path>\n </g>\n </g>\n</svg>\n',logo:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <rect fill="#ffffff" stroke="none" width="17.14407" height="16.046612" x="3.8855932" y="3.9449153" />\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <path d="M0,2.00494659 C0,0.897645164 0.897026226,0 2.00494659,0 L21.9950534,0 C23.1023548,0 24,0.897026226 24,2.00494659 L24,21.9950534 C24,23.1023548 23.1029738,24 21.9950534,24 L2.00494659,24 C0.897645164,24 0,23.1029738 0,21.9950534 L0,2.00494659 Z M9,24 L12,28 L15,24 L9,24 Z M7.00811294,4 L4,4 L4,20 L7.00811294,20 L7.00811294,15.0028975 C7.00811294,12.004636 8.16824717,12.0097227 9,12 C10,12.0072451 11.0189302,12.0606714 11.0189302,14.003477 L11.0189302,20 L14.0270431,20 L14.0270431,13.1087862 C14.0270433,10 12,9.00309038 10,9.00309064 C8.01081726,9.00309091 8,9.00309086 7.00811294,11.0019317 L7.00811294,4 Z M19,19.9869002 C20.1045695,19.9869002 21,19.0944022 21,17.9934501 C21,16.892498 20.1045695,16 19,16 C17.8954305,16 17,16.892498 17,17.9934501 C17,19.0944022 17.8954305,19.9869002 19,19.9869002 Z" fill="currentColor"></path>\n </g>\n</svg>\n',pointer:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8" viewBox="0 0 15 8" aria-hidden="true" focusable="false"><path d="M0 8 L7 0 L15 8" stroke="currentColor" strokeWidth="2" /></svg>\n',profile:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--profile"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15c0-2.761 3.134-5 7-5s7 2.239 7 5M8 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g></svg>\n',public:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm2.655 11.535c.244-.242.442-.719.442-1.063a1.13 1.13 0 0 0-.288-.696l-.442-.442a1.033 1.033 0 0 0-.73-.302H7.484C7.181 8.88 6.791 8 6.452 8c-.34 0-.674-.08-.978-.231l-.357-.179a.386.386 0 0 1-.213-.345c0-.153.118-.317.263-.366l1.006-.335a.618.618 0 0 1 .163-.026c.106 0 .258.056.338.126l.3.26c.046.04.106.063.169.063h.182a.258.258 0 0 0 .23-.373l-.503-1.006a.306.306 0 0 1-.027-.116c0-.06.035-.143.078-.185l.32-.31a.258.258 0 0 1 .18-.074h.29c.06 0 .141-.034.183-.076l.258-.258c.1-.1.1-.264 0-.364l-.151-.152c-.101-.1-.101-.264 0-.365l.333-.333.151-.151a.516.516 0 0 0 0-.73l-.912-.913a6.45 6.45 0 0 0-.787.078v.365a.516.516 0 0 1-.747.461l-.775-.387a6.487 6.487 0 0 0-3.329 3.287c.32.474.813 1.205 1.116 1.65.138.203.4.503.582.668l.026.023c.308.278.65.516 1.021.702.452.227 1.111.586 1.575.842.328.182.53.527.53.903v1.032c0 .274.11.537.303.73.484.484.785 1.246.73 1.653v.884c.473 0 .932-.055 1.376-.152l.56-1.511c.067-.177.106-.362.155-.544a.771.771 0 0 1 .199-.346l.365-.364zm2.797-2.946l.94.235c.036-.27.06-.544.06-.824a6.4 6.4 0 0 0-.688-2.882l-.419.21a.773.773 0 0 0-.298.263l-.632.947a.908.908 0 0 0-.13.43c0 .13.058.321.13.43l.58.87c.107.16.27.274.457.32z"/>\n</svg>\n',refresh:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n \x3c!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --\x3e\n <defs/>\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g fill="currentColor">\n <g>\n <path d="M0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,4.89580324 14.2154684,2.11256098 11.4682644,0.789110134 L10.6002482,2.59092808 C12.661769,3.58405472 14,5.6712248 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,5.65296151 3.35941993,3.55225774 5.44569583,2.56903563 L4.59307587,0.759881355 C1.81273067,2.07020511 0,4.87140735 0,8 Z" />\n <polygon points="7 8.58578644 7 0 9 0 9 8.58578644 10.2928932 7.29289322 11 6.58578644 12.4142136 8 11.7071068 8.70710678 8.70710678 11.7071068 8 12.4142136 7.64644661 12.0606602 7.29289322 11.7071068 4.29289322 8.70710678 3.58578644 8 5 6.58578644 5.70710678 7.29289322"/>\n </g>\n </g>\n </g>\n</svg>\n',restricted:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 1C4.5 1 1 4.5 1 8s3.5 7 7 7 7-3.5 7-7-3.5-7-7-7zm0 7l-4 4 4-4 4-4-4 4z"></path></g></svg>\n',reply:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M6.422 5.422c2 0 3.542.417 4.625 1.25 1.083.833 1.875 1.75 2.375 2.75s.792 1.917.875 2.75l.125 1.25h-2l-.094-.938c-.062-.625-.281-1.312-.656-2.062-.375-.75-.969-1.438-1.781-2.063-.813-.625-1.97-.937-3.47-.937H4.829l2 2-1.406 1.422L1 6.422 5.422 2l1.406 1.422-2 2h1.594z"/>\n</svg>\n',search:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--search"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.536 9.536a5 5 0 1 1-7.071-7.071 5 5 0 0 1 7.07 7.07L15 15 9.536 9.536z"></path></g></svg>\n',share:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--share"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V2m7 8v5H1v-5m3-5l4-4 4 4"></path></g></svg>\n',success:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="Icon Icon--check"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L6 13 3 8"></path></g></svg>\n',sort:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--sort"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 9V2v7zM1 5l4-4 4 4m2 2v7-7zm-4 4l4 4 4-4"></path></g></svg>\n',trash:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--trash"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 4h12l-2 11H4L2 4zM1 1h14H1z"></path></g></svg>\n',twitter:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--social-twitter"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M15.969 3.049c-.59.259-1.22.436-1.884.516a3.305 3.305 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.29 9.29 0 0 1-6.76-3.418A3.214 3.214 0 0 0 .65 3.76c0 1.14.58 2.142 1.459 2.73a3.27 3.27 0 0 1-1.485-.41v.04a3.282 3.282 0 0 0 2.63 3.218 3.33 3.33 0 0 1-1.474.057 3.291 3.291 0 0 0 3.069 2.278A6.578 6.578 0 0 1 .78 13.076c-.26 0-.52-.015-.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-.42.64-.46 1.2-1.04 1.64-1.7l-.031-.012z"></path></g></svg>\n'}});
7
+ T=H,function(){var e={}.hasOwnProperty;function i(){for(var n=[],l=0;l<arguments.length;l++){var t=arguments[l];if(t){var r=typeof t;if("string"===r||"number"===r)n.push(t);else if(Array.isArray(t)){if(t.length){var o=i.apply(null,t);o&&n.push(o)}}else if("object"===r)if(t.toString===Object.prototype.toString)for(var u in t)e.call(t,u)&&t[u]&&n.push(u);else n.push(t.toString())}}return n.join(" ")}T.exports?(i.default=i,T.exports=i):window.classNames=i}();var A,O,q,F=H.exports,U={},R={},$=a,W=0,G=[],Z=$.options.__b,K=$.options.__r,J=$.options.diffed,Y=$.options.__c,Q=$.options.unmount;function X(e,i){$.options.__h&&$.options.__h(O,e,W||i),W=0;var n=O.__H||(O.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function ee(e){return W=1,ie(me,e)}function ie(e,i,n){var l=X(A++,2);return l.t=e,l.__c||(l.__=[n?n(i):me(void 0,i),function(e){var i=l.t(l.__[0],e);l.__[0]!==i&&(l.__=[i,l.__[1]],l.__c.setState({}))}],l.__c=O),l.__}function ne(e,i){var n=X(A++,4);!$.options.__s&&ae(n.__H,i)&&(n.__=e,n.__H=i,O.__h.push(n))}function le(e,i){var n=X(A++,7);return ae(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}function te(){G.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(oe),e.__H.__h.forEach(ue),e.__H.__h=[]}catch(i){e.__H.__h=[],$.options.__e(i,e.__v)}})),G=[]}$.options.__b=function(e){O=null,Z&&Z(e)},$.options.__r=function(e){K&&K(e),A=0;var i=(O=e.__c).__H;i&&(i.__h.forEach(oe),i.__h.forEach(ue),i.__h=[])},$.options.diffed=function(e){J&&J(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==G.push(i)&&q===$.options.requestAnimationFrame||((q=$.options.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(l),re&&cancelAnimationFrame(i),setTimeout(e)},l=setTimeout(n,100);re&&(i=requestAnimationFrame(n))})(te)),O=void 0},$.options.__c=function(e,i){i.some((function(e){try{e.__h.forEach(oe),e.__h=e.__h.filter((function(e){return!e.__||ue(e)}))}catch(n){i.some((function(e){e.__h&&(e.__h=[])})),i=[],$.options.__e(n,e.__v)}})),Y&&Y(e,i)},$.options.unmount=function(e){Q&&Q(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(oe)}catch(e){$.options.__e(e,i.__v)}};var re="function"==typeof requestAnimationFrame;function oe(e){var i=O;"function"==typeof e.__c&&e.__c(),O=i}function ue(e){var i=O;e.__c=e.__(),O=i}function ae(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}function me(e,i){return"function"==typeof i?i(e):i}R.useState=ee,R.useReducer=ie,R.useEffect=function(e,i){var n=X(A++,3);!$.options.__s&&ae(n.__H,i)&&(n.__=e,n.__H=i,O.__H.__h.push(n))},R.useLayoutEffect=ne,R.useRef=function(e){return W=5,le((function(){return{current:e}}),[])},R.useImperativeHandle=function(e,i,n){W=6,ne((function(){"function"==typeof e?e(i()):e&&(e.current=i())}),null==n?n:n.concat(e))},R.useMemo=le,R.useCallback=function(e,i){return W=8,le((function(){return e}),i)},R.useContext=function(e){var i=O.context[e.__c],n=X(A++,9);return n.__c=e,i?(null==n.__&&(n.__=!0,i.sub(O)),i.props.value):e.__},R.useDebugValue=function(e,i){$.options.useDebugValue&&$.options.useDebugValue(i?i(e):e)},R.useErrorBoundary=function(e){var i=X(A++,10),n=ee();return i.__=e,O.componentDidCatch||(O.componentDidCatch=function(e){i.__&&i.__(e),n[1](e)}),[n[0],function(){n[1](void 0)}]};var se={},ce=a;function de(e,i,n,l,t){var r={};for(var o in i)"ref"!=o&&(r[o]=i[o]);var u,a,m={type:e,props:r,key:n,ref:i&&i.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++ce.options.__v,__source:l,__self:t};if("function"==typeof e&&(u=e.defaultProps))for(a in u)void 0===r[a]&&(r[a]=u[a]);return ce.options.vnode&&ce.options.vnode(m),m}se.Fragment=ce.Fragment,se.jsx=de,se.jsxs=de,se.jsxDEV=de,Object.defineProperty(U,"__esModule",{value:!0}),U.SvgIcon=function({name:e,className:i="",inline:n=!1,title:l=""}){if(!ve[e])throw new Error(`Icon name "${e}" is not registered`);const t=ve[e],r=(0,be.useRef)();(0,be.useLayoutEffect)((()=>{const e=r.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,t]);const o={};l&&(o.title=l);return(0,fe.jsxDEV)("span",{className:(0,Ne.default)("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:t},ref:r,...o},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5},this)},U.registerIcons=function(e,{reset:i=!1}={}){i&&(ve={});Object.assign(ve,e)},U.availableIcons=function(){return ve};var he,Ne=(he=H.exports)&&he.__esModule?he:{default:he},be=R,fe=se;let ve={};Object.defineProperty(M,"__esModule",{value:!0}),M.IconButton=function({className:e="Hyp-IconButton",...i}){const{icon:n}=i;return(0,De.jsxDEV)(ge,{className:e,...i,children:(0,De.jsxDEV)(xe.SvgIcon,{name:n},void 0,!1,{fileName:Ee,lineNumber:100,columnNumber:7},this)},void 0,!1,{fileName:Ee,lineNumber:99,columnNumber:5},this)},M.LabeledButton=function({children:e,className:i="Hyp-LabeledButton",...n}){const{icon:l,iconPosition:t="left"}=n;return(0,De.jsxDEV)(ge,{className:i,...n,children:[l&&"left"===t&&(0,De.jsxDEV)(xe.SvgIcon,{name:l},void 0,!1,{fileName:Ee,lineNumber:118,columnNumber:43},this),e,l&&"right"===t&&(0,De.jsxDEV)(xe.SvgIcon,{name:l},void 0,!1,{fileName:Ee,lineNumber:120,columnNumber:44},this)]},void 0,!0,{fileName:Ee,lineNumber:117,columnNumber:5},this)},M.LinkButton=function(e){return(0,De.jsxDEV)(ge,{className:"Hyp-LinkButton",...e},void 0,!1,{fileName:Ee,lineNumber:131,columnNumber:10},this)};var pe=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),xe=U,De=se,Ee="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function ge({buttonRef:e,classes:i,className:n,icon:l,iconPosition:t="left",size:r="medium",variant:o="normal",expanded:u,pressed:a,type:m="button",...s}){const c={"aria-expanded":u,"aria-pressed":a,"aria-label":s.title};return(0,De.jsxDEV)("button",{ref:e,className:(0,pe.default)(n,`${n}--${r}`,`${n}--${o}`,{[`${n}--icon-${t}`]:l},i),type:m,...c,...s},void 0,!1,{fileName:Ee,lineNumber:73,columnNumber:5},this)}var je={},Ve=' <svg\n width="32"\n height="32"\n viewBox="-4 -4 39 39"\n aria-hidden="true"\n focusable="false"\n >\n <rect\n class="hyp-svg-checkbox--background"\n width="35"\n height="35"\n x="-2"\n y="-2"\n stroke="currentColor"\n fill="none"\n stroke-width="3"\n rx="5"\n ry="5"\n />\n <polyline\n class="hyp-svg-checkbox--checkmark"\n points="4,14 12,23 28,5"\n stroke="transparent"\n stroke-width="5"\n fill="none"\n />\n</svg>',_e=e(Object.freeze({__proto__:null,default:Ve}));Object.defineProperty(je,"__esModule",{value:!0}),je.Checkbox=Be,je.LabeledCheckbox=function({children:e,id:i,containerClasses:n="",...l}){var t;return null!==(t=i)&&void 0!==t||(i=l.name),(0,Ce.jsxDEV)("label",{htmlFor:i,className:(0,ye.default)("Hyp-LabeledCheckbox",n),children:[(0,Ce.jsxDEV)(Be,{id:i,...l},void 0,!1,{fileName:Le,lineNumber:96,columnNumber:7},this),(0,Ce.jsxDEV)("span",{"data-testid":"label-text",children:e},void 0,!1,{fileName:Le,lineNumber:97,columnNumber:7},this)]},void 0,!0,{fileName:Le,lineNumber:92,columnNumber:5},this)};var we=Se(_e),ye=Se(H.exports),ke=U,Ce=se,Le="/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";function Se(e){return e&&e.__esModule?e:{default:e}}function Be({classes:e="",inputRef:i,onToggle:n,onClick:l,...t}){return(0,Ce.jsxDEV)(Ce.Fragment,{children:[(0,Ce.jsxDEV)("input",{className:(0,ye.default)("Hyp-Checkbox",e),ref:i,type:"checkbox",onClick:function(e){null==n||n(e.currentTarget.checked),null==l||l.call(this,e)},...t},void 0,!1,{fileName:Le,lineNumber:67,columnNumber:7},this),(0,Ce.jsxDEV)(ke.SvgIcon,{className:"hyp-svg-checkbox",name:"hyp-checkbox"},void 0,!1,{fileName:Le,lineNumber:74,columnNumber:7},this)]},void 0,!0)}(0,ke.registerIcons)({"hyp-checkbox":we.default});var Ie={},Pe={};Object.defineProperty(Pe,"__esModule",{value:!0}),Pe.downcastRef=function(e){return e},Object.defineProperty(Ie,"__esModule",{value:!0}),Ie.Frame=function({children:e,classes:i="",containerRef:n}){return(0,Me.jsxDEV)("div",{className:(0,Te.default)("Hyp-Frame",i),ref:(0,ze.downcastRef)(n),children:e},void 0,!1,{fileName:He,lineNumber:26,columnNumber:5},this)},Ie.Card=function({children:e,classes:i="",containerRef:n}){return(0,Me.jsxDEV)("div",{className:(0,Te.default)("Hyp-Card",i),ref:(0,ze.downcastRef)(n),children:e},void 0,!1,{fileName:He,lineNumber:42,columnNumber:5},this)},Ie.Actions=function({children:e,direction:i="row",classes:n="",containerRef:l}){const t=`Hyp-Actions--${i}`;return(0,Me.jsxDEV)("div",{className:(0,Te.default)(t,n),ref:(0,ze.downcastRef)(l),children:e},void 0,!1,{fileName:He,lineNumber:72,columnNumber:5},this)},Ie.Scrollbox=function({children:e,classes:i="",containerRef:n,withHeader:l=!1}){const t=l?"Hyp-Scrollbox--with-header":"Hyp-Scrollbox";return(0,Me.jsxDEV)("div",{className:(0,Te.default)(t,i),ref:(0,ze.downcastRef)(n),children:e},void 0,!1,{fileName:He,lineNumber:101,columnNumber:5},this)};var Te=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),ze=Pe,Me=se,He="/home/runner/work/frontend-shared/frontend-shared/src/components/containers.js";var Ae={},Oe='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cancel"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8l3.536-3.536L8 8 4.464 4.464 8 8zm0 0l-3.536 3.536L8 8l3.536 3.536L8 8z"></path></g></svg>\n',qe=e(Object.freeze({__proto__:null,default:Oe}));Object.defineProperty(Ae,"__esModule",{value:!0}),Ae.Dialog=function({buttons:e,cancelLabel:i="Cancel",children:n,contentClass:l,icon:t,initialFocus:r,onCancel:o,role:u="dialog",title:a,withCancelButton:m=!0,withCloseButton:s=!0}){const c=Ye("dialog-description"),d=Ye("dialog-title"),h=(0,Ue.useRef)(null);(0,Ue.useEffect)((()=>{if(null!==r){const e=null==r?void 0:r.current;e&&!e.disabled?e.focus():h.current.focus()}}),[]),(0,Ue.useLayoutEffect)((()=>{const e=h.current.querySelector("p");e&&(e.id=c,h.current.setAttribute("aria-describedby",c))}),[c]);const N=o&&m,b=o&&s,f=e||N;return(0,Ge.jsxDEV)("div",{"aria-labelledby":d,className:(0,Fe.default)("Hyp-Dialog",{"Hyp-Dialog--closeable":b},l),ref:h,role:u,tabIndex:-1,children:[(0,Ge.jsxDEV)("header",{children:[t&&(0,Ge.jsxDEV)("div",{className:"Hyp-Dialog__header-icon",children:(0,Ge.jsxDEV)(We.SvgIcon,{name:t,title:a,"data-testid":"header-icon"},void 0,!1,{fileName:Ze,lineNumber:141,columnNumber:13},this)},void 0,!1,{fileName:Ze,lineNumber:140,columnNumber:11},this),(0,Ge.jsxDEV)("h2",{className:"Hyp-Dialog__title",id:d,children:a},void 0,!1,{fileName:Ze,lineNumber:144,columnNumber:9},this),o&&s&&(0,Ge.jsxDEV)("div",{className:"Hyp-Dialog__close",children:(0,Ge.jsxDEV)($e.IconButton,{"data-testid":"close-button",icon:"hyp-cancel",title:"Close",onClick:o},void 0,!1,{fileName:Ze,lineNumber:149,columnNumber:13},this)},void 0,!1,{fileName:Ze,lineNumber:148,columnNumber:11},this)]},void 0,!0,{fileName:Ze,lineNumber:138,columnNumber:7},this),n,f&&(0,Ge.jsxDEV)("div",{className:"Hyp-Dialog__actions",children:[N&&(0,Ge.jsxDEV)($e.LabeledButton,{"data-testid":"cancel-button",onClick:o,children:i},void 0,!1,{fileName:Ze,lineNumber:162,columnNumber:13},this),e]},void 0,!0,{fileName:Ze,lineNumber:160,columnNumber:9},this)]},void 0,!0,{fileName:Ze,lineNumber:127,columnNumber:5},this)};var Fe=Ke(H.exports),Ue=R,Re=Ke(qe),$e=M,We=U,Ge=se,Ze="/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";function Ke(e){return e&&e.__esModule?e:{default:e}}(0,We.registerIcons)({"hyp-cancel":Re.default});let Je=0;function Ye(e){const[i]=(0,Ue.useState)((()=>(++Je,`${e}-${Je}`)));return i}var Qe={},Xe={},ei={};Object.defineProperty(ei,"__esModule",{value:!0}),ei.normalizeKeyName=function(e){const i={Left:"ArrowLeft",Up:"ArrowUp",Down:"ArrowDown",Right:"ArrowRight",Spacebar:" ",Del:"Delete"};return i[e]?i[e]:e},Object.defineProperty(Xe,"__esModule",{value:!0}),Xe.useElementShouldClose=function(e,i,n){(0,ii.useEffect)((()=>{if(!i)return()=>{};const l=li(document.body,["keydown"],(e=>{const i=e;"Escape"===(0,ni.normalizeKeyName)(i.key)&&n()})),t=li(document.body,["focus"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0}),r=li(document.body,["mousedown","click"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0});return()=>{l(),r(),t()}}),[e,i,n])};var ii=R,ni=ei;function li(e,i,n,{useCapture:l=!1}={}){return i.forEach((i=>e.addEventListener(i,n,l))),()=>{i.forEach((i=>e.removeEventListener(i,n,l)))}}Object.defineProperty(Qe,"__esModule",{value:!0}),Qe.Modal=si,Qe.ConfirmModal=function({message:e,confirmAction:i,onConfirm:n,onCancel:l,...t}){return(0,ai.jsxDEV)(si,{onCancel:l,buttons:[(0,ai.jsxDEV)(ui.LabeledButton,{onClick:n,variant:"primary","data-testid":"confirm-button",children:i},"ok",!1,{fileName:mi,lineNumber:74,columnNumber:9},this)],...t,children:(0,ai.jsxDEV)("p",{children:e},void 0,!1,{fileName:mi,lineNumber:85,columnNumber:7},this)},void 0,!1,{fileName:mi,lineNumber:71,columnNumber:5},this)};var ti=R,ri=Xe,oi=Ae,ui=M,ai=se,mi="/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";function si({children:e,onCancel:i,...n}){const l=(0,ti.useRef)(null);return(0,ri.useElementShouldClose)(l,!0,(()=>{i&&i()})),(0,ai.jsxDEV)(ai.Fragment,{children:[(0,ai.jsxDEV)("div",{className:"Hyp-Modal__overlay"},void 0,!1,{fileName:mi,lineNumber:37,columnNumber:7},this),(0,ai.jsxDEV)("div",{className:"Hyp-Modal",ref:l,children:(0,ai.jsxDEV)(oi.Dialog,{onCancel:i,...n,children:e},void 0,!1,{fileName:mi,lineNumber:39,columnNumber:9},this)},void 0,!1,{fileName:mi,lineNumber:38,columnNumber:7},this)]},void 0,!0)}var ci={};Object.defineProperty(ci,"__esModule",{value:!0}),ci.Panel=function({children:e,icon:i,onClose:n,title:l}){const t=!!n;return(0,fi.jsxDEV)("div",{className:(0,di.default)("Hyp-Panel",{"Hyp-Panel--closeable":t}),children:[(0,fi.jsxDEV)("header",{children:[i&&(0,fi.jsxDEV)("div",{className:"Hyp-Panel__header-icon",children:(0,fi.jsxDEV)(bi.SvgIcon,{name:i,title:l},void 0,!1,{fileName:vi,lineNumber:39,columnNumber:13},this)},void 0,!1,{fileName:vi,lineNumber:38,columnNumber:11},this),(0,fi.jsxDEV)("h2",{className:"Hyp-Panel__title",children:l},void 0,!1,{fileName:vi,lineNumber:42,columnNumber:9},this),t&&(0,fi.jsxDEV)("div",{className:"Hyp-Panel__close",children:(0,fi.jsxDEV)(Ni.IconButton,{icon:"hyp-cancel",title:"Close",onClick:n},void 0,!1,{fileName:vi,lineNumber:45,columnNumber:13},this)},void 0,!1,{fileName:vi,lineNumber:44,columnNumber:11},this)]},void 0,!0,{fileName:vi,lineNumber:36,columnNumber:7},this),(0,fi.jsxDEV)("div",{className:"Hyp-Panel__content",children:e},void 0,!1,{fileName:vi,lineNumber:49,columnNumber:7},this)]},void 0,!0,{fileName:vi,lineNumber:31,columnNumber:5},this)};var di=pi(H.exports),hi=pi(qe),Ni=M,bi=U,fi=se,vi="/home/runner/work/frontend-shared/frontend-shared/src/components/Panel.js";function pi(e){return e&&e.__esModule?e:{default:e}}(0,bi.registerIcons)({"hyp-cancel":hi.default});var xi={},Di='<svg viewBox="0 0 64 64">\n <g stroke-width="6" stroke="currentColor" stroke-linecap="round">\n <line y1="16" y2="28" transform="translate(32,32) rotate(180)">\n <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.8;.65;.45;.3;.15;0" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(225)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".15;0;1;.8;.65;.45;.3;.15" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(270)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".3;.15;0;1;.8;.65;.45;.3" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(315)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".45;.3;.15;0;1;.85;.65;.45" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(0)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".65;.45;.3;.15;0;1;.8;.65;" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(45)">\n <animate attributeName="stroke-opacity" dur="750ms" values=".8;.65;.45;.3;.15;0;1;.8" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(90)">\n <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.6;.45;.3;.15;0;1;" repeatCount="indefinite"></animate>\n </line>\n <line y1="16" y2="28" transform="translate(32,32) rotate(135)">\n <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.8;.65;.45;.3;.15;0" repeatCount="indefinite"></animate>\n </line>\n </g>\n</svg>',Ei=e(Object.freeze({__proto__:null,default:Di}));Object.defineProperty(xi,"__esModule",{value:!0}),xi.Spinner=function({classes:e="",size:i="medium"}){const n=`Hyp-Spinner--${i}`;return(0,_i.jsxDEV)(Vi.SvgIcon,{name:"hyp-spinner",className:(0,gi.default)(n,e)},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js",lineNumber:27,columnNumber:5},this)};var gi=wi(H.exports),ji=wi(Ei),Vi=U,_i=se;function wi(e){return e&&e.__esModule?e:{default:e}}(0,Vi.registerIcons)({"hyp-spinner":ji.default});var yi={};Object.defineProperty(yi,"__esModule",{value:!0}),yi.Table=function({accessibleLabel:e,classes:i,containerClasses:n,emptyItemsMessage:l,isLoading:t=!1,items:r,onSelectItem:o,onUseItem:u,renderItem:a,selectedItem:m,tableHeaders:s}){const c=(0,Ci.useRef)([]),d=(0,Ci.useRef)(null),h=(0,Ci.useRef)(null),N=e=>{const i=c.current[r.indexOf(e)];i&&i.focus(),o(e)},b=e=>{let i=!1;switch(e.key){case"Enter":i=!0,m&&u(m);break;case"ArrowUp":i=!0,N(Ti(r,m,-1));break;case"ArrowDown":i=!0,N(Ti(r,m,1));break;default:i=!1}i&&(e.preventDefault(),e.stopPropagation())};return(0,Ci.useEffect)((()=>{if(!m)return;const e=c.current[r.indexOf(m)],i=h.current,n=d.current;if(e&&i&&n){const l=i.offsetHeight,t=e.offsetTop-n.scrollTop;t>=n.clientHeight&&e.scrollIntoView(),t<=l&&n.scrollBy(0,t-l)}}),[r,m]),(0,Ii.jsxDEV)(Bi.Scrollbox,{withHeader:!0,classes:(0,ki.default)("Hyp-Table-Scrollbox",n),containerRef:d,children:[(0,Ii.jsxDEV)("table",{"aria-label":e,className:(0,ki.default)("Hyp-Table",i),tabIndex:0,role:"grid",onKeyDown:b,children:[(0,Ii.jsxDEV)("thead",{ref:(0,Li.downcastRef)(h),children:(0,Ii.jsxDEV)("tr",{children:s.map((({classes:e,label:i},n)=>(0,Ii.jsxDEV)("th",{className:(0,ki.default)("Hyp-Table__header",e),scope:"col",children:i},`${i}-${n}`,!1,{fileName:Pi,lineNumber:180,columnNumber:15},this)))},void 0,!1,{fileName:Pi,lineNumber:178,columnNumber:11},this)},void 0,!1,{fileName:Pi,lineNumber:177,columnNumber:9},this),(0,Ii.jsxDEV)("tbody",{children:!t&&r.map(((e,i)=>(0,Ii.jsxDEV)("tr",{"aria-selected":m===e,className:(0,ki.default)({"is-selected":m===e}),onMouseDown:()=>o(e),onClick:()=>o(e),onDblClick:()=>u(e),ref:e=>c.current[i]=e,tabIndex:-1,children:a(e,m===e)},i,!1,{fileName:Pi,lineNumber:193,columnNumber:15},this)))},void 0,!1,{fileName:Pi,lineNumber:190,columnNumber:9},this)]},void 0,!0,{fileName:Pi,lineNumber:170,columnNumber:7},this),t&&(0,Ii.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__loading",children:(0,Ii.jsxDEV)(Si.Spinner,{size:"large"},void 0,!1,{fileName:Pi,lineNumber:212,columnNumber:11},this)},void 0,!1,{fileName:Pi,lineNumber:211,columnNumber:9},this),!t&&0===r.length&&l&&(0,Ii.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__message","data-testid":"empty-items-message",children:l},void 0,!1,{fileName:Pi,lineNumber:216,columnNumber:9},this)]},void 0,!0,{fileName:Pi,lineNumber:165,columnNumber:5},this)};var ki=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Ci=R,Li=Pe,Si=xi,Bi=Ie,Ii=se,Pi="/home/runner/work/frontend-shared/frontend-shared/src/components/Table.js";function Ti(e,i,n){const l=i?e.indexOf(i):-1,t=l+n;return l<0||t<0?e[0]:t>=e.length?e[e.length-1]:e[t]}var zi={};Object.defineProperty(zi,"__esModule",{value:!0}),zi.TextInput=function({classes:e="",inputRef:i,hasError:n=!1,type:l="text",...t}){return(0,Hi.jsxDEV)("input",{className:(0,Mi.default)("Hyp-TextInput",{"has-error":n},e),...t,ref:i,type:l},void 0,!1,{fileName:Ai,lineNumber:39,columnNumber:5},this)},zi.TextInputWithButton=function({children:e,classes:i=""}){return(0,Hi.jsxDEV)("div",{className:(0,Mi.default)("Hyp-TextInputWithButton",i),children:e},void 0,!1,{fileName:Ai,lineNumber:67,columnNumber:5},this)};var Mi=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Hi=se,Ai="/home/runner/work/frontend-shared/frontend-shared/src/components/TextInput.js";var Oi={};Object.defineProperty(Oi,"__esModule",{value:!0}),Oi.Thumbnail=function({children:e,classes:i="",isLoading:n=!1,placeholder:l="...",size:t="medium"}){const r=(0,Fi.toChildArray)(e).length?e:l;return(0,Ri.jsxDEV)("div",{className:(0,qi.default)("Hyp-Thumbnail",i),children:(0,Ri.jsxDEV)("div",{className:"Hyp-Thumbnail__content",children:[n&&(0,Ri.jsxDEV)(Ui.Spinner,{size:t},void 0,!1,{fileName:$i,lineNumber:59,columnNumber:23},this),!n&&r]},void 0,!0,{fileName:$i,lineNumber:58,columnNumber:7},this)},void 0,!1,{fileName:$i,lineNumber:57,columnNumber:5},this)};var qi=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),Fi=a,Ui=xi,Ri=se,$i="/home/runner/work/frontend-shared/frontend-shared/src/components/Thumbnail.js";!function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"IconButton",{enumerable:!0,get:function(){return i.IconButton}}),Object.defineProperty(e,"LabeledButton",{enumerable:!0,get:function(){return i.LabeledButton}}),Object.defineProperty(e,"LinkButton",{enumerable:!0,get:function(){return i.LinkButton}}),Object.defineProperty(e,"LabeledCheckbox",{enumerable:!0,get:function(){return n.LabeledCheckbox}}),Object.defineProperty(e,"Checkbox",{enumerable:!0,get:function(){return n.Checkbox}}),Object.defineProperty(e,"Frame",{enumerable:!0,get:function(){return l.Frame}}),Object.defineProperty(e,"Card",{enumerable:!0,get:function(){return l.Card}}),Object.defineProperty(e,"Actions",{enumerable:!0,get:function(){return l.Actions}}),Object.defineProperty(e,"Scrollbox",{enumerable:!0,get:function(){return l.Scrollbox}}),Object.defineProperty(e,"Dialog",{enumerable:!0,get:function(){return t.Dialog}}),Object.defineProperty(e,"Modal",{enumerable:!0,get:function(){return r.Modal}}),Object.defineProperty(e,"ConfirmModal",{enumerable:!0,get:function(){return r.ConfirmModal}}),Object.defineProperty(e,"Panel",{enumerable:!0,get:function(){return o.Panel}}),Object.defineProperty(e,"Spinner",{enumerable:!0,get:function(){return u.Spinner}}),Object.defineProperty(e,"SvgIcon",{enumerable:!0,get:function(){return a.SvgIcon}}),Object.defineProperty(e,"registerIcons",{enumerable:!0,get:function(){return a.registerIcons}}),Object.defineProperty(e,"Table",{enumerable:!0,get:function(){return m.Table}}),Object.defineProperty(e,"TextInput",{enumerable:!0,get:function(){return s.TextInput}}),Object.defineProperty(e,"TextInputWithButton",{enumerable:!0,get:function(){return s.TextInputWithButton}}),Object.defineProperty(e,"Thumbnail",{enumerable:!0,get:function(){return c.Thumbnail}}),Object.defineProperty(e,"useElementShouldClose",{enumerable:!0,get:function(){return d.useElementShouldClose}}),Object.defineProperty(e,"normalizeKeyName",{enumerable:!0,get:function(){return h.normalizeKeyName}});var i=M,n=je,l=Ie,t=Ae,r=Qe,o=ci,u=xi,a=U,m=yi,s=zi,c=Oi,d=Xe,h=ei}(z);var Wi={},Gi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12L3 8l4-4M4 8h9-9z"></path></g></svg>\n'})),Zi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4l4 4-4 4m3-4H3h9z"></path></g></svg>\n'})),Ki=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="Icon Icon--check"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L6 13 3 8"></path></g></svg>\n'})),Ji=e(Object.freeze({__proto__:null,default:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">\n <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />\n </g>\n</svg>\n'})),Yi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--edit"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4l1 1-9 9-2 1 1-2 9-9zm3-3l1 1-1 1-1-1 1-1z"></path></g></svg>\n'})),Qi=e(Object.freeze({__proto__:null,default:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <rect fill="#ffffff" stroke="none" width="17.14407" height="16.046612" x="3.8855932" y="3.9449153" />\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <path d="M0,2.00494659 C0,0.897645164 0.897026226,0 2.00494659,0 L21.9950534,0 C23.1023548,0 24,0.897026226 24,2.00494659 L24,21.9950534 C24,23.1023548 23.1029738,24 21.9950534,24 L2.00494659,24 C0.897645164,24 0,23.1029738 0,21.9950534 L0,2.00494659 Z M9,24 L12,28 L15,24 L9,24 Z M7.00811294,4 L4,4 L4,20 L7.00811294,20 L7.00811294,15.0028975 C7.00811294,12.004636 8.16824717,12.0097227 9,12 C10,12.0072451 11.0189302,12.0606714 11.0189302,14.003477 L11.0189302,20 L14.0270431,20 L14.0270431,13.1087862 C14.0270433,10 12,9.00309038 10,9.00309064 C8.01081726,9.00309091 8,9.00309086 7.00811294,11.0019317 L7.00811294,4 Z M19,19.9869002 C20.1045695,19.9869002 21,19.0944022 21,17.9934501 C21,16.892498 20.1045695,16 19,16 C17.8954305,16 17,16.892498 17,17.9934501 C17,19.0944022 17.8954305,19.9869002 19,19.9869002 Z" fill="currentColor"></path>\n </g>\n</svg>\n'})),Xi=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--profile"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15c0-2.761 3.134-5 7-5s7 2.239 7 5M8 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g></svg>\n'})),en=e(Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--trash"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 4h12l-2 11H4L2 4zM1 1h14H1z"></path></g></svg>\n'}));Object.defineProperty(Wi,"__esModule",{value:!0}),Wi.default=void 0;var nn=hn(Gi),ln=hn(Zi),tn=hn(qe),rn=hn(Ki),on=hn(_e),un=hn(Ji),an=hn(Yi),mn=hn(Qi),sn=hn(Xi),cn=hn(Ei),dn=hn(en);function hn(e){return e&&e.__esModule?e:{default:e}}var Nn={"arrow-left":nn.default,"arrow-right":ln.default,cancel:tn.default,check:rn.default,checkbox:on.default,collapsed:un.default,edit:an.default,logo:mn.default,profile:sn.default,"hyp-spinner":cn.default,trash:dn.default};Wi.default=Nn;var bn={},fn={},vn={},pn={},xn={};Object.defineProperty(xn,"__esModule",{value:!0}),xn.jsxToString=function e(i){if("string"==typeof i||"number"==typeof i||"bigint"==typeof i)return i.toString();if("boolean"==typeof i)return"";if(i&&"type"in i){const l="string"==typeof(n=i.type)?n:n.displayName||n.name;let t=Object.entries(i.props).map((([e,i])=>{if("children"===e)return"";if("boolean"==typeof i)return i?e:"";var n;return`${e}=${"string"==typeof i?`"${n=i,n.replace(/"/g,'\\"')}"`:`{${i}}`}`})).join(" ").trim();t.length>0&&(t=" "+t);const r=i.props.children;if(r){let i=Array.isArray(r)?r.map(e).join("\n"):e(r);return i=function(e,i){const n=" ".repeat(i);return e.split("\n").map((e=>n+e)).join("\n")}(i,2),`<${l}${t}>\n${i}\n</${l}>`}return`<${l}${t} />`}return"";var n},Object.defineProperty(pn,"__esModule",{value:!0});var Dn=pn.default=void 0,En=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),gn=a,jn=R,Vn=M,_n=xn,wn=se,yn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/Library.js";function kn({children:e,withSource:i=!1,style:n={},title:l}){const[t,r]=(0,jn.useState)("demo"),o=(0,gn.toChildArray)(e).map(((e,i)=>(0,wn.jsxDEV)("li",{children:(0,wn.jsxDEV)("code",{children:(0,wn.jsxDEV)("pre",{children:(0,_n.jsxToString)(e)},void 0,!1,{fileName:yn,lineNumber:135,columnNumber:11},this)},void 0,!1,{fileName:yn,lineNumber:134,columnNumber:9},this)},i,!1,{fileName:yn,lineNumber:133,columnNumber:7},this)));return(0,wn.jsxDEV)("div",{className:"LibraryDemo",children:[l&&(0,wn.jsxDEV)("h4",{className:"LibraryDemo__header",children:l},void 0,!1,{fileName:yn,lineNumber:142,columnNumber:17},this),(0,wn.jsxDEV)("div",{className:"LibraryDemo__tabs",children:[(0,wn.jsxDEV)(Vn.LabeledButton,{onClick:()=>r("demo"),pressed:"demo"===t,variant:"dark",children:"Demo"},void 0,!1,{fileName:yn,lineNumber:144,columnNumber:9},this),i&&(0,wn.jsxDEV)(Vn.LabeledButton,{onClick:()=>r("source"),pressed:"source"===t,variant:"dark",children:"Source"},void 0,!1,{fileName:yn,lineNumber:152,columnNumber:11},this)]},void 0,!0,{fileName:yn,lineNumber:143,columnNumber:7},this),(0,wn.jsxDEV)("div",{className:"LibraryDemo__container",children:["demo"===t&&(0,wn.jsxDEV)("div",{className:"LibraryDemo__demo",style:n,children:(0,wn.jsxDEV)("div",{className:"LibraryDemo__demo-content",children:e},void 0,!1,{fileName:yn,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:yn,lineNumber:163,columnNumber:11},this),"source"===t&&(0,wn.jsxDEV)("div",{className:"LibraryDemo__source",children:(0,wn.jsxDEV)("ul",{children:o},void 0,!1,{fileName:yn,lineNumber:169,columnNumber:13},this)},void 0,!1,{fileName:yn,lineNumber:168,columnNumber:11},this)]},void 0,!0,{fileName:yn,lineNumber:161,columnNumber:7},this)]},void 0,!0,{fileName:yn,lineNumber:141,columnNumber:5},this)}var Cn={Page:function({children:e,title:i}){return(0,wn.jsxDEV)("section",{className:"LibraryPage",children:[(0,wn.jsxDEV)("h1",{className:"LibraryPage__heading",children:i},void 0,!1,{fileName:yn,lineNumber:52,columnNumber:7},this),e]},void 0,!0,{fileName:yn,lineNumber:51,columnNumber:5},this)},Pattern:function({children:e,title:i}){return(0,wn.jsxDEV)("section",{className:"LibraryPattern",children:[(0,wn.jsxDEV)("h2",{className:"LibraryPattern__heading",children:i},void 0,!1,{fileName:yn,lineNumber:66,columnNumber:7},this),e]},void 0,!0,{fileName:yn,lineNumber:65,columnNumber:5},this)},Example:function({children:e,title:i,variant:n="split"}){const l=(0,gn.toChildArray)(e),t=l.filter((e=>"object"==typeof e&&(null==e?void 0:e.type)===kn)),r=l.filter((e=>!t.includes(e)));return(0,wn.jsxDEV)("div",{className:(0,En.default)("LibraryExample",`LibraryExample--${n}`),children:[(0,wn.jsxDEV)("div",{className:"LibraryExample__content",children:[i&&(0,wn.jsxDEV)("h3",{className:"LibraryExample__heading",children:i},void 0,!1,{fileName:yn,lineNumber:103,columnNumber:19},this),r]},void 0,!0,{fileName:yn,lineNumber:102,columnNumber:7},this),(0,wn.jsxDEV)("div",{className:"LibraryExample__demos",children:t},void 0,!1,{fileName:yn,lineNumber:106,columnNumber:7},this)]},void 0,!0,{fileName:yn,lineNumber:101,columnNumber:5},this)},Demo:kn};Dn=pn.default=Cn,Object.defineProperty(vn,"__esModule",{value:!0}),vn.default=function(){return(0,Sn.jsxDEV)(Ln.default.Page,{title:"Pattern Library",children:[(0,Sn.jsxDEV)("p",{children:"This pattern library demonstrates foundations, patterns and components that can be used in Hypothesis front-end applications."},void 0,!1,{fileName:Bn,lineNumber:6,columnNumber:7},this),(0,Sn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Foundations"},void 0,!1,{fileName:Bn,lineNumber:11,columnNumber:7},this),(0,Sn.jsxDEV)("p",{children:[(0,Sn.jsxDEV)("strong",{children:"Foundations"},void 0,!1,{fileName:Bn,lineNumber:14,columnNumber:9},this)," are the core design system elements—colors, spacing systems, typography—that define the underlying design fundamentals in Hypothesis UI."]},void 0,!0,{fileName:Bn,lineNumber:13,columnNumber:7},this),(0,Sn.jsxDEV)("p",{children:"They exist independently of implementation."},void 0,!1,{fileName:Bn,lineNumber:19,columnNumber:7},this),(0,Sn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Patterns"},void 0,!1,{fileName:Bn,lineNumber:21,columnNumber:7},this),(0,Sn.jsxDEV)("p",{children:[(0,Sn.jsxDEV)("strong",{children:"Patterns"},void 0,!1,{fileName:Bn,lineNumber:24,columnNumber:9},this)," are modular implementations of the design system ",(0,Sn.jsxDEV)("strong",{children:"foundations"},void 0,!1,{fileName:Bn,lineNumber:25,columnNumber:16},this),"—from the atomic to the complex. These implementations are in HTML and CSS."]},void 0,!0,{fileName:Bn,lineNumber:23,columnNumber:7},this),(0,Sn.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Components"},void 0,!1,{fileName:Bn,lineNumber:29,columnNumber:7},this),(0,Sn.jsxDEV)("p",{children:[(0,Sn.jsxDEV)("strong",{children:"Components"},void 0,!1,{fileName:Bn,lineNumber:32,columnNumber:9},this)," are"," ",(0,Sn.jsxDEV)("a",{href:"https://preactjs.com/",children:"Preact"},void 0,!1,{fileName:Bn,lineNumber:33,columnNumber:9},this)," components that are built using underlying ",(0,Sn.jsxDEV)("strong",{children:"patterns"},void 0,!1,{fileName:Bn,lineNumber:34,columnNumber:26},this),"."]},void 0,!0,{fileName:Bn,lineNumber:31,columnNumber:7},this)]},void 0,!0,{fileName:Bn,lineNumber:5,columnNumber:5},this)};var Ln=function(e){return e&&e.__esModule?e:{default:e}}(pn),Sn=se,Bn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js";var In={};Object.defineProperty(In,"__esModule",{value:!0}),In.default=function(){return(0,Tn.jsxDEV)(Pn.default.Page,{title:"Colors",children:[(0,Tn.jsxDEV)(Pn.default.Pattern,{title:"Brand red",children:(0,Tn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:Hn},void 0,!1,{fileName:zn,lineNumber:58,columnNumber:9},this)},void 0,!1,{fileName:zn,lineNumber:57,columnNumber:7},this),(0,Tn.jsxDEV)(Pn.default.Pattern,{title:"Greys",children:(0,Tn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:An},void 0,!1,{fileName:zn,lineNumber:64,columnNumber:9},this)},void 0,!1,{fileName:zn,lineNumber:63,columnNumber:7},this),(0,Tn.jsxDEV)(Pn.default.Pattern,{title:"State indicators",children:(0,Tn.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:On},void 0,!1,{fileName:zn,lineNumber:70,columnNumber:9},this)},void 0,!1,{fileName:zn,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:zn,lineNumber:56,columnNumber:5},this)};var Pn=function(e){return e&&e.__esModule?e:{default:e}}(pn),Tn=se,zn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";function Mn({colorName:e}){return(0,Tn.jsxDEV)("div",{children:[(0,Tn.jsxDEV)("div",{className:`hyp-u-bg-color--${e}`,style:"width:16rem;height:2rem;margin-right:1em"},void 0,!1,{fileName:zn,lineNumber:31,columnNumber:7},this),(0,Tn.jsxDEV)("p",{children:(0,Tn.jsxDEV)("i",{children:e},void 0,!1,{fileName:zn,lineNumber:36,columnNumber:9},this)},void 0,!1,{fileName:zn,lineNumber:35,columnNumber:7},this)]},void 0,!0,{fileName:zn,lineNumber:30,columnNumber:5},this)}const Hn=["brand"].map((e=>(0,Tn.jsxDEV)(Mn,{colorName:e},e,!1,{fileName:zn,lineNumber:43,columnNumber:3},void 0))),An=["white","grey-0","grey-1","grey-2","grey-3","grey-4","grey-5","grey-6","grey-7","grey-8","grey-9"].map((e=>(0,Tn.jsxDEV)(Mn,{colorName:e},e,!1,{fileName:zn,lineNumber:47,columnNumber:3},void 0))),On=["success","notice","error"].map((e=>(0,Tn.jsxDEV)(Mn,{colorName:e},e,!1,{fileName:zn,lineNumber:51,columnNumber:3},void 0)));var qn={};Object.defineProperty(qn,"__esModule",{value:!0}),qn.default=function(){const[e,i]=(0,Un.useState)(!1),[n,l]=(0,Un.useState)(!1),[t,r]=(0,Un.useState)(!1);return(0,Wn.jsxDEV)($n.default.Page,{title:"Layout",children:[(0,Wn.jsxDEV)($n.default.Pattern,{title:"Spacing Units",children:[(0,Wn.jsxDEV)("p",{children:["Spacing units provide a way to apply predefined, consistent spacing dimensions between (margins) and around (padding) elements. Our spacing is based on a ",(0,Wn.jsxDEV)("code",{children:"1rem"},void 0,!1,{fileName:Gn,lineNumber:80,columnNumber:33},this)," foundational unit."]},void 0,!0,{fileName:Gn,lineNumber:77,columnNumber:9},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:["0","0.125rem","0.25rem","0.5rem","0.75rem","1rem (default unit)","1.5rem","2rem","4rem","8rem"].map(((e,i)=>(0,Wn.jsxDEV)("div",{className:`hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${i}`,children:[(0,Wn.jsxDEV)("div",{className:"hyp-u-bg-color--white",style:{paddingRight:"1rem"},children:(0,Wn.jsxDEV)("strong",{children:i},void 0,!1,{fileName:Gn,lineNumber:92,columnNumber:17},this)},void 0,!1,{fileName:Gn,lineNumber:88,columnNumber:15},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-bg-color--white hyp-u-stretch",style:{paddingLeft:"1rem"},children:(0,Wn.jsxDEV)("code",{children:e},void 0,!1,{fileName:Gn,lineNumber:98,columnNumber:17},this)},void 0,!1,{fileName:Gn,lineNumber:94,columnNumber:15},this)]},i,!0,{fileName:Gn,lineNumber:84,columnNumber:13},this)))},void 0,!1,{fileName:Gn,lineNumber:82,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:76,columnNumber:7},this),(0,Wn.jsxDEV)($n.default.Pattern,{title:"Horizontal spacing",children:[(0,Wn.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children."},void 0,!1,{fileName:Gn,lineNumber:106,columnNumber:9},this),(0,Wn.jsxDEV)("p",{children:["The default spacing unit used by"," ",(0,Wn.jsxDEV)("code",{children:".hyp-u-horizontal-spacing"},void 0,!1,{fileName:Gn,lineNumber:113,columnNumber:11},this)," and mixins is 3, marked with an asterisk below."]},void 0,!0,{fileName:Gn,lineNumber:111,columnNumber:9},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:(0,Wn.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-vertical-spacing",children:[(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:0},void 0,!1,{fileName:Gn,lineNumber:119,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:1},void 0,!1,{fileName:Gn,lineNumber:120,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:2},void 0,!1,{fileName:Gn,lineNumber:121,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:3,defaultSize:!0},void 0,!1,{fileName:Gn,lineNumber:122,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:4},void 0,!1,{fileName:Gn,lineNumber:123,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:5},void 0,!1,{fileName:Gn,lineNumber:124,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:6},void 0,!1,{fileName:Gn,lineNumber:125,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:7},void 0,!1,{fileName:Gn,lineNumber:126,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:8},void 0,!1,{fileName:Gn,lineNumber:127,columnNumber:13},this),(0,Wn.jsxDEV)(Jn,{direction:"horizontal",size:9},void 0,!1,{fileName:Gn,lineNumber:128,columnNumber:13},this)]},void 0,!0,{fileName:Gn,lineNumber:118,columnNumber:11},this)},void 0,!1,{fileName:Gn,lineNumber:117,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:105,columnNumber:7},this),(0,Wn.jsxDEV)($n.default.Pattern,{title:"Vertical spacing",children:[(0,Wn.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust vertical spacing between an element's immediate children."},void 0,!1,{fileName:Gn,lineNumber:134,columnNumber:9},this),(0,Wn.jsxDEV)("p",{children:["The default spacing unit used by ",(0,Wn.jsxDEV)("code",{children:".hyp-u-vertical-spacing"},void 0,!1,{fileName:Gn,lineNumber:140,columnNumber:44},this)," ","and mixins is 5, marked with an asterisk below."]},void 0,!0,{fileName:Gn,lineNumber:139,columnNumber:9},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing--7",children:[(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:0},void 0,!1,{fileName:Gn,lineNumber:144,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:1},void 0,!1,{fileName:Gn,lineNumber:145,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:2},void 0,!1,{fileName:Gn,lineNumber:146,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:3},void 0,!1,{fileName:Gn,lineNumber:147,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:4},void 0,!1,{fileName:Gn,lineNumber:148,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:5,defaultSize:!0},void 0,!1,{fileName:Gn,lineNumber:149,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:6},void 0,!1,{fileName:Gn,lineNumber:150,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:7},void 0,!1,{fileName:Gn,lineNumber:151,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:8},void 0,!1,{fileName:Gn,lineNumber:152,columnNumber:11},this),(0,Wn.jsxDEV)(Jn,{direction:"vertical",size:9},void 0,!1,{fileName:Gn,lineNumber:153,columnNumber:11},this)]},void 0,!0,{fileName:Gn,lineNumber:143,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:133,columnNumber:7},this),(0,Wn.jsxDEV)($n.default.Pattern,{title:"Positioning and Overlay",children:[(0,Wn.jsxDEV)($n.default.Example,{title:"Centering in the viewport",children:[(0,Wn.jsxDEV)("p",{children:["The ",(0,Wn.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:Gn,lineNumber:160,columnNumber:17},this)," layout pattern centers an element both horizontally and vertically within the entire viewport."]},void 0,!0,{fileName:Gn,lineNumber:159,columnNumber:11},this),(0,Wn.jsxDEV)($n.default.Demo,{children:(0,Wn.jsxDEV)("div",{children:[(0,Wn.jsxDEV)(Rn.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:Gn,lineNumber:165,columnNumber:15},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-fixed-centered",style:"width:450px;"+(e?"visibility:visible":"visibility:hidden"),children:(0,Wn.jsxDEV)("div",{className:"hyp-card",children:[(0,Wn.jsxDEV)("p",{children:"This is a card that is centered vertically and horizontally in the current viewport."},void 0,!1,{fileName:Gn,lineNumber:178,columnNumber:19},this),(0,Wn.jsxDEV)("div",{className:"hyp-actions",children:(0,Wn.jsxDEV)(Rn.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:Gn,lineNumber:183,columnNumber:21},this)},void 0,!1,{fileName:Gn,lineNumber:182,columnNumber:19},this)]},void 0,!0,{fileName:Gn,lineNumber:177,columnNumber:17},this)},void 0,!1,{fileName:Gn,lineNumber:171,columnNumber:15},this)]},void 0,!0,{fileName:Gn,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:Gn,lineNumber:163,columnNumber:11},this)]},void 0,!0,{fileName:Gn,lineNumber:158,columnNumber:9},this),(0,Wn.jsxDEV)($n.default.Example,{title:"Full-screen overlay",children:[(0,Wn.jsxDEV)("p",{children:["The ",(0,Wn.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:Gn,lineNumber:198,columnNumber:17},this)," layout pattern provides a full-viewport, semi-opaque overlay that obscures UI interactions in the viewport below. It is intended for use as a backdrop for modals, e.g."]},void 0,!0,{fileName:Gn,lineNumber:197,columnNumber:11},this),(0,Wn.jsxDEV)($n.default.Demo,{children:(0,Wn.jsxDEV)("div",{children:[(0,Wn.jsxDEV)(Rn.LabeledButton,{variant:"primary",onClick:()=>l(!0),children:"Show example"},void 0,!1,{fileName:Gn,lineNumber:204,columnNumber:15},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-overlay",style:n?"visibility:visible":"visibility:hidden",children:(0,Wn.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,Wn.jsxDEV)(Rn.LabeledButton,{onClick:()=>l(!1),children:"Hide example"},void 0,!1,{fileName:Gn,lineNumber:217,columnNumber:19},this)},void 0,!1,{fileName:Gn,lineNumber:216,columnNumber:17},this)},void 0,!1,{fileName:Gn,lineNumber:210,columnNumber:15},this)]},void 0,!0,{fileName:Gn,lineNumber:203,columnNumber:13},this)},void 0,!1,{fileName:Gn,lineNumber:202,columnNumber:11},this)]},void 0,!0,{fileName:Gn,lineNumber:196,columnNumber:9},this),(0,Wn.jsxDEV)($n.default.Example,{title:"Full-screen overlay with fixed-centered content",children:[(0,Wn.jsxDEV)("p",{children:["This shows an example of combining the ",(0,Wn.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:Gn,lineNumber:228,columnNumber:52},this)," and"," ",(0,Wn.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:Gn,lineNumber:229,columnNumber:13},this)," patterns."]},void 0,!0,{fileName:Gn,lineNumber:227,columnNumber:11},this),(0,Wn.jsxDEV)($n.default.Demo,{children:(0,Wn.jsxDEV)("div",{children:[(0,Wn.jsxDEV)(Rn.LabeledButton,{variant:"primary",onClick:()=>r(!0),children:"Show example"},void 0,!1,{fileName:Gn,lineNumber:233,columnNumber:15},this),(0,Wn.jsxDEV)("div",{className:"hyp-u-overlay",style:t?"visibility:visible":"visibility:hidden",children:(0,Wn.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,Wn.jsxDEV)("div",{className:"hyp-card",style:"width:450px",children:[(0,Wn.jsxDEV)("div",{children:"This is content in a fixed-centered card of 450px width over a full-screen overlay."},void 0,!1,{fileName:Gn,lineNumber:247,columnNumber:21},this),(0,Wn.jsxDEV)("div",{className:"hyp-actions",children:(0,Wn.jsxDEV)(Rn.LabeledButton,{variant:"primary",onClick:()=>r(!1),children:"Hide example"},void 0,!1,{fileName:Gn,lineNumber:252,columnNumber:23},this)},void 0,!1,{fileName:Gn,lineNumber:251,columnNumber:21},this)]},void 0,!0,{fileName:Gn,lineNumber:246,columnNumber:19},this)},void 0,!1,{fileName:Gn,lineNumber:245,columnNumber:17},this)},void 0,!1,{fileName:Gn,lineNumber:239,columnNumber:15},this)]},void 0,!0,{fileName:Gn,lineNumber:232,columnNumber:13},this)},void 0,!1,{fileName:Gn,lineNumber:231,columnNumber:11},this)]},void 0,!0,{fileName:Gn,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:157,columnNumber:7},this)]},void 0,!0,{fileName:Gn,lineNumber:75,columnNumber:5},this)};var Fn=Zn(H.exports),Un=R,Rn=z,$n=Zn(pn),Wn=se,Gn="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";function Zn(e){return e&&e.__esModule?e:{default:e}}function Kn(){return(0,Wn.jsxDEV)("div",{className:"hyp-u-bg-color--grey-4",style:{width:"2rem",height:"2rem"}},void 0,!1,{fileName:Gn,lineNumber:9,columnNumber:5},this)}function Jn({direction:e,size:i,defaultSize:n=!1}){const l="vertical"===e?"hyp-u-layout-column":"hyp-u-layout-row",t="vertical"===e?"hyp-u-vertical-spacing":"hyp-u-horizontal-spacing",r=`${t}--${i}`;return(0,Wn.jsxDEV)("div",{className:(0,Fn.default)(l,t),children:[n?(0,Wn.jsxDEV)("div",{children:(0,Wn.jsxDEV)("strong",{children:[i,"*"]},void 0,!0,{fileName:Gn,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:Gn,lineNumber:36,columnNumber:9},this):(0,Wn.jsxDEV)("div",{children:i},void 0,!1,{fileName:Gn,lineNumber:40,columnNumber:9},this),(0,Wn.jsxDEV)("div",{className:(0,Fn.default)(l,r,"hyp-u-border"),children:[(0,Wn.jsxDEV)(Kn,{},void 0,!1,{fileName:Gn,lineNumber:43,columnNumber:9},this),(0,Wn.jsxDEV)(Kn,{},void 0,!1,{fileName:Gn,lineNumber:44,columnNumber:9},this),(0,Wn.jsxDEV)(Kn,{},void 0,!1,{fileName:Gn,lineNumber:45,columnNumber:9},this),(0,Wn.jsxDEV)(Kn,{},void 0,!1,{fileName:Gn,lineNumber:46,columnNumber:9},this),(0,Wn.jsxDEV)(Kn,{},void 0,!1,{fileName:Gn,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:42,columnNumber:7},this),"horizontal"===e&&(0,Wn.jsxDEV)("div",{children:(0,Wn.jsxDEV)("code",{children:[".",r]},void 0,!0,{fileName:Gn,lineNumber:51,columnNumber:11},this)},void 0,!1,{fileName:Gn,lineNumber:50,columnNumber:9},this)]},void 0,!0,{fileName:Gn,lineNumber:34,columnNumber:5},this)}var Yn={};Object.defineProperty(Yn,"__esModule",{value:!0}),Yn.default=function(){return(0,el.jsxDEV)(Xn.default.Page,{title:"Forms",children:[(0,el.jsxDEV)(Xn.default.Pattern,{title:"Checkbox",children:[(0,el.jsxDEV)("p",{children:["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ",(0,el.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:il,lineNumber:10,columnNumber:44},this),"."]},void 0,!0,{fileName:il,lineNumber:8,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Checkbox",children:[(0,el.jsxDEV)("p",{children:["This example shows an ",(0,el.jsxDEV)("code",{children:'input type="checkbox"'},void 0,!1,{fileName:il,lineNumber:14,columnNumber:35},this)," ","element with the ",(0,el.jsxDEV)("code",{children:"checkbox"},void 0,!1,{fileName:il,lineNumber:15,columnNumber:30},this)," pattern applied, both unchecked and checked."]},void 0,!0,{fileName:il,lineNumber:13,columnNumber:11},this),(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing",children:[(0,el.jsxDEV)("div",{children:[(0,el.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:il,lineNumber:21,columnNumber:17},this),(0,el.jsxDEV)(Qn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:il,lineNumber:22,columnNumber:17},this)]},void 0,!0,{fileName:il,lineNumber:20,columnNumber:15},this),(0,el.jsxDEV)("div",{children:[(0,el.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox",checked:!0},void 0,!1,{fileName:il,lineNumber:26,columnNumber:17},this),(0,el.jsxDEV)(Qn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:il,lineNumber:27,columnNumber:17},this)]},void 0,!0,{fileName:il,lineNumber:25,columnNumber:15},this)]},void 0,!0,{fileName:il,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:il,lineNumber:12,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Checkbox with label",children:(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("label",{className:"hyp-label",children:[(0,el.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:il,lineNumber:36,columnNumber:15},this),(0,el.jsxDEV)(Qn.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:il,lineNumber:37,columnNumber:15},this),(0,el.jsxDEV)("span",{children:"Click me, please"},void 0,!1,{fileName:il,lineNumber:38,columnNumber:15},this)]},void 0,!0,{fileName:il,lineNumber:35,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:34,columnNumber:11},this)},void 0,!1,{fileName:il,lineNumber:33,columnNumber:9},this)]},void 0,!0,{fileName:il,lineNumber:7,columnNumber:7},this),(0,el.jsxDEV)(Xn.default.Pattern,{title:"Text inputs",children:[(0,el.jsxDEV)("p",{children:["A pattern for ",(0,el.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:il,lineNumber:46,columnNumber:25},this)]},void 0,!0,{fileName:il,lineNumber:45,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Basic text input",children:(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("input",{className:"hyp-text-input",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:il,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:il,lineNumber:48,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Text input in an error state",children:(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("input",{className:"hyp-text-input has-error",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:il,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:59,columnNumber:11},this)},void 0,!1,{fileName:il,lineNumber:58,columnNumber:9},this)]},void 0,!0,{fileName:il,lineNumber:44,columnNumber:7},this),(0,el.jsxDEV)(Xn.default.Pattern,{title:"Text input with button",children:[(0,el.jsxDEV)("p",{children:"A pattern that pairs a text input field with an icon-only button. Use a dark-variant button to match the standard pattern here."},void 0,!1,{fileName:il,lineNumber:70,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Text input with a dark-variant IconButton",children:(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("div",{style:{width:"300px"},children:(0,el.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,el.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:il,lineNumber:78,columnNumber:17},this),(0,el.jsxDEV)(Qn.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:il,lineNumber:79,columnNumber:17},this)]},void 0,!0,{fileName:il,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:il,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:75,columnNumber:11},this)},void 0,!1,{fileName:il,lineNumber:74,columnNumber:9},this),(0,el.jsxDEV)(Xn.default.Example,{title:"Text input and button in an error state",children:(0,el.jsxDEV)(Xn.default.Demo,{withSource:!0,children:(0,el.jsxDEV)("div",{style:{width:"300px"},children:(0,el.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,el.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com",className:"has-error"},void 0,!1,{fileName:il,lineNumber:89,columnNumber:17},this),(0,el.jsxDEV)(Qn.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:il,lineNumber:94,columnNumber:17},this)]},void 0,!0,{fileName:il,lineNumber:88,columnNumber:15},this)},void 0,!1,{fileName:il,lineNumber:87,columnNumber:13},this)},void 0,!1,{fileName:il,lineNumber:86,columnNumber:11},this)},void 0,!1,{fileName:il,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:il,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:il,lineNumber:6,columnNumber:5},this)};var Qn=z,Xn=function(e){return e&&e.__esModule?e:{default:e}}(pn),el=se,il="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js";var nl={},ll={};Object.defineProperty(ll,"__esModule",{value:!0}),ll.SampleListElements=function(){return(0,tl.jsxDEV)(tl.Fragment,{children:[(0,tl.jsxDEV)("li",{children:"Alpha"},void 0,!1,{fileName:rl,lineNumber:12,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Bravo"},void 0,!1,{fileName:rl,lineNumber:13,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Charlie"},void 0,!1,{fileName:rl,lineNumber:14,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Delta"},void 0,!1,{fileName:rl,lineNumber:15,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Echo"},void 0,!1,{fileName:rl,lineNumber:16,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Foxtrot"},void 0,!1,{fileName:rl,lineNumber:17,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Golf"},void 0,!1,{fileName:rl,lineNumber:18,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Hotel"},void 0,!1,{fileName:rl,lineNumber:19,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"India"},void 0,!1,{fileName:rl,lineNumber:20,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Juliett"},void 0,!1,{fileName:rl,lineNumber:21,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Kilo"},void 0,!1,{fileName:rl,lineNumber:22,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Lima"},void 0,!1,{fileName:rl,lineNumber:23,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Mike"},void 0,!1,{fileName:rl,lineNumber:24,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"November"},void 0,!1,{fileName:rl,lineNumber:25,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Oscar"},void 0,!1,{fileName:rl,lineNumber:26,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Papa"},void 0,!1,{fileName:rl,lineNumber:27,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Quebec"},void 0,!1,{fileName:rl,lineNumber:28,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Romeo"},void 0,!1,{fileName:rl,lineNumber:29,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Sierra"},void 0,!1,{fileName:rl,lineNumber:30,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Tango"},void 0,!1,{fileName:rl,lineNumber:31,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Uniform"},void 0,!1,{fileName:rl,lineNumber:32,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Victor"},void 0,!1,{fileName:rl,lineNumber:33,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Whiskey"},void 0,!1,{fileName:rl,lineNumber:34,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"XRay"},void 0,!1,{fileName:rl,lineNumber:35,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Yankee"},void 0,!1,{fileName:rl,lineNumber:36,columnNumber:7},this),(0,tl.jsxDEV)("li",{children:"Zulu"},void 0,!1,{fileName:rl,lineNumber:37,columnNumber:7},this)]},void 0,!0)},ll.SampleTableBody=function(){return(0,tl.jsxDEV)("tbody",{children:[(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:rl,lineNumber:46,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:rl,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:45,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:rl,lineNumber:50,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:rl,lineNumber:51,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:49,columnNumber:7},this),(0,tl.jsxDEV)("tr",{className:"is-selected",children:[(0,tl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:rl,lineNumber:54,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:rl,lineNumber:55,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:53,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:rl,lineNumber:58,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:rl,lineNumber:59,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:57,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:rl,lineNumber:62,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:rl,lineNumber:63,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:61,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:rl,lineNumber:66,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Katydid Lozenges Moebius"},void 0,!1,{fileName:rl,lineNumber:67,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:65,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:rl,lineNumber:70,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:rl,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:69,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:rl,lineNumber:74,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:rl,lineNumber:75,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:73,columnNumber:7},this),(0,tl.jsxDEV)("tr",{children:[(0,tl.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:rl,lineNumber:78,columnNumber:9},this),(0,tl.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:rl,lineNumber:79,columnNumber:9},this)]},void 0,!0,{fileName:rl,lineNumber:77,columnNumber:7},this)]},void 0,!0,{fileName:rl,lineNumber:44,columnNumber:5},this)},ll.LoremIpsum=function(){return(0,tl.jsxDEV)("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."},void 0,!1,{fileName:rl,lineNumber:92,columnNumber:5},this)},ll.sampleTableContent=function(){return{tableHeaders:[{label:"Name"},{label:"Last modified"}],items:[{displayName:"Persnickety.pdf",updated:"Jul 28, 2021"},{displayName:"Albumen.pdf",updated:"Jul 20, 2021"},{displayName:"Yams-and-sauce.pdf",updated:"Aug 04, 2021"},{displayName:"Coneflowers-and-their-allies.pdf",updated:"Aug 01, 2021"},{displayName:"Dollars-and-sense.pdf",updated:"Aug 22, 2021"},{displayName:"Mendicant Friars.PDF",updated:"Jul 20, 2021"},{displayName:"Paleogeography.pdf",updated:"Aug 04, 2021"},{displayName:"Foregone conclusions.pdf",updated:"Aug 01, 2021"},{displayName:"Forklifts-and-bananas.pdf",updated:"Aug 01, 2021"},{displayName:"Coracles.pdf",updated:"Aug 05, 2021"}]}};var tl=se,rl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/samples.js";Object.defineProperty(nl,"__esModule",{value:!0}),nl.default=function(){const[e,i]=(0,ol.useState)(!1);return(0,sl.jsxDEV)(al.default.Page,{title:"Containers",children:[(0,sl.jsxDEV)(al.default.Pattern,{title:"Frame",children:[(0,sl.jsxDEV)(al.default.Example,{title:"Basic frame",children:[(0,sl.jsxDEV)("p",{children:["A ",(0,sl.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:cl,lineNumber:15,columnNumber:15},this)," provides a border, background, padding and vertical spacing of immediate children."]},void 0,!0,{fileName:cl,lineNumber:14,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-frame",children:[(0,sl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:cl,lineNumber:20,columnNumber:15},this),(0,sl.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:cl,lineNumber:21,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:13,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Using frames with the 'clean' theme",children:[(0,sl.jsxDEV)("p",{children:"Clean-theme styling removes borders from frames."},void 0,!1,{fileName:cl,lineNumber:30,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"theme-clean",children:(0,sl.jsxDEV)("div",{className:"hyp-frame",children:[(0,sl.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:cl,lineNumber:34,columnNumber:17},this),(0,sl.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:cl,lineNumber:37,columnNumber:17},this)]},void 0,!0,{fileName:cl,lineNumber:33,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:cl,lineNumber:12,columnNumber:7},this),(0,sl.jsxDEV)(al.default.Pattern,{title:"Card",children:[(0,sl.jsxDEV)(al.default.Example,{title:"Basic card",children:[(0,sl.jsxDEV)("p",{children:["A ",(0,sl.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:cl,lineNumber:50,columnNumber:15},this)," is a frame with a shadow and hover-shadow effect that fills available horizontal space. It extends ",(0,sl.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:cl,lineNumber:51,columnNumber:63},this),"."]},void 0,!0,{fileName:cl,lineNumber:49,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-card",children:[(0,sl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:cl,lineNumber:56,columnNumber:15},this),(0,sl.jsxDEV)("p",{children:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},void 0,!1,{fileName:cl,lineNumber:60,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:54,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:48,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Card with no hover",children:[(0,sl.jsxDEV)("p",{children:"A card's hover can be disabled by using a modifying class."},void 0,!1,{fileName:cl,lineNumber:69,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-card--no-hover",children:(0,sl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:cl,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:70,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:68,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Card example with actions",children:[(0,sl.jsxDEV)("p",{children:"This example shows a card with some available actions."},void 0,!1,{fileName:cl,lineNumber:81,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-card",children:[(0,sl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:cl,lineNumber:84,columnNumber:15},this),(0,sl.jsxDEV)("div",{className:"hyp-actions",children:[(0,sl.jsxDEV)(ul.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:cl,lineNumber:86,columnNumber:17},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:cl,lineNumber:87,columnNumber:17},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:cl,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:cl,lineNumber:85,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:83,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:82,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:80,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Using cards with the 'clean' theme",children:[(0,sl.jsxDEV)("p",{children:"Clean-theme styling removes hover shadows and borders."},void 0,!1,{fileName:cl,lineNumber:95,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"theme-clean",children:(0,sl.jsxDEV)("div",{className:"hyp-card",children:[(0,sl.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:cl,lineNumber:99,columnNumber:17},this),(0,sl.jsxDEV)("div",{className:"hyp-actions",children:[(0,sl.jsxDEV)(ul.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:cl,lineNumber:104,columnNumber:19},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:cl,lineNumber:105,columnNumber:19},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:cl,lineNumber:106,columnNumber:19},this)]},void 0,!0,{fileName:cl,lineNumber:103,columnNumber:17},this)]},void 0,!0,{fileName:cl,lineNumber:98,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:97,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:96,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:94,columnNumber:9},this)]},void 0,!0,{fileName:cl,lineNumber:47,columnNumber:7},this),(0,sl.jsxDEV)(al.default.Pattern,{title:"Actions",children:[(0,sl.jsxDEV)("p",{children:["The ",(0,sl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:cl,lineNumber:116,columnNumber:15},this)," pattern lays out a set of items, typically buttons, in a row (default) or column, with spacing."," "]},void 0,!0,{fileName:cl,lineNumber:115,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Horizontal (default) layout",children:[(0,sl.jsxDEV)("p",{children:["These examples show ",(0,sl.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:cl,lineNumber:121,columnNumber:33},this)," used in its default layout (horizontal) with ",(0,sl.jsxDEV)("code",{children:"LabeledButton"},void 0,!1,{fileName:cl,lineNumber:122,columnNumber:31},this)," and"," ",(0,sl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:cl,lineNumber:123,columnNumber:13},this)," components."]},void 0,!0,{fileName:cl,lineNumber:120,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-actions",children:[(0,sl.jsxDEV)(ul.LabeledButton,{icon:"profile",children:"User"},void 0,!1,{fileName:cl,lineNumber:127,columnNumber:15},this),(0,sl.jsxDEV)(ul.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:cl,lineNumber:128,columnNumber:15},this),(0,sl.jsxDEV)(ul.LabeledButton,{icon:"trash",children:"Delete"},void 0,!1,{fileName:cl,lineNumber:129,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:126,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:125,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-actions",children:[(0,sl.jsxDEV)(ul.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:cl,lineNumber:135,columnNumber:15},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:cl,lineNumber:136,columnNumber:15},this),(0,sl.jsxDEV)(ul.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:cl,lineNumber:137,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:134,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:133,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:119,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Columnar layout",children:(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,sl.jsxDEV)(ul.LabeledButton,{children:"User"},void 0,!1,{fileName:cl,lineNumber:145,columnNumber:15},this),(0,sl.jsxDEV)(ul.LabeledButton,{children:"Edit"},void 0,!1,{fileName:cl,lineNumber:146,columnNumber:15},this),(0,sl.jsxDEV)(ul.LabeledButton,{children:"Delete"},void 0,!1,{fileName:cl,lineNumber:147,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:144,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:143,columnNumber:11},this)},void 0,!1,{fileName:cl,lineNumber:142,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Columnar layout, filling space",children:[(0,sl.jsxDEV)("p",{children:["This example shows buttons stretching to fill available space in"," ",(0,sl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:cl,lineNumber:155,columnNumber:13},this),"."]},void 0,!0,{fileName:cl,lineNumber:153,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{style:"width:300px",children:(0,sl.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,sl.jsxDEV)(ul.LabeledButton,{variant:"primary",children:"Do this"},void 0,!1,{fileName:cl,lineNumber:160,columnNumber:17},this),(0,sl.jsxDEV)(ul.LabeledButton,{variant:"primary",children:"No, this!"},void 0,!1,{fileName:cl,lineNumber:161,columnNumber:17},this),(0,sl.jsxDEV)(ul.LabeledButton,{variant:"primary",children:"Maybe this?"},void 0,!1,{fileName:cl,lineNumber:162,columnNumber:17},this)]},void 0,!0,{fileName:cl,lineNumber:159,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:158,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:157,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:152,columnNumber:9},this)]},void 0,!0,{fileName:cl,lineNumber:114,columnNumber:7},this),(0,sl.jsxDEV)(al.default.Pattern,{title:"Modal",children:(0,sl.jsxDEV)(al.default.Example,{title:"Responsive modal container",children:[(0,sl.jsxDEV)("p",{children:["This pattern makes use of the ",(0,sl.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:cl,lineNumber:172,columnNumber:43},this)," pattern. It responsively positions and sizes a container in the viewport to hold modal content."]},void 0,!0,{fileName:cl,lineNumber:171,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{children:[(0,sl.jsxDEV)(ul.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:cl,lineNumber:178,columnNumber:15},this),(0,sl.jsxDEV)("div",{className:"hyp-u-overlay",style:{visibility:e?"visible":"hidden"},children:(0,sl.jsxDEV)("div",{className:"hyp-modal",children:(0,sl.jsxDEV)("div",{className:"hyp-card",children:[(0,sl.jsxDEV)("div",{children:(0,sl.jsxDEV)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue bibendum ipsum, ut euismod eros. Morbi sit amet sollicitudin diam. Cras tristique dui at nulla gravida, non sodales velit tincidunt. Pellentesque pharetra elit ac risus porta, vel vestibulum odio consectetur. Aliquam convallis augue ex, vitae aliquet enim varius id. Integer porttitor erat non nisi posuere, a tempus felis ultrices. In hac habitasse platea dictumst. Donec ut justo at odio pharetra laoreet ac consectetur elit."},void 0,!1,{fileName:cl,lineNumber:191,columnNumber:23},this)},void 0,!1,{fileName:cl,lineNumber:190,columnNumber:21},this),(0,sl.jsxDEV)("div",{className:"hyp-actions",children:(0,sl.jsxDEV)(ul.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:cl,lineNumber:205,columnNumber:23},this)},void 0,!1,{fileName:cl,lineNumber:204,columnNumber:21},this)]},void 0,!0,{fileName:cl,lineNumber:189,columnNumber:19},this)},void 0,!1,{fileName:cl,lineNumber:188,columnNumber:17},this)},void 0,!1,{fileName:cl,lineNumber:184,columnNumber:15},this)]},void 0,!0,{fileName:cl,lineNumber:177,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:176,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:170,columnNumber:9},this)},void 0,!1,{fileName:cl,lineNumber:169,columnNumber:7},this),(0,sl.jsxDEV)(al.default.Pattern,{title:"Scrollbox",children:[(0,sl.jsxDEV)("p",{children:[(0,sl.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:cl,lineNumber:222,columnNumber:11},this)," is a CSS-only pattern that provides scroll-hint affordances for overflowing content (shadows). It sets its own"," ",(0,sl.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:cl,lineNumber:224,columnNumber:11},this)," scrolling context, but authors need to define bounding dimensions."]},void 0,!0,{fileName:cl,lineNumber:221,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"List in a scrollbox",children:[(0,sl.jsxDEV)("p",{children:["This example shows an overflowing ",(0,sl.jsxDEV)("code",{children:"ul"},void 0,!1,{fileName:cl,lineNumber:229,columnNumber:47},this)," in a"," ",(0,sl.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:cl,lineNumber:230,columnNumber:13},this),"."]},void 0,!0,{fileName:cl,lineNumber:228,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,sl.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,sl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,sl.jsxDEV)(ml.SampleListElements,{},void 0,!1,{fileName:cl,lineNumber:236,columnNumber:19},this)},void 0,!1,{fileName:cl,lineNumber:235,columnNumber:17},this)},void 0,!1,{fileName:cl,lineNumber:234,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:233,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:232,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:227,columnNumber:9},this),(0,sl.jsxDEV)(al.default.Example,{title:"Scrollbox with header offset",children:[(0,sl.jsxDEV)("p",{children:["The ",(0,sl.jsxDEV)("code",{children:"scrollbox--with-header"},void 0,!1,{fileName:cl,lineNumber:245,columnNumber:17},this)," pattern offsets the top scroll-hinting shadow to accommodate one header-like element with a touch-target height (currently 44px)."]},void 0,!0,{fileName:cl,lineNumber:244,columnNumber:11},this),(0,sl.jsxDEV)(al.default.Demo,{withSource:!0,children:(0,sl.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,sl.jsxDEV)("div",{className:"hyp-scrollbox--with-header",children:[(0,sl.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,sl.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:(0,sl.jsxDEV)("strong",{children:"NATO Phonetic Alphabet"},void 0,!1,{fileName:cl,lineNumber:255,columnNumber:21},this)},void 0,!1,{fileName:cl,lineNumber:254,columnNumber:19},this)},void 0,!1,{fileName:cl,lineNumber:253,columnNumber:17},this),(0,sl.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,sl.jsxDEV)(ml.SampleListElements,{},void 0,!1,{fileName:cl,lineNumber:259,columnNumber:19},this)},void 0,!1,{fileName:cl,lineNumber:258,columnNumber:17},this)]},void 0,!0,{fileName:cl,lineNumber:252,columnNumber:15},this)},void 0,!1,{fileName:cl,lineNumber:251,columnNumber:13},this)},void 0,!1,{fileName:cl,lineNumber:250,columnNumber:11},this)]},void 0,!0,{fileName:cl,lineNumber:243,columnNumber:9},this)]},void 0,!0,{fileName:cl,lineNumber:220,columnNumber:7},this)]},void 0,!0,{fileName:cl,lineNumber:11,columnNumber:5},this)};var ol=R,ul=z,al=function(e){return e&&e.__esModule?e:{default:e}}(pn),ml=ll,sl=se,cl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js";var dl={};Object.defineProperty(dl,"__esModule",{value:!0}),dl.default=function(){return(0,bl.jsxDEV)(Nl.default.Page,{title:"Panels",children:[(0,bl.jsxDEV)("p",{children:["The ",(0,bl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:fl,lineNumber:8,columnNumber:13},this)," pattern is used by several components:"," ",(0,bl.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:fl,lineNumber:9,columnNumber:9},this),", ",(0,bl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:fl,lineNumber:9,columnNumber:29},this),", ",(0,bl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:fl,lineNumber:9,columnNumber:50},this),", e.g."]},void 0,!0,{fileName:fl,lineNumber:7,columnNumber:7},this),(0,bl.jsxDEV)(Nl.default.Pattern,{title:"Panel",children:[(0,bl.jsxDEV)("p",{children:["A panel is a card with a header and affordances for a close button. Use the ",(0,bl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:fl,lineNumber:14,columnNumber:19},this)," modifier when using"," ",(0,bl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:fl,lineNumber:15,columnNumber:11},this)," with an icon-only close button."]},void 0,!0,{fileName:fl,lineNumber:12,columnNumber:9},this),(0,bl.jsxDEV)(Nl.default.Example,{title:"Panel with no header",children:[(0,bl.jsxDEV)("p",{children:["This is in a panel that has no header. A header is not required, but you are encouraged to use ",(0,bl.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:fl,lineNumber:20,columnNumber:39},this)," in that case. Note that a ",(0,bl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:fl,lineNumber:21,columnNumber:15},this)," will currently fill all available space. The containing element has been set to ",(0,bl.jsxDEV)("code",{children:"max-width: 400px"},void 0,!1,{fileName:fl,lineNumber:22,columnNumber:48},this)," ","here."]},void 0,!0,{fileName:fl,lineNumber:18,columnNumber:11},this),(0,bl.jsxDEV)(Nl.default.Demo,{withSource:!0,children:(0,bl.jsxDEV)("div",{style:{maxWidth:"400px"},children:(0,bl.jsxDEV)("div",{className:"hyp-panel",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"},void 0,!1,{fileName:fl,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:fl,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:fl,lineNumber:25,columnNumber:11},this)]},void 0,!0,{fileName:fl,lineNumber:17,columnNumber:9},this),(0,bl.jsxDEV)(Nl.default.Example,{title:"Panel with title but no close button",children:[(0,bl.jsxDEV)("p",{children:"This example shows a panel with header and content, but no close affordances."},void 0,!1,{fileName:fl,lineNumber:38,columnNumber:11},this),(0,bl.jsxDEV)(Nl.default.Demo,{withSource:!0,children:(0,bl.jsxDEV)("div",{className:"hyp-panel",children:[(0,bl.jsxDEV)("header",{children:(0,bl.jsxDEV)("h2",{className:"hyp-panel__title",children:"This is a panel title in a panel header"},void 0,!1,{fileName:fl,lineNumber:45,columnNumber:17},this)},void 0,!1,{fileName:fl,lineNumber:44,columnNumber:15},this),(0,bl.jsxDEV)("div",{children:"This is panel content. There is a header but no close affordance."},void 0,!1,{fileName:fl,lineNumber:49,columnNumber:15},this)]},void 0,!0,{fileName:fl,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:fl,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:fl,lineNumber:37,columnNumber:9},this),(0,bl.jsxDEV)(Nl.default.Example,{title:"Closeable panel",children:[(0,bl.jsxDEV)("p",{children:["This example shows a panel pattern with a ",(0,bl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:fl,lineNumber:59,columnNumber:55},this)," ","close button, using the ",(0,bl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:fl,lineNumber:60,columnNumber:37},this)," modifier."]},void 0,!0,{fileName:fl,lineNumber:58,columnNumber:11},this),(0,bl.jsxDEV)(Nl.default.Demo,{withSource:!0,children:(0,bl.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,bl.jsxDEV)("header",{children:[(0,bl.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title on a closeable panel"},void 0,!1,{fileName:fl,lineNumber:65,columnNumber:17},this),(0,bl.jsxDEV)("div",{className:"hyp-panel__close",children:(0,bl.jsxDEV)(hl.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:fl,lineNumber:69,columnNumber:19},this)},void 0,!1,{fileName:fl,lineNumber:68,columnNumber:17},this)]},void 0,!0,{fileName:fl,lineNumber:64,columnNumber:15},this),(0,bl.jsxDEV)("div",{children:["This is panel content in a panel, using ",(0,bl.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:fl,lineNumber:73,columnNumber:57},this),"."]},void 0,!0,{fileName:fl,lineNumber:72,columnNumber:15},this)]},void 0,!0,{fileName:fl,lineNumber:63,columnNumber:13},this)},void 0,!1,{fileName:fl,lineNumber:62,columnNumber:11},this)]},void 0,!0,{fileName:fl,lineNumber:57,columnNumber:9},this),(0,bl.jsxDEV)(Nl.default.Example,{title:"Panel with actions",children:[(0,bl.jsxDEV)("p",{children:["It is common to render some ",(0,bl.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:fl,lineNumber:82,columnNumber:41},this)," within a panel."]},void 0,!0,{fileName:fl,lineNumber:81,columnNumber:11},this),(0,bl.jsxDEV)(Nl.default.Demo,{withSource:!0,children:(0,bl.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,bl.jsxDEV)("header",{children:[(0,bl.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title"},void 0,!1,{fileName:fl,lineNumber:87,columnNumber:17},this),(0,bl.jsxDEV)("div",{className:"hyp-panel__close",children:(0,bl.jsxDEV)(hl.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:fl,lineNumber:89,columnNumber:19},this)},void 0,!1,{fileName:fl,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:fl,lineNumber:86,columnNumber:15},this),(0,bl.jsxDEV)("div",{children:"This is panel content in a panel that also has some available actions."},void 0,!1,{fileName:fl,lineNumber:92,columnNumber:15},this),(0,bl.jsxDEV)("div",{className:"hyp-actions",children:[(0,bl.jsxDEV)(hl.LabeledButton,{title:"Cancel",children:"Cancel"},void 0,!1,{fileName:fl,lineNumber:97,columnNumber:17},this),(0,bl.jsxDEV)(hl.LabeledButton,{title:"Try again",variant:"primary",children:"Try again"},void 0,!1,{fileName:fl,lineNumber:98,columnNumber:17},this)]},void 0,!0,{fileName:fl,lineNumber:96,columnNumber:15},this)]},void 0,!0,{fileName:fl,lineNumber:85,columnNumber:13},this)},void 0,!1,{fileName:fl,lineNumber:84,columnNumber:11},this)]},void 0,!0,{fileName:fl,lineNumber:80,columnNumber:9},this)]},void 0,!0,{fileName:fl,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:fl,lineNumber:6,columnNumber:5},this)};var hl=z,Nl=function(e){return e&&e.__esModule?e:{default:e}}(pn),bl=se,fl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelPatterns.js";var vl={};Object.defineProperty(vl,"__esModule",{value:!0}),vl.default=function(){return(0,Dl.jsxDEV)(xl.default.Page,{title:"Spinners",children:[(0,Dl.jsxDEV)("p",{children:["The ",(0,Dl.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:El,lineNumber:8,columnNumber:13},this)," pattern can be used to show loading states. It is an animated SVG."]},void 0,!0,{fileName:El,lineNumber:7,columnNumber:7},this),(0,Dl.jsxDEV)(xl.default.Pattern,{title:"Spinner",children:[(0,Dl.jsxDEV)("p",{children:["The spinner is ",(0,Dl.jsxDEV)("code",{children:"em-sized"},void 0,!1,{fileName:El,lineNumber:13,columnNumber:26},this),"; it renders at ",(0,Dl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:El,lineNumber:13,columnNumber:63},this)," ","square, by default. Other relative sizes are available as shown. For manual sizing control, adjust the font-size of a parent element. Spinners have a default foreground color, which may be overridden with utility classes."]},void 0,!0,{fileName:El,lineNumber:12,columnNumber:9},this),(0,Dl.jsxDEV)(xl.default.Example,{title:"Default size",children:[(0,Dl.jsxDEV)("p",{children:["At its default size, the spinner is ",(0,Dl.jsxDEV)("code",{children:"2em"},void 0,!1,{fileName:El,lineNumber:21,columnNumber:49},this)," square."]},void 0,!0,{fileName:El,lineNumber:20,columnNumber:11},this),(0,Dl.jsxDEV)(xl.default.Demo,{withSource:!0,children:(0,Dl.jsxDEV)(pl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:El,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:El,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:El,lineNumber:19,columnNumber:9},this),(0,Dl.jsxDEV)(xl.default.Example,{title:"Small size",children:[(0,Dl.jsxDEV)("p",{children:["Small spinners are ",(0,Dl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:El,lineNumber:29,columnNumber:32},this)," square and can be used inline."]},void 0,!0,{fileName:El,lineNumber:28,columnNumber:11},this),(0,Dl.jsxDEV)(xl.default.Demo,{withSource:!0,children:(0,Dl.jsxDEV)(pl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:El,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:El,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:El,lineNumber:27,columnNumber:9},this),(0,Dl.jsxDEV)(xl.default.Example,{title:"Large size",children:[(0,Dl.jsxDEV)("p",{children:["Large spinners are ",(0,Dl.jsxDEV)("code",{children:"4em"},void 0,!1,{fileName:El,lineNumber:37,columnNumber:32},this)," square."]},void 0,!0,{fileName:El,lineNumber:36,columnNumber:11},this),(0,Dl.jsxDEV)(xl.default.Demo,{withSource:!0,children:(0,Dl.jsxDEV)(pl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--large"},void 0,!1,{fileName:El,lineNumber:40,columnNumber:13},this)},void 0,!1,{fileName:El,lineNumber:39,columnNumber:11},this)]},void 0,!0,{fileName:El,lineNumber:35,columnNumber:9},this),(0,Dl.jsxDEV)(xl.default.Example,{title:"Changing color",children:[(0,Dl.jsxDEV)("p",{children:"The color of the spinner may be changed by use of utility classes."},void 0,!1,{fileName:El,lineNumber:45,columnNumber:11},this),(0,Dl.jsxDEV)(xl.default.Demo,{withSource:!0,children:(0,Dl.jsxDEV)(pl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner hyp-u-color--brand"},void 0,!1,{fileName:El,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:El,lineNumber:48,columnNumber:11},this)]},void 0,!0,{fileName:El,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:El,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:El,lineNumber:6,columnNumber:5},this)};var pl=z,xl=function(e){return e&&e.__esModule?e:{default:e}}(pn),Dl=se,El="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js";var gl={};Object.defineProperty(gl,"__esModule",{value:!0}),gl.default=function(){return(0,_l.jsxDEV)(jl.default.Page,{title:"Tables",children:[(0,_l.jsxDEV)("p",{children:["These ",(0,_l.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:wl,lineNumber:9,columnNumber:15},this)," patterns support a basic table layout that adapts to available space. They are intended for simpler tabular display: maximum 2 or possibly 3 columns. Remember that"," ",(0,_l.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:wl,lineNumber:12,columnNumber:9},this)," content needs to be usable in tight and narrow spaces."]},void 0,!0,{fileName:wl,lineNumber:8,columnNumber:7},this),(0,_l.jsxDEV)(jl.default.Pattern,{title:"Table",children:[(0,_l.jsxDEV)(jl.default.Example,{title:"Basic table",variant:"wide",children:[(0,_l.jsxDEV)("p",{children:["By default, a ",(0,_l.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:wl,lineNumber:18,columnNumber:27},this)," will fill available horizontal space, and will use whatever height is needed to render its rows."," ",(0,_l.jsxDEV)("code",{children:"tr.is-selected"},void 0,!1,{fileName:wl,lineNumber:20,columnNumber:13},this)," styles a row as selected."]},void 0,!0,{fileName:wl,lineNumber:17,columnNumber:11},this),(0,_l.jsxDEV)(jl.default.Demo,{withSource:!0,children:(0,_l.jsxDEV)("table",{className:"hyp-table",children:[(0,_l.jsxDEV)("thead",{children:(0,_l.jsxDEV)("tr",{children:[(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:wl,lineNumber:27,columnNumber:19},this),(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:wl,lineNumber:30,columnNumber:19},this)]},void 0,!0,{fileName:wl,lineNumber:26,columnNumber:17},this)},void 0,!1,{fileName:wl,lineNumber:25,columnNumber:15},this),(0,_l.jsxDEV)(Vl.SampleTableBody,{},void 0,!1,{fileName:wl,lineNumber:35,columnNumber:15},this)]},void 0,!0,{fileName:wl,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:wl,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:wl,lineNumber:16,columnNumber:9},this),(0,_l.jsxDEV)(jl.default.Example,{title:"Adjusting column widths",children:[(0,_l.jsxDEV)("p",{children:["Table column widths may be adjusted by styling ",(0,_l.jsxDEV)("code",{children:"thead th"},void 0,!1,{fileName:wl,lineNumber:42,columnNumber:60},this)," ","elements. In this example, the column widths are set to 30% and 70%."]},void 0,!0,{fileName:wl,lineNumber:41,columnNumber:11},this),(0,_l.jsxDEV)(jl.default.Demo,{withSource:!0,children:(0,_l.jsxDEV)("table",{className:"hyp-table",children:[(0,_l.jsxDEV)("thead",{children:(0,_l.jsxDEV)("tr",{children:[(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:30%",children:"Column A"},void 0,!1,{fileName:wl,lineNumber:49,columnNumber:19},this),(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:70%",children:"Column B"},void 0,!1,{fileName:wl,lineNumber:56,columnNumber:19},this)]},void 0,!0,{fileName:wl,lineNumber:48,columnNumber:17},this)},void 0,!1,{fileName:wl,lineNumber:47,columnNumber:15},this),(0,_l.jsxDEV)(Vl.SampleTableBody,{},void 0,!1,{fileName:wl,lineNumber:65,columnNumber:15},this)]},void 0,!0,{fileName:wl,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:wl,lineNumber:45,columnNumber:11},this)]},void 0,!0,{fileName:wl,lineNumber:40,columnNumber:9},this),(0,_l.jsxDEV)(jl.default.Example,{title:"Constraining with a scrollbox",children:[(0,_l.jsxDEV)("p",{children:["In this example, the ",(0,_l.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:wl,lineNumber:72,columnNumber:34},this)," is constrained within a"," ",(0,_l.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:wl,lineNumber:73,columnNumber:13},this)," with a ",(0,_l.jsxDEV)("code",{children:"max-height"},void 0,!1,{fileName:wl,lineNumber:73,columnNumber:43},this),"."]},void 0,!0,{fileName:wl,lineNumber:71,columnNumber:11},this),(0,_l.jsxDEV)(jl.default.Demo,{withSource:!0,children:(0,_l.jsxDEV)("div",{style:"max-height:250px",className:"hyp-scrollbox--with-header",children:(0,_l.jsxDEV)("table",{className:"hyp-table",children:[(0,_l.jsxDEV)("thead",{children:(0,_l.jsxDEV)("tr",{children:[(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:wl,lineNumber:83,columnNumber:21},this),(0,_l.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:wl,lineNumber:86,columnNumber:21},this)]},void 0,!0,{fileName:wl,lineNumber:82,columnNumber:19},this)},void 0,!1,{fileName:wl,lineNumber:81,columnNumber:17},this),(0,_l.jsxDEV)(Vl.SampleTableBody,{},void 0,!1,{fileName:wl,lineNumber:91,columnNumber:17},this)]},void 0,!0,{fileName:wl,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:wl,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:wl,lineNumber:75,columnNumber:11},this)]},void 0,!0,{fileName:wl,lineNumber:70,columnNumber:9},this)]},void 0,!0,{fileName:wl,lineNumber:15,columnNumber:7},this)]},void 0,!0,{fileName:wl,lineNumber:7,columnNumber:5},this)};var jl=function(e){return e&&e.__esModule?e:{default:e}}(pn),Vl=ll,_l=se,wl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TablePatterns.js";var yl={};Object.defineProperty(yl,"__esModule",{value:!0}),yl.default=function(){return(0,Ll.jsxDEV)(Cl.default.Page,{title:"Thumbnails",children:[(0,Ll.jsxDEV)("p",{children:["The ",(0,Ll.jsxDEV)("code",{children:"thumbnail"},void 0,!1,{fileName:Sl,lineNumber:8,columnNumber:13},this)," pattern is for displaying thumbnail or other images in a frame of constrained size. It provides a variant for displaying a placeholder (when there is no image to render) or a loading state."]},void 0,!0,{fileName:Sl,lineNumber:7,columnNumber:7},this),(0,Ll.jsxDEV)("p",{children:"The thumbnail will fill the available space in the parent (100%), but will constrain the image dimensions within that space, retaining aspect ratio. It will retain its dimensions even when empty or in loading state."},void 0,!1,{fileName:Sl,lineNumber:13,columnNumber:7},this),(0,Ll.jsxDEV)(Cl.default.Pattern,{title:"Thumbnail",children:[(0,Ll.jsxDEV)("p",{children:"These examples show a thumbnail that is contained within a parent container sized to 250x175px."},void 0,!1,{fileName:Sl,lineNumber:20,columnNumber:9},this),(0,Ll.jsxDEV)(Cl.default.Example,{title:"Thumbnail with content",children:(0,Ll.jsxDEV)(Cl.default.Demo,{withSource:!0,children:(0,Ll.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:Sl,lineNumber:29,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:28,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:Sl,lineNumber:25,columnNumber:11},this)},void 0,!1,{fileName:Sl,lineNumber:24,columnNumber:9},this),(0,Ll.jsxDEV)(Cl.default.Example,{title:"Thumbnail with placeholder",children:(0,Ll.jsxDEV)(Cl.default.Demo,{withSource:!0,children:(0,Ll.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:Sl,lineNumber:41,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:40,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:39,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:38,columnNumber:13},this)},void 0,!1,{fileName:Sl,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:Sl,lineNumber:36,columnNumber:9},this),(0,Ll.jsxDEV)(Cl.default.Example,{title:"thumbnail in loading state",children:(0,Ll.jsxDEV)(Cl.default.Demo,{withSource:!0,children:(0,Ll.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)(kl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:Sl,lineNumber:53,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:52,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:51,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:Sl,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:Sl,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:Sl,lineNumber:19,columnNumber:7},this),(0,Ll.jsxDEV)(Cl.default.Pattern,{title:"Thumbnail in smaller dimensions",children:[(0,Ll.jsxDEV)("p",{children:"These examples show all three states of a thumnbail in a smaller space: 150x100px."},void 0,!1,{fileName:Sl,lineNumber:62,columnNumber:9},this),(0,Ll.jsxDEV)(Cl.default.Example,{title:"All three states shown",children:(0,Ll.jsxDEV)(Cl.default.Demo,{withSource:!0,children:[(0,Ll.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)("img",{src:"http://placekitten.com/100/150",alt:"kitty"},void 0,!1,{fileName:Sl,lineNumber:71,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:70,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:69,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:68,columnNumber:13},this),(0,Ll.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)("span",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:Sl,lineNumber:79,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:78,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:76,columnNumber:13},this),(0,Ll.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)(kl.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:Sl,lineNumber:87,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:86,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:85,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:84,columnNumber:13},this)]},void 0,!0,{fileName:Sl,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:Sl,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:Sl,lineNumber:61,columnNumber:7},this),(0,Ll.jsxDEV)(Cl.default.Pattern,{title:"Thumbnails: aspect ratio",children:[(0,Ll.jsxDEV)("p",{children:"An image in a thumnbail is constrained to the available space, and retains aspect ratio."},void 0,!1,{fileName:Sl,lineNumber:96,columnNumber:9},this),(0,Ll.jsxDEV)(Cl.default.Example,{title:"Thumbnail showing retention of image aspect ratio",children:(0,Ll.jsxDEV)(Cl.default.Demo,{withSource:!0,children:(0,Ll.jsxDEV)("div",{style:"width: 175px; height: 250px",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,Ll.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,Ll.jsxDEV)("img",{src:"http://placekitten.com/350/250",alt:"kitty"},void 0,!1,{fileName:Sl,lineNumber:105,columnNumber:19},this)},void 0,!1,{fileName:Sl,lineNumber:104,columnNumber:17},this)},void 0,!1,{fileName:Sl,lineNumber:103,columnNumber:15},this)},void 0,!1,{fileName:Sl,lineNumber:102,columnNumber:13},this)},void 0,!1,{fileName:Sl,lineNumber:101,columnNumber:11},this)},void 0,!1,{fileName:Sl,lineNumber:100,columnNumber:9},this)]},void 0,!0,{fileName:Sl,lineNumber:95,columnNumber:7},this)]},void 0,!0,{fileName:Sl,lineNumber:6,columnNumber:5},this)};var kl=z,Cl=function(e){return e&&e.__esModule?e:{default:e}}(pn),Ll=se,Sl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailPatterns.js";var Bl={};Object.defineProperty(Bl,"__esModule",{value:!0}),Bl.default=function(){return(0,Tl.jsxDEV)(Pl.default.Page,{title:"Buttons",children:[(0,Tl.jsxDEV)("p",{children:["Button components support the following ",(0,Tl.jsxDEV)("strong",{children:"variants"},void 0,!1,{fileName:zl,lineNumber:8,columnNumber:49},this),":"]},void 0,!0,{fileName:zl,lineNumber:7,columnNumber:7},this),(0,Tl.jsxDEV)("ul",{children:[(0,Tl.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:zl,lineNumber:11,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Primary: For indicating that a button represents a primary action"},void 0,!1,{fileName:zl,lineNumber:12,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Dark: For rendering a button on a grey background"},void 0,!1,{fileName:zl,lineNumber:15,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Light: This variant should only be used for non-critical buttons on white backgrounds (low contrast)."},void 0,!1,{fileName:zl,lineNumber:16,columnNumber:9},this)]},void 0,!0,{fileName:zl,lineNumber:10,columnNumber:7},this),(0,Tl.jsxDEV)("p",{children:"In addition, a button may be in one of four states, which are represented in their variant examples, left to right:"},void 0,!1,{fileName:zl,lineNumber:21,columnNumber:7},this),(0,Tl.jsxDEV)("ul",{children:[(0,Tl.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:zl,lineNumber:26,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Pressed"},void 0,!1,{fileName:zl,lineNumber:27,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Expanded"},void 0,!1,{fileName:zl,lineNumber:28,columnNumber:9},this),(0,Tl.jsxDEV)("li",{children:"Disabled"},void 0,!1,{fileName:zl,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:zl,lineNumber:25,columnNumber:7},this),(0,Tl.jsxDEV)(Pl.default.Pattern,{title:"IconButton",children:[(0,Tl.jsxDEV)("p",{children:"A button containing an icon and no other content."},void 0,!1,{fileName:zl,lineNumber:33,columnNumber:9},this),(0,Tl.jsxDEV)(Pl.default.Example,{title:"Basic use and sizes",children:[(0,Tl.jsxDEV)("p",{children:["The optional ",(0,Tl.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:zl,lineNumber:36,columnNumber:26},this)," property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at ",(0,Tl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:zl,lineNumber:39,columnNumber:13},this),". The default sizing is ",(0,Tl.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:zl,lineNumber:39,columnNumber:53},this),"."]},void 0,!0,{fileName:zl,lineNumber:35,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{withSource:!0,children:[(0,Tl.jsxDEV)(Il.IconButton,{icon:"edit",title:"Edit",size:"small"},void 0,!1,{fileName:zl,lineNumber:42,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"edit",title:"Edit",size:"medium"},void 0,!1,{fileName:zl,lineNumber:43,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"edit",title:"Edit",size:"large"},void 0,!1,{fileName:zl,lineNumber:44,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:41,columnNumber:11},this)]},void 0,!0,{fileName:zl,lineNumber:34,columnNumber:9},this),(0,Tl.jsxDEV)(Pl.default.Example,{title:"Variants",variant:"wide",children:[(0,Tl.jsxDEV)("h4",{children:"Dark variant"},void 0,!1,{fileName:zl,lineNumber:49,columnNumber:11},this),(0,Tl.jsxDEV)("p",{children:["The ",(0,Tl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:zl,lineNumber:51,columnNumber:17},this)," dark variant is for use on darker (light grey vs. white) backgrounds. Note that this button, unlike other"," ",(0,Tl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:zl,lineNumber:53,columnNumber:13},this),"s, has a background color. This is to allow for a use case in which the dark ",(0,Tl.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:zl,lineNumber:54,columnNumber:46},this)," is initially fixed on a grey background but floats on top of content when scrolled."]},void 0,!0,{fileName:zl,lineNumber:50,columnNumber:11},this),(0,Tl.jsxDEV)("h4",{children:"Light variant"},void 0,!1,{fileName:zl,lineNumber:58,columnNumber:11},this),(0,Tl.jsxDEV)("p",{children:"This variant should only be used for non-critical icons on white backgrounds (low contrast)."},void 0,!1,{fileName:zl,lineNumber:59,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Default",withSource:!0,children:[(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation"},void 0,!1,{fileName:zl,lineNumber:64,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0},void 0,!1,{fileName:zl,lineNumber:65,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0},void 0,!1,{fileName:zl,lineNumber:66,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0},void 0,!1,{fileName:zl,lineNumber:67,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:63,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Primary",withSource:!0,children:[(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",variant:"primary"},void 0,!1,{fileName:zl,lineNumber:71,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"primary"},void 0,!1,{fileName:zl,lineNumber:76,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"primary"},void 0,!1,{fileName:zl,lineNumber:82,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"primary"},void 0,!1,{fileName:zl,lineNumber:88,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:70,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Dark",withSource:!0,children:[(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",variant:"dark"},void 0,!1,{fileName:zl,lineNumber:97,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"dark"},void 0,!1,{fileName:zl,lineNumber:98,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"dark"},void 0,!1,{fileName:zl,lineNumber:104,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"dark"},void 0,!1,{fileName:zl,lineNumber:110,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:96,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Light",withSource:!0,children:[(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",variant:"light"},void 0,!1,{fileName:zl,lineNumber:119,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"light"},void 0,!1,{fileName:zl,lineNumber:124,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"light"},void 0,!1,{fileName:zl,lineNumber:130,columnNumber:13},this),(0,Tl.jsxDEV)(Il.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"light"},void 0,!1,{fileName:zl,lineNumber:136,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:118,columnNumber:11},this)]},void 0,!0,{fileName:zl,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:zl,lineNumber:32,columnNumber:7},this),(0,Tl.jsxDEV)(Pl.default.Pattern,{title:"LabeledButton",children:[(0,Tl.jsxDEV)("p",{children:"A button with content and, optionally, an icon."},void 0,!1,{fileName:zl,lineNumber:147,columnNumber:9},this),(0,Tl.jsxDEV)(Pl.default.Example,{title:"Basic use and sizes",children:[(0,Tl.jsxDEV)("p",{children:["The optional ",(0,Tl.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:zl,lineNumber:150,columnNumber:26},this)," property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at ",(0,Tl.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:zl,lineNumber:153,columnNumber:13},this),". The default sizing is ",(0,Tl.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:zl,lineNumber:153,columnNumber:53},this),"."]},void 0,!0,{fileName:zl,lineNumber:149,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Label only",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{size:"small",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:156,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{children:"Edit"},void 0,!1,{fileName:zl,lineNumber:157,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{size:"large",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:158,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:155,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Label, icon",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",size:"small",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:162,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:165,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",size:"large",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:166,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:161,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Label, icon on right",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",size:"small",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:172,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:175,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"profile",size:"large",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:zl,lineNumber:178,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:171,columnNumber:11},this)]},void 0,!0,{fileName:zl,lineNumber:148,columnNumber:9},this),(0,Tl.jsxDEV)(Pl.default.Example,{title:"Variants",variant:"wide",children:[(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Default",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:186,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",pressed:!0,children:"Edit"},void 0,!1,{fileName:zl,lineNumber:187,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",expanded:!0,children:"Edit"},void 0,!1,{fileName:zl,lineNumber:190,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",disabled:!0,children:"Edit"},void 0,!1,{fileName:zl,lineNumber:193,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:185,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Primary",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:199,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:202,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:205,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:208,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:198,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Dark",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",variant:"dark",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:214,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",pressed:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:217,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",expanded:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:220,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LabeledButton,{icon:"edit",disabled:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:zl,lineNumber:223,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:213,columnNumber:11},this)]},void 0,!0,{fileName:zl,lineNumber:184,columnNumber:9},this)]},void 0,!0,{fileName:zl,lineNumber:146,columnNumber:7},this),(0,Tl.jsxDEV)(Pl.default.Pattern,{title:"LinkButton",children:[(0,Tl.jsxDEV)("p",{children:"A button styled to look like a link (anchor tag)."},void 0,!1,{fileName:zl,lineNumber:231,columnNumber:9},this),(0,Tl.jsxDEV)(Pl.default.Example,{title:"Variants",children:[(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Default",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LinkButton,{children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:235,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:236,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:237,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:238,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:234,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Primary",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LinkButton,{variant:"primary",children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:242,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"primary",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:243,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"primary",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:246,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"primary",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:249,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:241,columnNumber:11},this),(0,Tl.jsxDEV)(Pl.default.Demo,{title:"Dark",withSource:!0,children:[(0,Tl.jsxDEV)(Il.LinkButton,{variant:"dark",children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:255,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"dark",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:256,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"dark",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:259,columnNumber:13},this),(0,Tl.jsxDEV)(Il.LinkButton,{variant:"dark",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:zl,lineNumber:262,columnNumber:13},this)]},void 0,!0,{fileName:zl,lineNumber:254,columnNumber:11},this)]},void 0,!0,{fileName:zl,lineNumber:233,columnNumber:9},this)]},void 0,!0,{fileName:zl,lineNumber:230,columnNumber:7},this)]},void 0,!0,{fileName:zl,lineNumber:6,columnNumber:5},this)};var Il=z,Pl=function(e){return e&&e.__esModule?e:{default:e}}(pn),Tl=se,zl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js";var Ml={};Object.defineProperty(Ml,"__esModule",{value:!0}),Ml.default=function(){return(0,ql.jsxDEV)(Al.default.Page,{title:"Containers",children:[(0,ql.jsxDEV)(Al.default.Pattern,{title:"Frame",children:(0,ql.jsxDEV)(Al.default.Example,{title:"Laying out content in a Frame",children:[(0,ql.jsxDEV)("p",{children:["The ",(0,ql.jsxDEV)("code",{children:"Frame"},void 0,!1,{fileName:Fl,lineNumber:12,columnNumber:17},this)," component renders content inside of a"," ",(0,ql.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:Fl,lineNumber:13,columnNumber:13},this)," design pattern."]},void 0,!0,{fileName:Fl,lineNumber:11,columnNumber:11},this),(0,ql.jsxDEV)(Al.default.Demo,{withSource:!0,children:(0,ql.jsxDEV)(Hl.Frame,{children:[(0,ql.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:Fl,lineNumber:17,columnNumber:15},this),(0,ql.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:Fl,lineNumber:18,columnNumber:15},this)]},void 0,!0,{fileName:Fl,lineNumber:16,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:15,columnNumber:11},this)]},void 0,!0,{fileName:Fl,lineNumber:10,columnNumber:9},this)},void 0,!1,{fileName:Fl,lineNumber:9,columnNumber:7},this),(0,ql.jsxDEV)(Al.default.Pattern,{title:"Card",children:[(0,ql.jsxDEV)("p",{children:["The ",(0,ql.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:Fl,lineNumber:26,columnNumber:15},this)," component pattern provides a card-like layout using the ",(0,ql.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:Fl,lineNumber:27,columnNumber:21},this)," pattern."]},void 0,!0,{fileName:Fl,lineNumber:25,columnNumber:9},this),(0,ql.jsxDEV)(Al.default.Example,{title:"Laying out content in a Card",children:(0,ql.jsxDEV)(Al.default.Demo,{withSource:!0,children:(0,ql.jsxDEV)(Hl.Card,{children:[(0,ql.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Fl,lineNumber:32,columnNumber:15},this),(0,ql.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Fl,lineNumber:33,columnNumber:15},this)]},void 0,!0,{fileName:Fl,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:Fl,lineNumber:29,columnNumber:9},this),(0,ql.jsxDEV)(Al.default.Example,{title:"Overriding styles",children:[(0,ql.jsxDEV)("p",{children:["This example shows overriding the background color of a"," ",(0,ql.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:Fl,lineNumber:40,columnNumber:13},this)," using a utility class."]},void 0,!0,{fileName:Fl,lineNumber:38,columnNumber:11},this),(0,ql.jsxDEV)(Al.default.Demo,{withSource:!0,children:(0,ql.jsxDEV)(Hl.Card,{classes:"hyp-u-bg-color--grey-3",children:[(0,ql.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Fl,lineNumber:44,columnNumber:15},this),(0,ql.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:Fl,lineNumber:45,columnNumber:15},this)]},void 0,!0,{fileName:Fl,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:Fl,lineNumber:37,columnNumber:9},this)]},void 0,!0,{fileName:Fl,lineNumber:24,columnNumber:7},this),(0,ql.jsxDEV)(Al.default.Pattern,{title:"Actions",children:[(0,ql.jsxDEV)("p",{children:["The ",(0,ql.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:Fl,lineNumber:53,columnNumber:15},this)," component pattern lays out actions (buttons)."]},void 0,!0,{fileName:Fl,lineNumber:52,columnNumber:9},this),(0,ql.jsxDEV)(Al.default.Example,{title:"Laying out buttons with Actions",children:(0,ql.jsxDEV)(Al.default.Demo,{withSource:!0,children:(0,ql.jsxDEV)(Hl.Actions,{children:[(0,ql.jsxDEV)(Hl.LabeledButton,{children:"Cancel"},void 0,!1,{fileName:Fl,lineNumber:59,columnNumber:15},this),(0,ql.jsxDEV)(Hl.LabeledButton,{children:"Maybe"},void 0,!1,{fileName:Fl,lineNumber:60,columnNumber:15},this),(0,ql.jsxDEV)(Hl.LabeledButton,{variant:"primary",children:"OK"},void 0,!1,{fileName:Fl,lineNumber:61,columnNumber:15},this)]},void 0,!0,{fileName:Fl,lineNumber:58,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:57,columnNumber:11},this)},void 0,!1,{fileName:Fl,lineNumber:56,columnNumber:9},this),(0,ql.jsxDEV)(Al.default.Example,{title:"Laying out buttons vertically with Actions",children:(0,ql.jsxDEV)(Al.default.Demo,{withSource:!0,children:(0,ql.jsxDEV)(Hl.Actions,{direction:"column",children:[(0,ql.jsxDEV)(Hl.LabeledButton,{children:"This is one option"},void 0,!1,{fileName:Fl,lineNumber:69,columnNumber:15},this),(0,ql.jsxDEV)(Hl.LabeledButton,{children:"This is another option"},void 0,!1,{fileName:Fl,lineNumber:70,columnNumber:15},this),(0,ql.jsxDEV)(Hl.LabeledButton,{variant:"primary",children:"This is the best option"},void 0,!1,{fileName:Fl,lineNumber:71,columnNumber:15},this)]},void 0,!0,{fileName:Fl,lineNumber:68,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:Fl,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:Fl,lineNumber:51,columnNumber:7},this),(0,ql.jsxDEV)(Al.default.Pattern,{title:"Scrollbox",children:[(0,ql.jsxDEV)("p",{children:["The ",(0,ql.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:Fl,lineNumber:81,columnNumber:15},this)," component is a container for (potentially-) overflowing content. It provides a scroll context and is styled with the ",(0,ql.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:Fl,lineNumber:83,columnNumber:15},this)," pattern."]},void 0,!0,{fileName:Fl,lineNumber:80,columnNumber:9},this),(0,ql.jsxDEV)(Al.default.Example,{variant:"wide",children:[(0,ql.jsxDEV)("p",{children:["A ",(0,ql.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:Fl,lineNumber:87,columnNumber:15},this)," will fill its available space. Constraints to that space need to be applied to a parent element. Here a parent element is set to a width and height."]},void 0,!0,{fileName:Fl,lineNumber:86,columnNumber:11},this),(0,ql.jsxDEV)(Al.default.Demo,{title:"Basic scrollbox",withSource:!0,children:(0,ql.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,ql.jsxDEV)(Hl.Scrollbox,{children:(0,ql.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,ql.jsxDEV)(Ol.SampleListElements,{},void 0,!1,{fileName:Fl,lineNumber:95,columnNumber:19},this)},void 0,!1,{fileName:Fl,lineNumber:94,columnNumber:17},this)},void 0,!1,{fileName:Fl,lineNumber:93,columnNumber:15},this)},void 0,!1,{fileName:Fl,lineNumber:92,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:91,columnNumber:11},this),(0,ql.jsxDEV)(Al.default.Demo,{title:"Scrollbox with header",withSource:!0,children:(0,ql.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,ql.jsxDEV)(Hl.Scrollbox,{withHeader:!0,children:[(0,ql.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,ql.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:"NATO Alphabet"},void 0,!1,{fileName:Fl,lineNumber:104,columnNumber:19},this)},void 0,!1,{fileName:Fl,lineNumber:103,columnNumber:17},this),(0,ql.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,ql.jsxDEV)(Ol.SampleListElements,{},void 0,!1,{fileName:Fl,lineNumber:109,columnNumber:19},this)},void 0,!1,{fileName:Fl,lineNumber:108,columnNumber:17},this)]},void 0,!0,{fileName:Fl,lineNumber:102,columnNumber:15},this)},void 0,!1,{fileName:Fl,lineNumber:101,columnNumber:13},this)},void 0,!1,{fileName:Fl,lineNumber:100,columnNumber:11},this)]},void 0,!0,{fileName:Fl,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:Fl,lineNumber:79,columnNumber:7},this)]},void 0,!0,{fileName:Fl,lineNumber:8,columnNumber:5},this)};var Hl=z,Al=function(e){return e&&e.__esModule?e:{default:e}}(pn),Ol=ll,ql=se,Fl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js";var Ul={};Object.defineProperty(Ul,"__esModule",{value:!0}),Ul.default=function(){return(0,Kl.jsxDEV)(Wl.default.Page,{title:"Dialogs",children:[(0,Kl.jsxDEV)(Wl.default.Pattern,{title:"Dialog",children:[(0,Kl.jsxDEV)("p",{children:["A ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:229,columnNumber:13},this)," prompts for user interaction and will take focus when opened."]},void 0,!0,{fileName:Jl,lineNumber:228,columnNumber:9},this),(0,Kl.jsxDEV)("p",{children:["Use a ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:233,columnNumber:17},this)," when you want to route focus. Consider using a ",(0,Kl.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:Jl,lineNumber:234,columnNumber:13},this)," for presenting panel-styled content that does not require grabbing focus."]},void 0,!0,{fileName:Jl,lineNumber:232,columnNumber:9},this),(0,Kl.jsxDEV)("p",{children:[(0,Kl.jsxDEV)("code",{children:"Dialogs"},void 0,!1,{fileName:Jl,lineNumber:238,columnNumber:11},this)," are styled using the ",(0,Kl.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:Jl,lineNumber:238,columnNumber:53},this)," pattern."]},void 0,!0,{fileName:Jl,lineNumber:237,columnNumber:9},this),(0,Kl.jsxDEV)(Wl.default.Example,{title:"Setting initial focus",children:[(0,Kl.jsxDEV)("p",{children:["This example shows a dismiss-able ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:242,columnNumber:47},this)," with an explicitly-provided element (",(0,Kl.jsxDEV)("code",{children:"ref"},void 0,!1,{fileName:Jl,lineNumber:243,columnNumber:42},this),") that should take initial focus: a text ",(0,Kl.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:Jl,lineNumber:244,columnNumber:35},this),". The highlighted outline is added here by using ",(0,Kl.jsxDEV)("code",{children:".hyp-u-focus-outline"},void 0,!1,{fileName:Jl,lineNumber:245,columnNumber:33},this)," on the"," ",(0,Kl.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:Jl,lineNumber:246,columnNumber:13},this)," element."]},void 0,!0,{fileName:Jl,lineNumber:241,columnNumber:11},this),(0,Kl.jsxDEV)("p",{children:["In some cases, you might need finer control over which element is focused when the ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:250,columnNumber:30},this)," or ",(0,Kl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Jl,lineNumber:250,columnNumber:53},this)," is opened. This might arise if you have nested components within a"," ",(0,Kl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Jl,lineNumber:252,columnNumber:13},this)," or ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:252,columnNumber:35},this),", or there is complex logic about focus. Setting the ",(0,Kl.jsxDEV)("code",{children:"initialFocus"},void 0,!1,{fileName:Jl,lineNumber:253,columnNumber:38},this)," prop to"," ",(0,Kl.jsxDEV)("code",{children:"null"},void 0,!1,{fileName:Jl,lineNumber:254,columnNumber:13},this)," will opt out of automatic focus handling."]},void 0,!0,{fileName:Jl,lineNumber:248,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{children:(0,Kl.jsxDEV)(Yl,{},void 0,!1,{fileName:Jl,lineNumber:258,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:257,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:240,columnNumber:9},this),(0,Kl.jsxDEV)(Wl.default.Example,{title:"Dialog with no cancel or close button",children:[(0,Kl.jsxDEV)("p",{children:["By default, a ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:264,columnNumber:27},this)," will render both a close button (x) and a Cancel button if an ",(0,Kl.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:Jl,lineNumber:265,columnNumber:43},this)," callback is provided, but this can be overridden with the"," ",(0,Kl.jsxDEV)("code",{children:"withCancelButton"},void 0,!1,{fileName:Jl,lineNumber:267,columnNumber:13},this)," and ",(0,Kl.jsxDEV)("code",{children:"withCloseButton"},void 0,!1,{fileName:Jl,lineNumber:267,columnNumber:47},this)," ","boolean props for the cancel button and close button, respectively."]},void 0,!0,{fileName:Jl,lineNumber:263,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{title:"Dialog with no Cancel button",children:(0,Kl.jsxDEV)(Ql,{},void 0,!1,{fileName:Jl,lineNumber:271,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:270,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{title:"Dialog with no Close button",children:(0,Kl.jsxDEV)(Xl,{},void 0,!1,{fileName:Jl,lineNumber:275,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:274,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:262,columnNumber:9},this)]},void 0,!0,{fileName:Jl,lineNumber:227,columnNumber:7},this),(0,Kl.jsxDEV)(Wl.default.Pattern,{title:"Modal",children:[(0,Kl.jsxDEV)("p",{children:["A ",(0,Kl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Jl,lineNumber:282,columnNumber:13},this)," is a type of ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:282,columnNumber:45},this)," that centers on the screen and obscures the background with an overlay."]},void 0,!0,{fileName:Jl,lineNumber:281,columnNumber:9},this),(0,Kl.jsxDEV)(Wl.default.Example,{title:"Basic usage",children:[(0,Kl.jsxDEV)("p",{children:"Close the modal by clicking the close (X) button, the cancel button or clicking anywhere outside of it."},void 0,!1,{fileName:Jl,lineNumber:286,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{children:(0,Kl.jsxDEV)(et,{},void 0,!1,{fileName:Jl,lineNumber:291,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:290,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:285,columnNumber:9},this),(0,Kl.jsxDEV)(Wl.default.Example,{title:"Handling content overflow",children:[(0,Kl.jsxDEV)("p",{children:"Modals that may contain a lot of content may need to handle overflow (i.e. make their content scrollable) so that the modal height doesn't exceed available viewport space."},void 0,!1,{fileName:Jl,lineNumber:296,columnNumber:11},this),(0,Kl.jsxDEV)("p",{children:["To make something in a modal scroll-able, apply"," ",(0,Kl.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:Jl,lineNumber:303,columnNumber:13},this)," to the element you wish to contain. This element needs to be an immediate-child element of the"," ",(0,Kl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Jl,lineNumber:305,columnNumber:13},this),"."]},void 0,!0,{fileName:Jl,lineNumber:301,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{children:(0,Kl.jsxDEV)(it,{},void 0,!1,{fileName:Jl,lineNumber:308,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:307,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:295,columnNumber:9},this)]},void 0,!0,{fileName:Jl,lineNumber:280,columnNumber:7},this),(0,Kl.jsxDEV)(Wl.default.Pattern,{title:"ConfirmModal",children:[(0,Kl.jsxDEV)("p",{children:[(0,Kl.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:Jl,lineNumber:315,columnNumber:11},this)," is intended to mirror the functionality of"," ",(0,Kl.jsxDEV)("code",{children:"window.confirm"},void 0,!1,{fileName:Jl,lineNumber:316,columnNumber:11},this),"."]},void 0,!0,{fileName:Jl,lineNumber:314,columnNumber:9},this),(0,Kl.jsxDEV)(Wl.default.Example,{children:[(0,Kl.jsxDEV)("p",{children:[(0,Kl.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:Jl,lineNumber:320,columnNumber:13},this)," prompts the user for a boolean yes/no input. Close and cancel are considered no."]},void 0,!0,{fileName:Jl,lineNumber:319,columnNumber:11},this),(0,Kl.jsxDEV)("p",{children:["Handlers need to be provided for what to do on yes (",(0,Kl.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:Jl,lineNumber:325,columnNumber:13},this),") and no/cancel (",(0,Kl.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:Jl,lineNumber:325,columnNumber:52},this),"). Typically, both would (also) close the modal, though in this example, the ",(0,Kl.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:Jl,lineNumber:327,columnNumber:26},this)," handler does not close the modal."]},void 0,!0,{fileName:Jl,lineNumber:323,columnNumber:11},this),(0,Kl.jsxDEV)(Wl.default.Demo,{children:(0,Kl.jsxDEV)(nt,{},void 0,!1,{fileName:Jl,lineNumber:331,columnNumber:13},this)},void 0,!1,{fileName:Jl,lineNumber:330,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:318,columnNumber:9},this)]},void 0,!0,{fileName:Jl,lineNumber:313,columnNumber:7},this)]},void 0,!0,{fileName:Jl,lineNumber:226,columnNumber:5},this)};var Rl=a,$l=R,Wl=function(e){return e&&e.__esModule?e:{default:e}}(pn),Gl=z,Zl=ll,Kl=se,Jl="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";function Yl(){const[e,i]=(0,$l.useState)(!1),n=(0,Rl.createRef)(),l=[(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>alert("You chose maybe"),children:"Maybe"},"maybe",!1,{fileName:Jl,lineNumber:23,columnNumber:5},this),(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>alert("You chose yep"),variant:"primary",children:"Do it!"},"yep",!1,{fileName:Jl,lineNumber:26,columnNumber:5},this)];return e?(0,Kl.jsxDEV)(Gl.Dialog,{buttons:l,icon:"edit",initialFocus:n,onCancel:()=>i(!1),title:"This is a Dialog",children:[(0,Kl.jsxDEV)("p",{children:["This is a ",(0,Kl.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:Jl,lineNumber:54,columnNumber:21},this),", with initial focus on a"," ",(0,Kl.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:Jl,lineNumber:55,columnNumber:11},this)," component input."]},void 0,!0,{fileName:Jl,lineNumber:53,columnNumber:9},this),(0,Kl.jsxDEV)(Gl.TextInputWithButton,{children:[(0,Kl.jsxDEV)(Gl.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:Jl,lineNumber:58,columnNumber:11},this),(0,Kl.jsxDEV)(Gl.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:Jl,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:Jl,lineNumber:46,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Jl,lineNumber:37,columnNumber:7},this)}function Ql(){const[e,i]=(0,$l.useState)(!1);return e?(0,Kl.jsxDEV)(Gl.Dialog,{icon:"edit",onCancel:()=>i(!1),title:"Dialog: No cancel button",withCancelButton:!1,children:(0,Kl.jsxDEV)("p",{children:"This is a Dialog that has a close button but no Cancel button."},void 0,!1,{fileName:Jl,lineNumber:86,columnNumber:9},this)},void 0,!1,{fileName:Jl,lineNumber:80,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Jl,lineNumber:71,columnNumber:7},this)}function Xl(){const[e,i]=(0,$l.useState)(!1);return e?(0,Kl.jsxDEV)(Gl.Dialog,{icon:"edit",onCancel:()=>i(!1),title:"Dialog: no close button",withCloseButton:!1,children:(0,Kl.jsxDEV)("p",{children:"This is a Dialog that has a Cancel button but no close button."},void 0,!1,{fileName:Jl,lineNumber:112,columnNumber:9},this)},void 0,!1,{fileName:Jl,lineNumber:106,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:Jl,lineNumber:97,columnNumber:7},this)}function et(){const[e,i]=(0,$l.useState)(!1),n=(0,Rl.createRef)(),l=[(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:Jl,lineNumber:123,columnNumber:5},this)];return e?(0,Kl.jsxDEV)(Gl.Modal,{buttons:l,initialFocus:n,onCancel:()=>i(!1),title:"Sample Modal",children:[(0,Kl.jsxDEV)("p",{children:["This is a ",(0,Kl.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:Jl,lineNumber:150,columnNumber:21},this),", with initial focus on a"," ",(0,Kl.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:Jl,lineNumber:151,columnNumber:11},this)," component input."]},void 0,!0,{fileName:Jl,lineNumber:149,columnNumber:9},this),(0,Kl.jsxDEV)(Gl.TextInputWithButton,{children:[(0,Kl.jsxDEV)(Gl.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:Jl,lineNumber:154,columnNumber:11},this),(0,Kl.jsxDEV)(Gl.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:Jl,lineNumber:155,columnNumber:11},this)]},void 0,!0,{fileName:Jl,lineNumber:153,columnNumber:9},this)]},void 0,!0,{fileName:Jl,lineNumber:143,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Modal Example"},void 0,!1,{fileName:Jl,lineNumber:134,columnNumber:7},this)}function it(){const[e,i]=(0,$l.useState)(!1),n=[(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:Jl,lineNumber:166,columnNumber:5},this)];return e?(0,Kl.jsxDEV)(Gl.Modal,{buttons:n,onCancel:()=>i(!1),title:"Modal with overflowing content",children:(0,Kl.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,Kl.jsxDEV)(Zl.LoremIpsum,{},void 0,!1,{fileName:Jl,lineNumber:192,columnNumber:11},this)},void 0,!1,{fileName:Jl,lineNumber:191,columnNumber:9},this)},void 0,!1,{fileName:Jl,lineNumber:186,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Long Modal"},void 0,!1,{fileName:Jl,lineNumber:177,columnNumber:7},this)}function nt(){const[e,i]=(0,$l.useState)(!1);return e?(0,Kl.jsxDEV)(Gl.ConfirmModal,{confirmAction:"OK",message:"Are you sure you want to take out a second mortgage?",onCancel:()=>i(!1),onConfirm:()=>alert("ok"),title:"Confirm this"},void 0,!1,{fileName:Jl,lineNumber:213,columnNumber:7},this):(0,Kl.jsxDEV)(Gl.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show ConfirmModal Example"},void 0,!1,{fileName:Jl,lineNumber:204,columnNumber:7},this)}var lt={};Object.defineProperty(lt,"__esModule",{value:!0}),lt.default=function(){const[e,i]=(0,tt.useState)(!0),[n,l]=(0,tt.useState)(!1),[t,r]=(0,tt.useState)(!0);return(0,ut.jsxDEV)(ot.default.Page,{title:"Forms",children:[(0,ut.jsxDEV)(ot.default.Pattern,{title:"LabeledCheckbox",children:[(0,ut.jsxDEV)(ot.default.Example,{title:"Unchecked (default)",children:[(0,ut.jsxDEV)("div",{style:"font-size: 2em",children:[n&&"🍉"," "]},void 0,!0,{fileName:at,lineNumber:19,columnNumber:11},this),(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.LabeledCheckbox,{checked:n,name:"test-alternative",onToggle:e=>l(e),children:"I want a watermelon"},void 0,!1,{fileName:at,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:at,lineNumber:18,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"Checked",children:[(0,ut.jsxDEV)("div",{style:"font-size: 2em",children:e&&"🥪"},void 0,!1,{fileName:at,lineNumber:35,columnNumber:11},this),(0,ut.jsxDEV)(ot.default.Demo,{style:{width:"300px"},withSource:!0,children:(0,ut.jsxDEV)(rt.LabeledCheckbox,{name:"test",checked:e,onToggle:e=>i(e),children:"I want a sandwich"},void 0,!1,{fileName:at,lineNumber:37,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:36,columnNumber:11},this)]},void 0,!0,{fileName:at,lineNumber:34,columnNumber:9},this)]},void 0,!0,{fileName:at,lineNumber:17,columnNumber:7},this),(0,ut.jsxDEV)(ot.default.Pattern,{title:"TextInput",children:[(0,ut.jsxDEV)("p",{children:["The ",(0,ut.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:at,lineNumber:50,columnNumber:15},this)," component is a basic wrapper around an",(0,ut.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:at,lineNumber:51,columnNumber:11},this)," field."]},void 0,!0,{fileName:at,lineNumber:49,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"Basic usage",children:(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.TextInput,{name:"my-input"},void 0,!1,{fileName:at,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:54,columnNumber:11},this)},void 0,!1,{fileName:at,lineNumber:53,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"As type='url'",children:[(0,ut.jsxDEV)("p",{children:[(0,ut.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:at,lineNumber:61,columnNumber:13},this)," renders an ",(0,ut.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:at,lineNumber:61,columnNumber:47},this)," field of"," ",(0,ut.jsxDEV)("code",{children:'type="text"'},void 0,!1,{fileName:at,lineNumber:62,columnNumber:13},this)," by default, but text-like `type` values are also supported (",(0,ut.jsxDEV)("code",{children:"email"},void 0,!1,{fileName:at,lineNumber:63,columnNumber:40},this),", ",(0,ut.jsxDEV)("code",{children:"search"},void 0,!1,{fileName:at,lineNumber:63,columnNumber:60},this),","," ",(0,ut.jsxDEV)("code",{children:"url"},void 0,!1,{fileName:at,lineNumber:64,columnNumber:13},this),")."]},void 0,!0,{fileName:at,lineNumber:60,columnNumber:11},this),(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.TextInput,{name:"my-input",type:"url"},void 0,!1,{fileName:at,lineNumber:67,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:66,columnNumber:11},this)]},void 0,!0,{fileName:at,lineNumber:59,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"Error state",children:(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.TextInput,{name:"my-input",hasError:!0},void 0,!1,{fileName:at,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:72,columnNumber:11},this)},void 0,!1,{fileName:at,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:at,lineNumber:48,columnNumber:7},this),(0,ut.jsxDEV)(ot.default.Pattern,{title:"TextInputWithButton",children:[(0,ut.jsxDEV)("p",{children:["This component wraps the ",(0,ut.jsxDEV)("code",{children:"text-input-with-button"},void 0,!1,{fileName:at,lineNumber:80,columnNumber:36},this)," pattern: a text input on the left with an associated icon-only button on the right."]},void 0,!0,{fileName:at,lineNumber:79,columnNumber:9},this),(0,ut.jsxDEV)("p",{children:["Current usage favors the ",(0,ut.jsxDEV)("code",{children:"dark"},void 0,!1,{fileName:at,lineNumber:85,columnNumber:36},this)," variant of"," ",(0,ut.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:at,lineNumber:86,columnNumber:11},this),"."]},void 0,!0,{fileName:at,lineNumber:84,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"Basic usage",children:(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.TextInputWithButton,{children:[(0,ut.jsxDEV)(rt.TextInput,{name:"my-input"},void 0,!1,{fileName:at,lineNumber:91,columnNumber:15},this),(0,ut.jsxDEV)(rt.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:at,lineNumber:92,columnNumber:15},this)]},void 0,!0,{fileName:at,lineNumber:90,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:89,columnNumber:11},this)},void 0,!1,{fileName:at,lineNumber:88,columnNumber:9},this),(0,ut.jsxDEV)(ot.default.Example,{title:"Error state",children:(0,ut.jsxDEV)(ot.default.Demo,{withSource:!0,children:(0,ut.jsxDEV)(rt.TextInputWithButton,{children:[(0,ut.jsxDEV)(rt.TextInput,{name:"my-input",hasError:t},void 0,!1,{fileName:at,lineNumber:100,columnNumber:15},this),(0,ut.jsxDEV)(rt.IconButton,{icon:"arrow-right",variant:"dark",title:"go",onClick:()=>r(!t)},void 0,!1,{fileName:at,lineNumber:101,columnNumber:15},this)]},void 0,!0,{fileName:at,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:at,lineNumber:98,columnNumber:11},this)},void 0,!1,{fileName:at,lineNumber:97,columnNumber:9},this)]},void 0,!0,{fileName:at,lineNumber:78,columnNumber:7},this)]},void 0,!0,{fileName:at,lineNumber:16,columnNumber:5},this)};var tt=R,rt=z,ot=function(e){return e&&e.__esModule?e:{default:e}}(pn),ut=se,at="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormComponents.js";var mt={};Object.defineProperty(mt,"__esModule",{value:!0}),mt.default=function(){return(0,dt.jsxDEV)(ct.default.Page,{title:"Panel",children:(0,dt.jsxDEV)(ct.default.Pattern,{title:"Panel",children:[(0,dt.jsxDEV)(ct.default.Example,{title:"Basic usage",children:(0,dt.jsxDEV)(ct.default.Demo,{withSource:!0,children:(0,dt.jsxDEV)(st.Panel,{title:"Basic panel",children:(0,dt.jsxDEV)("p",{children:"Here is a panel with no close button and very simple content."},void 0,!1,{fileName:ht,lineNumber:11,columnNumber:15},this)},void 0,!1,{fileName:ht,lineNumber:10,columnNumber:13},this)},void 0,!1,{fileName:ht,lineNumber:9,columnNumber:11},this)},void 0,!1,{fileName:ht,lineNumber:8,columnNumber:9},this),(0,dt.jsxDEV)(ct.default.Example,{title:"With close button",children:(0,dt.jsxDEV)(ct.default.Demo,{withSource:!0,children:(0,dt.jsxDEV)(st.Panel,{title:"Basic panel with close button",onClose:()=>alert("close clicked"),children:[(0,dt.jsxDEV)("p",{children:"Here is a panel with very basic content and a close button."},void 0,!1,{fileName:ht,lineNumber:23,columnNumber:15},this),(0,dt.jsxDEV)("p",{children:["Providing an ",(0,dt.jsxDEV)("code",{children:"onClose"},void 0,!1,{fileName:ht,lineNumber:25,columnNumber:30},this)," function will cause a close button to render."]},void 0,!0,{fileName:ht,lineNumber:24,columnNumber:15},this)]},void 0,!0,{fileName:ht,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:ht,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:ht,lineNumber:17,columnNumber:9},this),(0,dt.jsxDEV)(ct.default.Example,{title:"With header icon",children:(0,dt.jsxDEV)(ct.default.Demo,{withSource:!0,children:(0,dt.jsxDEV)(st.Panel,{icon:"edit",title:"Panel with optional heading icon",onClose:()=>alert("close clicked"),children:"This panel has an optional icon in the header."},void 0,!1,{fileName:ht,lineNumber:34,columnNumber:13},this)},void 0,!1,{fileName:ht,lineNumber:33,columnNumber:11},this)},void 0,!1,{fileName:ht,lineNumber:32,columnNumber:9},this),(0,dt.jsxDEV)(ct.default.Example,{title:"Clean theme",children:(0,dt.jsxDEV)(ct.default.Demo,{withSource:!0,children:(0,dt.jsxDEV)("div",{className:"theme-clean",style:"width:100%",children:(0,dt.jsxDEV)(st.Panel,{icon:"edit",title:"Panel with clean-theme styling",onClose:()=>alert("close clicked"),children:"This panel has an optional icon in the header."},void 0,!1,{fileName:ht,lineNumber:47,columnNumber:15},this)},void 0,!1,{fileName:ht,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:ht,lineNumber:45,columnNumber:11},this)},void 0,!1,{fileName:ht,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:ht,lineNumber:7,columnNumber:7},this)},void 0,!1,{fileName:ht,lineNumber:6,columnNumber:5},this)};var st=z,ct=function(e){return e&&e.__esModule?e:{default:e}}(pn),dt=se,ht="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelComponents.js";var Nt={};Object.defineProperty(Nt,"__esModule",{value:!0}),Nt.default=function(){return(0,vt.jsxDEV)(ft.default.Page,{title:"Spinner",children:[(0,vt.jsxDEV)("p",{children:["The ",(0,vt.jsxDEV)("code",{children:"Spinner"},void 0,!1,{fileName:pt,lineNumber:8,columnNumber:13},this)," component is based on the ",(0,vt.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:pt,lineNumber:8,columnNumber:60},this)," ","pattern and renders an animated SVG."]},void 0,!0,{fileName:pt,lineNumber:7,columnNumber:7},this),(0,vt.jsxDEV)(ft.default.Pattern,{title:"Spinner",children:[(0,vt.jsxDEV)(ft.default.Example,{title:"Basic usage",children:(0,vt.jsxDEV)(ft.default.Demo,{withSource:!0,children:(0,vt.jsxDEV)(bt.Spinner,{},void 0,!1,{fileName:pt,lineNumber:14,columnNumber:13},this)},void 0,!1,{fileName:pt,lineNumber:13,columnNumber:11},this)},void 0,!1,{fileName:pt,lineNumber:12,columnNumber:9},this),(0,vt.jsxDEV)(ft.default.Example,{title:"Small size",children:(0,vt.jsxDEV)(ft.default.Demo,{withSource:!0,children:(0,vt.jsxDEV)(bt.Spinner,{size:"small"},void 0,!1,{fileName:pt,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:pt,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:pt,lineNumber:17,columnNumber:9},this),(0,vt.jsxDEV)(ft.default.Example,{title:"Large size",children:(0,vt.jsxDEV)(ft.default.Demo,{withSource:!0,children:(0,vt.jsxDEV)(bt.Spinner,{size:"large"},void 0,!1,{fileName:pt,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:pt,lineNumber:23,columnNumber:11},this)},void 0,!1,{fileName:pt,lineNumber:22,columnNumber:9},this)]},void 0,!0,{fileName:pt,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:pt,lineNumber:6,columnNumber:5},this)};var bt=z,ft=function(e){return e&&e.__esModule?e:{default:e}}(pn),vt=se,pt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js";var xt={};Object.defineProperty(xt,"__esModule",{value:!0}),xt.default=function(){return(0,Vt.jsxDEV)(gt.default.Page,{title:"Table",children:(0,Vt.jsxDEV)(gt.default.Pattern,{title:"Table",children:[(0,Vt.jsxDEV)(Ct,{},void 0,!1,{fileName:_t,lineNumber:155,columnNumber:9},this),(0,Vt.jsxDEV)(Lt,{},void 0,!1,{fileName:_t,lineNumber:156,columnNumber:9},this),(0,Vt.jsxDEV)(St,{},void 0,!1,{fileName:_t,lineNumber:157,columnNumber:9},this)]},void 0,!0,{fileName:_t,lineNumber:154,columnNumber:7},this)},void 0,!1,{fileName:_t,lineNumber:153,columnNumber:5},this)};var Dt=R,Et=z,gt=function(e){return e&&e.__esModule?e:{default:e}}(pn),jt=ll,Vt=se,_t="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";const wt=e=>(0,Vt.jsxDEV)(Vt.Fragment,{children:[(0,Vt.jsxDEV)("td",{children:e.displayName},void 0,!1,{fileName:_t,lineNumber:11,columnNumber:5},void 0),(0,Vt.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:_t,lineNumber:12,columnNumber:5},void 0)]},void 0,!0),{tableHeaders:yt,items:kt}=(0,jt.sampleTableContent)();function Ct(){const[e,i]=(0,Dt.useState)(!1),[n,l]=(0,Dt.useState)(null);return(0,Vt.jsxDEV)(gt.default.Example,{title:"Basic Table",variant:"wide",children:[(0,Vt.jsxDEV)("p",{children:["A ",(0,Vt.jsxDEV)("code",{children:"Table"},void 0,!1,{fileName:_t,lineNumber:34,columnNumber:11},this)," will fill available space if none of its ancestors apply any constraints on height or width. It will fill 100% of its available space horizontally, and take up all the vertical space it needs. In this case, it will change vertical size during loading."]},void 0,!0,{fileName:_t,lineNumber:33,columnNumber:7},this),(0,Vt.jsxDEV)(gt.default.Demo,{children:[(0,Vt.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,Vt.jsxDEV)(Et.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:_t,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:_t,lineNumber:40,columnNumber:9},this),(0,Vt.jsxDEV)(Et.Table,{accessibleLabel:"File list",isLoading:e,items:kt,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>wt(e),tableHeaders:yt},void 0,!1,{fileName:_t,lineNumber:45,columnNumber:9},this)]},void 0,!0,{fileName:_t,lineNumber:39,columnNumber:7},this)]},void 0,!0,{fileName:_t,lineNumber:32,columnNumber:5},this)}function Lt(){const[e,i]=(0,Dt.useState)(!1),[n,l]=(0,Dt.useState)(kt[kt.length-1]);return(0,Vt.jsxDEV)(gt.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,Vt.jsxDEV)("p",{children:[(0,Vt.jsxDEV)("code",{children:"Tables"},void 0,!1,{fileName:_t,lineNumber:69,columnNumber:9},this)," render inside of a ",(0,Vt.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:_t,lineNumber:69,columnNumber:48},this)," container component, which gives the table a scroll context and allows it to scroll if it overflows. Apply height/width constraints to an appropriate parent elements to enable this. Height will not change when loading."]},void 0,!0,{fileName:_t,lineNumber:68,columnNumber:7},this),(0,Vt.jsxDEV)("p",{children:["In this example, the last item in the table is pre-selected. Also in this example: an additional style is added to the first ",(0,Vt.jsxDEV)("code",{children:"td"},void 0,!1,{fileName:_t,lineNumber:76,columnNumber:65},this)," ","in each row to make its foreground color different (NB: the example here would not meet ARIA contrast requirements). This demonstrates style extension/override."]},void 0,!0,{fileName:_t,lineNumber:74,columnNumber:7},this),(0,Vt.jsxDEV)(gt.default.Demo,{withSource:!0,children:[(0,Vt.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,Vt.jsxDEV)(Et.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:_t,lineNumber:83,columnNumber:11},this)},void 0,!1,{fileName:_t,lineNumber:82,columnNumber:9},this),(0,Vt.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-padding--3",style:"max-height:300px;height:300px;",children:(0,Vt.jsxDEV)(Et.Table,{accessibleLabel:"File list",isLoading:e,items:e?[]:kt,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>(e=>(0,Vt.jsxDEV)(Vt.Fragment,{children:[(0,Vt.jsxDEV)("td",{className:"hyp-u-color--grey-6",children:e.displayName},void 0,!1,{fileName:_t,lineNumber:18,columnNumber:5},void 0),(0,Vt.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:_t,lineNumber:19,columnNumber:5},void 0)]},void 0,!0))(e),tableHeaders:yt},void 0,!1,{fileName:_t,lineNumber:91,columnNumber:11},this)},void 0,!1,{fileName:_t,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:_t,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:_t,lineNumber:67,columnNumber:5},this)}function St(){const[e,i]=(0,Dt.useState)(!1),n=[],[l,t]=(0,Dt.useState)(n[n.length-1]),r=(0,Vt.jsxDEV)("p",{children:["There are no files available to show."," ",(0,Vt.jsxDEV)("a",{href:"https://www.example.com",children:"Learn more."},void 0,!1,{fileName:_t,lineNumber:117,columnNumber:7},this)]},void 0,!0,{fileName:_t,lineNumber:115,columnNumber:5},this);return(0,Vt.jsxDEV)(gt.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,Vt.jsxDEV)("p",{children:["This Table has no items (it is empty). When not in loading state, the provided ",(0,Vt.jsxDEV)("code",{children:"emptyItemsMessage"},void 0,!1,{fileName:_t,lineNumber:125,columnNumber:18},this)," will render centered in the table."]},void 0,!0,{fileName:_t,lineNumber:123,columnNumber:7},this),(0,Vt.jsxDEV)(gt.default.Demo,{withSource:!0,children:[(0,Vt.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,Vt.jsxDEV)(Et.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:_t,lineNumber:130,columnNumber:11},this)},void 0,!1,{fileName:_t,lineNumber:129,columnNumber:9},this),(0,Vt.jsxDEV)(Et.Table,{accessibleLabel:"File list",emptyItemsMessage:r,isLoading:e,items:n,selectedItem:l,onSelectItem:e=>t(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>wt(e),tableHeaders:yt},void 0,!1,{fileName:_t,lineNumber:135,columnNumber:9},this)]},void 0,!0,{fileName:_t,lineNumber:128,columnNumber:7},this)]},void 0,!0,{fileName:_t,lineNumber:122,columnNumber:5},this)}var Bt={};Object.defineProperty(Bt,"__esModule",{value:!0}),Bt.default=function(){return(0,Tt.jsxDEV)(Pt.default.Page,{title:"Thumbnail",children:[(0,Tt.jsxDEV)(Pt.default.Pattern,{title:"Thumbnail",children:[(0,Tt.jsxDEV)("p",{children:["The ",(0,Tt.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:zt,lineNumber:9,columnNumber:15},this)," component handles rendering a thumbnail or other image, and provides a loading state and an empty (placeholder) state. If ",(0,Tt.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:zt,lineNumber:11,columnNumber:21},this)," has no content, it will render a placeholder. If its ",(0,Tt.jsxDEV)("code",{children:"isLoading"},void 0,!1,{fileName:zt,lineNumber:12,columnNumber:31},this)," prop is set to"," ",(0,Tt.jsxDEV)("code",{children:"true"},void 0,!1,{fileName:zt,lineNumber:13,columnNumber:11},this),", it will render a loading state."]},void 0,!0,{fileName:zt,lineNumber:8,columnNumber:9},this),(0,Tt.jsxDEV)("p",{children:"The following examples are rendered within a parent container sized to 250x175px. The Thumbnail will fill, but not exceed, the available space."},void 0,!1,{fileName:zt,lineNumber:15,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Empty thumbnail with default placeholder",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,Tt.jsxDEV)(It.Thumbnail,{},void 0,!1,{fileName:zt,lineNumber:24,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:23,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:22,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:21,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Thumbnail with image content",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,Tt.jsxDEV)(It.Thumbnail,{children:(0,Tt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:zt,lineNumber:33,columnNumber:17},this)},void 0,!1,{fileName:zt,lineNumber:32,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:29,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Empty thumbnail in loading state",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,Tt.jsxDEV)(It.Thumbnail,{isLoading:!0},void 0,!1,{fileName:zt,lineNumber:42,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:41,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:40,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:39,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Thumbnail in loading state",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,Tt.jsxDEV)(It.Thumbnail,{isLoading:!0,children:(0,Tt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:zt,lineNumber:51,columnNumber:17},this)},void 0,!1,{fileName:zt,lineNumber:50,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:48,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:47,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Empty thumbnail with custom placeholder",children:[(0,Tt.jsxDEV)("p",{children:"Placeholder can be any JSX"},void 0,!1,{fileName:zt,lineNumber:58,columnNumber:11},this),(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,Tt.jsxDEV)(It.Thumbnail,{placeholder:"!"},void 0,!1,{fileName:zt,lineNumber:61,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:zt,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:zt,lineNumber:7,columnNumber:7},this),(0,Tt.jsxDEV)(Pt.default.Pattern,{title:"Thumbnail (smaller)",children:[(0,Tt.jsxDEV)("p",{children:"These examples are within a 100x150px parent."},void 0,!1,{fileName:zt,lineNumber:68,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Smaller loading spinner",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,Tt.jsxDEV)(It.Thumbnail,{isLoading:!0,size:"small"},void 0,!1,{fileName:zt,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:70,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:69,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Constrained image proportions",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,Tt.jsxDEV)(It.Thumbnail,{size:"small",children:(0,Tt.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:zt,lineNumber:81,columnNumber:17},this)},void 0,!1,{fileName:zt,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:79,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:78,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:77,columnNumber:9},this),(0,Tt.jsxDEV)(Pt.default.Example,{title:"Constrained image proportions: placeholder",children:(0,Tt.jsxDEV)(Pt.default.Demo,{withSource:!0,children:(0,Tt.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,Tt.jsxDEV)(It.Thumbnail,{size:"small"},void 0,!1,{fileName:zt,lineNumber:90,columnNumber:15},this)},void 0,!1,{fileName:zt,lineNumber:89,columnNumber:13},this)},void 0,!1,{fileName:zt,lineNumber:88,columnNumber:11},this)},void 0,!1,{fileName:zt,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:zt,lineNumber:67,columnNumber:7},this)]},void 0,!0,{fileName:zt,lineNumber:6,columnNumber:5},this)};var It=z,Pt=function(e){return e&&e.__esModule?e:{default:e}}(pn),Tt=se,zt="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailComponents.js";Object.defineProperty(fn,"__esModule",{value:!0}),fn.getRoutes=function(e){if(e)return ir.filter((i=>i.group===e));return ir};var Mt=er(vn),Ht=er(In),At=er(qn),Ot=er(Yn),qt=er(nl),Ft=er(dl),Ut=er(vl),Rt=er(gl),$t=er(yl),Wt=er(Bl),Gt=er(Ml),Zt=er(Ul),Kt=er(lt),Jt=er(mt),Yt=er(Nt),Qt=er(xt),Xt=er(Bt);function er(e){return e&&e.__esModule?e:{default:e}}const ir=[{route:/^\/?$/,title:"Home",component:Mt.default,group:"home"},{route:"/foundations-colors",title:"Colors",component:Ht.default,group:"foundations"},{route:"/foundations-layout",title:"Layout",component:At.default,group:"foundations"},{route:"/patterns-containers",title:"Containers",component:qt.default,group:"patterns"},{route:"/patterns-forms",title:"Forms",component:Ot.default,group:"patterns"},{route:"/patterns-panels",title:"Panels",component:Ft.default,group:"patterns"},{route:"/patterns-spinners",title:"Spinners",component:Ut.default,group:"patterns"},{route:"/patterns-tables",title:"Tables",component:Rt.default,group:"patterns"},{route:"/patterns-thumbnails",title:"Thumbnails",component:$t.default,group:"patterns"},{route:"/components-buttons",title:"Buttons",component:Wt.default,group:"components"},{route:"/components-containers",title:"Containers",component:Gt.default,group:"components"},{route:"/components-dialogs",title:"Dialogs",component:Zt.default,group:"components"},{route:"/components-forms",title:"Forms",component:Kt.default,group:"components"},{route:"/components-panel",title:"Panel",component:Jt.default,group:"components"},{route:"/components-spinner",title:"Spinner",component:Yt.default,group:"components"},{route:"/components-table",title:"Table",component:Qt.default,group:"components"},{route:"/components-thumbnail",title:"Thumbnail",component:Xt.default,group:"components"}];var nr={};Object.defineProperty(nr,"__esModule",{value:!0}),nr.useRoute=function(e,i){const[n,l]=(0,lr.useState)((()=>tr(e))),t=(0,lr.useMemo)((()=>i.find((e=>n.match(e.route)))),[n,i]),r=`${t.title}: Hypothesis UI playground`;(0,lr.useEffect)((()=>{document.title=r}),[r]),(0,lr.useEffect)((()=>{const i=()=>{l(tr(e))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}}),[e]);return[t,(i,n)=>{i.preventDefault(),history.pushState({},r,e+n),l(n)}]};var lr=R;function tr(e){return location.pathname.slice(e.length)}Object.defineProperty(bn,"__esModule",{value:!0}),bn.default=function({baseURL:e="/ui-playground",extraRoutes:i=[]}){const n=(0,ur.getRoutes)().concat(i),[l,t]=(0,ar.useRoute)(e,n),r=l?(0,mr.jsxDEV)(l.component,{},void 0,!1,{fileName:sr,lineNumber:34,columnNumber:5},this):(0,mr.jsxDEV)(mr.Fragment,{children:[(0,mr.jsxDEV)("h1",{className:"heading",children:":("},void 0,!1,{fileName:sr,lineNumber:37,columnNumber:7},this),(0,mr.jsxDEV)("p",{children:"Page not found."},void 0,!1,{fileName:sr,lineNumber:38,columnNumber:7},this)]},void 0,!0),o=[{title:"Foundations",routes:(0,ur.getRoutes)("foundations")},{title:"Patterns",routes:(0,ur.getRoutes)("patterns")},{title:"Common Components",routes:(0,ur.getRoutes)("components")}];i.length&&o.push({title:"Application Patterns",routes:i});return(0,mr.jsxDEV)("main",{className:"PlaygroundApp",children:[(0,mr.jsxDEV)("div",{className:"PlaygroundApp__sidebar",children:[(0,mr.jsxDEV)("div",{className:"PlaygroundApp__sidebar-home",children:(0,mr.jsxDEV)("a",{href:e,onClick:e=>t(e,"/"),children:(0,mr.jsxDEV)(or.SvgIcon,{name:"logo"},void 0,!1,{fileName:sr,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:sr,lineNumber:56,columnNumber:11},this)},void 0,!1,{fileName:sr,lineNumber:55,columnNumber:9},this),o.map((e=>(0,mr.jsxDEV)("div",{children:[(0,mr.jsxDEV)("h2",{children:e.title},void 0,!1,{fileName:sr,lineNumber:62,columnNumber:13},this),(0,mr.jsxDEV)("ul",{children:e.routes.map((({route:e,title:i})=>(0,mr.jsxDEV)("li",{children:(0,mr.jsxDEV)("a",{className:(0,rr.default)("PlaygroundApp__nav-item",{"is-active":l.route===e}),href:`${e}`,onClick:i=>t(i,e),children:i},void 0,!1,{fileName:sr,lineNumber:66,columnNumber:19},this)},i,!1,{fileName:sr,lineNumber:65,columnNumber:17},this)))},void 0,!1,{fileName:sr,lineNumber:63,columnNumber:13},this)]},e.title,!0,{fileName:sr,lineNumber:61,columnNumber:11},this)))]},void 0,!0,{fileName:sr,lineNumber:54,columnNumber:7},this),(0,mr.jsxDEV)("div",{className:"PlaygroundApp__content",children:r},void 0,!1,{fileName:sr,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:sr,lineNumber:53,columnNumber:5},this)};var rr=function(e){return e&&e.__esModule?e:{default:e}}(H.exports),or=U,ur=fn,ar=nr,mr=se,sr="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js";Object.defineProperty(u,"__esModule",{value:!0});var cr,dr=u.startApp=function({baseURL:e="",extraRoutes:i=[],icons:n={}}={}){const l={...br.default,...n};(0,Nr.registerIcons)(l);const t=document.querySelector("#app");(0,hr.render)((0,vr.jsxDEV)(fr.default,{baseURL:e,extraRoutes:i},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/index.js",lineNumber:34,columnNumber:5},this),t)},hr=a,Nr=z,br=pr(Wi),fr=pr(bn),vr=se;function pr(e){return e&&e.__esModule?e:{default:e}}cr={__e:function(e,i){for(var n,l,t;i=i.__;)if((n=i.__c)&&!n.__)try{if((l=n.constructor)&&null!=l.getDerivedStateFromError&&(n.setState(l.getDerivedStateFromError(e)),t=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),t=n.__d),t)return n.__E=n}catch(i){e=i}throw e},__v:0},"function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout;var xr,Dr,Er,gr=0,jr=[],Vr=cr.__b,_r=cr.__r,wr=cr.diffed,yr=cr.__c,kr=cr.unmount;function Cr(e,i){cr.__h&&cr.__h(Dr,e,gr||i),gr=0;var n=Dr.__H||(Dr.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function Lr(e){return gr=5,function(e,i){var n=Cr(xr++,7);return Tr(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}((function(){return{current:e}}),[])}function Sr(){jr.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(Ir),e.__H.__h.forEach(Pr),e.__H.__h=[]}catch(i){e.__H.__h=[],cr.__e(i,e.__v)}})),jr=[]}cr.__b=function(e){Dr=null,Vr&&Vr(e)},cr.__r=function(e){_r&&_r(e),xr=0;var i=(Dr=e.__c).__H;i&&(i.__h.forEach(Ir),i.__h.forEach(Pr),i.__h=[])},cr.diffed=function(e){wr&&wr(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==jr.push(i)&&Er===cr.requestAnimationFrame||((Er=cr.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(l),Br&&cancelAnimationFrame(i),setTimeout(e)},l=setTimeout(n,100);Br&&(i=requestAnimationFrame(n))})(Sr)),Dr=void 0},cr.__c=function(e,i){i.some((function(e){try{e.__h.forEach(Ir),e.__h=e.__h.filter((function(e){return!e.__||Pr(e)}))}catch(n){i.some((function(e){e.__h&&(e.__h=[])})),i=[],cr.__e(n,e.__v)}})),yr&&yr(e,i)},cr.unmount=function(e){kr&&kr(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(Ir)}catch(e){cr.__e(e,i.__v)}};var Br="function"==typeof requestAnimationFrame;function Ir(e){var i=Dr;"function"==typeof e.__c&&e.__c(),Dr=i}function Pr(e){var i=Dr;e.__c=e.__(),Dr=i}function Tr(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}function zr(e,i,n,l,t){var r={};for(var o in i)"ref"!=o&&(r[o]=i[o]);var u,a,m={type:e,props:r,key:n,ref:i&&i.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++cr.__v,__source:l,__self:t};if("function"==typeof e&&(u=e.defaultProps))for(a in u)void 0===r[a]&&(r[a]=u[a]);return cr.vnode&&cr.vnode(m),m}let Mr={};function Hr({name:e,className:i="",inline:n=!1,title:l=""}){if(!Mr[e])throw new Error(`Icon name "${e}" is not registered`);const t=Mr[e],r=Lr();!function(e,i){var n=Cr(xr++,4);!cr.__s&&Tr(n.__H,i)&&(n.__=e,n.__H=i,Dr.__h.push(n))}((()=>{const e=r.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,t]);const o={};return l&&(o.title=l),zr("span",{className:F("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:t},ref:r,...o},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5})}function Ar(e,{reset:i=!1}={}){i&&(Mr={}),Object.assign(Mr,e)}var Or="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function qr({buttonRef:e,classes:i,className:n,icon:l,iconPosition:t="left",size:r="medium",variant:o="normal",expanded:u,pressed:a,type:m="button",...s}){const c={"aria-expanded":u,"aria-pressed":a,"aria-label":s.title};return zr("button",{ref:e,className:F(n,`${n}--${r}`,`${n}--${o}`,{[`${n}--icon-${t}`]:l},i),type:m,...c,...s},void 0,!1,{fileName:Or,lineNumber:73,columnNumber:5})}function Fr({className:e="Hyp-IconButton",...i}){const{icon:n}=i;return zr(qr,{className:e,...i,children:zr(Hr,{name:n},void 0,!1,{fileName:Or,lineNumber:100,columnNumber:7})},void 0,!1,{fileName:Or,lineNumber:99,columnNumber:5})}function Ur({children:e,className:i="Hyp-LabeledButton",...n}){const{icon:l,iconPosition:t="left"}=n;return zr(qr,{className:i,...n,children:[l&&"left"===t&&zr(Hr,{name:l},void 0,!1,{fileName:Or,lineNumber:118,columnNumber:43}),e,l&&"right"===t&&zr(Hr,{name:l},void 0,!1,{fileName:Or,lineNumber:120,columnNumber:44})]},void 0,!0,{fileName:Or,lineNumber:117,columnNumber:5})}function Rr(e){return zr(qr,{className:"Hyp-LinkButton",...e},void 0,!1,{fileName:Or,lineNumber:131,columnNumber:10})}Ar({"hyp-checkbox":Ve}),Ar({"hyp-cancel":Oe}),Ar({"hyp-cancel":Oe}),Ar({"hyp-spinner":Di});var $r='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cancel"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8l3.536-3.536L8 8 4.464 4.464 8 8zm0 0l-3.536 3.536L8 8l3.536 3.536L8 8z"></path></g></svg>\n';dr({baseURL:"/ui-playground",extraRoutes:[{route:"/buttons",title:"Buttons",component:function(){return zr(Dn.Page,{title:"Buttons",children:[zr(Dn.Pattern,{title:"PublishControlButton",children:[zr("p",{children:["Customizes ",zr("code",{children:"LabeledButton"})," styling to disable"," ",zr("code",{children:"border-radius"})," on the right side. This makes the publish button fit with a drop-down menu next to it."]}),zr(Dn.Example,{title:"Basic usage",children:zr(Dn.Demo,{withSource:!0,children:zr(Ur,{classes:"PublishControlButton",variant:"primary",children:"Publish to My Group"})})})]}),zr(Dn.Pattern,{title:"InlineLinkButton",children:[zr("p",{children:["Customizes ",zr("code",{children:"LinkButton"})," styling to position inline; dark variant always has underline."]}),zr(Dn.Example,{title:"Basic usage",children:zr(Dn.Demo,{withSource:!0,children:zr(Rr,{classes:"InlineLinkButton",children:"Log in"})})}),zr(Dn.Example,{title:"Dark variant, customized with underline",children:zr(Dn.Demo,{withSource:!0,children:zr(Rr,{classes:"InlineLinkButton InlineLinkButton--underlined",variant:"dark",children:"Log in"})})})]}),zr(Dn.Pattern,{title:"Non-Responsive IconButton",children:[zr("p",{children:"An icon-only button overriding responsive affordances to fit in specific or tight spaces. These buttons do not have a minimum size (for tap-target size) applied for touch-screen/narrow viewports."}),zr(Dn.Example,{variant:"wide",title:"Sizes (medium is default)",children:zr(Dn.Demo,{withSource:!0,children:[zr(Fr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"small"}),zr(Fr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"medium"}),zr(Fr,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"large"})]})})]}),zr(Dn.Pattern,{title:"PaginationPageButton",children:[zr("p",{children:["Style customization for ",zr("code",{children:"LabeledButton"})," that gives it asymmetrical padding to fit well as pagination controls in the Notebook."]}),zr(Dn.Example,{title:"Page numbers",children:zr(Dn.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[zr(Ur,{classes:"PaginationPageButton",variant:"dark",children:"9"}),zr(Ur,{classes:"PaginationPageButton",variant:"dark",pressed:!0,children:"10"}),zr(Ur,{classes:"PaginationPageButton",variant:"dark",children:"11"})]})}),zr(Dn.Example,{title:"Navigation buttons",children:zr(Dn.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[zr(Ur,{classes:"PaginationPageButton",icon:"arrow-left",variant:"dark",children:"Prev"}),zr(Ur,{classes:"PaginationPageButton",icon:"arrow-right",iconPosition:"right",variant:"dark",children:"Next"})]})})]})]})},group:"components"}],icons:{add:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--plus"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8V3v5H3h5zm0 0v5-5h5-5z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',annotate:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M15 0c.27 0 .505.099.703.297A.961.961 0 0116 1v15l-4-3H1a.974.974 0 01-.703-.29A.953.953 0 010 12V1C0 .719.096.482.29.29A.966.966 0 011 0h14zM7 3l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C4.156 5.229 4 6 4 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188C4.729 8.854 5.082 9 5.5 9c.417 0 .77-.146 1.063-.438C6.854 8.271 7 7.918 7 7.5c0-.417-.146-.77-.438-1.063A1.447 1.447 0 005.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L7 4V3zm5 0l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C9.156 5.229 9 6 9 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188c.291.291.645.437 1.062.437.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.447 1.447 0 0010.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L12 4V3z"/>\n</svg>\n',"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12L3 8l4-4M4 8h9-9z"></path></g></svg>\n',"arrow-right":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4l4 4-4 4m3-4H3h9z"></path></g></svg>\n',cancel:$r,"caret-right":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--caret-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4l4 4-4 4"></path></g></svg>\n',"cc-std":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-std"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.985 0c2.238 0 4.143.781 5.715 2.343a7.694 7.694 0 011.714 2.579C15.804 5.888 16 6.914 16 8a8.164 8.164 0 01-.579 3.078 7.344 7.344 0 01-1.707 2.536 8.222 8.222 0 01-2.657 1.772c-.99.41-2.014.614-3.071.614a7.775 7.775 0 01-3.036-.607 8.047 8.047 0 01-2.6-1.757A7.846 7.846 0 010 8c0-1.057.202-2.074.607-3.05A8.033 8.033 0 012.371 2.33C3.895.777 5.766 0 7.985 0zm.03 1.443c-1.83 0-3.367.638-4.615 1.914a6.878 6.878 0 00-1.45 2.15A6.301 6.301 0 001.443 8c0 .858.168 1.684.507 2.479a6.627 6.627 0 001.45 2.129 6.593 6.593 0 002.129 1.428c.79.329 1.619.493 2.485.493.857 0 1.688-.166 2.494-.5a6.91 6.91 0 002.178-1.442c1.247-1.22 1.871-2.748 1.871-4.586a6.57 6.57 0 00-.486-2.515 6.397 6.397 0 00-1.413-2.114C11.37 2.086 9.824 1.443 8.014 1.443zm-.1 5.229l-1.073.557c-.114-.238-.254-.405-.42-.5a.95.95 0 00-.465-.143c-.714 0-1.072.472-1.072 1.415 0 .428.09.77.271 1.028.181.257.448.386.8.386.467 0 .796-.229.987-.686l.985.5a2.35 2.35 0 01-2.1 1.257c-.714 0-1.29-.218-1.729-.657-.438-.438-.657-1.047-.657-1.828 0-.762.222-1.367.665-1.814.442-.448 1.002-.672 1.678-.672.991 0 1.7.385 2.13 1.157zm4.613 0l-1.057.557c-.114-.238-.255-.405-.421-.5a.972.972 0 00-.479-.143c-.714 0-1.072.472-1.072 1.415 0 .428.091.77.272 1.028.18.257.447.386.8.386.466 0 .795-.229.985-.686l1 .5c-.218.39-.514.698-.885.922a2.308 2.308 0 01-1.214.335c-.724 0-1.302-.218-1.735-.657-.434-.438-.65-1.047-.65-1.828 0-.762.22-1.367.664-1.814.442-.448 1.002-.672 1.678-.672.99 0 1.696.385 2.114 1.157z"></path></g></svg>\n',"cc-zero":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-zero"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.983 0c2.238 0 4.148.78 5.72 2.342a7.662 7.662 0 011.715 2.582c.39.962.582 1.99.582 3.076a8.13 8.13 0 01-.583 3.087 7.262 7.262 0 01-1.703 2.526 8.213 8.213 0 01-2.655 1.77c-.99.41-2.018.617-3.076.617a7.902 7.902 0 01-3.042-.6 8.301 8.301 0 01-2.6-1.759A8.087 8.087 0 01.6 11.042 7.84 7.84 0 010 8c0-1.057.2-2.07.6-3.042a8.12 8.12 0 011.77-2.633C3.893.772 5.764 0 7.983 0zm.034 1.44c-1.829 0-3.369.64-4.616 1.915a6.962 6.962 0 00-1.457 2.157 6.388 6.388 0 000 4.969 6.83 6.83 0 003.585 3.558c.79.324 1.62.487 2.488.487.857 0 1.681-.165 2.482-.498a6.88 6.88 0 002.184-1.446C13.931 11.364 14.56 9.838 14.56 8a6.57 6.57 0 00-.487-2.515 6.418 6.418 0 00-1.418-2.118C11.37 2.081 9.826 1.44 8.017 1.44zM8 3.395c2.641 0 3.305 2.492 3.305 4.605 0 2.113-.664 4.605-3.305 4.605S4.694 10.113 4.694 8l.007-.355c.073-2.027.804-4.25 3.299-4.25zm1.316 3.227L7.35 10.017c-.274.412-.083.645.219.774l.135.044c.091.022.19.034.297.034 1.357 0 1.422-1.938 1.422-2.869l-.007-.409a7.282 7.282 0 00-.06-.72l-.04-.25zM8 5.132c-1.258 0-1.406 1.66-1.421 2.646L6.577 8c0 .24.005.544.035.865l.027.244 1.759-3.232c.182-.316.09-.542-.101-.706A1.222 1.222 0 008 5.13z"></path></g></svg>\n',"collapse-menu":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M7.456 4.212a.804.804 0 0 1 1.088 0l6.23 5.867c.301.283.301.742 0 1.025l-.726.684a.804.804 0 0 1-1.087.001L8 7.139l-4.961 4.65a.804.804 0 0 1-1.087-.001l-.727-.684a.695.695 0 0 1 0-1.025l6.23-5.867z"/>\n</svg>',collapsed:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">\n <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />\n </g>\n</svg>\n',copy:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--copy"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 15H1V5h3m11-4v10H7V1h8z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',cursor:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="10px" height="30px" viewBox="0 0 10 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n \x3c!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --\x3e\n <title>Shape</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g transform="translate(-239.000000, -73.000000)" fill-rule="nonzero" fill="#000000">\n <g transform="translate(1.000000, 1.000000)">\n <path d="M243.3125,75.186875 C243.3125,73.535 243.3125,72.625 246.434687,72.625 L248,72.625 L248,72 L246.434687,72 C244.324375,72 243.402813,72.4684375 243,73.183125 C242.597187,72.4684375 241.675625,72 239.565313,72 L238,72 L238,72.625 L239.565313,72.625 C242.6875,72.6246875 242.6875,73.5346875 242.6875,75.186875 L242.6875,82 L242.6875,86.6875 L240.929375,86.6875 L240.929375,87.3125 L242.6875,87.3125 L242.6875,92 L242.6875,98.5434375 C242.6875,100.187188 242.6875,101.375 239.565313,101.375 L238,101.375 L238,102 L239.565313,102 C241.675625,102 242.5975,101.442813 243,100.6525 C243.402813,101.442813 244.324375,102 246.434687,102 L248,102 L248,101.375 L246.434687,101.375 C243.3125,101.374688 243.3125,100.187188 243.3125,98.5434375 L243.3125,91.9996875 L243.3125,87.3121875 L245.070312,87.3121875 L245.070312,86.6871875 L243.3125,86.6871875 L243.3125,81.9996875 L243.3125,75.186875 Z"></path>\n </g>\n </g>\n </g>\n</svg>\n',edit:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--edit"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4l1 1-9 9-2 1 1-2 9-9zm3-3l1 1-1 1-1-1 1-1z"></path></g></svg>\n',email:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--email"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 3v10h14V3H1zm0 0l7 6 7-6H1z"></path></g></svg>\n',"expand-menu":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M7.456 11.788L1.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"/>\n</svg>',error:$r,external:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--external"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3h6v6m-1-5l-9 9 9-9z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>',facebook:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--social-facebook"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" 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"></path></g></svg>\n',flag:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--flag"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9v6V1h12l-4 4 4 4H3z"></path></g></svg>\n',"flag--active":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--flag-filled"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2 1a1 1 0 01.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 01-1.993.117L2 15V1z"></path></g></svg>\n',"format-bold":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-bold"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M8.661 16c.805 0 1.536-.117 2.193-.351a4.953 4.953 0 001.69-.993c.47-.428.831-.947 1.081-1.557s.375-1.287.375-2.03c0-.29-.038-.588-.114-.893a4.123 4.123 0 00-.325-.87 3.937 3.937 0 00-.495-.754 4.412 4.412 0 00-.604-.597c-.17-.126-.17-.264 0-.412.381-.335.699-.772.953-1.311.254-.54.382-1.062.382-1.568 0-.64-.132-1.244-.394-1.813a4.628 4.628 0 00-1.081-1.484c-.458-.42-1-.753-1.627-.999A5.531 5.531 0 008.66 0h-6.14a.534.534 0 00-.362.14A.415.415 0 002 .456v15.086c0 .119.053.225.159.318.106.093.227.139.362.139h6.14zm-.127-9.852H5.826c-.17 0-.254-.075-.254-.223V3.437c0-.157.085-.235.254-.235h2.708c.45 0 .847.145 1.195.435.347.29.521.633.521 1.027 0 .394-.174.74-.521 1.038a1.784 1.784 0 01-1.195.446zm0 6.65H5.826c-.17 0-.254-.075-.254-.223v-2.99c0-.157.085-.235.254-.235h2.708c.56 0 1.004.177 1.335.53.33.353.495.75.495 1.188 0 .454-.165.856-.495 1.205-.33.35-.776.525-1.335.525z"></path></g></svg>\n',"format-functions":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-latex"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M13.392 16c.158 0 .299-.036.423-.108.123-.073.185-.155.185-.248v-1.778c0-.099-.062-.183-.185-.252a.848.848 0 00-.423-.104H6.85c-.138 0-.227-.028-.267-.083-.04-.055-.04-.105 0-.152l5.533-5.101c.158-.14.223-.265.193-.378a.755.755 0 00-.193-.325L6.88 2.707c-.04-.046-.042-.094-.007-.143.034-.05.13-.074.289-.074h6.17a.782.782 0 00.416-.108c.119-.073.178-.155.178-.248V.356c0-.093-.06-.175-.178-.248A.782.782 0 0013.333 0H2.905c-.158 0-.3.036-.423.108-.124.073-.185.155-.185.248v1.943c0 .128.037.236.11.326l.171.204 5.31 4.815c.04.047.065.106.075.178a.221.221 0 01-.074.195l-5.622 5.154c-.04.047-.094.113-.163.2A.512.512 0 002 13.7v1.943c0 .093.062.175.185.248a.822.822 0 00.423.108h10.784z"></path></g></svg>\n',"format-italic":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-type-italic"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M10.61 16c.12 0 .23-.046.329-.14a.633.633 0 00.191-.317l.457-2.176a.348.348 0 00-.064-.313.336.336 0 00-.276-.133H8.845c-.142-.008-.198-.086-.17-.235l1.892-9.372c.035-.149.124-.223.266-.223H13a.49.49 0 00.335-.14.62.62 0 00.196-.318L13.99.457a.542.542 0 00.011-.1.337.337 0 00-.085-.223.336.336 0 00-.276-.134H5.805a.49.49 0 00-.335.14.62.62 0 00-.196.317l-.457 2.176a.353.353 0 00.069.318c.074.093.168.14.281.14h2.18c.141 0 .198.074.17.223l-1.893 9.372c-.028.156-.113.235-.255.235H2.967a.489.489 0 00-.324.133.59.59 0 00-.197.313l-.435 2.176a.542.542 0 00-.011.1c0 .082.025.156.074.223.071.09.16.134.266.134h8.27z"></path></g></svg>\n',"format-list-numbered":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-ordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.748 11.5c.227 0 .443.034.646.103.203.069.381.164.534.286.155.123.276.267.364.432.089.168.134.35.134.543 0 .17-.042.333-.124.484a1.384 1.384 0 01-.19.269l-.062.061.047.035c.047.041.09.086.13.134l.058.075.075.122c.093.172.14.352.14.538 0 .201-.048.39-.143.566a1.44 1.44 0 01-.384.45c-.16.125-.344.223-.554.294-.21.072-.434.108-.67.108-.237 0-.461-.036-.671-.108a1.871 1.871 0 01-.555-.295 1.42 1.42 0 01-.382-.45 1.178 1.178 0 01-.132-.417L1 14.582l.002-.078.01-.05a.249.249 0 01.077-.111.283.283 0 01.121-.06l.07-.008h.708l.05.007c.044.01.084.028.12.056a.24.24 0 01.089.133l.006.054v.047l.005.077a.279.279 0 00.112.186c.088.066.213.101.378.101a.615.615 0 00.376-.102.29.29 0 00.12-.252.29.29 0 00-.12-.252.538.538 0 00-.262-.096l-.114-.007h-.1l-.051-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.053.001-.57.01-.05a.249.249 0 01.078-.112.283.283 0 01.121-.06l.07-.008h.076l.112-.006a.454.454 0 00.224-.086.26.26 0 00.104-.222.246.246 0 00-.103-.213.533.533 0 00-.329-.09.527.527 0 00-.324.09.24.24 0 00-.098.148l-.006.065-.002.11-.01.05a.249.249 0 01-.081.112.292.292 0 01-.12.059l-.066.007h-.712l-.052-.007a.292.292 0 01-.12-.059.244.244 0 01-.087-.13l-.006-.054v-.096l.008-.135c.018-.141.062-.275.132-.402.091-.164.213-.307.366-.43.152-.122.33-.217.533-.286.203-.069.418-.103.645-.103zM15 13a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2.777 5.5c.234 0 .454.034.66.101.207.068.389.164.544.288.156.124.28.27.372.437.093.17.14.355.14.551 0 .19-.049.37-.145.542-.07.123-.156.237-.258.34l-.108.1L2.71 8.932l1.52.001.053.006c.044.01.084.029.12.056.047.036.078.08.091.132l.007.054-.002.59-.01.05a.25.25 0 01-.083.113.298.298 0 01-.121.059L4.216 10H1.27l-.053-.007a.298.298 0 01-.122-.059.246.246 0 01-.089-.132L1 9.748v-.711l.004-.05a.26.26 0 01.04-.115l.034-.043.035-.033L3.04 7.167l.036-.036a.98.98 0 00.08-.114.295.295 0 00.055-.145.27.27 0 00-.099-.21c-.068-.062-.167-.094-.303-.094-.163 0-.285.032-.369.093a.244.244 0 00-.103.147l-.006.064-.002.123-.01.052a.25.25 0 01-.084.112.298.298 0 01-.12.058l-.069.008h-.726l-.053-.007a.298.298 0 01-.121-.059.246.246 0 01-.09-.132l-.006-.054V6.87l.01-.137c.017-.143.063-.28.135-.407.094-.167.22-.313.379-.437.157-.123.339-.219.544-.287.206-.067.425-.101.658-.101zM15 7a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM3.237 0l.052.008c.044.01.084.031.12.061a.248.248 0 01.083.132l.006.052-.004 3.167.744.001.051.007c.044.01.084.03.119.058.044.036.074.08.086.132l.006.053-.001.595-.01.05a.278.278 0 01-.197.176l-.07.008H1.29l-.051-.008a.287.287 0 01-.12-.061.248.248 0 01-.084-.132l-.006-.052.001-.596.01-.05a.247.247 0 01.077-.113.28.28 0 01.12-.06l.069-.008.932.002.003-1.959-.796.629-.068.037a.295.295 0 01-.196-.002.25.25 0 01-.172-.179L1 1.881v-.587l.007-.089.015-.075a.345.345 0 01.073-.132l.06-.059.83-.758.04-.036A.994.994 0 012.139.07a.498.498 0 01.183-.062L2.428 0h.809zM15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8z"></path></g></svg>\n',"format-list-unordered":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--list-unordered"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M15 1a1 1 0 01.117 1.993L15 3H7a1 1 0 01-.117-1.993L7 1h8zm0 6a1 1 0 01.117 1.993L15 9H7a1 1 0 01-.117-1.993L7 7h8zM2 12a2 2 0 110 4 2 2 0 010-4zm13 1a1 1 0 01.117 1.993L15 15H7a1 1 0 01-.117-1.993L7 13h8zM2 6a2 2 0 110 4 2 2 0 010-4zm0-6a2 2 0 110 4 2 2 0 010-4z"></path></g></svg>\n',"format-quote":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--editor-quote"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M2.701 14c.38 0 .659-.085.837-.255.177-.17.328-.343.45-.52l2.408-3.25c.246-.328.445-.725.598-1.19a4.69 4.69 0 00.23-1.475V2.775a.752.752 0 00-.23-.539A.713.713 0 006.47 2H1.947a.713.713 0 00-.524.236.752.752 0 00-.23.539v4.649c0 .214.077.396.23.548a.726.726 0 00.524.226h.901c.123 0 .23.054.322.161.092.107.101.224.028.35l-2.041 3.817c-.196.365-.208.702-.037 1.011.172.309.447.463.827.463h.754zm7.795 0c.367 0 .64-.085.818-.255.178-.17.328-.343.45-.52l2.409-3.25c.257-.328.46-.725.606-1.19A4.87 4.87 0 0015 7.31V2.775a.752.752 0 00-.23-.539.713.713 0 00-.524-.236H9.742a.703.703 0 00-.533.236.767.767 0 00-.22.539v4.649c0 .214.076.396.23.548a.726.726 0 00.523.226h.9c.123 0 .228.054.313.161.086.107.092.224.019.35L8.95 12.526c-.208.365-.223.702-.045 1.011.177.309.456.463.836.463h.754z"></path></g></svg>\n',groups:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--groups"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15a3 3 0 0 1 6 0m2-4a3 3 0 0 1 6 0M4 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>\n',help:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--help"><g fill-rule="evenodd"><path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4c0-1.657 1.79-3 4-3s4 1.343 4 3-1.79 3-4 3m0 0v2-2zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect></g></svg>\n',highlight:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15H1h11zm-.5-6v2l-1 1v-2l1-1zm.5-7v6h-2V2h2zm0-1h-2 2zm0 8h-2 2z"></path></g></svg>\n',image:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--image"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 1v14H1V1h14zM1 15l3-8 4 6 3-4 4 6m-4-9a1 1 0 110-2 1 1 0 010 2z"></path></g></svg>\n',leave:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M8 0c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm0 14.452A6.45 6.45 0 0 0 14.452 8 6.45 6.45 0 0 0 8 1.548 6.45 6.45 0 0 0 1.548 8 6.45 6.45 0 0 0 8 14.452zm3.284-8.458L9.277 8l2.007 2.006a.387.387 0 0 1 0 .549l-.73.729a.387.387 0 0 1-.548 0L8 9.277l-2.006 2.007a.387.387 0 0 1-.549 0l-.729-.73a.387.387 0 0 1 0-.548L6.723 8 4.716 5.994a.387.387 0 0 1 0-.549l.73-.729a.387.387 0 0 1 .548 0L8 6.723l2.006-2.007a.387.387 0 0 1 .549 0l.729.73a.387.387 0 0 1 0 .548z"/>\n</svg>',link:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--link"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.069 3.042l1.057-1.274c1.193-1.106 3.035-.938 4.046 0 1.012.94 1.193 2.649 0 3.755L11.046 9.17m0 0c-1.193 1.107-2.853 1.107-4.046 0m-.069 3.788l-1.057 1.274c-1.193 1.106-3.035.938-4.046 0-1.012-.94-1.193-2.649 0-3.755L4.954 6.83m0 0C6.147 5.723 7.807 5.723 9 6.8"></path></g></svg>\n',lock:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="48px" height="56px" viewBox="0 0 48 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g fill="currentColor">\n <rect x="0" y="24" width="48" height="32"></rect>\n <path d="M24,0 C24,0 8,0 8,16 L8,32 L16,32 L16,16.0000004 C16,8 24,8 24,8 C24,8 32,8 32,16 L32,32 L40,32 L40,16 C40,0 24,0 24,0 Z"></path>\n </g>\n </g>\n</svg>\n',logo:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <rect fill="#ffffff" stroke="none" width="17.14407" height="16.046612" x="3.8855932" y="3.9449153" />\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <path d="M0,2.00494659 C0,0.897645164 0.897026226,0 2.00494659,0 L21.9950534,0 C23.1023548,0 24,0.897026226 24,2.00494659 L24,21.9950534 C24,23.1023548 23.1029738,24 21.9950534,24 L2.00494659,24 C0.897645164,24 0,23.1029738 0,21.9950534 L0,2.00494659 Z M9,24 L12,28 L15,24 L9,24 Z M7.00811294,4 L4,4 L4,20 L7.00811294,20 L7.00811294,15.0028975 C7.00811294,12.004636 8.16824717,12.0097227 9,12 C10,12.0072451 11.0189302,12.0606714 11.0189302,14.003477 L11.0189302,20 L14.0270431,20 L14.0270431,13.1087862 C14.0270433,10 12,9.00309038 10,9.00309064 C8.01081726,9.00309091 8,9.00309086 7.00811294,11.0019317 L7.00811294,4 Z M19,19.9869002 C20.1045695,19.9869002 21,19.0944022 21,17.9934501 C21,16.892498 20.1045695,16 19,16 C17.8954305,16 17,16.892498 17,17.9934501 C17,19.0944022 17.8954305,19.9869002 19,19.9869002 Z" fill="currentColor"></path>\n </g>\n</svg>\n',pointer:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8" viewBox="0 0 15 8" aria-hidden="true" focusable="false"><path d="M0 8 L7 0 L15 8" stroke="currentColor" strokeWidth="2" /></svg>\n',profile:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--profile"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15c0-2.761 3.134-5 7-5s7 2.239 7 5M8 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g></svg>\n',public:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm2.655 11.535c.244-.242.442-.719.442-1.063a1.13 1.13 0 0 0-.288-.696l-.442-.442a1.033 1.033 0 0 0-.73-.302H7.484C7.181 8.88 6.791 8 6.452 8c-.34 0-.674-.08-.978-.231l-.357-.179a.386.386 0 0 1-.213-.345c0-.153.118-.317.263-.366l1.006-.335a.618.618 0 0 1 .163-.026c.106 0 .258.056.338.126l.3.26c.046.04.106.063.169.063h.182a.258.258 0 0 0 .23-.373l-.503-1.006a.306.306 0 0 1-.027-.116c0-.06.035-.143.078-.185l.32-.31a.258.258 0 0 1 .18-.074h.29c.06 0 .141-.034.183-.076l.258-.258c.1-.1.1-.264 0-.364l-.151-.152c-.101-.1-.101-.264 0-.365l.333-.333.151-.151a.516.516 0 0 0 0-.73l-.912-.913a6.45 6.45 0 0 0-.787.078v.365a.516.516 0 0 1-.747.461l-.775-.387a6.487 6.487 0 0 0-3.329 3.287c.32.474.813 1.205 1.116 1.65.138.203.4.503.582.668l.026.023c.308.278.65.516 1.021.702.452.227 1.111.586 1.575.842.328.182.53.527.53.903v1.032c0 .274.11.537.303.73.484.484.785 1.246.73 1.653v.884c.473 0 .932-.055 1.376-.152l.56-1.511c.067-.177.106-.362.155-.544a.771.771 0 0 1 .199-.346l.365-.364zm2.797-2.946l.94.235c.036-.27.06-.544.06-.824a6.4 6.4 0 0 0-.688-2.882l-.419.21a.773.773 0 0 0-.298.263l-.632.947a.908.908 0 0 0-.13.43c0 .13.058.321.13.43l.58.87c.107.16.27.274.457.32z"/>\n</svg>\n',refresh:'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n \x3c!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --\x3e\n <defs/>\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g fill="currentColor">\n <g>\n <path d="M0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,4.89580324 14.2154684,2.11256098 11.4682644,0.789110134 L10.6002482,2.59092808 C12.661769,3.58405472 14,5.6712248 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,5.65296151 3.35941993,3.55225774 5.44569583,2.56903563 L4.59307587,0.759881355 C1.81273067,2.07020511 0,4.87140735 0,8 Z" />\n <polygon points="7 8.58578644 7 0 9 0 9 8.58578644 10.2928932 7.29289322 11 6.58578644 12.4142136 8 11.7071068 8.70710678 8.70710678 11.7071068 8 12.4142136 7.64644661 12.0606602 7.29289322 11.7071068 4.29289322 8.70710678 3.58578644 8 5 6.58578644 5.70710678 7.29289322"/>\n </g>\n </g>\n </g>\n</svg>\n',restricted:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 1C4.5 1 1 4.5 1 8s3.5 7 7 7 7-3.5 7-7-3.5-7-7-7zm0 7l-4 4 4-4 4-4-4 4z"></path></g></svg>\n',reply:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n <path fill="currentColor" fill-rule="nonzero" d="M6.422 5.422c2 0 3.542.417 4.625 1.25 1.083.833 1.875 1.75 2.375 2.75s.792 1.917.875 2.75l.125 1.25h-2l-.094-.938c-.062-.625-.281-1.312-.656-2.062-.375-.75-.969-1.438-1.781-2.063-.813-.625-1.97-.937-3.47-.937H4.829l2 2-1.406 1.422L1 6.422 5.422 2l1.406 1.422-2 2h1.594z"/>\n</svg>\n',search:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--search"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.536 9.536a5 5 0 1 1-7.071-7.071 5 5 0 0 1 7.07 7.07L15 15 9.536 9.536z"></path></g></svg>\n',share:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--share"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V2m7 8v5H1v-5m3-5l4-4 4 4"></path></g></svg>\n',success:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="Icon Icon--check"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L6 13 3 8"></path></g></svg>\n',sort:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--sort"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 9V2v7zM1 5l4-4 4 4m2 2v7-7zm-4 4l4 4 4-4"></path></g></svg>\n',trash:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--trash"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 4h12l-2 11H4L2 4zM1 1h14H1z"></path></g></svg>\n',twitter:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--social-twitter"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M15.969 3.049c-.59.259-1.22.436-1.884.516a3.305 3.305 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.29 9.29 0 0 1-6.76-3.418A3.214 3.214 0 0 0 .65 3.76c0 1.14.58 2.142 1.459 2.73a3.27 3.27 0 0 1-1.485-.41v.04a3.282 3.282 0 0 0 2.63 3.218 3.33 3.33 0 0 1-1.474.057 3.291 3.291 0 0 0 3.069 2.278A6.578 6.578 0 0 1 .78 13.076c-.26 0-.52-.015-.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-.42.64-.46 1.2-1.04 1.64-1.7l-.031-.012z"></path></g></svg>\n'}});
8
8
  //# sourceMappingURL=ui-playground.bundle.js.map