hypothesis 1.876.0 → 1.877.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 (11) hide show
  1. package/build/boot.js +1 -1
  2. package/build/manifest.json +8 -8
  3. package/build/scripts/annotator.bundle.js +2 -2
  4. package/build/scripts/annotator.bundle.js.map +66 -57
  5. package/build/scripts/sidebar.bundle.js +2 -2
  6. package/build/scripts/sidebar.bundle.js.map +88 -42
  7. package/build/scripts/ui-playground.bundle.js +2 -2
  8. package/build/scripts/ui-playground.bundle.js.map +114 -80
  9. package/build/styles/sidebar.css +1 -1
  10. package/build/styles/sidebar.css.map +1 -1
  11. package/package.json +2 -2
package/build/scripts/ui-playground.bundle.js CHANGED
@@ -1,8 +1,8 @@
1
- !function e(i,n,t){var l="function"==typeof hypothesisRequire&&hypothesisRequire;function r(o,s){if(!n[o]){if(!i[o]){var a="function"==typeof hypothesisRequire&&hypothesisRequire;if(!s&&a)return a(o,!0);if(l)return l(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var m=n[o]={exports:{}};i[o][0].call(m.exports,(function(e){var n=i[o][1][e];return r(n||e)}),m,m.exports,e,i,n,t)}return n[o].exports}for(var o=0;o<t.length;o++)r(t[o]);return r}({1:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxs)(r.default.Page,{title:"Buttons",children:[(0,o.jsxs)(r.default.Pattern,{title:"PublishControlButton",children:[(0,o.jsxs)("p",{children:["Customizes ",(0,o.jsx)("code",{children:"LabeledButton"})," styling to disable"," ",(0,o.jsx)("code",{children:"border-radius"})," on the right side. This makes the publish button fit with a drop-down menu next to it."]}),(0,o.jsx)(r.default.Example,{title:"Basic usage",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(l.LabeledButton,{classes:"PublishControlButton",variant:"primary",children:"Publish to My Group"})})})]}),(0,o.jsxs)(r.default.Pattern,{title:"InlineLinkButton",children:[(0,o.jsxs)("p",{children:["Customizes ",(0,o.jsx)("code",{children:"LinkButton"})," styling to position inline; dark variant always has underline."]}),(0,o.jsx)(r.default.Example,{title:"Basic usage",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(l.LinkButton,{classes:"InlineLinkButton",children:"Log in"})})}),(0,o.jsx)(r.default.Example,{title:"Dark variant, customized with underline",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(l.LinkButton,{classes:"InlineLinkButton InlineLinkButton--underlined",variant:"dark",children:"Log in"})})})]}),(0,o.jsxs)(r.default.Pattern,{title:"Non-Responsive IconButton",children:[(0,o.jsx)("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."}),(0,o.jsx)(r.default.Example,{variant:"wide",title:"Sizes (medium is default)",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,children:[(0,o.jsx)(l.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"small"}),(0,o.jsx)(l.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"medium"}),(0,o.jsx)(l.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"large"})]})})]}),(0,o.jsxs)(r.default.Pattern,{title:"PaginationPageButton",children:[(0,o.jsxs)("p",{children:["Style customization for ",(0,o.jsx)("code",{children:"LabeledButton"})," that gives it asymmetrical padding to fit well as pagination controls in the Notebook."]}),(0,o.jsx)(r.default.Example,{title:"Page numbers",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[(0,o.jsx)(l.LabeledButton,{classes:"PaginationPageButton",variant:"dark",children:"9"}),(0,o.jsx)(l.LabeledButton,{classes:"PaginationPageButton",variant:"dark",pressed:!0,children:"10"}),(0,o.jsx)(l.LabeledButton,{classes:"PaginationPageButton",variant:"dark",children:"11"})]})}),(0,o.jsx)(r.default.Example,{title:"Navigation buttons",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[(0,o.jsx)(l.LabeledButton,{classes:"PaginationPageButton",icon:"arrow-left",variant:"dark",children:"Prev"}),(0,o.jsx)(l.LabeledButton,{classes:"PaginationPageButton",icon:"arrow-right",iconPosition:"right",variant:"dark",children:"Next"})]})})]})]})};var t,l=e("@hypothesis/frontend-shared"),r=(t=e("@hypothesis/frontend-shared/lib/pattern-library/components/Library"))&&t.__esModule?t:{default:t},o=e("preact/jsx-runtime")},{"@hypothesis/frontend-shared":28,"@hypothesis/frontend-shared/lib/pattern-library/components/Library":29,"preact/jsx-runtime":58}],2:[function(e,i,n){"use strict";var t=e("@hypothesis/frontend-shared/lib/pattern-library"),l=o(e("./components/ButtonPatterns")),r=o(e("../../src/sidebar/icons"));function o(e){return e&&e.__esModule?e:{default:e}}const s=[{route:"/buttons",title:"Buttons",component:l.default,group:"components"}];(0,t.startApp)({baseURL:"/ui-playground",extraRoutes:s,icons:r.default})},{"../../src/sidebar/icons":104,"./components/ButtonPatterns":1,"@hypothesis/frontend-shared/lib/pattern-library":49}],3:[function(e,i,n){i.exports='<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'},{}],4:[function(e,i,n){i.exports='<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'},{}],5:[function(e,i,n){i.exports='<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'},{}],6:[function(e,i,n){i.exports='<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'},{}],7:[function(e,i,n){i.exports=' <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>'},{}],8:[function(e,i,n){i.exports='<?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'},{}],9:[function(e,i,n){i.exports='<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'},{}],10:[function(e,i,n){i.exports='<?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'},{}],11:[function(e,i,n){i.exports='<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'},{}],12:[function(e,i,n){i.exports='<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>'},{}],13:[function(e,i,n){i.exports='<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'},{}],14:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.normalizeKeyName=function(e){const i={Left:"ArrowLeft",Up:"ArrowUp",Down:"ArrowDown",Right:"ArrowRight",Spacebar:" ",Del:"Delete"};return i[e]?i[e]:e}},{}],15:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Checkbox=m,n.LabeledCheckbox=function(e){var i;let{children:n,id:t}=e,o=u(e,["children","id"]);return null!==(i=t)&&void 0!==i||(t=o.name),(0,l.jsxDEV)("label",{htmlFor:t,className:"Hyp-LabeledCheckbox",children:[(0,l.jsxDEV)(m,s({id:t},o),void 0,!1,{fileName:r,lineNumber:76,columnNumber:7},this),(0,l.jsxDEV)("span",{"data-testid":"label-text",children:n},void 0,!1,{fileName:r,lineNumber:77,columnNumber:7},this)]},void 0,!0,{fileName:r,lineNumber:75,columnNumber:5},this)};var t=e("./SvgIcon"),l=e("preact/compat/jsx-dev-runtime"),r="/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";function o(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function s(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?o(Object(n),!0).forEach((function(i){a(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function a(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function u(e,i){if(null==e)return{};var n,t,l=function(e,i){if(null==e)return{};var n,t,l={},r=Object.keys(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||(l[n]=e[n]);return l}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function m(e){let{inputRef:i,onToggle:n,onClick:o}=e,a=u(e,["inputRef","onToggle","onClick"]);return(0,l.jsxDEV)(l.Fragment,{children:[(0,l.jsxDEV)("input",s({className:"Hyp-Checkbox",ref:i,type:"checkbox",onClick:function(e){null==n||n(e.currentTarget.checked),null==o||o.call(this,e)}},a),void 0,!1,{fileName:r,lineNumber:55,columnNumber:7},this),(0,l.jsxDEV)(t.SvgIcon,{className:"hyp-svg-checkbox",name:"hyp-checkbox"},void 0,!1,{fileName:r,lineNumber:62,columnNumber:7},this)]},void 0,!0)}(0,t.registerIcons)({"hyp-checkbox":e("../../images/icons/checkbox.svg")})},{"../../images/icons/checkbox.svg":7,"./SvgIcon":20,"preact/compat/jsx-dev-runtime":55}],16:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Dialog=function({buttons:e,cancelLabel:i="Cancel",children:n,contentClass:t,icon:m,initialFocus:d,onCancel:h,role:N="dialog",title:b}){const f=c("dialog-description"),p=c("dialog-title"),v=(0,r.useRef)(null);return(0,r.useEffect)((()=>{if(null!==d){const e=null==d?void 0:d.current;e&&!e.disabled?e.focus():v.current.focus()}}),[]),(0,r.useLayoutEffect)((()=>{const e=v.current.querySelector("p");e&&(e.id=f,v.current.setAttribute("aria-describedby",f))}),[f]),(0,a.jsxDEV)("div",{"aria-labelledby":p,className:(0,l.default)("Hyp-Dialog",{"Hyp-Dialog--closeable":!!h},t),ref:v,role:N,tabIndex:-1,children:[(0,a.jsxDEV)("header",{children:[m&&(0,a.jsxDEV)("div",{className:"Hyp-Dialog__header-icon",children:(0,a.jsxDEV)(s.SvgIcon,{name:m,title:b,"data-testid":"header-icon"},void 0,!1,{fileName:u,lineNumber:129,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:128,columnNumber:11},this),(0,a.jsxDEV)("h2",{className:"Hyp-Dialog__title",id:p,children:b},void 0,!1,{fileName:u,lineNumber:132,columnNumber:9},this),h&&(0,a.jsxDEV)("div",{className:"Hyp-Dialog__close",children:(0,a.jsxDEV)(o.IconButton,{icon:"hyp-cancel",title:"Close",onClick:h},void 0,!1,{fileName:u,lineNumber:137,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:136,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:126,columnNumber:7},this),n,(0,a.jsxDEV)("div",{className:"Hyp-Dialog__actions",children:[h&&(0,a.jsxDEV)(o.LabeledButton,{"data-testid":"cancel-button",onClick:h,children:i},void 0,!1,{fileName:u,lineNumber:144,columnNumber:11},this),e]},void 0,!0,{fileName:u,lineNumber:142,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:115,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact/hooks"),o=e("./buttons"),s=e("./SvgIcon"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";(0,s.registerIcons)({"hyp-cancel":e("../../images/icons/cancel.svg")});let m=0;function c(e){const[i]=(0,r.useState)((()=>(++m,`${e}-${m}`)));return i}},{"../../images/icons/cancel.svg":5,"./SvgIcon":20,"./buttons":24,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],17:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Modal=h,n.ConfirmModal=function(e){let{message:i,confirmAction:n,onConfirm:t,onCancel:l}=e,r=d(e,["message","confirmAction","onConfirm","onCancel"]);return(0,s.jsxDEV)(h,m(m({onCancel:l,buttons:[(0,s.jsxDEV)(o.LabeledButton,{onClick:t,variant:"primary","data-testid":"confirm-button",children:n},"ok",!1,{fileName:a,lineNumber:74,columnNumber:9},this)]},r),{},{children:(0,s.jsxDEV)("p",{children:i},void 0,!1,{fileName:a,lineNumber:85,columnNumber:7},this)}),void 0,!1,{fileName:a,lineNumber:71,columnNumber:5},this)};var t=e("preact/hooks"),l=e("../hooks/use-element-should-close"),r=e("./Dialog"),o=e("./buttons"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";function u(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function m(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?u(Object(n),!0).forEach((function(i){c(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function c(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function d(e,i){if(null==e)return{};var n,t,l=function(e,i){if(null==e)return{};var n,t,l={},r=Object.keys(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||(l[n]=e[n]);return l}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function h(e){let{children:i,onCancel:n}=e,o=d(e,["children","onCancel"]);const u=(0,t.useRef)(null);return(0,l.useElementShouldClose)(u,!0,(()=>{n&&n()})),(0,s.jsxDEV)(s.Fragment,{children:[(0,s.jsxDEV)("div",{className:"Hyp-Modal__overlay"},void 0,!1,{fileName:a,lineNumber:37,columnNumber:7},this),(0,s.jsxDEV)("div",{className:"Hyp-Modal",ref:u,children:(0,s.jsxDEV)(r.Dialog,m(m({onCancel:n},o),{},{children:i}),void 0,!1,{fileName:a,lineNumber:39,columnNumber:9},this)},void 0,!1,{fileName:a,lineNumber:38,columnNumber:7},this)]},void 0,!0)}},{"../hooks/use-element-should-close":26,"./Dialog":16,"./buttons":24,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],18:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Panel=function({children:e,icon:i,onClose:n,title:t}){const u=!!n;return(0,s.jsxDEV)("div",{className:(0,l.default)("Hyp-Panel",{"Hyp-Panel--closeable":u}),children:[(0,s.jsxDEV)("header",{children:[i&&(0,s.jsxDEV)("div",{className:"Hyp-Panel__header-icon",children:(0,s.jsxDEV)(o.SvgIcon,{name:i,title:t},void 0,!1,{fileName:a,lineNumber:38,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:37,columnNumber:11},this),(0,s.jsxDEV)("h2",{className:"Hyp-Panel__title",children:t},void 0,!1,{fileName:a,lineNumber:41,columnNumber:9},this),u&&(0,s.jsxDEV)("div",{className:"Hyp-Panel__close",children:(0,s.jsxDEV)(r.IconButton,{icon:"hyp-cancel",title:"Close",onClick:n},void 0,!1,{fileName:a,lineNumber:44,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:43,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:35,columnNumber:7},this),(0,s.jsxDEV)("div",{className:"Hyp-Panel__content",children:e},void 0,!1,{fileName:a,lineNumber:48,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:30,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("./buttons"),o=e("./SvgIcon"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Panel.js";(0,o.registerIcons)({"hyp-cancel":e("../../images/icons/cancel.svg")})},{"../../images/icons/cancel.svg":5,"./SvgIcon":20,"./buttons":24,classnames:54,"preact/compat/jsx-dev-runtime":55}],19:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Spinner=function({classes:e="",size:i="medium"}){const n=`Hyp-Spinner--${i}`;return(0,o.jsxDEV)(r.SvgIcon,{name:"hyp-spinner",className:(0,l.default)(n,e)},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js",lineNumber:26,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("./SvgIcon"),o=e("preact/compat/jsx-dev-runtime");(0,r.registerIcons)({"hyp-spinner":e("../../images/icons/spinner--spokes.svg")})},{"../../images/icons/spinner--spokes.svg":12,"./SvgIcon":20,classnames:54,"preact/compat/jsx-dev-runtime":55}],20:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.SvgIcon=function({name:e,className:i="",inline:n=!1,title:t=""}){if(!u[e])throw new Error(`Icon name "${e}" is not registered`);const m=u[e],c=(0,r.useRef)();(0,r.useLayoutEffect)((()=>{const e=c.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,m]);const d={};return t&&(d.title=t),(0,o.jsxDEV)("span",function(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?s(Object(n),!0).forEach((function(i){a(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}({className:(0,l.default)("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:m},ref:c},d),void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5},this)},n.registerIcons=function(e,{reset:i=!1}={}){i&&(u={}),Object.assign(u,e)},n.availableIcons=function(){return u};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact/hooks"),o=e("preact/compat/jsx-dev-runtime");function s(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function a(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}let u={}},{classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],21:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Table=function({accessibleLabel:e,classes:i,containerClasses:n,emptyItemsMessage:t,isLoading:d=!1,items:h,onSelectItem:N,onUseItem:b,renderItem:f,selectedItem:p,tableHeaders:v}){const x=(0,r.useRef)([]),g=(0,r.useRef)(null),j=(0,r.useRef)(null),D=e=>{const i=x.current[h.indexOf(e)];i&&i.focus(),N(e)};return(0,r.useEffect)((()=>{if(!p)return;const e=x.current[h.indexOf(p)],i=j.current,n=g.current;if(e&&i&&n){const t=i.offsetHeight,l=e.offsetTop-n.scrollTop;l>=n.clientHeight&&e.scrollIntoView(),l<=t&&n.scrollBy(0,l-t)}}),[h,p]),(0,u.jsxDEV)(a.Scrollbox,{withHeader:!0,classes:(0,l.default)("Hyp-Table-Scrollbox",n),containerRef:g,children:[(0,u.jsxDEV)("table",{"aria-label":e,className:(0,l.default)("Hyp-Table",i),tabIndex:0,role:"grid",onKeyDown:e=>{let i=!1;switch(e.key){case"Enter":i=!0,p&&b(p);break;case"ArrowUp":i=!0,D(c(h,p,-1));break;case"ArrowDown":i=!0,D(c(h,p,1));break;default:i=!1}i&&(e.preventDefault(),e.stopPropagation())},children:[(0,u.jsxDEV)("thead",{ref:(0,o.downcastRef)(j),children:(0,u.jsxDEV)("tr",{children:v.map((({classes:e,label:i},n)=>(0,u.jsxDEV)("th",{className:(0,l.default)("Hyp-Table__header",e),scope:"col",children:i},`${i}-${n}`,!1,{fileName:m,lineNumber:180,columnNumber:15},this)))},void 0,!1,{fileName:m,lineNumber:178,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:177,columnNumber:9},this),(0,u.jsxDEV)("tbody",{children:!d&&h.map(((e,i)=>(0,u.jsxDEV)("tr",{"aria-selected":p===e,className:(0,l.default)({"is-selected":p===e}),onMouseDown:()=>N(e),onClick:()=>N(e),onDblClick:()=>b(e),ref:e=>x.current[i]=e,tabIndex:-1,children:f(e,p===e)},i,!1,{fileName:m,lineNumber:193,columnNumber:15},this)))},void 0,!1,{fileName:m,lineNumber:190,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:170,columnNumber:7},this),d&&(0,u.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__loading",children:(0,u.jsxDEV)(s.Spinner,{size:"large"},void 0,!1,{fileName:m,lineNumber:212,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:211,columnNumber:9},this),!d&&0===h.length&&t&&(0,u.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__message","data-testid":"empty-items-message",children:t},void 0,!1,{fileName:m,lineNumber:216,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:165,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact/hooks"),o=e("../util/typing"),s=e("./Spinner"),a=e("./containers"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/components/Table.js";function c(e,i,n){const t=i?e.indexOf(i):-1,l=t+n;return t<0||l<0?e[0]:l>=e.length?e[e.length-1]:e[l]}},{"../util/typing":53,"./Spinner":19,"./containers":25,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],22:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.TextInput=function(e){let{classes:i="",inputRef:n,hasError:t=!1,type:s="text"}=e,u=function(e,i){if(null==e)return{};var n,t,l=function(e,i){if(null==e)return{};var n,t,l={},r=Object.keys(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||(l[n]=e[n]);return l}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}(e,["classes","inputRef","hasError","type"]);return(0,r.jsxDEV)("input",a(a({className:(0,l.default)("Hyp-TextInput",{"has-error":t},i)},u),{},{ref:n,type:s}),void 0,!1,{fileName:o,lineNumber:39,columnNumber:5},this)},n.TextInputWithButton=function({children:e,classes:i=""}){return(0,r.jsxDEV)("div",{className:(0,l.default)("Hyp-TextInputWithButton",i),children:e},void 0,!1,{fileName:o,lineNumber:67,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/components/TextInput.js";function s(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function a(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?s(Object(n),!0).forEach((function(i){u(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function u(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}},{classnames:54,"preact/compat/jsx-dev-runtime":55}],23:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Thumbnail=function({children:e,classes:i="",isLoading:n=!1,placeholder:t="...",size:u="medium"}){const m=(0,r.toChildArray)(e).length?e:t;return(0,s.jsxDEV)("div",{className:(0,l.default)("Hyp-Thumbnail",i),children:(0,s.jsxDEV)("div",{className:"Hyp-Thumbnail__content",children:[n&&(0,s.jsxDEV)(o.Spinner,{size:u},void 0,!1,{fileName:a,lineNumber:59,columnNumber:23},this),!n&&m]},void 0,!0,{fileName:a,lineNumber:58,columnNumber:7},this)},void 0,!1,{fileName:a,lineNumber:57,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact"),o=e("./Spinner"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Thumbnail.js"},{"./Spinner":19,classnames:54,preact:56,"preact/compat/jsx-dev-runtime":55}],24:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.IconButton=function(e){let{className:i="Hyp-IconButton"}=e,n=c(e,["className"]);const{icon:t}=n;return(0,o.jsxDEV)(d,u(u({className:i},n),{},{children:(0,o.jsxDEV)(r.SvgIcon,{name:t},void 0,!1,{fileName:s,lineNumber:100,columnNumber:7},this)}),void 0,!1,{fileName:s,lineNumber:99,columnNumber:5},this)},n.LabeledButton=function(e){let{children:i,className:n="Hyp-LabeledButton"}=e,t=c(e,["children","className"]);const{icon:l,iconPosition:a="left"}=t;return(0,o.jsxDEV)(d,u(u({className:n},t),{},{children:[l&&"left"===a&&(0,o.jsxDEV)(r.SvgIcon,{name:l},void 0,!1,{fileName:s,lineNumber:118,columnNumber:43},this),i,l&&"right"===a&&(0,o.jsxDEV)(r.SvgIcon,{name:l},void 0,!1,{fileName:s,lineNumber:120,columnNumber:44},this)]}),void 0,!0,{fileName:s,lineNumber:117,columnNumber:5},this)},n.LinkButton=function(e){return(0,o.jsxDEV)(d,u({className:"Hyp-LinkButton"},e),void 0,!1,{fileName:s,lineNumber:131,columnNumber:10},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("./SvgIcon"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function a(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?a(Object(n),!0).forEach((function(i){m(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function m(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function c(e,i){if(null==e)return{};var n,t,l=function(e,i){if(null==e)return{};var n,t,l={},r=Object.keys(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||(l[n]=e[n]);return l}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t<r.length;t++)n=r[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}function d(e){let{buttonRef:i,classes:n,className:t,icon:r,iconPosition:a="left",size:m="medium",variant:d="normal",expanded:h,pressed:N,type:b="button"}=e,f=c(e,["buttonRef","classes","className","icon","iconPosition","size","variant","expanded","pressed","type"]);const p={"aria-expanded":h,"aria-pressed":N,"aria-label":f.title};return(0,o.jsxDEV)("button",u(u({ref:i,className:(0,l.default)(t,`${t}--${m}`,`${t}--${d}`,{[`${t}--icon-${a}`]:r},n),type:b},p),f),void 0,!1,{fileName:s,lineNumber:73,columnNumber:5},this)}},{"./SvgIcon":20,classnames:54,"preact/compat/jsx-dev-runtime":55}],25:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Frame=function({children:e,classes:i="",containerRef:n}){return(0,o.jsxDEV)("div",{className:(0,l.default)("Hyp-Frame",i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:26,columnNumber:5},this)},n.Card=function({children:e,classes:i="",containerRef:n}){return(0,o.jsxDEV)("div",{className:(0,l.default)("Hyp-Card",i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:42,columnNumber:5},this)},n.Actions=function({children:e,direction:i="row",classes:n="",containerRef:t}){const a=`Hyp-Actions--${i}`;return(0,o.jsxDEV)("div",{className:(0,l.default)(a,n),ref:(0,r.downcastRef)(t),children:e},void 0,!1,{fileName:s,lineNumber:72,columnNumber:5},this)},n.Scrollbox=function({children:e,classes:i="",containerRef:n,withHeader:t=!1}){const a=t?"Hyp-Scrollbox--with-header":"Hyp-Scrollbox";return(0,o.jsxDEV)("div",{className:(0,l.default)(a,i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:101,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("../util/typing"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/components/containers.js"},{"../util/typing":53,classnames:54,"preact/compat/jsx-dev-runtime":55}],26:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.useElementShouldClose=function(e,i,n){(0,t.useEffect)((()=>{if(!i)return()=>{};const t=r(document.body,["keydown"],(e=>{const i=e;"Escape"===(0,l.normalizeKeyName)(i.key)&&n()})),o=r(document.body,["focus"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0}),s=r(document.body,["mousedown","click"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0});return()=>{t(),s(),o()}}),[e,i,n])};var t=e("preact/hooks"),l=e("../browser-compatibility-utils");function r(e,i,n,{useCapture:t=!1}={}){return i.forEach((i=>e.addEventListener(i,n,t))),()=>{i.forEach((i=>e.removeEventListener(i,n,t)))}}},{"../browser-compatibility-utils":14,"preact/hooks":57}],27:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t={"arrow-left":e("../images/icons/arrow-left.svg"),"arrow-right":e("../images/icons/arrow-right.svg"),cancel:e("../images/icons/cancel.svg"),check:e("../images/icons/check.svg"),checkbox:e("../images/icons/checkbox.svg"),collapsed:e("../images/icons/collapsed.svg"),edit:e("../images/icons/edit.svg"),logo:e("../images/icons/logo.svg"),profile:e("../images/icons/profile.svg"),"hyp-spinner":e("../images/icons/spinner--spokes.svg"),trash:e("../images/icons/trash.svg")};n.default=t},{"../images/icons/arrow-left.svg":3,"../images/icons/arrow-right.svg":4,"../images/icons/cancel.svg":5,"../images/icons/check.svg":6,"../images/icons/checkbox.svg":7,"../images/icons/collapsed.svg":8,"../images/icons/edit.svg":9,"../images/icons/logo.svg":10,"../images/icons/profile.svg":11,"../images/icons/spinner--spokes.svg":12,"../images/icons/trash.svg":13}],28:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"IconButton",{enumerable:!0,get:function(){return t.IconButton}}),Object.defineProperty(n,"LabeledButton",{enumerable:!0,get:function(){return t.LabeledButton}}),Object.defineProperty(n,"LinkButton",{enumerable:!0,get:function(){return t.LinkButton}}),Object.defineProperty(n,"LabeledCheckbox",{enumerable:!0,get:function(){return l.LabeledCheckbox}}),Object.defineProperty(n,"Checkbox",{enumerable:!0,get:function(){return l.Checkbox}}),Object.defineProperty(n,"Frame",{enumerable:!0,get:function(){return r.Frame}}),Object.defineProperty(n,"Card",{enumerable:!0,get:function(){return r.Card}}),Object.defineProperty(n,"Actions",{enumerable:!0,get:function(){return r.Actions}}),Object.defineProperty(n,"Scrollbox",{enumerable:!0,get:function(){return r.Scrollbox}}),Object.defineProperty(n,"Dialog",{enumerable:!0,get:function(){return o.Dialog}}),Object.defineProperty(n,"Modal",{enumerable:!0,get:function(){return s.Modal}}),Object.defineProperty(n,"ConfirmModal",{enumerable:!0,get:function(){return s.ConfirmModal}}),Object.defineProperty(n,"Panel",{enumerable:!0,get:function(){return a.Panel}}),Object.defineProperty(n,"Spinner",{enumerable:!0,get:function(){return u.Spinner}}),Object.defineProperty(n,"SvgIcon",{enumerable:!0,get:function(){return m.SvgIcon}}),Object.defineProperty(n,"registerIcons",{enumerable:!0,get:function(){return m.registerIcons}}),Object.defineProperty(n,"Table",{enumerable:!0,get:function(){return c.Table}}),Object.defineProperty(n,"TextInput",{enumerable:!0,get:function(){return d.TextInput}}),Object.defineProperty(n,"TextInputWithButton",{enumerable:!0,get:function(){return d.TextInputWithButton}}),Object.defineProperty(n,"Thumbnail",{enumerable:!0,get:function(){return h.Thumbnail}}),Object.defineProperty(n,"useElementShouldClose",{enumerable:!0,get:function(){return N.useElementShouldClose}}),Object.defineProperty(n,"normalizeKeyName",{enumerable:!0,get:function(){return b.normalizeKeyName}});var t=e("./components/buttons"),l=e("./components/Checkbox"),r=e("./components/containers"),o=e("./components/Dialog"),s=e("./components/Modal"),a=e("./components/Panel"),u=e("./components/Spinner"),m=e("./components/SvgIcon"),c=e("./components/Table"),d=e("./components/TextInput"),h=e("./components/Thumbnail"),N=e("./hooks/use-element-should-close"),b=e("./browser-compatibility-utils")},{"./browser-compatibility-utils":14,"./components/Checkbox":15,"./components/Dialog":16,"./components/Modal":17,"./components/Panel":18,"./components/Spinner":19,"./components/SvgIcon":20,"./components/Table":21,"./components/TextInput":22,"./components/Thumbnail":23,"./components/buttons":24,"./components/containers":25,"./hooks/use-element-should-close":26}],29:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("preact"),o=e("preact/hooks"),s=e("../../components/buttons"),a=e("../util/jsx-to-string"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/Library.js";function c({children:e,withSource:i=!1,style:n={},title:t}){const[l,c]=(0,o.useState)("demo"),d=(0,r.toChildArray)(e).map(((e,i)=>(0,u.jsxDEV)("li",{children:(0,u.jsxDEV)("code",{children:(0,u.jsxDEV)("pre",{children:(0,a.jsxToString)(e)},void 0,!1,{fileName:m,lineNumber:135,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:134,columnNumber:9},this)},i,!1,{fileName:m,lineNumber:133,columnNumber:7},this)));return(0,u.jsxDEV)("div",{className:"LibraryDemo",children:[t&&(0,u.jsxDEV)("h4",{className:"LibraryDemo__header",children:t},void 0,!1,{fileName:m,lineNumber:142,columnNumber:17},this),(0,u.jsxDEV)("div",{className:"LibraryDemo__tabs",children:[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>c("demo"),pressed:"demo"===l,variant:"dark",children:"Demo"},void 0,!1,{fileName:m,lineNumber:144,columnNumber:9},this),i&&(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>c("source"),pressed:"source"===l,variant:"dark",children:"Source"},void 0,!1,{fileName:m,lineNumber:152,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:143,columnNumber:7},this),(0,u.jsxDEV)("div",{className:"LibraryDemo__container",children:["demo"===l&&(0,u.jsxDEV)("div",{className:"LibraryDemo__demo",style:n,children:(0,u.jsxDEV)("div",{className:"LibraryDemo__demo-content",children:e},void 0,!1,{fileName:m,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:163,columnNumber:11},this),"source"===l&&(0,u.jsxDEV)("div",{className:"LibraryDemo__source",children:(0,u.jsxDEV)("ul",{children:d},void 0,!1,{fileName:m,lineNumber:169,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:168,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:161,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:141,columnNumber:5},this)}var d={Page:function({children:e,title:i}){return(0,u.jsxDEV)("section",{className:"LibraryPage",children:[(0,u.jsxDEV)("h1",{className:"LibraryPage__heading",children:i},void 0,!1,{fileName:m,lineNumber:52,columnNumber:7},this),e]},void 0,!0,{fileName:m,lineNumber:51,columnNumber:5},this)},Pattern:function({children:e,title:i}){return(0,u.jsxDEV)("section",{className:"LibraryPattern",children:[(0,u.jsxDEV)("h2",{className:"LibraryPattern__heading",children:i},void 0,!1,{fileName:m,lineNumber:66,columnNumber:7},this),e]},void 0,!0,{fileName:m,lineNumber:65,columnNumber:5},this)},Example:function({children:e,title:i,variant:n="split"}){const t=(0,r.toChildArray)(e),o=t.filter((e=>"object"==typeof e&&(null==e?void 0:e.type)===c)),s=t.filter((e=>!o.includes(e)));return(0,u.jsxDEV)("div",{className:(0,l.default)("LibraryExample",`LibraryExample--${n}`),children:[(0,u.jsxDEV)("div",{className:"LibraryExample__content",children:[i&&(0,u.jsxDEV)("h3",{className:"LibraryExample__heading",children:i},void 0,!1,{fileName:m,lineNumber:103,columnNumber:19},this),s]},void 0,!0,{fileName:m,lineNumber:102,columnNumber:7},this),(0,u.jsxDEV)("div",{className:"LibraryExample__demos",children:o},void 0,!1,{fileName:m,lineNumber:106,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:101,columnNumber:5},this)},Demo:c};n.default=d},{"../../components/buttons":24,"../util/jsx-to-string":52,classnames:54,preact:56,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],30:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,r.jsxDEV)(l.default.Page,{title:"Pattern Library",children:[(0,r.jsxDEV)("p",{children:"This pattern library demonstrates foundations, patterns and components that can be used in Hypothesis front-end applications."},void 0,!1,{fileName:o,lineNumber:6,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Foundations"},void 0,!1,{fileName:o,lineNumber:11,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Foundations"},void 0,!1,{fileName:o,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:o,lineNumber:13,columnNumber:7},this),(0,r.jsxDEV)("p",{children:"They exist independently of implementation."},void 0,!1,{fileName:o,lineNumber:19,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Patterns"},void 0,!1,{fileName:o,lineNumber:21,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Patterns"},void 0,!1,{fileName:o,lineNumber:24,columnNumber:9},this)," are modular implementations of the design system ",(0,r.jsxDEV)("strong",{children:"foundations"},void 0,!1,{fileName:o,lineNumber:25,columnNumber:16},this),"—from the atomic to the complex. These implementations are in HTML and CSS."]},void 0,!0,{fileName:o,lineNumber:23,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Components"},void 0,!1,{fileName:o,lineNumber:29,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Components"},void 0,!1,{fileName:o,lineNumber:32,columnNumber:9},this)," are"," ",(0,r.jsxDEV)("a",{href:"https://preactjs.com/",children:"Preact"},void 0,!1,{fileName:o,lineNumber:33,columnNumber:9},this)," components that are built using underlying ",(0,r.jsxDEV)("strong",{children:"patterns"},void 0,!1,{fileName:o,lineNumber:34,columnNumber:26},this),"."]},void 0,!0,{fileName:o,lineNumber:31,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:5,columnNumber:5},this)};var t,l=(t=e("./Library"))&&t.__esModule?t:{default:t},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js"},{"./Library":29,"preact/compat/jsx-dev-runtime":55}],31:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function({baseURL:e="/ui-playground",extraRoutes:i=[]}){const n=(0,o.getRoutes)().concat(i),[t,m]=(0,s.useRoute)(e,n),c=t?(0,a.jsxDEV)(t.component,{},void 0,!1,{fileName:u,lineNumber:34,columnNumber:5},this):(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("h1",{className:"heading",children:":("},void 0,!1,{fileName:u,lineNumber:37,columnNumber:7},this),(0,a.jsxDEV)("p",{children:"Page not found."},void 0,!1,{fileName:u,lineNumber:38,columnNumber:7},this)]},void 0,!0),d=[{title:"Foundations",routes:(0,o.getRoutes)("foundations")},{title:"Patterns",routes:(0,o.getRoutes)("patterns")},{title:"Common Components",routes:(0,o.getRoutes)("components")}];return i.length&&d.push({title:"Application Patterns",routes:i}),(0,a.jsxDEV)("main",{className:"PlaygroundApp",children:[(0,a.jsxDEV)("div",{className:"PlaygroundApp__sidebar",children:[(0,a.jsxDEV)("div",{className:"PlaygroundApp__sidebar-home",children:(0,a.jsxDEV)("a",{href:e,onClick:e=>m(e,"/"),children:(0,a.jsxDEV)(r.SvgIcon,{name:"logo"},void 0,!1,{fileName:u,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:56,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:55,columnNumber:9},this),d.map((e=>(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)("h2",{children:e.title},void 0,!1,{fileName:u,lineNumber:62,columnNumber:13},this),(0,a.jsxDEV)("ul",{children:e.routes.map((({route:e,title:i})=>(0,a.jsxDEV)("li",{children:(0,a.jsxDEV)("a",{className:(0,l.default)("PlaygroundApp__nav-item",{"is-active":t.route===e}),href:`${e}`,onClick:i=>m(i,e),children:i},void 0,!1,{fileName:u,lineNumber:66,columnNumber:19},this)},i,!1,{fileName:u,lineNumber:65,columnNumber:17},this)))},void 0,!1,{fileName:u,lineNumber:63,columnNumber:13},this)]},e.title,!0,{fileName:u,lineNumber:61,columnNumber:11},this)))]},void 0,!0,{fileName:u,lineNumber:54,columnNumber:7},this),(0,a.jsxDEV)("div",{className:"PlaygroundApp__content",children:c},void 0,!1,{fileName:u,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:53,columnNumber:5},this)};var t,l=(t=e("classnames"))&&t.__esModule?t:{default:t},r=e("../../components/SvgIcon"),o=e("../routes"),s=e("../router"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js"},{"../../components/SvgIcon":20,"../router":50,"../routes":51,classnames:54,"preact/compat/jsx-dev-runtime":55}],32:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Buttons",children:[(0,o.jsxDEV)("p",{children:["Button components support the following ",(0,o.jsxDEV)("strong",{children:"variants"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:49},this),":"]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)("ul",{children:[(0,o.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:s,lineNumber:11,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Primary: For indicating that a button represents a primary action"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Dark: For rendering a button on a grey background"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Light: This variant should only be used for non-critical buttons on white backgrounds (low contrast)."},void 0,!1,{fileName:s,lineNumber:16,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:10,columnNumber:7},this),(0,o.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:s,lineNumber:21,columnNumber:7},this),(0,o.jsxDEV)("ul",{children:[(0,o.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:s,lineNumber:26,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Pressed"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Expanded"},void 0,!1,{fileName:s,lineNumber:28,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Disabled"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:25,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"IconButton",children:[(0,o.jsxDEV)("p",{children:"A button containing an icon and no other content."},void 0,!1,{fileName:s,lineNumber:33,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic use and sizes",children:[(0,o.jsxDEV)("p",{children:["The optional ",(0,o.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:39,columnNumber:13},this),". The default sizing is ",(0,o.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:s,lineNumber:39,columnNumber:53},this),"."]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:[(0,o.jsxDEV)(l.IconButton,{icon:"edit",title:"Edit",size:"small"},void 0,!1,{fileName:s,lineNumber:42,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"edit",title:"Edit",size:"medium"},void 0,!1,{fileName:s,lineNumber:43,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"edit",title:"Edit",size:"large"},void 0,!1,{fileName:s,lineNumber:44,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:41,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:34,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",variant:"wide",children:[(0,o.jsxDEV)("h4",{children:"Dark variant"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this),(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:51,columnNumber:17},this)," dark variant is for use on darker (light grey vs. white) backgrounds. Note that this button, unlike other"," ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:53,columnNumber:13},this),"s, has a background color. This is to allow for a use case in which the dark ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:54,columnNumber:46},this)," is initially fixed on a grey background but floats on top of content when scrolled."]},void 0,!0,{fileName:s,lineNumber:50,columnNumber:11},this),(0,o.jsxDEV)("h4",{children:"Light variant"},void 0,!1,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)("p",{children:"This variant should only be used for non-critical icons on white backgrounds (low contrast)."},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation"},void 0,!1,{fileName:s,lineNumber:64,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0},void 0,!1,{fileName:s,lineNumber:65,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0},void 0,!1,{fileName:s,lineNumber:66,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0},void 0,!1,{fileName:s,lineNumber:67,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:63,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",variant:"primary"},void 0,!1,{fileName:s,lineNumber:71,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:82,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:88,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:70,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",variant:"dark"},void 0,!1,{fileName:s,lineNumber:97,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:98,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:104,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:110,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:96,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Light",withSource:!0,children:[(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",variant:"light"},void 0,!1,{fileName:s,lineNumber:119,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:124,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:130,columnNumber:13},this),(0,o.jsxDEV)(l.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:136,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:118,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:32,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"LabeledButton",children:[(0,o.jsxDEV)("p",{children:"A button with content and, optionally, an icon."},void 0,!1,{fileName:s,lineNumber:147,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic use and sizes",children:[(0,o.jsxDEV)("p",{children:["The optional ",(0,o.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:153,columnNumber:13},this),". The default sizing is ",(0,o.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:s,lineNumber:153,columnNumber:53},this),"."]},void 0,!0,{fileName:s,lineNumber:149,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label only",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{size:"small",children:"Edit"},void 0,!1,{fileName:s,lineNumber:156,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{children:"Edit"},void 0,!1,{fileName:s,lineNumber:157,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{size:"large",children:"Edit"},void 0,!1,{fileName:s,lineNumber:158,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:155,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label, icon",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",size:"small",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:162,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:165,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",size:"large",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:166,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:161,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label, icon on right",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",size:"small",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:172,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:175,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"profile",size:"large",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:178,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:171,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:148,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",variant:"wide",children:[(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:s,lineNumber:186,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",pressed:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:187,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",expanded:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:190,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",disabled:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:193,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:185,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:199,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:202,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:205,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:208,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:198,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:214,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",pressed:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:217,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",expanded:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:220,columnNumber:13},this),(0,o.jsxDEV)(l.LabeledButton,{icon:"edit",disabled:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:223,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:213,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:184,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:146,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"LinkButton",children:[(0,o.jsxDEV)("p",{children:"A button styled to look like a link (anchor tag)."},void 0,!1,{fileName:s,lineNumber:231,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",children:[(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(l.LinkButton,{children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:235,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:236,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:237,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:238,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:234,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(l.LinkButton,{variant:"primary",children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:242,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"primary",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:243,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"primary",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:246,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"primary",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:249,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:241,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(l.LinkButton,{variant:"dark",children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:255,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"dark",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:256,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"dark",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:259,columnNumber:13},this),(0,o.jsxDEV)(l.LinkButton,{variant:"dark",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:262,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:254,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:233,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:230,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../../"),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],33:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,r.jsxDEV)(l.default.Page,{title:"Colors",children:[(0,r.jsxDEV)(l.default.Pattern,{title:"Brand red",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:a},void 0,!1,{fileName:o,lineNumber:58,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:57,columnNumber:7},this),(0,r.jsxDEV)(l.default.Pattern,{title:"Greys",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:u},void 0,!1,{fileName:o,lineNumber:64,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:63,columnNumber:7},this),(0,r.jsxDEV)(l.default.Pattern,{title:"State indicators",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:m},void 0,!1,{fileName:o,lineNumber:70,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:56,columnNumber:5},this)};var t,l=(t=e("../Library"))&&t.__esModule?t:{default:t},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";function s({colorName:e}){return(0,r.jsxDEV)("div",{children:[(0,r.jsxDEV)("div",{className:`hyp-u-bg-color--${e}`,style:"width:16rem;height:2rem;margin-right:1em"},void 0,!1,{fileName:o,lineNumber:31,columnNumber:7},this),(0,r.jsxDEV)("p",{children:(0,r.jsxDEV)("i",{children:e},void 0,!1,{fileName:o,lineNumber:36,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:35,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:30,columnNumber:5},this)}const a=["brand"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:43,columnNumber:3},void 0))),u=["white","grey-0","grey-1","grey-2","grey-3","grey-4","grey-5","grey-6","grey-7","grey-8","grey-9"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:47,columnNumber:3},void 0))),m=["success","notice","error"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:51,columnNumber:3},void 0)))},{"../Library":29,"preact/compat/jsx-dev-runtime":55}],34:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,s.jsxDEV)(r.default.Page,{title:"Containers",children:[(0,s.jsxDEV)(r.default.Pattern,{title:"Frame",children:(0,s.jsxDEV)(r.default.Example,{title:"Laying out content in a Frame",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Frame"},void 0,!1,{fileName:a,lineNumber:12,columnNumber:17},this)," component renders content inside of a"," ",(0,s.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:a,lineNumber:13,columnNumber:13},this)," design pattern."]},void 0,!0,{fileName:a,lineNumber:11,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(l.Frame,{children:[(0,s.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:a,lineNumber:17,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:a,lineNumber:18,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:16,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:15,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:10,columnNumber:9},this)},void 0,!1,{fileName:a,lineNumber:9,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Card",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:a,lineNumber:26,columnNumber:15},this)," component pattern provides a card-like layout using the ",(0,s.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:a,lineNumber:27,columnNumber:21},this)," pattern."]},void 0,!0,{fileName:a,lineNumber:25,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out content in a Card",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(l.Card,{children:[(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:32,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:33,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:29,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Overriding styles",children:[(0,s.jsxDEV)("p",{children:["This example shows overriding the background color of a"," ",(0,s.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:a,lineNumber:40,columnNumber:13},this)," using a utility class."]},void 0,!0,{fileName:a,lineNumber:38,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(l.Card,{classes:"hyp-u-bg-color--grey-3",children:[(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:44,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:45,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:37,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:24,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Actions",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:a,lineNumber:53,columnNumber:15},this)," component pattern lays out actions (buttons)."]},void 0,!0,{fileName:a,lineNumber:52,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out buttons with Actions",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(l.Actions,{children:[(0,s.jsxDEV)(l.LabeledButton,{children:"Cancel"},void 0,!1,{fileName:a,lineNumber:59,columnNumber:15},this),(0,s.jsxDEV)(l.LabeledButton,{children:"Maybe"},void 0,!1,{fileName:a,lineNumber:60,columnNumber:15},this),(0,s.jsxDEV)(l.LabeledButton,{variant:"primary",children:"OK"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:58,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:57,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:56,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out buttons vertically with Actions",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(l.Actions,{direction:"column",children:[(0,s.jsxDEV)(l.LabeledButton,{children:"This is one option"},void 0,!1,{fileName:a,lineNumber:69,columnNumber:15},this),(0,s.jsxDEV)(l.LabeledButton,{children:"This is another option"},void 0,!1,{fileName:a,lineNumber:70,columnNumber:15},this),(0,s.jsxDEV)(l.LabeledButton,{variant:"primary",children:"This is the best option"},void 0,!1,{fileName:a,lineNumber:71,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:68,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:51,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Scrollbox",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:a,lineNumber:81,columnNumber:15},this)," component is a container for (potentially-) overflowing content. It provides a scroll context and is styled with the ",(0,s.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:a,lineNumber:83,columnNumber:15},this)," pattern."]},void 0,!0,{fileName:a,lineNumber:80,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{variant:"wide",children:[(0,s.jsxDEV)("p",{children:["A ",(0,s.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:a,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:a,lineNumber:86,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{title:"Basic scrollbox",withSource:!0,children:(0,s.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,s.jsxDEV)(l.Scrollbox,{children:(0,s.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,s.jsxDEV)(o.SampleListElements,{},void 0,!1,{fileName:a,lineNumber:95,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:94,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:93,columnNumber:15},this)},void 0,!1,{fileName:a,lineNumber:92,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:91,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{title:"Scrollbox with header",withSource:!0,children:(0,s.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,s.jsxDEV)(l.Scrollbox,{withHeader:!0,children:[(0,s.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,s.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:"NATO Alphabet"},void 0,!1,{fileName:a,lineNumber:104,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:103,columnNumber:17},this),(0,s.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,s.jsxDEV)(o.SampleListElements,{},void 0,!1,{fileName:a,lineNumber:109,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:108,columnNumber:17},this)]},void 0,!0,{fileName:a,lineNumber:102,columnNumber:15},this)},void 0,!1,{fileName:a,lineNumber:101,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:100,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:79,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:8,columnNumber:5},this)};var t,l=e("../../.."),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("./samples"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js"},{"../../..":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55}],35:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,l.useState)(!1);return(0,a.jsxDEV)(o.default.Page,{title:"Containers",children:[(0,a.jsxDEV)(o.default.Pattern,{title:"Frame",children:[(0,a.jsxDEV)(o.default.Example,{title:"Basic frame",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:u,lineNumber:15,columnNumber:15},this)," provides a border, background, padding and vertical spacing of immediate children."]},void 0,!0,{fileName:u,lineNumber:14,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-frame",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:20,columnNumber:15},this),(0,a.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:23,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:13,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Using frames with the 'clean' theme",children:[(0,a.jsxDEV)("p",{children:"Clean-theme styling removes borders from frames."},void 0,!1,{fileName:u,lineNumber:32,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"theme-clean",children:(0,a.jsxDEV)("div",{className:"hyp-frame",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:36,columnNumber:17},this),(0,a.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:39,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:35,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:34,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:33,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:31,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:12,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Card",children:[(0,a.jsxDEV)(o.default.Example,{title:"Basic card",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:u,lineNumber:52,columnNumber:15},this)," is a frame with a shadow and hover-shadow effect that fills available horizontal space. It extends ",(0,a.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:u,lineNumber:53,columnNumber:63},this),"."]},void 0,!0,{fileName:u,lineNumber:51,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.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:u,lineNumber:58,columnNumber:15},this),(0,a.jsxDEV)("div",{children:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},void 0,!1,{fileName:u,lineNumber:62,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:56,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:50,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Card with no hover",children:[(0,a.jsxDEV)("p",{children:"A card's hover can be disabled by using a modifying class."},void 0,!1,{fileName:u,lineNumber:71,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card--no-hover",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:72,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:70,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Card example with actions",children:[(0,a.jsxDEV)("p",{children:"This example shows a card with some available actions."},void 0,!1,{fileName:u,lineNumber:81,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:84,columnNumber:15},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:88,columnNumber:17},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:89,columnNumber:17},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:90,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:87,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:83,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:82,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:80,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Using cards with the 'clean' theme",children:[(0,a.jsxDEV)("p",{children:"Clean-theme styling removes hover shadows and borders."},void 0,!1,{fileName:u,lineNumber:97,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"theme-clean",children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.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:u,lineNumber:101,columnNumber:17},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:106,columnNumber:19},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:107,columnNumber:19},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:108,columnNumber:19},this)]},void 0,!0,{fileName:u,lineNumber:105,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:100,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:98,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:96,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:49,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Actions",children:[(0,a.jsxDEV)("p",{children:["The ",(0,a.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:u,lineNumber:118,columnNumber:15},this)," pattern lays out a set of items, typically buttons, in a row (default) or column, with spacing."," "]},void 0,!0,{fileName:u,lineNumber:117,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Horizontal (default) layout",children:[(0,a.jsxDEV)("p",{children:["These examples show ",(0,a.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:u,lineNumber:123,columnNumber:33},this)," used in its default layout (horizontal) with ",(0,a.jsxDEV)("code",{children:"LabeledButton"},void 0,!1,{fileName:u,lineNumber:124,columnNumber:31},this)," and"," ",(0,a.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:u,lineNumber:125,columnNumber:13},this)," components."]},void 0,!0,{fileName:u,lineNumber:122,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.LabeledButton,{icon:"profile",children:"User"},void 0,!1,{fileName:u,lineNumber:129,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:u,lineNumber:130,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{icon:"trash",children:"Delete"},void 0,!1,{fileName:u,lineNumber:131,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:128,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:127,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:137,columnNumber:15},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:138,columnNumber:15},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:139,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:136,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:135,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:121,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Columnar layout",children:(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,a.jsxDEV)(r.LabeledButton,{children:"User"},void 0,!1,{fileName:u,lineNumber:147,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{children:"Edit"},void 0,!1,{fileName:u,lineNumber:148,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{children:"Delete"},void 0,!1,{fileName:u,lineNumber:149,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:146,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:145,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:144,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Columnar layout, filling space",children:[(0,a.jsxDEV)("p",{children:["This example shows buttons stretching to fill available space in"," ",(0,a.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:u,lineNumber:157,columnNumber:13},this),"."]},void 0,!0,{fileName:u,lineNumber:155,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"width:300px",children:(0,a.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"Do this"},void 0,!1,{fileName:u,lineNumber:162,columnNumber:17},this),(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"No, this!"},void 0,!1,{fileName:u,lineNumber:163,columnNumber:17},this),(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"Maybe this?"},void 0,!1,{fileName:u,lineNumber:164,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:161,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:160,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:159,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:154,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:116,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Modal",children:(0,a.jsxDEV)(o.default.Example,{title:"Responsive modal container",children:[(0,a.jsxDEV)("p",{children:["This pattern makes use of the ",(0,a.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:u,lineNumber:174,columnNumber:43},this)," pattern. It responsively positions and sizes a container in the viewport to hold modal content."]},void 0,!0,{fileName:u,lineNumber:173,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:u,lineNumber:180,columnNumber:15},this),(0,a.jsxDEV)("div",{className:"hyp-u-overlay",style:{visibility:e?"visible":"hidden"},children:(0,a.jsxDEV)("div",{className:"hyp-modal",children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.jsxDEV)("div",{children:(0,a.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:u,lineNumber:193,columnNumber:23},this)},void 0,!1,{fileName:u,lineNumber:192,columnNumber:21},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:u,lineNumber:207,columnNumber:23},this)},void 0,!1,{fileName:u,lineNumber:206,columnNumber:21},this)]},void 0,!0,{fileName:u,lineNumber:191,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:190,columnNumber:17},this)},void 0,!1,{fileName:u,lineNumber:186,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:179,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:178,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:172,columnNumber:9},this)},void 0,!1,{fileName:u,lineNumber:171,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Scrollbox",children:[(0,a.jsxDEV)("p",{children:[(0,a.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:u,lineNumber:224,columnNumber:11},this)," is a CSS-only pattern that provides scroll-hint affordances for overflowing content (shadows). It sets its own"," ",(0,a.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:u,lineNumber:226,columnNumber:11},this)," scrolling context, but authors need to define bounding dimensions."]},void 0,!0,{fileName:u,lineNumber:223,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"List in a scrollbox",children:[(0,a.jsxDEV)("p",{children:["This example shows an overflowing ",(0,a.jsxDEV)("code",{children:"ul"},void 0,!1,{fileName:u,lineNumber:231,columnNumber:47},this)," in a"," ",(0,a.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:u,lineNumber:232,columnNumber:13},this),"."]},void 0,!0,{fileName:u,lineNumber:230,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,a.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,a.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,a.jsxDEV)(s.SampleListElements,{},void 0,!1,{fileName:u,lineNumber:238,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:237,columnNumber:17},this)},void 0,!1,{fileName:u,lineNumber:236,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:235,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:234,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:229,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Scrollbox with header offset",children:[(0,a.jsxDEV)("p",{children:["The ",(0,a.jsxDEV)("code",{children:"scrollbox--with-header"},void 0,!1,{fileName:u,lineNumber:247,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:u,lineNumber:246,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,a.jsxDEV)("div",{className:"hyp-scrollbox--with-header",children:[(0,a.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,a.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:(0,a.jsxDEV)("strong",{children:"NATO Phonetic Alphabet"},void 0,!1,{fileName:u,lineNumber:257,columnNumber:21},this)},void 0,!1,{fileName:u,lineNumber:256,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:255,columnNumber:17},this),(0,a.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,a.jsxDEV)(s.SampleListElements,{},void 0,!1,{fileName:u,lineNumber:261,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:260,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:254,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:253,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:252,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:245,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:222,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:11,columnNumber:5},this)};var t,l=e("preact/hooks"),r=e("../../../"),o=(t=e("../Library"))&&t.__esModule?t:{default:t},s=e("./samples"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js"},{"../../../":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],36:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,u.jsxDEV)(o.default.Page,{title:"Dialogs",children:[(0,u.jsxDEV)(o.default.Pattern,{title:"Dialog",children:[(0,u.jsxDEV)("p",{children:["A ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:177,columnNumber:13},this)," prompts for user interaction and will take focus when opened."]},void 0,!0,{fileName:m,lineNumber:176,columnNumber:9},this),(0,u.jsxDEV)("p",{children:["Use a ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:181,columnNumber:17},this)," when you want to route focus. Consider using a ",(0,u.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:m,lineNumber:182,columnNumber:13},this)," for presenting panel-styled content that does not require grabbing focus."]},void 0,!0,{fileName:m,lineNumber:180,columnNumber:9},this),(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"Dialogs"},void 0,!1,{fileName:m,lineNumber:186,columnNumber:11},this)," are styled using the ",(0,u.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:m,lineNumber:186,columnNumber:53},this)," pattern."]},void 0,!0,{fileName:m,lineNumber:185,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Setting initial focus",children:[(0,u.jsxDEV)("p",{children:["This example shows a dismiss-able ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:190,columnNumber:47},this)," with an explicitly-provided element (",(0,u.jsxDEV)("code",{children:"ref"},void 0,!1,{fileName:m,lineNumber:191,columnNumber:42},this),") that should take initial focus: a text ",(0,u.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:m,lineNumber:192,columnNumber:35},this),". The highlighted outline is added here by using ",(0,u.jsxDEV)("code",{children:".hyp-u-focus-outline"},void 0,!1,{fileName:m,lineNumber:193,columnNumber:33},this)," on the"," ",(0,u.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:m,lineNumber:194,columnNumber:13},this)," element."]},void 0,!0,{fileName:m,lineNumber:189,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["In some cases, you might need finer control over which element is focused when the ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:198,columnNumber:30},this)," or ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:198,columnNumber:53},this)," is opened. This might arise if you have nested components within a"," ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:200,columnNumber:13},this)," or ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:200,columnNumber:35},this),", or there is complex logic about focus. Setting the ",(0,u.jsxDEV)("code",{children:"initialFocus"},void 0,!1,{fileName:m,lineNumber:201,columnNumber:38},this)," prop to"," ",(0,u.jsxDEV)("code",{children:"null"},void 0,!1,{fileName:m,lineNumber:202,columnNumber:13},this)," will opt out of automatic focus handling."]},void 0,!0,{fileName:m,lineNumber:196,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(c,{},void 0,!1,{fileName:m,lineNumber:206,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:205,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:188,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:175,columnNumber:7},this),(0,u.jsxDEV)(o.default.Pattern,{title:"Modal",children:[(0,u.jsxDEV)("p",{children:["A ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:213,columnNumber:13},this)," is a type of ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:213,columnNumber:45},this)," that centers on the screen and obscures the background with an overlay."]},void 0,!0,{fileName:m,lineNumber:212,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Basic usage",children:[(0,u.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:m,lineNumber:217,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(d,{},void 0,!1,{fileName:m,lineNumber:222,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:221,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:216,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Handling content overflow",children:[(0,u.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:m,lineNumber:227,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["To make something in a modal scroll-able, apply"," ",(0,u.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:m,lineNumber:234,columnNumber:13},this)," to the element you wish to contain. This element needs to be an immediate-child element of the"," ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:236,columnNumber:13},this),"."]},void 0,!0,{fileName:m,lineNumber:232,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(h,{},void 0,!1,{fileName:m,lineNumber:239,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:238,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:211,columnNumber:7},this),(0,u.jsxDEV)(o.default.Pattern,{title:"ConfirmModal",children:[(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:m,lineNumber:246,columnNumber:11},this)," is intended to mirror the functionality of"," ",(0,u.jsxDEV)("code",{children:"window.confirm"},void 0,!1,{fileName:m,lineNumber:247,columnNumber:11},this),"."]},void 0,!0,{fileName:m,lineNumber:245,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{children:[(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:m,lineNumber:251,columnNumber:13},this)," prompts the user for a boolean yes/no input. Close and cancel are considered no."]},void 0,!0,{fileName:m,lineNumber:250,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["Handlers need to be provided for what to do on yes (",(0,u.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:m,lineNumber:256,columnNumber:13},this),") and no/cancel (",(0,u.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:m,lineNumber:256,columnNumber:52},this),"). Typically, both would (also) close the modal, though in this example, the ",(0,u.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:m,lineNumber:258,columnNumber:26},this)," handler does not close the modal."]},void 0,!0,{fileName:m,lineNumber:254,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(N,{},void 0,!1,{fileName:m,lineNumber:262,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:261,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:249,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:244,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:174,columnNumber:5},this)};var t,l=e("preact"),r=e("preact/hooks"),o=(t=e("../Library"))&&t.__esModule?t:{default:t},s=e("../../../"),a=e("./samples"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";function c(){const[e,i]=(0,r.useState)(!1),n=(0,l.createRef)(),t=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose maybe"),children:"Maybe"},"maybe",!1,{fileName:m,lineNumber:23,columnNumber:5},this),(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose yep"),variant:"primary",children:"Do it!"},"yep",!1,{fileName:m,lineNumber:26,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Dialog,{buttons:t,icon:"edit",initialFocus:n,onCancel:()=>i(!1),title:"This is a Dialog",children:[(0,u.jsxDEV)("p",{children:["This is a ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:54,columnNumber:21},this),", with initial focus on a"," ",(0,u.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:m,lineNumber:55,columnNumber:11},this)," component input."]},void 0,!0,{fileName:m,lineNumber:53,columnNumber:9},this),(0,u.jsxDEV)(s.TextInputWithButton,{children:[(0,u.jsxDEV)(s.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:m,lineNumber:58,columnNumber:11},this),(0,u.jsxDEV)(s.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:m,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:46,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:m,lineNumber:37,columnNumber:7},this)}function d(){const[e,i]=(0,r.useState)(!1),n=(0,l.createRef)(),t=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:m,lineNumber:71,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Modal,{buttons:t,initialFocus:n,onCancel:()=>i(!1),title:"Sample Modal",children:[(0,u.jsxDEV)("p",{children:["This is a ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:98,columnNumber:21},this),", with initial focus on a"," ",(0,u.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:m,lineNumber:99,columnNumber:11},this)," component input."]},void 0,!0,{fileName:m,lineNumber:97,columnNumber:9},this),(0,u.jsxDEV)(s.TextInputWithButton,{children:[(0,u.jsxDEV)(s.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:m,lineNumber:102,columnNumber:11},this),(0,u.jsxDEV)(s.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:m,lineNumber:103,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:101,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:91,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Modal Example"},void 0,!1,{fileName:m,lineNumber:82,columnNumber:7},this)}function h(){const[e,i]=(0,r.useState)(!1),n=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:m,lineNumber:114,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Modal,{buttons:n,onCancel:()=>i(!1),title:"Modal with overflowing content",children:(0,u.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,u.jsxDEV)(a.LoremIpsum,{},void 0,!1,{fileName:m,lineNumber:140,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:139,columnNumber:9},this)},void 0,!1,{fileName:m,lineNumber:134,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Long Modal"},void 0,!1,{fileName:m,lineNumber:125,columnNumber:7},this)}function N(){const[e,i]=(0,r.useState)(!1);return e?(0,u.jsxDEV)(s.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:m,lineNumber:161,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show ConfirmModal Example"},void 0,!1,{fileName:m,lineNumber:152,columnNumber:7},this)}},{"../../../":28,"../Library":29,"./samples":48,preact:56,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],37:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,l.useState)(!0),[n,t]=(0,l.useState)(!1),[u,m]=(0,l.useState)(!0);return(0,s.jsxDEV)(o.default.Page,{title:"Forms",children:[(0,s.jsxDEV)(o.default.Pattern,{title:"LabeledCheckbox",children:[(0,s.jsxDEV)(o.default.Example,{title:"Unchecked (default)",children:[(0,s.jsxDEV)("div",{style:"font-size: 2em",children:[n&&"🍉"," "]},void 0,!0,{fileName:a,lineNumber:19,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.LabeledCheckbox,{checked:n,name:"test-alternative",onToggle:e=>t(e),children:"I want a watermelon"},void 0,!1,{fileName:a,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:18,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Checked",children:[(0,s.jsxDEV)("div",{style:"font-size: 2em",children:e&&"🥪"},void 0,!1,{fileName:a,lineNumber:35,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{style:{width:"300px"},withSource:!0,children:(0,s.jsxDEV)(r.LabeledCheckbox,{name:"test",checked:e,onToggle:e=>i(e),children:"I want a sandwich"},void 0,!1,{fileName:a,lineNumber:37,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:36,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:34,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:17,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"TextInput",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:a,lineNumber:50,columnNumber:15},this)," component is a basic wrapper around an",(0,s.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:a,lineNumber:51,columnNumber:11},this)," field."]},void 0,!0,{fileName:a,lineNumber:49,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Basic usage",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input"},void 0,!1,{fileName:a,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:54,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:53,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"As type='url'",children:[(0,s.jsxDEV)("p",{children:[(0,s.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:13},this)," renders an ",(0,s.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:47},this)," field of"," ",(0,s.jsxDEV)("code",{children:'type="text"'},void 0,!1,{fileName:a,lineNumber:62,columnNumber:13},this)," by default, but text-like `type` values are also supported (",(0,s.jsxDEV)("code",{children:"email"},void 0,!1,{fileName:a,lineNumber:63,columnNumber:40},this),", ",(0,s.jsxDEV)("code",{children:"search"},void 0,!1,{fileName:a,lineNumber:63,columnNumber:60},this),","," ",(0,s.jsxDEV)("code",{children:"url"},void 0,!1,{fileName:a,lineNumber:64,columnNumber:13},this),")."]},void 0,!0,{fileName:a,lineNumber:60,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input",type:"url"},void 0,!1,{fileName:a,lineNumber:67,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:66,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:59,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Error state",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input",hasError:!0},void 0,!1,{fileName:a,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:72,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:48,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"TextInputWithButton",children:[(0,s.jsxDEV)("p",{children:["This component wraps the ",(0,s.jsxDEV)("code",{children:"text-input-with-button"},void 0,!1,{fileName:a,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:a,lineNumber:79,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["Current usage favors the ",(0,s.jsxDEV)("code",{children:"dark"},void 0,!1,{fileName:a,lineNumber:85,columnNumber:36},this)," variant of"," ",(0,s.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:a,lineNumber:86,columnNumber:11},this),"."]},void 0,!0,{fileName:a,lineNumber:84,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Basic usage",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInputWithButton,{children:[(0,s.jsxDEV)(r.TextInput,{name:"my-input"},void 0,!1,{fileName:a,lineNumber:91,columnNumber:15},this),(0,s.jsxDEV)(r.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:a,lineNumber:92,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:90,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:89,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:88,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Error state",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInputWithButton,{children:[(0,s.jsxDEV)(r.TextInput,{name:"my-input",hasError:u},void 0,!1,{fileName:a,lineNumber:100,columnNumber:15},this),(0,s.jsxDEV)(r.IconButton,{icon:"arrow-right",variant:"dark",title:"go",onClick:()=>m(!u)},void 0,!1,{fileName:a,lineNumber:101,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:98,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:97,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:78,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:16,columnNumber:5},this)};var t,l=e("preact/hooks"),r=e("../../.."),o=(t=e("../Library"))&&t.__esModule?t:{default:t},s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],38:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Forms",children:[(0,o.jsxDEV)(r.default.Pattern,{title:"Checkbox",children:[(0,o.jsxDEV)("p",{children:["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ",(0,o.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:s,lineNumber:10,columnNumber:44},this),"."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Checkbox",children:[(0,o.jsxDEV)("p",{children:["This example shows an ",(0,o.jsxDEV)("code",{children:'input type="checkbox"'},void 0,!1,{fileName:s,lineNumber:14,columnNumber:35},this)," ","element with the ",(0,o.jsxDEV)("code",{children:"checkbox"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:30},this)," pattern applied, both unchecked and checked."]},void 0,!0,{fileName:s,lineNumber:13,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing",children:[(0,o.jsxDEV)("div",{children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:17},this),(0,o.jsxDEV)(l.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:20,columnNumber:15},this),(0,o.jsxDEV)("div",{children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox",checked:!0},void 0,!1,{fileName:s,lineNumber:26,columnNumber:17},this),(0,o.jsxDEV)(l.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:25,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Checkbox with label",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("label",{className:"hyp-label",children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:s,lineNumber:36,columnNumber:15},this),(0,o.jsxDEV)(l.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:37,columnNumber:15},this),(0,o.jsxDEV)("span",{children:"Click me, please"},void 0,!1,{fileName:s,lineNumber:38,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:34,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:33,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Text inputs",children:[(0,o.jsxDEV)("p",{children:["A pattern for ",(0,o.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:s,lineNumber:46,columnNumber:25},this)]},void 0,!0,{fileName:s,lineNumber:45,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic text input",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("input",{className:"hyp-text-input",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input in an error state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("input",{className:"hyp-text-input has-error",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:58,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:44,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Text input with button",children:[(0,o.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:s,lineNumber:70,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input with a dark-variant IconButton",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{width:"300px"},children:(0,o.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,o.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:78,columnNumber:17},this),(0,o.jsxDEV)(l.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:s,lineNumber:79,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:75,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:74,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input and button in an error state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{width:"300px"},children:(0,o.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,o.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com",className:"has-error"},void 0,!1,{fileName:s,lineNumber:89,columnNumber:17},this),(0,o.jsxDEV)(l.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:s,lineNumber:94,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:88,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:87,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:86,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../../"),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],39:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,l.useState)(!1),[n,t]=(0,l.useState)(!1),[u,m]=(0,l.useState)(!1);return(0,s.jsxDEV)(o.default.Page,{title:"Layout",children:[(0,s.jsxDEV)(o.default.Pattern,{title:"Spacing Units",children:[(0,s.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,s.jsxDEV)("code",{children:"1rem"},void 0,!1,{fileName:a,lineNumber:80,columnNumber:33},this)," foundational unit."]},void 0,!0,{fileName:a,lineNumber:77,columnNumber:9},this),(0,s.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,s.jsxDEV)("div",{className:`hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${i}`,children:[(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--white",style:{paddingRight:"1rem"},children:(0,s.jsxDEV)("strong",{children:i},void 0,!1,{fileName:a,lineNumber:92,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:88,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--white hyp-u-stretch",style:{paddingLeft:"1rem"},children:(0,s.jsxDEV)("code",{children:e},void 0,!1,{fileName:a,lineNumber:98,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:94,columnNumber:15},this)]},i,!0,{fileName:a,lineNumber:84,columnNumber:13},this)))},void 0,!1,{fileName:a,lineNumber:82,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:76,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Horizontal spacing",children:[(0,s.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children."},void 0,!1,{fileName:a,lineNumber:106,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["The default spacing unit used by"," ",(0,s.jsxDEV)("code",{children:".hyp-u-horizontal-spacing"},void 0,!1,{fileName:a,lineNumber:113,columnNumber:11},this)," and mixins is 3, marked with an asterisk below."]},void 0,!0,{fileName:a,lineNumber:111,columnNumber:9},this),(0,s.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:(0,s.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-vertical-spacing",children:[(0,s.jsxDEV)(c,{direction:"horizontal",size:0},void 0,!1,{fileName:a,lineNumber:119,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:1},void 0,!1,{fileName:a,lineNumber:120,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:2},void 0,!1,{fileName:a,lineNumber:121,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:3,defaultSize:!0},void 0,!1,{fileName:a,lineNumber:122,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:4},void 0,!1,{fileName:a,lineNumber:123,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:5},void 0,!1,{fileName:a,lineNumber:124,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:6},void 0,!1,{fileName:a,lineNumber:125,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:7},void 0,!1,{fileName:a,lineNumber:126,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:8},void 0,!1,{fileName:a,lineNumber:127,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:9},void 0,!1,{fileName:a,lineNumber:128,columnNumber:13},this)]},void 0,!0,{fileName:a,lineNumber:118,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:117,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:105,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Vertical spacing",children:[(0,s.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust vertical spacing between an element's immediate children."},void 0,!1,{fileName:a,lineNumber:134,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["The default spacing unit used by ",(0,s.jsxDEV)("code",{children:".hyp-u-vertical-spacing"},void 0,!1,{fileName:a,lineNumber:140,columnNumber:44},this)," ","and mixins is 5, marked with an asterisk below."]},void 0,!0,{fileName:a,lineNumber:139,columnNumber:9},this),(0,s.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing--7",children:[(0,s.jsxDEV)(c,{direction:"vertical",size:0},void 0,!1,{fileName:a,lineNumber:144,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:1},void 0,!1,{fileName:a,lineNumber:145,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:2},void 0,!1,{fileName:a,lineNumber:146,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:3},void 0,!1,{fileName:a,lineNumber:147,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:4},void 0,!1,{fileName:a,lineNumber:148,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:5,defaultSize:!0},void 0,!1,{fileName:a,lineNumber:149,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:6},void 0,!1,{fileName:a,lineNumber:150,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:7},void 0,!1,{fileName:a,lineNumber:151,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:8},void 0,!1,{fileName:a,lineNumber:152,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:9},void 0,!1,{fileName:a,lineNumber:153,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:143,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:133,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Positioning and Overlay",children:[(0,s.jsxDEV)(o.default.Example,{title:"Centering in the viewport",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:a,lineNumber:160,columnNumber:17},this)," layout pattern centers an element both horizontally and vertically within the entire viewport."]},void 0,!0,{fileName:a,lineNumber:159,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:165,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",style:"width:450px;"+(e?"visibility:visible":"visibility:hidden"),children:(0,s.jsxDEV)("div",{className:"hyp-card",children:[(0,s.jsxDEV)("p",{children:"This is a card that is centered vertically and horizontally in the current viewport."},void 0,!1,{fileName:a,lineNumber:178,columnNumber:19},this),(0,s.jsxDEV)("div",{className:"hyp-actions",children:(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:183,columnNumber:21},this)},void 0,!1,{fileName:a,lineNumber:182,columnNumber:19},this)]},void 0,!0,{fileName:a,lineNumber:177,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:171,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:163,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:158,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Full-screen overlay",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:a,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:a,lineNumber:197,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>t(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:204,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-overlay",style:n?"visibility:visible":"visibility:hidden",children:(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,s.jsxDEV)(r.LabeledButton,{onClick:()=>t(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:217,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:216,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:210,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:203,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:202,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:196,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Full-screen overlay with fixed-centered content",children:[(0,s.jsxDEV)("p",{children:["This shows an example of combining the ",(0,s.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:a,lineNumber:228,columnNumber:52},this)," and"," ",(0,s.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:a,lineNumber:229,columnNumber:13},this)," patterns."]},void 0,!0,{fileName:a,lineNumber:227,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>m(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:233,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-overlay",style:u?"visibility:visible":"visibility:hidden",children:(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,s.jsxDEV)("div",{className:"hyp-card",style:"width:450px",children:[(0,s.jsxDEV)("div",{children:"This is content in a fixed-centered card of 450px width over a full-screen overlay."},void 0,!1,{fileName:a,lineNumber:247,columnNumber:21},this),(0,s.jsxDEV)("div",{className:"hyp-actions",children:(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>m(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:252,columnNumber:23},this)},void 0,!1,{fileName:a,lineNumber:251,columnNumber:21},this)]},void 0,!0,{fileName:a,lineNumber:246,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:245,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:239,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:232,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:231,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:157,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:75,columnNumber:5},this)};var t=u(e("classnames")),l=e("preact/hooks"),r=e("../../../"),o=u(e("../Library")),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";function u(e){return e&&e.__esModule?e:{default:e}}function m(){return(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--grey-4",style:{width:"2rem",height:"2rem"}},void 0,!1,{fileName:a,lineNumber:9,columnNumber:5},this)}function c({direction:e,size:i,defaultSize:n=!1}){const l="vertical"===e?"hyp-u-layout-column":"hyp-u-layout-row",r="vertical"===e?"hyp-u-vertical-spacing":"hyp-u-horizontal-spacing",o=`${r}--${i}`;return(0,s.jsxDEV)("div",{className:(0,t.default)(l,r),children:[n?(0,s.jsxDEV)("div",{children:(0,s.jsxDEV)("strong",{children:[i,"*"]},void 0,!0,{fileName:a,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:36,columnNumber:9},this):(0,s.jsxDEV)("div",{children:i},void 0,!1,{fileName:a,lineNumber:40,columnNumber:9},this),(0,s.jsxDEV)("div",{className:(0,t.default)(l,o,"hyp-u-border"),children:[(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:43,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:44,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:45,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:46,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:42,columnNumber:7},this),"horizontal"===e&&(0,s.jsxDEV)("div",{children:(0,s.jsxDEV)("code",{children:[".",o]},void 0,!0,{fileName:a,lineNumber:51,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:50,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:34,columnNumber:5},this)}},{"../../../":28,"../Library":29,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],40:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Panel",children:(0,o.jsxDEV)(r.default.Pattern,{title:"Panel",children:[(0,o.jsxDEV)(r.default.Example,{title:"Basic usage",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.Panel,{title:"Basic panel",children:"Here is a panel with no close button and very simple content."},void 0,!1,{fileName:s,lineNumber:10,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:9,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"With close button",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.Panel,{title:"Basic panel with close button",onClose:()=>alert("close clicked"),children:["Here is a panel with very basic content and a close button. Providing an ",(0,o.jsxDEV)("code",{children:"onClose"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:28},this)," function will cause a close button to render."]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:16,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"With header icon",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.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:s,lineNumber:30,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:29,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:28,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Clean theme",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"theme-clean",style:"width:100%",children:(0,o.jsxDEV)(l.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:s,lineNumber:43,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:42,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this)},void 0,!1,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../../"),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelComponents.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],41:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Panels",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," pattern is used by several components:"," ",(0,o.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:9},this),", ",(0,o.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:29},this),", ",(0,o.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:50},this),", e.g."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Panel",children:[(0,o.jsxDEV)("p",{children:["A panel is a card with a header and affordances for a close button. Use the ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:14,columnNumber:19},this)," modifier when using"," ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:11},this)," with an icon-only close button."]},void 0,!0,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with no header",children:[(0,o.jsxDEV)("p",{children:["This is in a panel that has no header. A header is not required, but you are encouraged to use ",(0,o.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:s,lineNumber:20,columnNumber:39},this)," in that case. Note that a ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:15},this)," will currently fill all available space. The containing element has been set to ",(0,o.jsxDEV)("code",{children:"max-width: 400px"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:48},this)," ","here."]},void 0,!0,{fileName:s,lineNumber:18,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{maxWidth:"400px"},children:(0,o.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:s,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with title but no close button",children:[(0,o.jsxDEV)("p",{children:"This example shows a panel with header and content, but no close affordances."},void 0,!1,{fileName:s,lineNumber:38,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel",children:[(0,o.jsxDEV)("header",{children:(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"This is a panel title in a panel header"},void 0,!1,{fileName:s,lineNumber:45,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:44,columnNumber:15},this),(0,o.jsxDEV)("div",{children:"This is panel content. There is a header but no close affordance."},void 0,!1,{fileName:s,lineNumber:49,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:37,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Closeable panel",children:[(0,o.jsxDEV)("p",{children:["This example shows a panel pattern with a ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:59,columnNumber:55},this)," ","close button, using the ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:60,columnNumber:37},this)," modifier."]},void 0,!0,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,o.jsxDEV)("header",{children:[(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title on a closeable panel"},void 0,!1,{fileName:s,lineNumber:65,columnNumber:17},this),(0,o.jsxDEV)("div",{className:"hyp-panel__close",children:(0,o.jsxDEV)(l.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:s,lineNumber:69,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:68,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:64,columnNumber:15},this),(0,o.jsxDEV)("div",{children:["This is panel content in a panel, using ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:57},this),"."]},void 0,!0,{fileName:s,lineNumber:72,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:63,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:62,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:57,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with actions",children:[(0,o.jsxDEV)("p",{children:["It is common to render some ",(0,o.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:s,lineNumber:82,columnNumber:41},this)," within a panel."]},void 0,!0,{fileName:s,lineNumber:81,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,o.jsxDEV)("header",{children:[(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title"},void 0,!1,{fileName:s,lineNumber:87,columnNumber:17},this),(0,o.jsxDEV)("div",{className:"hyp-panel__close",children:(0,o.jsxDEV)(l.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:s,lineNumber:89,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:86,columnNumber:15},this),(0,o.jsxDEV)("div",{children:"This is panel content in a panel that also has some available actions."},void 0,!1,{fileName:s,lineNumber:92,columnNumber:15},this),(0,o.jsxDEV)("div",{className:"hyp-actions",children:[(0,o.jsxDEV)(l.LabeledButton,{title:"Cancel",children:"Cancel"},void 0,!1,{fileName:s,lineNumber:97,columnNumber:17},this),(0,o.jsxDEV)(l.LabeledButton,{title:"Try again",variant:"primary",children:"Try again"},void 0,!1,{fileName:s,lineNumber:98,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:96,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:85,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:84,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:80,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../../"),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelPatterns.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],42:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Spinner",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"Spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," component is based on the ",(0,o.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:60},this)," ","pattern and renders an animated SVG."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Spinner",children:[(0,o.jsxDEV)(r.default.Example,{title:"Basic usage",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.Spinner,{},void 0,!1,{fileName:s,lineNumber:14,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:13,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Small size",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.Spinner,{size:"small"},void 0,!1,{fileName:s,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:17,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Large size",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.Spinner,{size:"large"},void 0,!1,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:22,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../.."),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],43:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Spinners",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," pattern can be used to show loading states. It is an animated SVG."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Spinner",children:[(0,o.jsxDEV)("p",{children:["The spinner is ",(0,o.jsxDEV)("code",{children:"em-sized"},void 0,!1,{fileName:s,lineNumber:13,columnNumber:26},this),"; it renders at ",(0,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,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:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Default size",children:[(0,o.jsxDEV)("p",{children:["At its default size, the spinner is ",(0,o.jsxDEV)("code",{children:"2em"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:49},this)," square."]},void 0,!0,{fileName:s,lineNumber:20,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Small size",children:[(0,o.jsxDEV)("p",{children:["Small spinners are ",(0,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:32},this)," square and can be used inline."]},void 0,!0,{fileName:s,lineNumber:28,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:s,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:27,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Large size",children:[(0,o.jsxDEV)("p",{children:["Large spinners are ",(0,o.jsxDEV)("code",{children:"4em"},void 0,!1,{fileName:s,lineNumber:37,columnNumber:32},this)," square."]},void 0,!0,{fileName:s,lineNumber:36,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--large"},void 0,!1,{fileName:s,lineNumber:40,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Changing color",children:[(0,o.jsxDEV)("p",{children:"The color of the spinner may be changed by use of utility classes."},void 0,!1,{fileName:s,lineNumber:45,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner hyp-u-color--brand"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../.."),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],44:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,a.jsxDEV)(o.default.Page,{title:"Table",children:(0,a.jsxDEV)(o.default.Pattern,{title:"Table",children:[(0,a.jsxDEV)(h,{},void 0,!1,{fileName:u,lineNumber:155,columnNumber:9},this),(0,a.jsxDEV)(N,{},void 0,!1,{fileName:u,lineNumber:156,columnNumber:9},this),(0,a.jsxDEV)(b,{},void 0,!1,{fileName:u,lineNumber:157,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:154,columnNumber:7},this)},void 0,!1,{fileName:u,lineNumber:153,columnNumber:5},this)};var t,l=e("preact/hooks"),r=e("../../../"),o=(t=e("../Library"))&&t.__esModule?t:{default:t},s=e("./samples"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";const m=e=>(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("td",{children:e.displayName},void 0,!1,{fileName:u,lineNumber:11,columnNumber:5},void 0),(0,a.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:u,lineNumber:12,columnNumber:5},void 0)]},void 0,!0),{tableHeaders:c,items:d}=(0,s.sampleTableContent)();function h(){const[e,i]=(0,l.useState)(!1),[n,t]=(0,l.useState)(null);return(0,a.jsxDEV)(o.default.Example,{title:"Basic Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"Table"},void 0,!1,{fileName:u,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:u,lineNumber:33,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:40,columnNumber:9},this),(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",isLoading:e,items:d,selectedItem:n,onSelectItem:e=>t(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>m(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:45,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:39,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:32,columnNumber:5},this)}function N(){const[e,i]=(0,l.useState)(!1),[n,t]=(0,l.useState)(d[d.length-1]);return(0,a.jsxDEV)(o.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:[(0,a.jsxDEV)("code",{children:"Tables"},void 0,!1,{fileName:u,lineNumber:69,columnNumber:9},this)," render inside of a ",(0,a.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:u,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:u,lineNumber:68,columnNumber:7},this),(0,a.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,a.jsxDEV)("code",{children:"td"},void 0,!1,{fileName:u,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:u,lineNumber:74,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:83,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:82,columnNumber:9},this),(0,a.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-padding--3",style:"max-height:300px;height:300px;",children:(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",isLoading:e,items:e?[]:d,selectedItem:n,onSelectItem:e=>t(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>(e=>(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("td",{className:"hyp-u-color--grey-6",children:e.displayName},void 0,!1,{fileName:u,lineNumber:18,columnNumber:5},void 0),(0,a.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:u,lineNumber:19,columnNumber:5},void 0)]},void 0,!0))(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:91,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:67,columnNumber:5},this)}function b(){const[e,i]=(0,l.useState)(!1),n=[],[t,s]=(0,l.useState)(n[n.length-1]),d=(0,a.jsxDEV)("p",{children:["There are no files available to show."," ",(0,a.jsxDEV)("a",{href:"https://www.example.com",children:"Learn more."},void 0,!1,{fileName:u,lineNumber:117,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:115,columnNumber:5},this);return(0,a.jsxDEV)(o.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:["This Table has no items (it is empty). When not in loading state, the provided ",(0,a.jsxDEV)("code",{children:"emptyItemsMessage"},void 0,!1,{fileName:u,lineNumber:125,columnNumber:18},this)," will render centered in the table."]},void 0,!0,{fileName:u,lineNumber:123,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:130,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:129,columnNumber:9},this),(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",emptyItemsMessage:d,isLoading:e,items:n,selectedItem:t,onSelectItem:e=>s(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>m(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:135,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:128,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:122,columnNumber:5},this)}},{"../../../":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],45:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(l.default.Page,{title:"Tables",children:[(0,o.jsxDEV)("p",{children:["These ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this)," content needs to be usable in tight and narrow spaces."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:7},this),(0,o.jsxDEV)(l.default.Pattern,{title:"Table",children:[(0,o.jsxDEV)(l.default.Example,{title:"Basic table",variant:"wide",children:[(0,o.jsxDEV)("p",{children:["By default, a ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:18,columnNumber:27},this)," will fill available horizontal space, and will use whatever height is needed to render its rows."," ",(0,o.jsxDEV)("code",{children:"tr.is-selected"},void 0,!1,{fileName:s,lineNumber:20,columnNumber:13},this)," styles a row as selected."]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:11},this),(0,o.jsxDEV)(l.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:19},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:s,lineNumber:30,columnNumber:19},this)]},void 0,!0,{fileName:s,lineNumber:26,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:15},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:35,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:16,columnNumber:9},this),(0,o.jsxDEV)(l.default.Example,{title:"Adjusting column widths",children:[(0,o.jsxDEV)("p",{children:["Table column widths may be adjusted by styling ",(0,o.jsxDEV)("code",{children:"thead th"},void 0,!1,{fileName:s,lineNumber:42,columnNumber:60},this)," ","elements. In this example, the column widths are set to 30% and 70%."]},void 0,!0,{fileName:s,lineNumber:41,columnNumber:11},this),(0,o.jsxDEV)(l.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:30%",children:"Column A"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:19},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:70%",children:"Column B"},void 0,!1,{fileName:s,lineNumber:56,columnNumber:19},this)]},void 0,!0,{fileName:s,lineNumber:48,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:47,columnNumber:15},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:65,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:45,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:40,columnNumber:9},this),(0,o.jsxDEV)(l.default.Example,{title:"Constraining with a scrollbox",children:[(0,o.jsxDEV)("p",{children:["In this example, the ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:72,columnNumber:34},this)," is constrained within a"," ",(0,o.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:13},this)," with a ",(0,o.jsxDEV)("code",{children:"max-height"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:43},this),"."]},void 0,!0,{fileName:s,lineNumber:71,columnNumber:11},this),(0,o.jsxDEV)(l.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"max-height:250px",className:"hyp-scrollbox--with-header",children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:s,lineNumber:83,columnNumber:21},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:s,lineNumber:86,columnNumber:21},this)]},void 0,!0,{fileName:s,lineNumber:82,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:81,columnNumber:17},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:91,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:75,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:70,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:15,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:5},this)};var t,l=(t=e("../Library"))&&t.__esModule?t:{default:t},r=e("./samples"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TablePatterns.js"},{"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55}],46:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Thumbnail",children:[(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:s,lineNumber:11,columnNumber:21},this)," has no content, it will render a placeholder. If its ",(0,o.jsxDEV)("code",{children:"isLoading"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:31},this)," prop is set to"," ",(0,o.jsxDEV)("code",{children:"true"},void 0,!1,{fileName:s,lineNumber:13,columnNumber:11},this),", it will render a loading state."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.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:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail with default placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(l.Thumbnail,{},void 0,!1,{fileName:s,lineNumber:24,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:22,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:21,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with image content",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(l.Thumbnail,{children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:33,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:32,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:29,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(l.Thumbnail,{isLoading:!0},void 0,!1,{fileName:s,lineNumber:42,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:41,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(l.Thumbnail,{isLoading:!0,children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:51,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:50,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:47,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail with custom placeholder",children:[(0,o.jsxDEV)("p",{children:"Placeholder can be any JSX"},void 0,!1,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(l.Thumbnail,{placeholder:"!"},void 0,!1,{fileName:s,lineNumber:61,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail (smaller)",children:[(0,o.jsxDEV)("p",{children:"These examples are within a 100x150px parent."},void 0,!1,{fileName:s,lineNumber:68,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Smaller loading spinner",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(l.Thumbnail,{isLoading:!0,size:"small"},void 0,!1,{fileName:s,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:70,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:69,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Constrained image proportions",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(l.Thumbnail,{size:"small",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:81,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:79,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:78,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:77,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Constrained image proportions: placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(l.Thumbnail,{size:"small"},void 0,!1,{fileName:s,lineNumber:90,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:89,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:88,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:67,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../.."),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],47:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Thumbnails",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"thumbnail"},void 0,!1,{fileName:s,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:s,lineNumber:7,columnNumber:7},this),(0,o.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:s,lineNumber:13,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail",children:[(0,o.jsxDEV)("p",{children:"These examples show a thumbnail that is contained within a parent container sized to 250x175px."},void 0,!1,{fileName:s,lineNumber:20,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with content",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:28,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:24,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:s,lineNumber:41,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:38,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:36,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:s,lineNumber:53,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:52,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:51,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail in smaller dimensions",children:[(0,o.jsxDEV)("p",{children:"These examples show all three states of a thumnbail in a smaller space: 150x100px."},void 0,!1,{fileName:s,lineNumber:62,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"All three states shown",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:[(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/100/150",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:71,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:70,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:69,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:68,columnNumber:13},this),(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("span",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:s,lineNumber:79,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:78,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this),(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)(l.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:s,lineNumber:87,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:86,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:85,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:84,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:61,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnails: aspect ratio",children:[(0,o.jsxDEV)("p",{children:"An image in a thumnbail is constrained to the available space, and retains aspect ratio."},void 0,!1,{fileName:s,lineNumber:96,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail showing retention of image aspect ratio",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width: 175px; height: 250px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/350/250",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:105,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:104,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:103,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:102,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:101,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:100,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:95,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var t,l=e("../../.."),r=(t=e("../Library"))&&t.__esModule?t:{default:t},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailPatterns.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],48:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.SampleListElements=function(){return(0,t.jsxDEV)(t.Fragment,{children:[(0,t.jsxDEV)("li",{children:"Alpha"},void 0,!1,{fileName:l,lineNumber:12,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Bravo"},void 0,!1,{fileName:l,lineNumber:13,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Charlie"},void 0,!1,{fileName:l,lineNumber:14,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Delta"},void 0,!1,{fileName:l,lineNumber:15,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Echo"},void 0,!1,{fileName:l,lineNumber:16,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Foxtrot"},void 0,!1,{fileName:l,lineNumber:17,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Golf"},void 0,!1,{fileName:l,lineNumber:18,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Hotel"},void 0,!1,{fileName:l,lineNumber:19,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"India"},void 0,!1,{fileName:l,lineNumber:20,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Juliett"},void 0,!1,{fileName:l,lineNumber:21,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Kilo"},void 0,!1,{fileName:l,lineNumber:22,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Lima"},void 0,!1,{fileName:l,lineNumber:23,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Mike"},void 0,!1,{fileName:l,lineNumber:24,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"November"},void 0,!1,{fileName:l,lineNumber:25,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Oscar"},void 0,!1,{fileName:l,lineNumber:26,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Papa"},void 0,!1,{fileName:l,lineNumber:27,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Quebec"},void 0,!1,{fileName:l,lineNumber:28,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Romeo"},void 0,!1,{fileName:l,lineNumber:29,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Sierra"},void 0,!1,{fileName:l,lineNumber:30,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Tango"},void 0,!1,{fileName:l,lineNumber:31,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Uniform"},void 0,!1,{fileName:l,lineNumber:32,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Victor"},void 0,!1,{fileName:l,lineNumber:33,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Whiskey"},void 0,!1,{fileName:l,lineNumber:34,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"XRay"},void 0,!1,{fileName:l,lineNumber:35,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Yankee"},void 0,!1,{fileName:l,lineNumber:36,columnNumber:7},this),(0,t.jsxDEV)("li",{children:"Zulu"},void 0,!1,{fileName:l,lineNumber:37,columnNumber:7},this)]},void 0,!0)},n.SampleTableBody=function(){return(0,t.jsxDEV)("tbody",{children:[(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:l,lineNumber:46,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:l,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:45,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:l,lineNumber:50,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:l,lineNumber:51,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:49,columnNumber:7},this),(0,t.jsxDEV)("tr",{className:"is-selected",children:[(0,t.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:l,lineNumber:54,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:l,lineNumber:55,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:53,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:l,lineNumber:58,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:l,lineNumber:59,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:57,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:l,lineNumber:62,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:l,lineNumber:63,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:61,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:l,lineNumber:66,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Katydid Lozenges Moebius"},void 0,!1,{fileName:l,lineNumber:67,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:65,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:l,lineNumber:70,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:l,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:69,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:l,lineNumber:74,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:l,lineNumber:75,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:73,columnNumber:7},this),(0,t.jsxDEV)("tr",{children:[(0,t.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:l,lineNumber:78,columnNumber:9},this),(0,t.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:l,lineNumber:79,columnNumber:9},this)]},void 0,!0,{fileName:l,lineNumber:77,columnNumber:7},this)]},void 0,!0,{fileName:l,lineNumber:44,columnNumber:5},this)},n.LoremIpsum=function(){return(0,t.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:l,lineNumber:92,columnNumber:5},this)},n.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 t=e("preact/compat/jsx-dev-runtime"),l="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/samples.js"},{"preact/compat/jsx-dev-runtime":55}],49:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.startApp=function({baseURL:e="",extraRoutes:i=[],icons:n={}}={}){const a=m(m({},r.default),n);(0,l.registerIcons)(a);const u=document.querySelector("#app");(0,t.render)((0,s.jsxDEV)(o.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),u)};var t=e("preact"),l=e("../"),r=a(e("../icons")),o=a(e("./components/PlaygroundApp")),s=e("preact/compat/jsx-dev-runtime");function a(e){return e&&e.__esModule?e:{default:e}}function u(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function m(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?u(Object(n),!0).forEach((function(i){c(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function c(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}},{"../":28,"../icons":27,"./components/PlaygroundApp":31,preact:56,"preact/compat/jsx-dev-runtime":55}],50:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.useRoute=function(e,i){const[n,r]=(0,t.useState)((()=>l(e))),o=(0,t.useMemo)((()=>i.find((e=>n.match(e.route)))),[n,i]),s=`${o.title}: Hypothesis UI playground`;return(0,t.useEffect)((()=>{document.title=s}),[s]),(0,t.useEffect)((()=>{const i=()=>{r(l(e))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}}),[e]),[o,(i,n)=>{i.preventDefault(),history.pushState({},s,e+n),r(n)}]};var t=e("preact/hooks");function l(e){return location.pathname.slice(e.length)}},{"preact/hooks":57}],51:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getRoutes=function(e){return e?j.filter((i=>i.group===e)):j};var t=g(e("./components/LibraryHome")),l=g(e("./components/patterns/ColorFoundations")),r=g(e("./components/patterns/LayoutFoundations")),o=g(e("./components/patterns/FormPatterns")),s=g(e("./components/patterns/ContainerPatterns")),a=g(e("./components/patterns/PanelPatterns")),u=g(e("./components/patterns/SpinnerPatterns")),m=g(e("./components/patterns/TablePatterns")),c=g(e("./components/patterns/ThumbnailPatterns")),d=g(e("./components/patterns/ButtonComponents")),h=g(e("./components/patterns/ContainerComponents")),N=g(e("./components/patterns/DialogComponents")),b=g(e("./components/patterns/FormComponents")),f=g(e("./components/patterns/PanelComponents")),p=g(e("./components/patterns/SpinnerComponents")),v=g(e("./components/patterns/TableComponents")),x=g(e("./components/patterns/ThumbnailComponents"));function g(e){return e&&e.__esModule?e:{default:e}}const j=[{route:/^\/?$/,title:"Home",component:t.default,group:"home"},{route:"/foundations-colors",title:"Colors",component:l.default,group:"foundations"},{route:"/foundations-layout",title:"Layout",component:r.default,group:"foundations"},{route:"/patterns-containers",title:"Containers",component:s.default,group:"patterns"},{route:"/patterns-forms",title:"Forms",component:o.default,group:"patterns"},{route:"/patterns-panels",title:"Panels",component:a.default,group:"patterns"},{route:"/patterns-spinners",title:"Spinners",component:u.default,group:"patterns"},{route:"/patterns-tables",title:"Tables",component:m.default,group:"patterns"},{route:"/patterns-thumbnails",title:"Thumbnails",component:c.default,group:"patterns"},{route:"/components-buttons",title:"Buttons",component:d.default,group:"components"},{route:"/components-containers",title:"Containers",component:h.default,group:"components"},{route:"/components-dialogs",title:"Dialogs",component:N.default,group:"components"},{route:"/components-forms",title:"Forms",component:b.default,group:"components"},{route:"/components-panel",title:"Panel",component:f.default,group:"components"},{route:"/components-spinner",title:"Spinner",component:p.default,group:"components"},{route:"/components-table",title:"Table",component:v.default,group:"components"},{route:"/components-thumbnail",title:"Thumbnail",component:x.default,group:"components"}]},{"./components/LibraryHome":30,"./components/patterns/ButtonComponents":32,"./components/patterns/ColorFoundations":33,"./components/patterns/ContainerComponents":34,"./components/patterns/ContainerPatterns":35,"./components/patterns/DialogComponents":36,"./components/patterns/FormComponents":37,"./components/patterns/FormPatterns":38,"./components/patterns/LayoutFoundations":39,"./components/patterns/PanelComponents":40,"./components/patterns/PanelPatterns":41,"./components/patterns/SpinnerComponents":42,"./components/patterns/SpinnerPatterns":43,"./components/patterns/TableComponents":44,"./components/patterns/TablePatterns":45,"./components/patterns/ThumbnailComponents":46,"./components/patterns/ThumbnailPatterns":47}],52:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.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 n=function(e){return"string"==typeof e?e:e.displayName||e.name}(i.type);let t=Object.entries(i.props).map((([e,i])=>"children"===e?"":"boolean"==typeof i?i?e:"":`${e}=${"string"==typeof i?`"${function(e){return e.replace(/"/g,'\\"')}(i)}"`:`{${i}}`}`)).join(" ").trim();t.length>0&&(t=" "+t);const l=i.props.children;if(l){let i=Array.isArray(l)?l.map(e).join("\n"):e(l);return i=function(e,i){const n=" ".repeat(i);return e.split("\n").map((e=>n+e)).join("\n")}(i,2),`<${n}${t}>\n${i}\n</${n}>`}return`<${n}${t} />`}return""}},{}],53:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.downcastRef=function(e){return e}},{}],54:[function(e,i,n){(function(e){(function(){
1
+ !function e(i,n,l){var t="function"==typeof hypothesisRequire&&hypothesisRequire;function r(o,s){if(!n[o]){if(!i[o]){var a="function"==typeof hypothesisRequire&&hypothesisRequire;if(!s&&a)return a(o,!0);if(t)return t(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var m=n[o]={exports:{}};i[o][0].call(m.exports,(function(e){var n=i[o][1][e];return r(n||e)}),m,m.exports,e,i,n,l)}return n[o].exports}for(var o=0;o<l.length;o++)r(l[o]);return r}({1:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxs)(r.default.Page,{title:"Buttons",children:[(0,o.jsxs)(r.default.Pattern,{title:"PublishControlButton",children:[(0,o.jsxs)("p",{children:["Customizes ",(0,o.jsx)("code",{children:"LabeledButton"})," styling to disable"," ",(0,o.jsx)("code",{children:"border-radius"})," on the right side. This makes the publish button fit with a drop-down menu next to it."]}),(0,o.jsx)(r.default.Example,{title:"Basic usage",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(t.LabeledButton,{classes:"PublishControlButton",variant:"primary",children:"Publish to My Group"})})})]}),(0,o.jsxs)(r.default.Pattern,{title:"InlineLinkButton",children:[(0,o.jsxs)("p",{children:["Customizes ",(0,o.jsx)("code",{children:"LinkButton"})," styling to position inline; dark variant always has underline."]}),(0,o.jsx)(r.default.Example,{title:"Basic usage",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(t.LinkButton,{classes:"InlineLinkButton",children:"Log in"})})}),(0,o.jsx)(r.default.Example,{title:"Dark variant, customized with underline",children:(0,o.jsx)(r.default.Demo,{withSource:!0,children:(0,o.jsx)(t.LinkButton,{classes:"InlineLinkButton InlineLinkButton--underlined",variant:"dark",children:"Log in"})})})]}),(0,o.jsxs)(r.default.Pattern,{title:"Non-Responsive IconButton",children:[(0,o.jsx)("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."}),(0,o.jsx)(r.default.Example,{variant:"wide",title:"Sizes (medium is default)",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,children:[(0,o.jsx)(t.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"small"}),(0,o.jsx)(t.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"medium"}),(0,o.jsx)(t.IconButton,{classes:"NonResponsiveIconButton",icon:"copy",title:"Edit",size:"large"})]})})]}),(0,o.jsxs)(r.default.Pattern,{title:"PaginationPageButton",children:[(0,o.jsxs)("p",{children:["Style customization for ",(0,o.jsx)("code",{children:"LabeledButton"})," that gives it asymmetrical padding to fit well as pagination controls in the Notebook."]}),(0,o.jsx)(r.default.Example,{title:"Page numbers",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[(0,o.jsx)(t.LabeledButton,{classes:"PaginationPageButton",variant:"dark",children:"9"}),(0,o.jsx)(t.LabeledButton,{classes:"PaginationPageButton",variant:"dark",pressed:!0,children:"10"}),(0,o.jsx)(t.LabeledButton,{classes:"PaginationPageButton",variant:"dark",children:"11"})]})}),(0,o.jsx)(r.default.Example,{title:"Navigation buttons",children:(0,o.jsxs)(r.default.Demo,{withSource:!0,style:{backgroundColor:"#ececec"},children:[(0,o.jsx)(t.LabeledButton,{classes:"PaginationPageButton",icon:"arrow-left",variant:"dark",children:"Prev"}),(0,o.jsx)(t.LabeledButton,{classes:"PaginationPageButton",icon:"arrow-right",iconPosition:"right",variant:"dark",children:"Next"})]})})]})]})};var l,t=e("@hypothesis/frontend-shared"),r=(l=e("@hypothesis/frontend-shared/lib-cjs/pattern-library/components/Library"))&&l.__esModule?l:{default:l},o=e("preact/jsx-runtime")},{"@hypothesis/frontend-shared":28,"@hypothesis/frontend-shared/lib-cjs/pattern-library/components/Library":29,"preact/jsx-runtime":58}],2:[function(e,i,n){"use strict";var l=e("@hypothesis/frontend-shared/lib-cjs/pattern-library"),t=o(e("./components/ButtonPatterns")),r=o(e("../../src/sidebar/icons"));function o(e){return e&&e.__esModule?e:{default:e}}const s=[{route:"/buttons",title:"Buttons",component:t.default,group:"components"}];(0,l.startApp)({baseURL:"/ui-playground",extraRoutes:s,icons:r.default})},{"../../src/sidebar/icons":104,"./components/ButtonPatterns":1,"@hypothesis/frontend-shared/lib-cjs/pattern-library":49}],3:[function(e,i,n){i.exports='<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'},{}],4:[function(e,i,n){i.exports='<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'},{}],5:[function(e,i,n){i.exports='<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'},{}],6:[function(e,i,n){i.exports='<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'},{}],7:[function(e,i,n){i.exports=' <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>'},{}],8:[function(e,i,n){i.exports='<?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'},{}],9:[function(e,i,n){i.exports='<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'},{}],10:[function(e,i,n){i.exports='<?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'},{}],11:[function(e,i,n){i.exports='<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'},{}],12:[function(e,i,n){i.exports='<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>'},{}],13:[function(e,i,n){i.exports='<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'},{}],14:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.normalizeKeyName=function(e){const i={Left:"ArrowLeft",Up:"ArrowUp",Down:"ArrowDown",Right:"ArrowRight",Spacebar:" ",Del:"Delete"};return i[e]?i[e]:e}},{}],15:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Checkbox=u,n.LabeledCheckbox=function({children:e,id:i,containerClasses:n="",...l}){var r;return null!==(r=i)&&void 0!==r||(i=l.name),(0,o.jsxDEV)("label",{htmlFor:i,className:(0,t.default)("Hyp-LabeledCheckbox",n),children:[(0,o.jsxDEV)(u,{id:i,...l},void 0,!1,{fileName:s,lineNumber:96,columnNumber:7},this),(0,o.jsxDEV)("span",{"data-testid":"label-text",children:e},void 0,!1,{fileName:s,lineNumber:97,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:92,columnNumber:5},this)};var l=a(e("../../images/icons/checkbox.svg")),t=a(e("classnames")),r=e("./SvgIcon"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";function a(e){return e&&e.__esModule?e:{default:e}}function u({classes:e="",inputRef:i,onToggle:n,onClick:l,...a}){return(0,o.jsxDEV)(o.Fragment,{children:[(0,o.jsxDEV)("input",{className:(0,t.default)("Hyp-Checkbox",e),ref:i,type:"checkbox",onClick:function(e){null==n||n(e.currentTarget.checked),null==l||l.call(this,e)},...a},void 0,!1,{fileName:s,lineNumber:67,columnNumber:7},this),(0,o.jsxDEV)(r.SvgIcon,{className:"hyp-svg-checkbox",name:"hyp-checkbox"},void 0,!1,{fileName:s,lineNumber:74,columnNumber:7},this)]},void 0,!0)}(0,r.registerIcons)({"hyp-checkbox":l.default})},{"../../images/icons/checkbox.svg":7,"./SvgIcon":20,classnames:54,"preact/compat/jsx-dev-runtime":55}],16:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Dialog=function({buttons:e,cancelLabel:i="Cancel",children:n,contentClass:r,icon:m,initialFocus:c,onCancel:h,role:N="dialog",title:b}){const f=d("dialog-description"),p=d("dialog-title"),v=(0,t.useRef)(null);return(0,t.useEffect)((()=>{if(null!==c){const e=null==c?void 0:c.current;e&&!e.disabled?e.focus():v.current.focus()}}),[]),(0,t.useLayoutEffect)((()=>{const e=v.current.querySelector("p");e&&(e.id=f,v.current.setAttribute("aria-describedby",f))}),[f]),(0,a.jsxDEV)("div",{"aria-labelledby":p,className:(0,l.default)("Hyp-Dialog",{"Hyp-Dialog--closeable":!!h},r),ref:v,role:N,tabIndex:-1,children:[(0,a.jsxDEV)("header",{children:[m&&(0,a.jsxDEV)("div",{className:"Hyp-Dialog__header-icon",children:(0,a.jsxDEV)(s.SvgIcon,{name:m,title:b,"data-testid":"header-icon"},void 0,!1,{fileName:u,lineNumber:130,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:129,columnNumber:11},this),(0,a.jsxDEV)("h2",{className:"Hyp-Dialog__title",id:p,children:b},void 0,!1,{fileName:u,lineNumber:133,columnNumber:9},this),h&&(0,a.jsxDEV)("div",{className:"Hyp-Dialog__close",children:(0,a.jsxDEV)(o.IconButton,{icon:"hyp-cancel",title:"Close",onClick:h},void 0,!1,{fileName:u,lineNumber:138,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:137,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:127,columnNumber:7},this),n,(0,a.jsxDEV)("div",{className:"Hyp-Dialog__actions",children:[h&&(0,a.jsxDEV)(o.LabeledButton,{"data-testid":"cancel-button",onClick:h,children:i},void 0,!1,{fileName:u,lineNumber:145,columnNumber:11},this),e]},void 0,!0,{fileName:u,lineNumber:143,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:116,columnNumber:5},this)};var l=m(e("classnames")),t=e("preact/hooks"),r=m(e("../../images/icons/cancel.svg")),o=e("./buttons"),s=e("./SvgIcon"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";function m(e){return e&&e.__esModule?e:{default:e}}(0,s.registerIcons)({"hyp-cancel":r.default});let c=0;function d(e){const[i]=(0,t.useState)((()=>(++c,`${e}-${c}`)));return i}},{"../../images/icons/cancel.svg":5,"./SvgIcon":20,"./buttons":24,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],17:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Modal=u,n.ConfirmModal=function({message:e,confirmAction:i,onConfirm:n,onCancel:l,...t}){return(0,s.jsxDEV)(u,{onCancel:l,buttons:[(0,s.jsxDEV)(o.LabeledButton,{onClick:n,variant:"primary","data-testid":"confirm-button",children:i},"ok",!1,{fileName:a,lineNumber:74,columnNumber:9},this)],...t,children:(0,s.jsxDEV)("p",{children:e},void 0,!1,{fileName:a,lineNumber:85,columnNumber:7},this)},void 0,!1,{fileName:a,lineNumber:71,columnNumber:5},this)};var l=e("preact/hooks"),t=e("../hooks/use-element-should-close"),r=e("./Dialog"),o=e("./buttons"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";function u({children:e,onCancel:i,...n}){const o=(0,l.useRef)(null);return(0,t.useElementShouldClose)(o,!0,(()=>{i&&i()})),(0,s.jsxDEV)(s.Fragment,{children:[(0,s.jsxDEV)("div",{className:"Hyp-Modal__overlay"},void 0,!1,{fileName:a,lineNumber:37,columnNumber:7},this),(0,s.jsxDEV)("div",{className:"Hyp-Modal",ref:o,children:(0,s.jsxDEV)(r.Dialog,{onCancel:i,...n,children:e},void 0,!1,{fileName:a,lineNumber:39,columnNumber:9},this)},void 0,!1,{fileName:a,lineNumber:38,columnNumber:7},this)]},void 0,!0)}},{"../hooks/use-element-should-close":26,"./Dialog":16,"./buttons":24,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],18:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Panel=function({children:e,icon:i,onClose:n,title:t}){const u=!!n;return(0,s.jsxDEV)("div",{className:(0,l.default)("Hyp-Panel",{"Hyp-Panel--closeable":u}),children:[(0,s.jsxDEV)("header",{children:[i&&(0,s.jsxDEV)("div",{className:"Hyp-Panel__header-icon",children:(0,s.jsxDEV)(o.SvgIcon,{name:i,title:t},void 0,!1,{fileName:a,lineNumber:39,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:38,columnNumber:11},this),(0,s.jsxDEV)("h2",{className:"Hyp-Panel__title",children:t},void 0,!1,{fileName:a,lineNumber:42,columnNumber:9},this),u&&(0,s.jsxDEV)("div",{className:"Hyp-Panel__close",children:(0,s.jsxDEV)(r.IconButton,{icon:"hyp-cancel",title:"Close",onClick:n},void 0,!1,{fileName:a,lineNumber:45,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:44,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:36,columnNumber:7},this),(0,s.jsxDEV)("div",{className:"Hyp-Panel__content",children:e},void 0,!1,{fileName:a,lineNumber:49,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:31,columnNumber:5},this)};var l=u(e("classnames")),t=u(e("../../images/icons/cancel.svg")),r=e("./buttons"),o=e("./SvgIcon"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Panel.js";function u(e){return e&&e.__esModule?e:{default:e}}(0,o.registerIcons)({"hyp-cancel":t.default})},{"../../images/icons/cancel.svg":5,"./SvgIcon":20,"./buttons":24,classnames:54,"preact/compat/jsx-dev-runtime":55}],19:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Spinner=function({classes:e="",size:i="medium"}){const n=`Hyp-Spinner--${i}`;return(0,o.jsxDEV)(r.SvgIcon,{name:"hyp-spinner",className:(0,l.default)(n,e)},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js",lineNumber:27,columnNumber:5},this)};var l=s(e("classnames")),t=s(e("../../images/icons/spinner--spokes.svg")),r=e("./SvgIcon"),o=e("preact/compat/jsx-dev-runtime");function s(e){return e&&e.__esModule?e:{default:e}}(0,r.registerIcons)({"hyp-spinner":t.default})},{"../../images/icons/spinner--spokes.svg":12,"./SvgIcon":20,classnames:54,"preact/compat/jsx-dev-runtime":55}],20:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.SvgIcon=function({name:e,className:i="",inline:n=!1,title:l=""}){if(!s[e])throw new Error(`Icon name "${e}" is not registered`);const a=s[e],u=(0,r.useRef)();(0,r.useLayoutEffect)((()=>{const e=u.current.querySelector("svg");e&&e.setAttribute("class",i)}),[i,a]);const m={};return l&&(m.title=l),(0,o.jsxDEV)("span",{className:(0,t.default)("Hyp-SvgIcon",{"Hyp-SvgIcon--inline":n}),dangerouslySetInnerHTML:{__html:a},ref:u,...m},void 0,!1,{fileName:"/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js",lineNumber:69,columnNumber:5},this)},n.registerIcons=function(e,{reset:i=!1}={}){i&&(s={}),Object.assign(s,e)},n.availableIcons=function(){return s};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("preact/hooks"),o=e("preact/compat/jsx-dev-runtime");let s={}},{classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],21:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Table=function({accessibleLabel:e,classes:i,containerClasses:n,emptyItemsMessage:l,isLoading:d=!1,items:h,onSelectItem:N,onUseItem:b,renderItem:f,selectedItem:p,tableHeaders:v}){const x=(0,r.useRef)([]),g=(0,r.useRef)(null),j=(0,r.useRef)(null),D=e=>{const i=x.current[h.indexOf(e)];i&&i.focus(),N(e)};return(0,r.useEffect)((()=>{if(!p)return;const e=x.current[h.indexOf(p)],i=j.current,n=g.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)}}),[h,p]),(0,u.jsxDEV)(a.Scrollbox,{withHeader:!0,classes:(0,t.default)("Hyp-Table-Scrollbox",n),containerRef:g,children:[(0,u.jsxDEV)("table",{"aria-label":e,className:(0,t.default)("Hyp-Table",i),tabIndex:0,role:"grid",onKeyDown:e=>{let i=!1;switch(e.key){case"Enter":i=!0,p&&b(p);break;case"ArrowUp":i=!0,D(c(h,p,-1));break;case"ArrowDown":i=!0,D(c(h,p,1));break;default:i=!1}i&&(e.preventDefault(),e.stopPropagation())},children:[(0,u.jsxDEV)("thead",{ref:(0,o.downcastRef)(j),children:(0,u.jsxDEV)("tr",{children:v.map((({classes:e,label:i},n)=>(0,u.jsxDEV)("th",{className:(0,t.default)("Hyp-Table__header",e),scope:"col",children:i},`${i}-${n}`,!1,{fileName:m,lineNumber:180,columnNumber:15},this)))},void 0,!1,{fileName:m,lineNumber:178,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:177,columnNumber:9},this),(0,u.jsxDEV)("tbody",{children:!d&&h.map(((e,i)=>(0,u.jsxDEV)("tr",{"aria-selected":p===e,className:(0,t.default)({"is-selected":p===e}),onMouseDown:()=>N(e),onClick:()=>N(e),onDblClick:()=>b(e),ref:e=>x.current[i]=e,tabIndex:-1,children:f(e,p===e)},i,!1,{fileName:m,lineNumber:193,columnNumber:15},this)))},void 0,!1,{fileName:m,lineNumber:190,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:170,columnNumber:7},this),d&&(0,u.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__loading",children:(0,u.jsxDEV)(s.Spinner,{size:"large"},void 0,!1,{fileName:m,lineNumber:212,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:211,columnNumber:9},this),!d&&0===h.length&&l&&(0,u.jsxDEV)("div",{className:"Hyp-Table-Scrollbox__message","data-testid":"empty-items-message",children:l},void 0,!1,{fileName:m,lineNumber:216,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:165,columnNumber:5},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("preact/hooks"),o=e("../util/typing"),s=e("./Spinner"),a=e("./containers"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/components/Table.js";function c(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]}},{"../util/typing":53,"./Spinner":19,"./containers":25,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],22:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.TextInput=function({classes:e="",inputRef:i,hasError:n=!1,type:l="text",...s}){return(0,r.jsxDEV)("input",{className:(0,t.default)("Hyp-TextInput",{"has-error":n},e),...s,ref:i,type:l},void 0,!1,{fileName:o,lineNumber:39,columnNumber:5},this)},n.TextInputWithButton=function({children:e,classes:i=""}){return(0,r.jsxDEV)("div",{className:(0,t.default)("Hyp-TextInputWithButton",i),children:e},void 0,!1,{fileName:o,lineNumber:67,columnNumber:5},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/components/TextInput.js"},{classnames:54,"preact/compat/jsx-dev-runtime":55}],23:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Thumbnail=function({children:e,classes:i="",isLoading:n=!1,placeholder:l="...",size:u="medium"}){const m=(0,r.toChildArray)(e).length?e:l;return(0,s.jsxDEV)("div",{className:(0,t.default)("Hyp-Thumbnail",i),children:(0,s.jsxDEV)("div",{className:"Hyp-Thumbnail__content",children:[n&&(0,s.jsxDEV)(o.Spinner,{size:u},void 0,!1,{fileName:a,lineNumber:59,columnNumber:23},this),!n&&m]},void 0,!0,{fileName:a,lineNumber:58,columnNumber:7},this)},void 0,!1,{fileName:a,lineNumber:57,columnNumber:5},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("preact"),o=e("./Spinner"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/components/Thumbnail.js"},{"./Spinner":19,classnames:54,preact:56,"preact/compat/jsx-dev-runtime":55}],24:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.IconButton=function({className:e="Hyp-IconButton",...i}){const{icon:n}=i;return(0,o.jsxDEV)(a,{className:e,...i,children:(0,o.jsxDEV)(r.SvgIcon,{name:n},void 0,!1,{fileName:s,lineNumber:100,columnNumber:7},this)},void 0,!1,{fileName:s,lineNumber:99,columnNumber:5},this)},n.LabeledButton=function({children:e,className:i="Hyp-LabeledButton",...n}){const{icon:l,iconPosition:t="left"}=n;return(0,o.jsxDEV)(a,{className:i,...n,children:[l&&"left"===t&&(0,o.jsxDEV)(r.SvgIcon,{name:l},void 0,!1,{fileName:s,lineNumber:118,columnNumber:43},this),e,l&&"right"===t&&(0,o.jsxDEV)(r.SvgIcon,{name:l},void 0,!1,{fileName:s,lineNumber:120,columnNumber:44},this)]},void 0,!0,{fileName:s,lineNumber:117,columnNumber:5},this)},n.LinkButton=function(e){return(0,o.jsxDEV)(a,{className:"Hyp-LinkButton",...e},void 0,!1,{fileName:s,lineNumber:131,columnNumber:10},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("./SvgIcon"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/components/buttons.js";function a({buttonRef:e,classes:i,className:n,icon:l,iconPosition:r="left",size:a="medium",variant:u="normal",expanded:m,pressed:c,type:d="button",...h}){const N={"aria-expanded":m,"aria-pressed":c,"aria-label":h.title};return(0,o.jsxDEV)("button",{ref:e,className:(0,t.default)(n,`${n}--${a}`,`${n}--${u}`,{[`${n}--icon-${r}`]:l},i),type:d,...N,...h},void 0,!1,{fileName:s,lineNumber:73,columnNumber:5},this)}},{"./SvgIcon":20,classnames:54,"preact/compat/jsx-dev-runtime":55}],25:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Frame=function({children:e,classes:i="",containerRef:n}){return(0,o.jsxDEV)("div",{className:(0,t.default)("Hyp-Frame",i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:26,columnNumber:5},this)},n.Card=function({children:e,classes:i="",containerRef:n}){return(0,o.jsxDEV)("div",{className:(0,t.default)("Hyp-Card",i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:42,columnNumber:5},this)},n.Actions=function({children:e,direction:i="row",classes:n="",containerRef:l}){const a=`Hyp-Actions--${i}`;return(0,o.jsxDEV)("div",{className:(0,t.default)(a,n),ref:(0,r.downcastRef)(l),children:e},void 0,!1,{fileName:s,lineNumber:72,columnNumber:5},this)},n.Scrollbox=function({children:e,classes:i="",containerRef:n,withHeader:l=!1}){const a=l?"Hyp-Scrollbox--with-header":"Hyp-Scrollbox";return(0,o.jsxDEV)("div",{className:(0,t.default)(a,i),ref:(0,r.downcastRef)(n),children:e},void 0,!1,{fileName:s,lineNumber:101,columnNumber:5},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("../util/typing"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/components/containers.js"},{"../util/typing":53,classnames:54,"preact/compat/jsx-dev-runtime":55}],26:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.useElementShouldClose=function(e,i,n){(0,l.useEffect)((()=>{if(!i)return()=>{};const l=r(document.body,["keydown"],(e=>{const i=e;"Escape"===(0,t.normalizeKeyName)(i.key)&&n()})),o=r(document.body,["focus"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0}),s=r(document.body,["mousedown","click"],(i=>{e.current.contains(i.target)||n()}),{useCapture:!0});return()=>{l(),s(),o()}}),[e,i,n])};var l=e("preact/hooks"),t=e("../browser-compatibility-utils");function r(e,i,n,{useCapture:l=!1}={}){return i.forEach((i=>e.addEventListener(i,n,l))),()=>{i.forEach((i=>e.removeEventListener(i,n,l)))}}},{"../browser-compatibility-utils":14,"preact/hooks":57}],27:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=N(e("../images/icons/arrow-left.svg")),t=N(e("../images/icons/arrow-right.svg")),r=N(e("../images/icons/cancel.svg")),o=N(e("../images/icons/check.svg")),s=N(e("../images/icons/checkbox.svg")),a=N(e("../images/icons/collapsed.svg")),u=N(e("../images/icons/edit.svg")),m=N(e("../images/icons/logo.svg")),c=N(e("../images/icons/profile.svg")),d=N(e("../images/icons/spinner--spokes.svg")),h=N(e("../images/icons/trash.svg"));function N(e){return e&&e.__esModule?e:{default:e}}var b={"arrow-left":l.default,"arrow-right":t.default,cancel:r.default,check:o.default,checkbox:s.default,collapsed:a.default,edit:u.default,logo:m.default,profile:c.default,"hyp-spinner":d.default,trash:h.default};n.default=b},{"../images/icons/arrow-left.svg":3,"../images/icons/arrow-right.svg":4,"../images/icons/cancel.svg":5,"../images/icons/check.svg":6,"../images/icons/checkbox.svg":7,"../images/icons/collapsed.svg":8,"../images/icons/edit.svg":9,"../images/icons/logo.svg":10,"../images/icons/profile.svg":11,"../images/icons/spinner--spokes.svg":12,"../images/icons/trash.svg":13}],28:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"IconButton",{enumerable:!0,get:function(){return l.IconButton}}),Object.defineProperty(n,"LabeledButton",{enumerable:!0,get:function(){return l.LabeledButton}}),Object.defineProperty(n,"LinkButton",{enumerable:!0,get:function(){return l.LinkButton}}),Object.defineProperty(n,"LabeledCheckbox",{enumerable:!0,get:function(){return t.LabeledCheckbox}}),Object.defineProperty(n,"Checkbox",{enumerable:!0,get:function(){return t.Checkbox}}),Object.defineProperty(n,"Frame",{enumerable:!0,get:function(){return r.Frame}}),Object.defineProperty(n,"Card",{enumerable:!0,get:function(){return r.Card}}),Object.defineProperty(n,"Actions",{enumerable:!0,get:function(){return r.Actions}}),Object.defineProperty(n,"Scrollbox",{enumerable:!0,get:function(){return r.Scrollbox}}),Object.defineProperty(n,"Dialog",{enumerable:!0,get:function(){return o.Dialog}}),Object.defineProperty(n,"Modal",{enumerable:!0,get:function(){return s.Modal}}),Object.defineProperty(n,"ConfirmModal",{enumerable:!0,get:function(){return s.ConfirmModal}}),Object.defineProperty(n,"Panel",{enumerable:!0,get:function(){return a.Panel}}),Object.defineProperty(n,"Spinner",{enumerable:!0,get:function(){return u.Spinner}}),Object.defineProperty(n,"SvgIcon",{enumerable:!0,get:function(){return m.SvgIcon}}),Object.defineProperty(n,"registerIcons",{enumerable:!0,get:function(){return m.registerIcons}}),Object.defineProperty(n,"Table",{enumerable:!0,get:function(){return c.Table}}),Object.defineProperty(n,"TextInput",{enumerable:!0,get:function(){return d.TextInput}}),Object.defineProperty(n,"TextInputWithButton",{enumerable:!0,get:function(){return d.TextInputWithButton}}),Object.defineProperty(n,"Thumbnail",{enumerable:!0,get:function(){return h.Thumbnail}}),Object.defineProperty(n,"useElementShouldClose",{enumerable:!0,get:function(){return N.useElementShouldClose}}),Object.defineProperty(n,"normalizeKeyName",{enumerable:!0,get:function(){return b.normalizeKeyName}});var l=e("./components/buttons"),t=e("./components/Checkbox"),r=e("./components/containers"),o=e("./components/Dialog"),s=e("./components/Modal"),a=e("./components/Panel"),u=e("./components/Spinner"),m=e("./components/SvgIcon"),c=e("./components/Table"),d=e("./components/TextInput"),h=e("./components/Thumbnail"),N=e("./hooks/use-element-should-close"),b=e("./browser-compatibility-utils")},{"./browser-compatibility-utils":14,"./components/Checkbox":15,"./components/Dialog":16,"./components/Modal":17,"./components/Panel":18,"./components/Spinner":19,"./components/SvgIcon":20,"./components/Table":21,"./components/TextInput":22,"./components/Thumbnail":23,"./components/buttons":24,"./components/containers":25,"./hooks/use-element-should-close":26}],29:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("preact"),o=e("preact/hooks"),s=e("../../components/buttons"),a=e("../util/jsx-to-string"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/Library.js";function c({children:e,withSource:i=!1,style:n={},title:l}){const[t,c]=(0,o.useState)("demo"),d=(0,r.toChildArray)(e).map(((e,i)=>(0,u.jsxDEV)("li",{children:(0,u.jsxDEV)("code",{children:(0,u.jsxDEV)("pre",{children:(0,a.jsxToString)(e)},void 0,!1,{fileName:m,lineNumber:135,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:134,columnNumber:9},this)},i,!1,{fileName:m,lineNumber:133,columnNumber:7},this)));return(0,u.jsxDEV)("div",{className:"LibraryDemo",children:[l&&(0,u.jsxDEV)("h4",{className:"LibraryDemo__header",children:l},void 0,!1,{fileName:m,lineNumber:142,columnNumber:17},this),(0,u.jsxDEV)("div",{className:"LibraryDemo__tabs",children:[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>c("demo"),pressed:"demo"===t,variant:"dark",children:"Demo"},void 0,!1,{fileName:m,lineNumber:144,columnNumber:9},this),i&&(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>c("source"),pressed:"source"===t,variant:"dark",children:"Source"},void 0,!1,{fileName:m,lineNumber:152,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:143,columnNumber:7},this),(0,u.jsxDEV)("div",{className:"LibraryDemo__container",children:["demo"===t&&(0,u.jsxDEV)("div",{className:"LibraryDemo__demo",style:n,children:(0,u.jsxDEV)("div",{className:"LibraryDemo__demo-content",children:e},void 0,!1,{fileName:m,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:163,columnNumber:11},this),"source"===t&&(0,u.jsxDEV)("div",{className:"LibraryDemo__source",children:(0,u.jsxDEV)("ul",{children:d},void 0,!1,{fileName:m,lineNumber:169,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:168,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:161,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:141,columnNumber:5},this)}var d={Page:function({children:e,title:i}){return(0,u.jsxDEV)("section",{className:"LibraryPage",children:[(0,u.jsxDEV)("h1",{className:"LibraryPage__heading",children:i},void 0,!1,{fileName:m,lineNumber:52,columnNumber:7},this),e]},void 0,!0,{fileName:m,lineNumber:51,columnNumber:5},this)},Pattern:function({children:e,title:i}){return(0,u.jsxDEV)("section",{className:"LibraryPattern",children:[(0,u.jsxDEV)("h2",{className:"LibraryPattern__heading",children:i},void 0,!1,{fileName:m,lineNumber:66,columnNumber:7},this),e]},void 0,!0,{fileName:m,lineNumber:65,columnNumber:5},this)},Example:function({children:e,title:i,variant:n="split"}){const l=(0,r.toChildArray)(e),o=l.filter((e=>"object"==typeof e&&(null==e?void 0:e.type)===c)),s=l.filter((e=>!o.includes(e)));return(0,u.jsxDEV)("div",{className:(0,t.default)("LibraryExample",`LibraryExample--${n}`),children:[(0,u.jsxDEV)("div",{className:"LibraryExample__content",children:[i&&(0,u.jsxDEV)("h3",{className:"LibraryExample__heading",children:i},void 0,!1,{fileName:m,lineNumber:103,columnNumber:19},this),s]},void 0,!0,{fileName:m,lineNumber:102,columnNumber:7},this),(0,u.jsxDEV)("div",{className:"LibraryExample__demos",children:o},void 0,!1,{fileName:m,lineNumber:106,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:101,columnNumber:5},this)},Demo:c};n.default=d},{"../../components/buttons":24,"../util/jsx-to-string":52,classnames:54,preact:56,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],30:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,r.jsxDEV)(t.default.Page,{title:"Pattern Library",children:[(0,r.jsxDEV)("p",{children:"This pattern library demonstrates foundations, patterns and components that can be used in Hypothesis front-end applications."},void 0,!1,{fileName:o,lineNumber:6,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Foundations"},void 0,!1,{fileName:o,lineNumber:11,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Foundations"},void 0,!1,{fileName:o,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:o,lineNumber:13,columnNumber:7},this),(0,r.jsxDEV)("p",{children:"They exist independently of implementation."},void 0,!1,{fileName:o,lineNumber:19,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Patterns"},void 0,!1,{fileName:o,lineNumber:21,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Patterns"},void 0,!1,{fileName:o,lineNumber:24,columnNumber:9},this)," are modular implementations of the design system ",(0,r.jsxDEV)("strong",{children:"foundations"},void 0,!1,{fileName:o,lineNumber:25,columnNumber:16},this),"—from the atomic to the complex. These implementations are in HTML and CSS."]},void 0,!0,{fileName:o,lineNumber:23,columnNumber:7},this),(0,r.jsxDEV)("h2",{className:"LibraryPage__subheading",children:"Components"},void 0,!1,{fileName:o,lineNumber:29,columnNumber:7},this),(0,r.jsxDEV)("p",{children:[(0,r.jsxDEV)("strong",{children:"Components"},void 0,!1,{fileName:o,lineNumber:32,columnNumber:9},this)," are"," ",(0,r.jsxDEV)("a",{href:"https://preactjs.com/",children:"Preact"},void 0,!1,{fileName:o,lineNumber:33,columnNumber:9},this)," components that are built using underlying ",(0,r.jsxDEV)("strong",{children:"patterns"},void 0,!1,{fileName:o,lineNumber:34,columnNumber:26},this),"."]},void 0,!0,{fileName:o,lineNumber:31,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:5,columnNumber:5},this)};var l,t=(l=e("./Library"))&&l.__esModule?l:{default:l},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js"},{"./Library":29,"preact/compat/jsx-dev-runtime":55}],31:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function({baseURL:e="/ui-playground",extraRoutes:i=[]}){const n=(0,o.getRoutes)().concat(i),[l,m]=(0,s.useRoute)(e,n),c=l?(0,a.jsxDEV)(l.component,{},void 0,!1,{fileName:u,lineNumber:34,columnNumber:5},this):(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("h1",{className:"heading",children:":("},void 0,!1,{fileName:u,lineNumber:37,columnNumber:7},this),(0,a.jsxDEV)("p",{children:"Page not found."},void 0,!1,{fileName:u,lineNumber:38,columnNumber:7},this)]},void 0,!0),d=[{title:"Foundations",routes:(0,o.getRoutes)("foundations")},{title:"Patterns",routes:(0,o.getRoutes)("patterns")},{title:"Common Components",routes:(0,o.getRoutes)("components")}];return i.length&&d.push({title:"Application Patterns",routes:i}),(0,a.jsxDEV)("main",{className:"PlaygroundApp",children:[(0,a.jsxDEV)("div",{className:"PlaygroundApp__sidebar",children:[(0,a.jsxDEV)("div",{className:"PlaygroundApp__sidebar-home",children:(0,a.jsxDEV)("a",{href:e,onClick:e=>m(e,"/"),children:(0,a.jsxDEV)(r.SvgIcon,{name:"logo"},void 0,!1,{fileName:u,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:56,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:55,columnNumber:9},this),d.map((e=>(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)("h2",{children:e.title},void 0,!1,{fileName:u,lineNumber:62,columnNumber:13},this),(0,a.jsxDEV)("ul",{children:e.routes.map((({route:e,title:i})=>(0,a.jsxDEV)("li",{children:(0,a.jsxDEV)("a",{className:(0,t.default)("PlaygroundApp__nav-item",{"is-active":l.route===e}),href:`${e}`,onClick:i=>m(i,e),children:i},void 0,!1,{fileName:u,lineNumber:66,columnNumber:19},this)},i,!1,{fileName:u,lineNumber:65,columnNumber:17},this)))},void 0,!1,{fileName:u,lineNumber:63,columnNumber:13},this)]},e.title,!0,{fileName:u,lineNumber:61,columnNumber:11},this)))]},void 0,!0,{fileName:u,lineNumber:54,columnNumber:7},this),(0,a.jsxDEV)("div",{className:"PlaygroundApp__content",children:c},void 0,!1,{fileName:u,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:53,columnNumber:5},this)};var l,t=(l=e("classnames"))&&l.__esModule?l:{default:l},r=e("../../components/SvgIcon"),o=e("../routes"),s=e("../router"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js"},{"../../components/SvgIcon":20,"../router":50,"../routes":51,classnames:54,"preact/compat/jsx-dev-runtime":55}],32:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Buttons",children:[(0,o.jsxDEV)("p",{children:["Button components support the following ",(0,o.jsxDEV)("strong",{children:"variants"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:49},this),":"]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)("ul",{children:[(0,o.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:s,lineNumber:11,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Primary: For indicating that a button represents a primary action"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Dark: For rendering a button on a grey background"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Light: This variant should only be used for non-critical buttons on white backgrounds (low contrast)."},void 0,!1,{fileName:s,lineNumber:16,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:10,columnNumber:7},this),(0,o.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:s,lineNumber:21,columnNumber:7},this),(0,o.jsxDEV)("ul",{children:[(0,o.jsxDEV)("li",{children:"Default"},void 0,!1,{fileName:s,lineNumber:26,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Pressed"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Expanded"},void 0,!1,{fileName:s,lineNumber:28,columnNumber:9},this),(0,o.jsxDEV)("li",{children:"Disabled"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:25,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"IconButton",children:[(0,o.jsxDEV)("p",{children:"A button containing an icon and no other content."},void 0,!1,{fileName:s,lineNumber:33,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic use and sizes",children:[(0,o.jsxDEV)("p",{children:["The optional ",(0,o.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:39,columnNumber:13},this),". The default sizing is ",(0,o.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:s,lineNumber:39,columnNumber:53},this),"."]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:[(0,o.jsxDEV)(t.IconButton,{icon:"edit",title:"Edit",size:"small"},void 0,!1,{fileName:s,lineNumber:42,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"edit",title:"Edit",size:"medium"},void 0,!1,{fileName:s,lineNumber:43,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"edit",title:"Edit",size:"large"},void 0,!1,{fileName:s,lineNumber:44,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:41,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:34,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",variant:"wide",children:[(0,o.jsxDEV)("h4",{children:"Dark variant"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this),(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:51,columnNumber:17},this)," dark variant is for use on darker (light grey vs. white) backgrounds. Note that this button, unlike other"," ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:53,columnNumber:13},this),"s, has a background color. This is to allow for a use case in which the dark ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:54,columnNumber:46},this)," is initially fixed on a grey background but floats on top of content when scrolled."]},void 0,!0,{fileName:s,lineNumber:50,columnNumber:11},this),(0,o.jsxDEV)("h4",{children:"Light variant"},void 0,!1,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)("p",{children:"This variant should only be used for non-critical icons on white backgrounds (low contrast)."},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation"},void 0,!1,{fileName:s,lineNumber:64,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0},void 0,!1,{fileName:s,lineNumber:65,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0},void 0,!1,{fileName:s,lineNumber:66,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0},void 0,!1,{fileName:s,lineNumber:67,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:63,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",variant:"primary"},void 0,!1,{fileName:s,lineNumber:71,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:82,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"primary"},void 0,!1,{fileName:s,lineNumber:88,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:70,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",variant:"dark"},void 0,!1,{fileName:s,lineNumber:97,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:98,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:104,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"dark"},void 0,!1,{fileName:s,lineNumber:110,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:96,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Light",withSource:!0,children:[(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",variant:"light"},void 0,!1,{fileName:s,lineNumber:119,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",pressed:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:124,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",expanded:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:130,columnNumber:13},this),(0,o.jsxDEV)(t.IconButton,{icon:"trash",title:"Delete annotation",disabled:!0,variant:"light"},void 0,!1,{fileName:s,lineNumber:136,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:118,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:32,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"LabeledButton",children:[(0,o.jsxDEV)("p",{children:"A button with content and, optionally, an icon."},void 0,!1,{fileName:s,lineNumber:147,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic use and sizes",children:[(0,o.jsxDEV)("p",{children:["The optional ",(0,o.jsxDEV)("code",{children:"size"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:153,columnNumber:13},this),". The default sizing is ",(0,o.jsxDEV)("code",{children:"medium"},void 0,!1,{fileName:s,lineNumber:153,columnNumber:53},this),"."]},void 0,!0,{fileName:s,lineNumber:149,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label only",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{size:"small",children:"Edit"},void 0,!1,{fileName:s,lineNumber:156,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{children:"Edit"},void 0,!1,{fileName:s,lineNumber:157,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{size:"large",children:"Edit"},void 0,!1,{fileName:s,lineNumber:158,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:155,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label, icon",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",size:"small",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:162,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:165,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",size:"large",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:166,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:161,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Label, icon on right",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",size:"small",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:172,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:175,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"profile",size:"large",iconPosition:"right",children:"Edit User"},void 0,!1,{fileName:s,lineNumber:178,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:171,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:148,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",variant:"wide",children:[(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:s,lineNumber:186,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",pressed:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:187,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",expanded:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:190,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",disabled:!0,children:"Edit"},void 0,!1,{fileName:s,lineNumber:193,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:185,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:199,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:202,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:205,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",variant:"primary",children:"Edit"},void 0,!1,{fileName:s,lineNumber:208,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:198,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:214,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",pressed:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:217,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",expanded:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:220,columnNumber:13},this),(0,o.jsxDEV)(t.LabeledButton,{icon:"edit",disabled:!0,variant:"dark",children:"Edit"},void 0,!1,{fileName:s,lineNumber:223,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:213,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:184,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:146,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"LinkButton",children:[(0,o.jsxDEV)("p",{children:"A button styled to look like a link (anchor tag)."},void 0,!1,{fileName:s,lineNumber:231,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Variants",children:[(0,o.jsxDEV)(r.default.Demo,{title:"Default",withSource:!0,children:[(0,o.jsxDEV)(t.LinkButton,{children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:235,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:236,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:237,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:238,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:234,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Primary",withSource:!0,children:[(0,o.jsxDEV)(t.LinkButton,{variant:"primary",children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:242,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"primary",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:243,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"primary",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:246,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"primary",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:249,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:241,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{title:"Dark",withSource:!0,children:[(0,o.jsxDEV)(t.LinkButton,{variant:"dark",children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:255,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"dark",pressed:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:256,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"dark",expanded:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:259,columnNumber:13},this),(0,o.jsxDEV)(t.LinkButton,{variant:"dark",disabled:!0,children:"Show replies (10)"},void 0,!1,{fileName:s,lineNumber:262,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:254,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:233,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:230,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../../"),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],33:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,r.jsxDEV)(t.default.Page,{title:"Colors",children:[(0,r.jsxDEV)(t.default.Pattern,{title:"Brand red",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:a},void 0,!1,{fileName:o,lineNumber:58,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:57,columnNumber:7},this),(0,r.jsxDEV)(t.default.Pattern,{title:"Greys",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:u},void 0,!1,{fileName:o,lineNumber:64,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:63,columnNumber:7},this),(0,r.jsxDEV)(t.default.Pattern,{title:"State indicators",children:(0,r.jsxDEV)("div",{className:"hyp-u-layout-row",style:"flex-wrap:wrap",children:m},void 0,!1,{fileName:o,lineNumber:70,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:56,columnNumber:5},this)};var l,t=(l=e("../Library"))&&l.__esModule?l:{default:l},r=e("preact/compat/jsx-dev-runtime"),o="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";function s({colorName:e}){return(0,r.jsxDEV)("div",{children:[(0,r.jsxDEV)("div",{className:`hyp-u-bg-color--${e}`,style:"width:16rem;height:2rem;margin-right:1em"},void 0,!1,{fileName:o,lineNumber:31,columnNumber:7},this),(0,r.jsxDEV)("p",{children:(0,r.jsxDEV)("i",{children:e},void 0,!1,{fileName:o,lineNumber:36,columnNumber:9},this)},void 0,!1,{fileName:o,lineNumber:35,columnNumber:7},this)]},void 0,!0,{fileName:o,lineNumber:30,columnNumber:5},this)}const a=["brand"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:43,columnNumber:3},void 0))),u=["white","grey-0","grey-1","grey-2","grey-3","grey-4","grey-5","grey-6","grey-7","grey-8","grey-9"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:47,columnNumber:3},void 0))),m=["success","notice","error"].map((e=>(0,r.jsxDEV)(s,{colorName:e},e,!1,{fileName:o,lineNumber:51,columnNumber:3},void 0)))},{"../Library":29,"preact/compat/jsx-dev-runtime":55}],34:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,s.jsxDEV)(r.default.Page,{title:"Containers",children:[(0,s.jsxDEV)(r.default.Pattern,{title:"Frame",children:(0,s.jsxDEV)(r.default.Example,{title:"Laying out content in a Frame",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Frame"},void 0,!1,{fileName:a,lineNumber:12,columnNumber:17},this)," component renders content inside of a"," ",(0,s.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:a,lineNumber:13,columnNumber:13},this)," design pattern."]},void 0,!0,{fileName:a,lineNumber:11,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(t.Frame,{children:[(0,s.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:a,lineNumber:17,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a frame."},void 0,!1,{fileName:a,lineNumber:18,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:16,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:15,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:10,columnNumber:9},this)},void 0,!1,{fileName:a,lineNumber:9,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Card",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:a,lineNumber:26,columnNumber:15},this)," component pattern provides a card-like layout using the ",(0,s.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:a,lineNumber:27,columnNumber:21},this)," pattern."]},void 0,!0,{fileName:a,lineNumber:25,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out content in a Card",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(t.Card,{children:[(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:32,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:33,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:29,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Overriding styles",children:[(0,s.jsxDEV)("p",{children:["This example shows overriding the background color of a"," ",(0,s.jsxDEV)("code",{children:"Card"},void 0,!1,{fileName:a,lineNumber:40,columnNumber:13},this)," using a utility class."]},void 0,!0,{fileName:a,lineNumber:38,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(t.Card,{classes:"hyp-u-bg-color--grey-3",children:[(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:44,columnNumber:15},this),(0,s.jsxDEV)("div",{children:"This content is inside of a card."},void 0,!1,{fileName:a,lineNumber:45,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:37,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:24,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Actions",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:a,lineNumber:53,columnNumber:15},this)," component pattern lays out actions (buttons)."]},void 0,!0,{fileName:a,lineNumber:52,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out buttons with Actions",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(t.Actions,{children:[(0,s.jsxDEV)(t.LabeledButton,{children:"Cancel"},void 0,!1,{fileName:a,lineNumber:59,columnNumber:15},this),(0,s.jsxDEV)(t.LabeledButton,{children:"Maybe"},void 0,!1,{fileName:a,lineNumber:60,columnNumber:15},this),(0,s.jsxDEV)(t.LabeledButton,{variant:"primary",children:"OK"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:58,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:57,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:56,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{title:"Laying out buttons vertically with Actions",children:(0,s.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(t.Actions,{direction:"column",children:[(0,s.jsxDEV)(t.LabeledButton,{children:"This is one option"},void 0,!1,{fileName:a,lineNumber:69,columnNumber:15},this),(0,s.jsxDEV)(t.LabeledButton,{children:"This is another option"},void 0,!1,{fileName:a,lineNumber:70,columnNumber:15},this),(0,s.jsxDEV)(t.LabeledButton,{variant:"primary",children:"This is the best option"},void 0,!1,{fileName:a,lineNumber:71,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:68,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:51,columnNumber:7},this),(0,s.jsxDEV)(r.default.Pattern,{title:"Scrollbox",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:a,lineNumber:81,columnNumber:15},this)," component is a container for (potentially-) overflowing content. It provides a scroll context and is styled with the ",(0,s.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:a,lineNumber:83,columnNumber:15},this)," pattern."]},void 0,!0,{fileName:a,lineNumber:80,columnNumber:9},this),(0,s.jsxDEV)(r.default.Example,{variant:"wide",children:[(0,s.jsxDEV)("p",{children:["A ",(0,s.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:a,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:a,lineNumber:86,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{title:"Basic scrollbox",withSource:!0,children:(0,s.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,s.jsxDEV)(t.Scrollbox,{children:(0,s.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,s.jsxDEV)(o.SampleListElements,{},void 0,!1,{fileName:a,lineNumber:95,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:94,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:93,columnNumber:15},this)},void 0,!1,{fileName:a,lineNumber:92,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:91,columnNumber:11},this),(0,s.jsxDEV)(r.default.Demo,{title:"Scrollbox with header",withSource:!0,children:(0,s.jsxDEV)("div",{style:"height:250px;max-height:250px;width:200px",children:(0,s.jsxDEV)(t.Scrollbox,{withHeader:!0,children:[(0,s.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,s.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:"NATO Alphabet"},void 0,!1,{fileName:a,lineNumber:104,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:103,columnNumber:17},this),(0,s.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,s.jsxDEV)(o.SampleListElements,{},void 0,!1,{fileName:a,lineNumber:109,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:108,columnNumber:17},this)]},void 0,!0,{fileName:a,lineNumber:102,columnNumber:15},this)},void 0,!1,{fileName:a,lineNumber:101,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:100,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:79,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:8,columnNumber:5},this)};var l,t=e("../../.."),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("./samples"),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js"},{"../../..":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55}],35:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,t.useState)(!1);return(0,a.jsxDEV)(o.default.Page,{title:"Containers",children:[(0,a.jsxDEV)(o.default.Pattern,{title:"Frame",children:[(0,a.jsxDEV)(o.default.Example,{title:"Basic frame",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:u,lineNumber:15,columnNumber:15},this)," provides a border, background, padding and vertical spacing of immediate children."]},void 0,!0,{fileName:u,lineNumber:14,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-frame",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:20,columnNumber:15},this),(0,a.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:23,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:13,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Using frames with the 'clean' theme",children:[(0,a.jsxDEV)("p",{children:"Clean-theme styling removes borders from frames."},void 0,!1,{fileName:u,lineNumber:32,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"theme-clean",children:(0,a.jsxDEV)("div",{className:"hyp-frame",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:36,columnNumber:17},this),(0,a.jsxDEV)("div",{children:"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:39,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:35,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:34,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:33,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:31,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:12,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Card",children:[(0,a.jsxDEV)(o.default.Example,{title:"Basic card",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:u,lineNumber:52,columnNumber:15},this)," is a frame with a shadow and hover-shadow effect that fills available horizontal space. It extends ",(0,a.jsxDEV)("code",{children:"frame"},void 0,!1,{fileName:u,lineNumber:53,columnNumber:63},this),"."]},void 0,!0,{fileName:u,lineNumber:51,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.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:u,lineNumber:58,columnNumber:15},this),(0,a.jsxDEV)("div",{children:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},void 0,!1,{fileName:u,lineNumber:62,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:57,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:56,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:50,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Card with no hover",children:[(0,a.jsxDEV)("p",{children:"A card's hover can be disabled by using a modifying class."},void 0,!1,{fileName:u,lineNumber:71,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card--no-hover",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},void 0,!1,{fileName:u,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:72,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:70,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Card example with actions",children:[(0,a.jsxDEV)("p",{children:"This example shows a card with some available actions."},void 0,!1,{fileName:u,lineNumber:81,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.jsxDEV)("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},void 0,!1,{fileName:u,lineNumber:84,columnNumber:15},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:88,columnNumber:17},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:89,columnNumber:17},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:90,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:87,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:83,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:82,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:80,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Using cards with the 'clean' theme",children:[(0,a.jsxDEV)("p",{children:"Clean-theme styling removes hover shadows and borders."},void 0,!1,{fileName:u,lineNumber:97,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"theme-clean",children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.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:u,lineNumber:101,columnNumber:17},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:106,columnNumber:19},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:107,columnNumber:19},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:108,columnNumber:19},this)]},void 0,!0,{fileName:u,lineNumber:105,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:100,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:98,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:96,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:49,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Actions",children:[(0,a.jsxDEV)("p",{children:["The ",(0,a.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:u,lineNumber:118,columnNumber:15},this)," pattern lays out a set of items, typically buttons, in a row (default) or column, with spacing."," "]},void 0,!0,{fileName:u,lineNumber:117,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Horizontal (default) layout",children:[(0,a.jsxDEV)("p",{children:["These examples show ",(0,a.jsxDEV)("code",{children:"Actions"},void 0,!1,{fileName:u,lineNumber:123,columnNumber:33},this)," used in its default layout (horizontal) with ",(0,a.jsxDEV)("code",{children:"LabeledButton"},void 0,!1,{fileName:u,lineNumber:124,columnNumber:31},this)," and"," ",(0,a.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:u,lineNumber:125,columnNumber:13},this)," components."]},void 0,!0,{fileName:u,lineNumber:122,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.LabeledButton,{icon:"profile",children:"User"},void 0,!1,{fileName:u,lineNumber:129,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{icon:"edit",children:"Edit"},void 0,!1,{fileName:u,lineNumber:130,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{icon:"trash",children:"Delete"},void 0,!1,{fileName:u,lineNumber:131,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:128,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:127,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions",children:[(0,a.jsxDEV)(r.IconButton,{title:"User",icon:"profile"},void 0,!1,{fileName:u,lineNumber:137,columnNumber:15},this),(0,a.jsxDEV)(r.IconButton,{title:"Edit",icon:"edit"},void 0,!1,{fileName:u,lineNumber:138,columnNumber:15},this),(0,a.jsxDEV)(r.IconButton,{title:"Delete",icon:"trash"},void 0,!1,{fileName:u,lineNumber:139,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:136,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:135,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:121,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Columnar layout",children:(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,a.jsxDEV)(r.LabeledButton,{children:"User"},void 0,!1,{fileName:u,lineNumber:147,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{children:"Edit"},void 0,!1,{fileName:u,lineNumber:148,columnNumber:15},this),(0,a.jsxDEV)(r.LabeledButton,{children:"Delete"},void 0,!1,{fileName:u,lineNumber:149,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:146,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:145,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:144,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Columnar layout, filling space",children:[(0,a.jsxDEV)("p",{children:["This example shows buttons stretching to fill available space in"," ",(0,a.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:u,lineNumber:157,columnNumber:13},this),"."]},void 0,!0,{fileName:u,lineNumber:155,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"width:300px",children:(0,a.jsxDEV)("div",{className:"hyp-actions--column",children:[(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"Do this"},void 0,!1,{fileName:u,lineNumber:162,columnNumber:17},this),(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"No, this!"},void 0,!1,{fileName:u,lineNumber:163,columnNumber:17},this),(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",children:"Maybe this?"},void 0,!1,{fileName:u,lineNumber:164,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:161,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:160,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:159,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:154,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:116,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Modal",children:(0,a.jsxDEV)(o.default.Example,{title:"Responsive modal container",children:[(0,a.jsxDEV)("p",{children:["This pattern makes use of the ",(0,a.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:u,lineNumber:174,columnNumber:43},this)," pattern. It responsively positions and sizes a container in the viewport to hold modal content."]},void 0,!0,{fileName:u,lineNumber:173,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:u,lineNumber:180,columnNumber:15},this),(0,a.jsxDEV)("div",{className:"hyp-u-overlay",style:{visibility:e?"visible":"hidden"},children:(0,a.jsxDEV)("div",{className:"hyp-modal",children:(0,a.jsxDEV)("div",{className:"hyp-card",children:[(0,a.jsxDEV)("div",{children:(0,a.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:u,lineNumber:193,columnNumber:23},this)},void 0,!1,{fileName:u,lineNumber:192,columnNumber:21},this),(0,a.jsxDEV)("div",{className:"hyp-actions",children:(0,a.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:u,lineNumber:207,columnNumber:23},this)},void 0,!1,{fileName:u,lineNumber:206,columnNumber:21},this)]},void 0,!0,{fileName:u,lineNumber:191,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:190,columnNumber:17},this)},void 0,!1,{fileName:u,lineNumber:186,columnNumber:15},this)]},void 0,!0,{fileName:u,lineNumber:179,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:178,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:172,columnNumber:9},this)},void 0,!1,{fileName:u,lineNumber:171,columnNumber:7},this),(0,a.jsxDEV)(o.default.Pattern,{title:"Scrollbox",children:[(0,a.jsxDEV)("p",{children:[(0,a.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:u,lineNumber:224,columnNumber:11},this)," is a CSS-only pattern that provides scroll-hint affordances for overflowing content (shadows). It sets its own"," ",(0,a.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:u,lineNumber:226,columnNumber:11},this)," scrolling context, but authors need to define bounding dimensions."]},void 0,!0,{fileName:u,lineNumber:223,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"List in a scrollbox",children:[(0,a.jsxDEV)("p",{children:["This example shows an overflowing ",(0,a.jsxDEV)("code",{children:"ul"},void 0,!1,{fileName:u,lineNumber:231,columnNumber:47},this)," in a"," ",(0,a.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:u,lineNumber:232,columnNumber:13},this),"."]},void 0,!0,{fileName:u,lineNumber:230,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,a.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,a.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,a.jsxDEV)(s.SampleListElements,{},void 0,!1,{fileName:u,lineNumber:238,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:237,columnNumber:17},this)},void 0,!1,{fileName:u,lineNumber:236,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:235,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:234,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:229,columnNumber:9},this),(0,a.jsxDEV)(o.default.Example,{title:"Scrollbox with header offset",children:[(0,a.jsxDEV)("p",{children:["The ",(0,a.jsxDEV)("code",{children:"scrollbox--with-header"},void 0,!1,{fileName:u,lineNumber:247,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:u,lineNumber:246,columnNumber:11},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,a.jsxDEV)("div",{style:"height:250px;width:250px",children:(0,a.jsxDEV)("div",{className:"hyp-scrollbox--with-header",children:[(0,a.jsxDEV)("div",{className:"hyp-sticky-header",children:(0,a.jsxDEV)("div",{className:"hyp-sticky-header__heading",children:(0,a.jsxDEV)("strong",{children:"NATO Phonetic Alphabet"},void 0,!1,{fileName:u,lineNumber:257,columnNumber:21},this)},void 0,!1,{fileName:u,lineNumber:256,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:255,columnNumber:17},this),(0,a.jsxDEV)("ul",{className:"hyp-u-padding hyp-u-vertical-spacing",children:(0,a.jsxDEV)(s.SampleListElements,{},void 0,!1,{fileName:u,lineNumber:261,columnNumber:19},this)},void 0,!1,{fileName:u,lineNumber:260,columnNumber:17},this)]},void 0,!0,{fileName:u,lineNumber:254,columnNumber:15},this)},void 0,!1,{fileName:u,lineNumber:253,columnNumber:13},this)},void 0,!1,{fileName:u,lineNumber:252,columnNumber:11},this)]},void 0,!0,{fileName:u,lineNumber:245,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:222,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:11,columnNumber:5},this)};var l,t=e("preact/hooks"),r=e("../../../"),o=(l=e("../Library"))&&l.__esModule?l:{default:l},s=e("./samples"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js"},{"../../../":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],36:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,u.jsxDEV)(o.default.Page,{title:"Dialogs",children:[(0,u.jsxDEV)(o.default.Pattern,{title:"Dialog",children:[(0,u.jsxDEV)("p",{children:["A ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:177,columnNumber:13},this)," prompts for user interaction and will take focus when opened."]},void 0,!0,{fileName:m,lineNumber:176,columnNumber:9},this),(0,u.jsxDEV)("p",{children:["Use a ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:181,columnNumber:17},this)," when you want to route focus. Consider using a ",(0,u.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:m,lineNumber:182,columnNumber:13},this)," for presenting panel-styled content that does not require grabbing focus."]},void 0,!0,{fileName:m,lineNumber:180,columnNumber:9},this),(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"Dialogs"},void 0,!1,{fileName:m,lineNumber:186,columnNumber:11},this)," are styled using the ",(0,u.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:m,lineNumber:186,columnNumber:53},this)," pattern."]},void 0,!0,{fileName:m,lineNumber:185,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Setting initial focus",children:[(0,u.jsxDEV)("p",{children:["This example shows a dismiss-able ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:190,columnNumber:47},this)," with an explicitly-provided element (",(0,u.jsxDEV)("code",{children:"ref"},void 0,!1,{fileName:m,lineNumber:191,columnNumber:42},this),") that should take initial focus: a text ",(0,u.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:m,lineNumber:192,columnNumber:35},this),". The highlighted outline is added here by using ",(0,u.jsxDEV)("code",{children:".hyp-u-focus-outline"},void 0,!1,{fileName:m,lineNumber:193,columnNumber:33},this)," on the"," ",(0,u.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:m,lineNumber:194,columnNumber:13},this)," element."]},void 0,!0,{fileName:m,lineNumber:189,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["In some cases, you might need finer control over which element is focused when the ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:198,columnNumber:30},this)," or ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:198,columnNumber:53},this)," is opened. This might arise if you have nested components within a"," ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:200,columnNumber:13},this)," or ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:200,columnNumber:35},this),", or there is complex logic about focus. Setting the ",(0,u.jsxDEV)("code",{children:"initialFocus"},void 0,!1,{fileName:m,lineNumber:201,columnNumber:38},this)," prop to"," ",(0,u.jsxDEV)("code",{children:"null"},void 0,!1,{fileName:m,lineNumber:202,columnNumber:13},this)," will opt out of automatic focus handling."]},void 0,!0,{fileName:m,lineNumber:196,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(c,{},void 0,!1,{fileName:m,lineNumber:206,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:205,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:188,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:175,columnNumber:7},this),(0,u.jsxDEV)(o.default.Pattern,{title:"Modal",children:[(0,u.jsxDEV)("p",{children:["A ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:213,columnNumber:13},this)," is a type of ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:213,columnNumber:45},this)," that centers on the screen and obscures the background with an overlay."]},void 0,!0,{fileName:m,lineNumber:212,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Basic usage",children:[(0,u.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:m,lineNumber:217,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(d,{},void 0,!1,{fileName:m,lineNumber:222,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:221,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:216,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{title:"Handling content overflow",children:[(0,u.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:m,lineNumber:227,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["To make something in a modal scroll-able, apply"," ",(0,u.jsxDEV)("code",{children:"overflow: auto"},void 0,!1,{fileName:m,lineNumber:234,columnNumber:13},this)," to the element you wish to contain. This element needs to be an immediate-child element of the"," ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:236,columnNumber:13},this),"."]},void 0,!0,{fileName:m,lineNumber:232,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(h,{},void 0,!1,{fileName:m,lineNumber:239,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:238,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:211,columnNumber:7},this),(0,u.jsxDEV)(o.default.Pattern,{title:"ConfirmModal",children:[(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:m,lineNumber:246,columnNumber:11},this)," is intended to mirror the functionality of"," ",(0,u.jsxDEV)("code",{children:"window.confirm"},void 0,!1,{fileName:m,lineNumber:247,columnNumber:11},this),"."]},void 0,!0,{fileName:m,lineNumber:245,columnNumber:9},this),(0,u.jsxDEV)(o.default.Example,{children:[(0,u.jsxDEV)("p",{children:[(0,u.jsxDEV)("code",{children:"ConfirmModal"},void 0,!1,{fileName:m,lineNumber:251,columnNumber:13},this)," prompts the user for a boolean yes/no input. Close and cancel are considered no."]},void 0,!0,{fileName:m,lineNumber:250,columnNumber:11},this),(0,u.jsxDEV)("p",{children:["Handlers need to be provided for what to do on yes (",(0,u.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:m,lineNumber:256,columnNumber:13},this),") and no/cancel (",(0,u.jsxDEV)("code",{children:"onCancel"},void 0,!1,{fileName:m,lineNumber:256,columnNumber:52},this),"). Typically, both would (also) close the modal, though in this example, the ",(0,u.jsxDEV)("code",{children:"onConfirm"},void 0,!1,{fileName:m,lineNumber:258,columnNumber:26},this)," handler does not close the modal."]},void 0,!0,{fileName:m,lineNumber:254,columnNumber:11},this),(0,u.jsxDEV)(o.default.Demo,{children:(0,u.jsxDEV)(N,{},void 0,!1,{fileName:m,lineNumber:262,columnNumber:13},this)},void 0,!1,{fileName:m,lineNumber:261,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:249,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:244,columnNumber:7},this)]},void 0,!0,{fileName:m,lineNumber:174,columnNumber:5},this)};var l,t=e("preact"),r=e("preact/hooks"),o=(l=e("../Library"))&&l.__esModule?l:{default:l},s=e("../../../"),a=e("./samples"),u=e("preact/compat/jsx-dev-runtime"),m="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";function c(){const[e,i]=(0,r.useState)(!1),n=(0,t.createRef)(),l=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose maybe"),children:"Maybe"},"maybe",!1,{fileName:m,lineNumber:23,columnNumber:5},this),(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose yep"),variant:"primary",children:"Do it!"},"yep",!1,{fileName:m,lineNumber:26,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Dialog,{buttons:l,icon:"edit",initialFocus:n,onCancel:()=>i(!1),title:"This is a Dialog",children:[(0,u.jsxDEV)("p",{children:["This is a ",(0,u.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:m,lineNumber:54,columnNumber:21},this),", with initial focus on a"," ",(0,u.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:m,lineNumber:55,columnNumber:11},this)," component input."]},void 0,!0,{fileName:m,lineNumber:53,columnNumber:9},this),(0,u.jsxDEV)(s.TextInputWithButton,{children:[(0,u.jsxDEV)(s.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:m,lineNumber:58,columnNumber:11},this),(0,u.jsxDEV)(s.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:m,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:46,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Dialog Example"},void 0,!1,{fileName:m,lineNumber:37,columnNumber:7},this)}function d(){const[e,i]=(0,r.useState)(!1),n=(0,t.createRef)(),l=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:m,lineNumber:71,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Modal,{buttons:l,initialFocus:n,onCancel:()=>i(!1),title:"Sample Modal",children:[(0,u.jsxDEV)("p",{children:["This is a ",(0,u.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:m,lineNumber:98,columnNumber:21},this),", with initial focus on a"," ",(0,u.jsxDEV)("code",{children:"TextInputWithButton"},void 0,!1,{fileName:m,lineNumber:99,columnNumber:11},this)," component input."]},void 0,!0,{fileName:m,lineNumber:97,columnNumber:9},this),(0,u.jsxDEV)(s.TextInputWithButton,{children:[(0,u.jsxDEV)(s.TextInput,{name:"my-input",inputRef:n},void 0,!1,{fileName:m,lineNumber:102,columnNumber:11},this),(0,u.jsxDEV)(s.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:m,lineNumber:103,columnNumber:11},this)]},void 0,!0,{fileName:m,lineNumber:101,columnNumber:9},this)]},void 0,!0,{fileName:m,lineNumber:91,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Modal Example"},void 0,!1,{fileName:m,lineNumber:82,columnNumber:7},this)}function h(){const[e,i]=(0,r.useState)(!1),n=[(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>alert("You chose Save"),variant:"primary",children:"Save"},"yep",!1,{fileName:m,lineNumber:114,columnNumber:5},this)];return e?(0,u.jsxDEV)(s.Modal,{buttons:n,onCancel:()=>i(!1),title:"Modal with overflowing content",children:(0,u.jsxDEV)("div",{className:"hyp-scrollbox",children:(0,u.jsxDEV)(a.LoremIpsum,{},void 0,!1,{fileName:m,lineNumber:140,columnNumber:11},this)},void 0,!1,{fileName:m,lineNumber:139,columnNumber:9},this)},void 0,!1,{fileName:m,lineNumber:134,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show Long Modal"},void 0,!1,{fileName:m,lineNumber:125,columnNumber:7},this)}function N(){const[e,i]=(0,r.useState)(!1);return e?(0,u.jsxDEV)(s.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:m,lineNumber:161,columnNumber:7},this):(0,u.jsxDEV)(s.LabeledButton,{onClick:()=>i(!e),variant:"primary",children:"Show ConfirmModal Example"},void 0,!1,{fileName:m,lineNumber:152,columnNumber:7},this)}},{"../../../":28,"../Library":29,"./samples":48,preact:56,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],37:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,t.useState)(!0),[n,l]=(0,t.useState)(!1),[u,m]=(0,t.useState)(!0);return(0,s.jsxDEV)(o.default.Page,{title:"Forms",children:[(0,s.jsxDEV)(o.default.Pattern,{title:"LabeledCheckbox",children:[(0,s.jsxDEV)(o.default.Example,{title:"Unchecked (default)",children:[(0,s.jsxDEV)("div",{style:"font-size: 2em",children:[n&&"🍉"," "]},void 0,!0,{fileName:a,lineNumber:19,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.LabeledCheckbox,{checked:n,name:"test-alternative",onToggle:e=>l(e),children:"I want a watermelon"},void 0,!1,{fileName:a,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:18,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Checked",children:[(0,s.jsxDEV)("div",{style:"font-size: 2em",children:e&&"🥪"},void 0,!1,{fileName:a,lineNumber:35,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{style:{width:"300px"},withSource:!0,children:(0,s.jsxDEV)(r.LabeledCheckbox,{name:"test",checked:e,onToggle:e=>i(e),children:"I want a sandwich"},void 0,!1,{fileName:a,lineNumber:37,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:36,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:34,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:17,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"TextInput",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:a,lineNumber:50,columnNumber:15},this)," component is a basic wrapper around an",(0,s.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:a,lineNumber:51,columnNumber:11},this)," field."]},void 0,!0,{fileName:a,lineNumber:49,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Basic usage",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input"},void 0,!1,{fileName:a,lineNumber:55,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:54,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:53,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"As type='url'",children:[(0,s.jsxDEV)("p",{children:[(0,s.jsxDEV)("code",{children:"TextInput"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:13},this)," renders an ",(0,s.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:a,lineNumber:61,columnNumber:47},this)," field of"," ",(0,s.jsxDEV)("code",{children:'type="text"'},void 0,!1,{fileName:a,lineNumber:62,columnNumber:13},this)," by default, but text-like `type` values are also supported (",(0,s.jsxDEV)("code",{children:"email"},void 0,!1,{fileName:a,lineNumber:63,columnNumber:40},this),", ",(0,s.jsxDEV)("code",{children:"search"},void 0,!1,{fileName:a,lineNumber:63,columnNumber:60},this),","," ",(0,s.jsxDEV)("code",{children:"url"},void 0,!1,{fileName:a,lineNumber:64,columnNumber:13},this),")."]},void 0,!0,{fileName:a,lineNumber:60,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input",type:"url"},void 0,!1,{fileName:a,lineNumber:67,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:66,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:59,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Error state",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInput,{name:"my-input",hasError:!0},void 0,!1,{fileName:a,lineNumber:73,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:72,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:48,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"TextInputWithButton",children:[(0,s.jsxDEV)("p",{children:["This component wraps the ",(0,s.jsxDEV)("code",{children:"text-input-with-button"},void 0,!1,{fileName:a,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:a,lineNumber:79,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["Current usage favors the ",(0,s.jsxDEV)("code",{children:"dark"},void 0,!1,{fileName:a,lineNumber:85,columnNumber:36},this)," variant of"," ",(0,s.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:a,lineNumber:86,columnNumber:11},this),"."]},void 0,!0,{fileName:a,lineNumber:84,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Basic usage",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInputWithButton,{children:[(0,s.jsxDEV)(r.TextInput,{name:"my-input"},void 0,!1,{fileName:a,lineNumber:91,columnNumber:15},this),(0,s.jsxDEV)(r.IconButton,{icon:"arrow-right",variant:"dark",title:"go"},void 0,!1,{fileName:a,lineNumber:92,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:90,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:89,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:88,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Error state",children:(0,s.jsxDEV)(o.default.Demo,{withSource:!0,children:(0,s.jsxDEV)(r.TextInputWithButton,{children:[(0,s.jsxDEV)(r.TextInput,{name:"my-input",hasError:u},void 0,!1,{fileName:a,lineNumber:100,columnNumber:15},this),(0,s.jsxDEV)(r.IconButton,{icon:"arrow-right",variant:"dark",title:"go",onClick:()=>m(!u)},void 0,!1,{fileName:a,lineNumber:101,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:99,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:98,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:97,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:78,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:16,columnNumber:5},this)};var l,t=e("preact/hooks"),r=e("../../.."),o=(l=e("../Library"))&&l.__esModule?l:{default:l},s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],38:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Forms",children:[(0,o.jsxDEV)(r.default.Pattern,{title:"Checkbox",children:[(0,o.jsxDEV)("p",{children:["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ",(0,o.jsxDEV)("code",{children:"input"},void 0,!1,{fileName:s,lineNumber:10,columnNumber:44},this),"."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Checkbox",children:[(0,o.jsxDEV)("p",{children:["This example shows an ",(0,o.jsxDEV)("code",{children:'input type="checkbox"'},void 0,!1,{fileName:s,lineNumber:14,columnNumber:35},this)," ","element with the ",(0,o.jsxDEV)("code",{children:"checkbox"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:30},this)," pattern applied, both unchecked and checked."]},void 0,!0,{fileName:s,lineNumber:13,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing",children:[(0,o.jsxDEV)("div",{children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:17},this),(0,o.jsxDEV)(t.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:20,columnNumber:15},this),(0,o.jsxDEV)("div",{children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox",checked:!0},void 0,!1,{fileName:s,lineNumber:26,columnNumber:17},this),(0,o.jsxDEV)(t.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:25,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:18,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Checkbox with label",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("label",{className:"hyp-label",children:[(0,o.jsxDEV)("input",{className:"hyp-checkbox",type:"checkbox"},void 0,!1,{fileName:s,lineNumber:36,columnNumber:15},this),(0,o.jsxDEV)(t.SvgIcon,{name:"checkbox"},void 0,!1,{fileName:s,lineNumber:37,columnNumber:15},this),(0,o.jsxDEV)("span",{children:"Click me, please"},void 0,!1,{fileName:s,lineNumber:38,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:34,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:33,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Text inputs",children:[(0,o.jsxDEV)("p",{children:["A pattern for ",(0,o.jsxDEV)("code",{children:'input type="text"'},void 0,!1,{fileName:s,lineNumber:46,columnNumber:25},this)]},void 0,!0,{fileName:s,lineNumber:45,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Basic text input",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("input",{className:"hyp-text-input",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input in an error state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("input",{className:"hyp-text-input has-error",type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:58,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:44,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Text input with button",children:[(0,o.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:s,lineNumber:70,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input with a dark-variant IconButton",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{width:"300px"},children:(0,o.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,o.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com"},void 0,!1,{fileName:s,lineNumber:78,columnNumber:17},this),(0,o.jsxDEV)(t.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:s,lineNumber:79,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:75,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:74,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Text input and button in an error state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{width:"300px"},children:(0,o.jsxDEV)("div",{className:"hyp-text-input-with-button",children:[(0,o.jsxDEV)("input",{type:"text",placeholder:"http://www.example.com",className:"has-error"},void 0,!1,{fileName:s,lineNumber:89,columnNumber:17},this),(0,o.jsxDEV)(t.IconButton,{icon:"arrow-right",title:"go",variant:"dark"},void 0,!1,{fileName:s,lineNumber:94,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:88,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:87,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:86,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:85,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:69,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../../"),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],39:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){const[e,i]=(0,t.useState)(!1),[n,l]=(0,t.useState)(!1),[u,m]=(0,t.useState)(!1);return(0,s.jsxDEV)(o.default.Page,{title:"Layout",children:[(0,s.jsxDEV)(o.default.Pattern,{title:"Spacing Units",children:[(0,s.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,s.jsxDEV)("code",{children:"1rem"},void 0,!1,{fileName:a,lineNumber:80,columnNumber:33},this)," foundational unit."]},void 0,!0,{fileName:a,lineNumber:77,columnNumber:9},this),(0,s.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,s.jsxDEV)("div",{className:`hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${i}`,children:[(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--white",style:{paddingRight:"1rem"},children:(0,s.jsxDEV)("strong",{children:i},void 0,!1,{fileName:a,lineNumber:92,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:88,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--white hyp-u-stretch",style:{paddingLeft:"1rem"},children:(0,s.jsxDEV)("code",{children:e},void 0,!1,{fileName:a,lineNumber:98,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:94,columnNumber:15},this)]},i,!0,{fileName:a,lineNumber:84,columnNumber:13},this)))},void 0,!1,{fileName:a,lineNumber:82,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:76,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Horizontal spacing",children:[(0,s.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children."},void 0,!1,{fileName:a,lineNumber:106,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["The default spacing unit used by"," ",(0,s.jsxDEV)("code",{children:".hyp-u-horizontal-spacing"},void 0,!1,{fileName:a,lineNumber:113,columnNumber:11},this)," and mixins is 3, marked with an asterisk below."]},void 0,!0,{fileName:a,lineNumber:111,columnNumber:9},this),(0,s.jsxDEV)("div",{className:"hyp-u-vertical-spacing",children:(0,s.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-vertical-spacing",children:[(0,s.jsxDEV)(c,{direction:"horizontal",size:0},void 0,!1,{fileName:a,lineNumber:119,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:1},void 0,!1,{fileName:a,lineNumber:120,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:2},void 0,!1,{fileName:a,lineNumber:121,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:3,defaultSize:!0},void 0,!1,{fileName:a,lineNumber:122,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:4},void 0,!1,{fileName:a,lineNumber:123,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:5},void 0,!1,{fileName:a,lineNumber:124,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:6},void 0,!1,{fileName:a,lineNumber:125,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:7},void 0,!1,{fileName:a,lineNumber:126,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:8},void 0,!1,{fileName:a,lineNumber:127,columnNumber:13},this),(0,s.jsxDEV)(c,{direction:"horizontal",size:9},void 0,!1,{fileName:a,lineNumber:128,columnNumber:13},this)]},void 0,!0,{fileName:a,lineNumber:118,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:117,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:105,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Vertical spacing",children:[(0,s.jsxDEV)("p",{children:"Sometimes you may need to apply or adjust vertical spacing between an element's immediate children."},void 0,!1,{fileName:a,lineNumber:134,columnNumber:9},this),(0,s.jsxDEV)("p",{children:["The default spacing unit used by ",(0,s.jsxDEV)("code",{children:".hyp-u-vertical-spacing"},void 0,!1,{fileName:a,lineNumber:140,columnNumber:44},this)," ","and mixins is 5, marked with an asterisk below."]},void 0,!0,{fileName:a,lineNumber:139,columnNumber:9},this),(0,s.jsxDEV)("div",{className:"hyp-u-layout-row hyp-u-horizontal-spacing--7",children:[(0,s.jsxDEV)(c,{direction:"vertical",size:0},void 0,!1,{fileName:a,lineNumber:144,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:1},void 0,!1,{fileName:a,lineNumber:145,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:2},void 0,!1,{fileName:a,lineNumber:146,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:3},void 0,!1,{fileName:a,lineNumber:147,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:4},void 0,!1,{fileName:a,lineNumber:148,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:5,defaultSize:!0},void 0,!1,{fileName:a,lineNumber:149,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:6},void 0,!1,{fileName:a,lineNumber:150,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:7},void 0,!1,{fileName:a,lineNumber:151,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:8},void 0,!1,{fileName:a,lineNumber:152,columnNumber:11},this),(0,s.jsxDEV)(c,{direction:"vertical",size:9},void 0,!1,{fileName:a,lineNumber:153,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:143,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:133,columnNumber:7},this),(0,s.jsxDEV)(o.default.Pattern,{title:"Positioning and Overlay",children:[(0,s.jsxDEV)(o.default.Example,{title:"Centering in the viewport",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:a,lineNumber:160,columnNumber:17},this)," layout pattern centers an element both horizontally and vertically within the entire viewport."]},void 0,!0,{fileName:a,lineNumber:159,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:165,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",style:"width:450px;"+(e?"visibility:visible":"visibility:hidden"),children:(0,s.jsxDEV)("div",{className:"hyp-card",children:[(0,s.jsxDEV)("p",{children:"This is a card that is centered vertically and horizontally in the current viewport."},void 0,!1,{fileName:a,lineNumber:178,columnNumber:19},this),(0,s.jsxDEV)("div",{className:"hyp-actions",children:(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>i(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:183,columnNumber:21},this)},void 0,!1,{fileName:a,lineNumber:182,columnNumber:19},this)]},void 0,!0,{fileName:a,lineNumber:177,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:171,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:164,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:163,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:158,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Full-screen overlay",children:[(0,s.jsxDEV)("p",{children:["The ",(0,s.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:a,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:a,lineNumber:197,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>l(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:204,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-overlay",style:n?"visibility:visible":"visibility:hidden",children:(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,s.jsxDEV)(r.LabeledButton,{onClick:()=>l(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:217,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:216,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:210,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:203,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:202,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:196,columnNumber:9},this),(0,s.jsxDEV)(o.default.Example,{title:"Full-screen overlay with fixed-centered content",children:[(0,s.jsxDEV)("p",{children:["This shows an example of combining the ",(0,s.jsxDEV)("code",{children:"overlay"},void 0,!1,{fileName:a,lineNumber:228,columnNumber:52},this)," and"," ",(0,s.jsxDEV)("code",{children:"fixed-centered"},void 0,!1,{fileName:a,lineNumber:229,columnNumber:13},this)," patterns."]},void 0,!0,{fileName:a,lineNumber:227,columnNumber:11},this),(0,s.jsxDEV)(o.default.Demo,{children:(0,s.jsxDEV)("div",{children:[(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>m(!0),children:"Show example"},void 0,!1,{fileName:a,lineNumber:233,columnNumber:15},this),(0,s.jsxDEV)("div",{className:"hyp-u-overlay",style:u?"visibility:visible":"visibility:hidden",children:(0,s.jsxDEV)("div",{className:"hyp-u-fixed-centered",children:(0,s.jsxDEV)("div",{className:"hyp-card",style:"width:450px",children:[(0,s.jsxDEV)("div",{children:"This is content in a fixed-centered card of 450px width over a full-screen overlay."},void 0,!1,{fileName:a,lineNumber:247,columnNumber:21},this),(0,s.jsxDEV)("div",{className:"hyp-actions",children:(0,s.jsxDEV)(r.LabeledButton,{variant:"primary",onClick:()=>m(!1),children:"Hide example"},void 0,!1,{fileName:a,lineNumber:252,columnNumber:23},this)},void 0,!1,{fileName:a,lineNumber:251,columnNumber:21},this)]},void 0,!0,{fileName:a,lineNumber:246,columnNumber:19},this)},void 0,!1,{fileName:a,lineNumber:245,columnNumber:17},this)},void 0,!1,{fileName:a,lineNumber:239,columnNumber:15},this)]},void 0,!0,{fileName:a,lineNumber:232,columnNumber:13},this)},void 0,!1,{fileName:a,lineNumber:231,columnNumber:11},this)]},void 0,!0,{fileName:a,lineNumber:226,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:157,columnNumber:7},this)]},void 0,!0,{fileName:a,lineNumber:75,columnNumber:5},this)};var l=u(e("classnames")),t=e("preact/hooks"),r=e("../../../"),o=u(e("../Library")),s=e("preact/compat/jsx-dev-runtime"),a="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";function u(e){return e&&e.__esModule?e:{default:e}}function m(){return(0,s.jsxDEV)("div",{className:"hyp-u-bg-color--grey-4",style:{width:"2rem",height:"2rem"}},void 0,!1,{fileName:a,lineNumber:9,columnNumber:5},this)}function c({direction:e,size:i,defaultSize:n=!1}){const t="vertical"===e?"hyp-u-layout-column":"hyp-u-layout-row",r="vertical"===e?"hyp-u-vertical-spacing":"hyp-u-horizontal-spacing",o=`${r}--${i}`;return(0,s.jsxDEV)("div",{className:(0,l.default)(t,r),children:[n?(0,s.jsxDEV)("div",{children:(0,s.jsxDEV)("strong",{children:[i,"*"]},void 0,!0,{fileName:a,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:36,columnNumber:9},this):(0,s.jsxDEV)("div",{children:i},void 0,!1,{fileName:a,lineNumber:40,columnNumber:9},this),(0,s.jsxDEV)("div",{className:(0,l.default)(t,o,"hyp-u-border"),children:[(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:43,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:44,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:45,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:46,columnNumber:9},this),(0,s.jsxDEV)(m,{},void 0,!1,{fileName:a,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:42,columnNumber:7},this),"horizontal"===e&&(0,s.jsxDEV)("div",{children:(0,s.jsxDEV)("code",{children:[".",o]},void 0,!0,{fileName:a,lineNumber:51,columnNumber:11},this)},void 0,!1,{fileName:a,lineNumber:50,columnNumber:9},this)]},void 0,!0,{fileName:a,lineNumber:34,columnNumber:5},this)}},{"../../../":28,"../Library":29,classnames:54,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],40:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Panel",children:(0,o.jsxDEV)(r.default.Pattern,{title:"Panel",children:[(0,o.jsxDEV)(r.default.Example,{title:"Basic usage",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.Panel,{title:"Basic panel",children:"Here is a panel with no close button and very simple content."},void 0,!1,{fileName:s,lineNumber:10,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:9,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"With close button",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.Panel,{title:"Basic panel with close button",onClose:()=>alert("close clicked"),children:["Here is a panel with very basic content and a close button. Providing an ",(0,o.jsxDEV)("code",{children:"onClose"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:28},this)," function will cause a close button to render."]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:16,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"With header icon",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.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:s,lineNumber:30,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:29,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:28,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Clean theme",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"theme-clean",style:"width:100%",children:(0,o.jsxDEV)(t.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:s,lineNumber:43,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:42,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this)},void 0,!1,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../../"),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelComponents.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],41:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Panels",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," pattern is used by several components:"," ",(0,o.jsxDEV)("code",{children:"Panel"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:9},this),", ",(0,o.jsxDEV)("code",{children:"Dialog"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:29},this),", ",(0,o.jsxDEV)("code",{children:"Modal"},void 0,!1,{fileName:s,lineNumber:9,columnNumber:50},this),", e.g."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Panel",children:[(0,o.jsxDEV)("p",{children:["A panel is a card with a header and affordances for a close button. Use the ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:14,columnNumber:19},this)," modifier when using"," ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:15,columnNumber:11},this)," with an icon-only close button."]},void 0,!0,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with no header",children:[(0,o.jsxDEV)("p",{children:["This is in a panel that has no header. A header is not required, but you are encouraged to use ",(0,o.jsxDEV)("code",{children:"card"},void 0,!1,{fileName:s,lineNumber:20,columnNumber:39},this)," in that case. Note that a ",(0,o.jsxDEV)("code",{children:"panel"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:15},this)," will currently fill all available space. The containing element has been set to ",(0,o.jsxDEV)("code",{children:"max-width: 400px"},void 0,!1,{fileName:s,lineNumber:22,columnNumber:48},this)," ","here."]},void 0,!0,{fileName:s,lineNumber:18,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:{maxWidth:"400px"},children:(0,o.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:s,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with title but no close button",children:[(0,o.jsxDEV)("p",{children:"This example shows a panel with header and content, but no close affordances."},void 0,!1,{fileName:s,lineNumber:38,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel",children:[(0,o.jsxDEV)("header",{children:(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"This is a panel title in a panel header"},void 0,!1,{fileName:s,lineNumber:45,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:44,columnNumber:15},this),(0,o.jsxDEV)("div",{children:"This is panel content. There is a header but no close affordance."},void 0,!1,{fileName:s,lineNumber:49,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:43,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:42,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:37,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Closeable panel",children:[(0,o.jsxDEV)("p",{children:["This example shows a panel pattern with a ",(0,o.jsxDEV)("code",{children:"IconButton"},void 0,!1,{fileName:s,lineNumber:59,columnNumber:55},this)," ","close button, using the ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:60,columnNumber:37},this)," modifier."]},void 0,!0,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,o.jsxDEV)("header",{children:[(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title on a closeable panel"},void 0,!1,{fileName:s,lineNumber:65,columnNumber:17},this),(0,o.jsxDEV)("div",{className:"hyp-panel__close",children:(0,o.jsxDEV)(t.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:s,lineNumber:69,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:68,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:64,columnNumber:15},this),(0,o.jsxDEV)("div",{children:["This is panel content in a panel, using ",(0,o.jsxDEV)("code",{children:"--closeable"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:57},this),"."]},void 0,!0,{fileName:s,lineNumber:72,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:63,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:62,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:57,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Panel with actions",children:[(0,o.jsxDEV)("p",{children:["It is common to render some ",(0,o.jsxDEV)("code",{children:"actions"},void 0,!1,{fileName:s,lineNumber:82,columnNumber:41},this)," within a panel."]},void 0,!0,{fileName:s,lineNumber:81,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{className:"hyp-panel hyp-panel--closeable",children:[(0,o.jsxDEV)("header",{children:[(0,o.jsxDEV)("h2",{className:"hyp-panel__title",children:"Panel title"},void 0,!1,{fileName:s,lineNumber:87,columnNumber:17},this),(0,o.jsxDEV)("div",{className:"hyp-panel__close",children:(0,o.jsxDEV)(t.IconButton,{icon:"cancel",title:"Close"},void 0,!1,{fileName:s,lineNumber:89,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:88,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:86,columnNumber:15},this),(0,o.jsxDEV)("div",{children:"This is panel content in a panel that also has some available actions."},void 0,!1,{fileName:s,lineNumber:92,columnNumber:15},this),(0,o.jsxDEV)("div",{className:"hyp-actions",children:[(0,o.jsxDEV)(t.LabeledButton,{title:"Cancel",children:"Cancel"},void 0,!1,{fileName:s,lineNumber:97,columnNumber:17},this),(0,o.jsxDEV)(t.LabeledButton,{title:"Try again",variant:"primary",children:"Try again"},void 0,!1,{fileName:s,lineNumber:98,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:96,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:85,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:84,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:80,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../../"),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelPatterns.js"},{"../../../":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],42:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Spinner",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"Spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," component is based on the ",(0,o.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:60},this)," ","pattern and renders an animated SVG."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Spinner",children:[(0,o.jsxDEV)(r.default.Example,{title:"Basic usage",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.Spinner,{},void 0,!1,{fileName:s,lineNumber:14,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:13,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Small size",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.Spinner,{size:"small"},void 0,!1,{fileName:s,lineNumber:19,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:18,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:17,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Large size",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.Spinner,{size:"large"},void 0,!1,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:22,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../.."),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],43:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Spinners",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"spinner"},void 0,!1,{fileName:s,lineNumber:8,columnNumber:13},this)," pattern can be used to show loading states. It is an animated SVG."]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Spinner",children:[(0,o.jsxDEV)("p",{children:["The spinner is ",(0,o.jsxDEV)("code",{children:"em-sized"},void 0,!1,{fileName:s,lineNumber:13,columnNumber:26},this),"; it renders at ",(0,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,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:s,lineNumber:12,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Default size",children:[(0,o.jsxDEV)("p",{children:["At its default size, the spinner is ",(0,o.jsxDEV)("code",{children:"2em"},void 0,!1,{fileName:s,lineNumber:21,columnNumber:49},this)," square."]},void 0,!0,{fileName:s,lineNumber:20,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Small size",children:[(0,o.jsxDEV)("p",{children:["Small spinners are ",(0,o.jsxDEV)("code",{children:"1em"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:32},this)," square and can be used inline."]},void 0,!0,{fileName:s,lineNumber:28,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:s,lineNumber:32,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:31,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:27,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Large size",children:[(0,o.jsxDEV)("p",{children:["Large spinners are ",(0,o.jsxDEV)("code",{children:"4em"},void 0,!1,{fileName:s,lineNumber:37,columnNumber:32},this)," square."]},void 0,!0,{fileName:s,lineNumber:36,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--large"},void 0,!1,{fileName:s,lineNumber:40,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:35,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Changing color",children:[(0,o.jsxDEV)("p",{children:"The color of the spinner may be changed by use of utility classes."},void 0,!1,{fileName:s,lineNumber:45,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner hyp-u-color--brand"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:44,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:11,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../.."),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],44:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,a.jsxDEV)(o.default.Page,{title:"Table",children:(0,a.jsxDEV)(o.default.Pattern,{title:"Table",children:[(0,a.jsxDEV)(h,{},void 0,!1,{fileName:u,lineNumber:155,columnNumber:9},this),(0,a.jsxDEV)(N,{},void 0,!1,{fileName:u,lineNumber:156,columnNumber:9},this),(0,a.jsxDEV)(b,{},void 0,!1,{fileName:u,lineNumber:157,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:154,columnNumber:7},this)},void 0,!1,{fileName:u,lineNumber:153,columnNumber:5},this)};var l,t=e("preact/hooks"),r=e("../../../"),o=(l=e("../Library"))&&l.__esModule?l:{default:l},s=e("./samples"),a=e("preact/compat/jsx-dev-runtime"),u="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";const m=e=>(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("td",{children:e.displayName},void 0,!1,{fileName:u,lineNumber:11,columnNumber:5},void 0),(0,a.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:u,lineNumber:12,columnNumber:5},void 0)]},void 0,!0),{tableHeaders:c,items:d}=(0,s.sampleTableContent)();function h(){const[e,i]=(0,t.useState)(!1),[n,l]=(0,t.useState)(null);return(0,a.jsxDEV)(o.default.Example,{title:"Basic Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:["A ",(0,a.jsxDEV)("code",{children:"Table"},void 0,!1,{fileName:u,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:u,lineNumber:33,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:41,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:40,columnNumber:9},this),(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",isLoading:e,items:d,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>m(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:45,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:39,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:32,columnNumber:5},this)}function N(){const[e,i]=(0,t.useState)(!1),[n,l]=(0,t.useState)(d[d.length-1]);return(0,a.jsxDEV)(o.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:[(0,a.jsxDEV)("code",{children:"Tables"},void 0,!1,{fileName:u,lineNumber:69,columnNumber:9},this)," render inside of a ",(0,a.jsxDEV)("code",{children:"Scrollbox"},void 0,!1,{fileName:u,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:u,lineNumber:68,columnNumber:7},this),(0,a.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,a.jsxDEV)("code",{children:"td"},void 0,!1,{fileName:u,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:u,lineNumber:74,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:83,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:82,columnNumber:9},this),(0,a.jsxDEV)("div",{className:"hyp-u-layout-column hyp-u-padding--3",style:"max-height:300px;height:300px;",children:(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",isLoading:e,items:e?[]:d,selectedItem:n,onSelectItem:e=>l(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>(e=>(0,a.jsxDEV)(a.Fragment,{children:[(0,a.jsxDEV)("td",{className:"hyp-u-color--grey-6",children:e.displayName},void 0,!1,{fileName:u,lineNumber:18,columnNumber:5},void 0),(0,a.jsxDEV)("td",{children:e.updated},void 0,!1,{fileName:u,lineNumber:19,columnNumber:5},void 0)]},void 0,!0))(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:91,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:81,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:67,columnNumber:5},this)}function b(){const[e,i]=(0,t.useState)(!1),n=[],[l,s]=(0,t.useState)(n[n.length-1]),d=(0,a.jsxDEV)("p",{children:["There are no files available to show."," ",(0,a.jsxDEV)("a",{href:"https://www.example.com",children:"Learn more."},void 0,!1,{fileName:u,lineNumber:117,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:115,columnNumber:5},this);return(0,a.jsxDEV)(o.default.Example,{title:"Constrained Table",variant:"wide",children:[(0,a.jsxDEV)("p",{children:["This Table has no items (it is empty). When not in loading state, the provided ",(0,a.jsxDEV)("code",{children:"emptyItemsMessage"},void 0,!1,{fileName:u,lineNumber:125,columnNumber:18},this)," will render centered in the table."]},void 0,!0,{fileName:u,lineNumber:123,columnNumber:7},this),(0,a.jsxDEV)(o.default.Demo,{withSource:!0,children:[(0,a.jsxDEV)("div",{className:"hyp-u-padding--5",children:(0,a.jsxDEV)(r.LabeledButton,{onClick:()=>i(!e),children:"Toggle Loading"},void 0,!1,{fileName:u,lineNumber:130,columnNumber:11},this)},void 0,!1,{fileName:u,lineNumber:129,columnNumber:9},this),(0,a.jsxDEV)(r.Table,{accessibleLabel:"File list",emptyItemsMessage:d,isLoading:e,items:n,selectedItem:l,onSelectItem:e=>s(e),onUseItem:e=>alert(`Selected ${e.displayName}`),renderItem:e=>m(e),tableHeaders:c},void 0,!1,{fileName:u,lineNumber:135,columnNumber:9},this)]},void 0,!0,{fileName:u,lineNumber:128,columnNumber:7},this)]},void 0,!0,{fileName:u,lineNumber:122,columnNumber:5},this)}},{"../../../":28,"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55,"preact/hooks":57}],45:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(t.default.Page,{title:"Tables",children:[(0,o.jsxDEV)("p",{children:["These ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:9},this)," content needs to be usable in tight and narrow spaces."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:7},this),(0,o.jsxDEV)(t.default.Pattern,{title:"Table",children:[(0,o.jsxDEV)(t.default.Example,{title:"Basic table",variant:"wide",children:[(0,o.jsxDEV)("p",{children:["By default, a ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:18,columnNumber:27},this)," will fill available horizontal space, and will use whatever height is needed to render its rows."," ",(0,o.jsxDEV)("code",{children:"tr.is-selected"},void 0,!1,{fileName:s,lineNumber:20,columnNumber:13},this)," styles a row as selected."]},void 0,!0,{fileName:s,lineNumber:17,columnNumber:11},this),(0,o.jsxDEV)(t.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:s,lineNumber:27,columnNumber:19},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:s,lineNumber:30,columnNumber:19},this)]},void 0,!0,{fileName:s,lineNumber:26,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:15},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:35,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:24,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:16,columnNumber:9},this),(0,o.jsxDEV)(t.default.Example,{title:"Adjusting column widths",children:[(0,o.jsxDEV)("p",{children:["Table column widths may be adjusted by styling ",(0,o.jsxDEV)("code",{children:"thead th"},void 0,!1,{fileName:s,lineNumber:42,columnNumber:60},this)," ","elements. In this example, the column widths are set to 30% and 70%."]},void 0,!0,{fileName:s,lineNumber:41,columnNumber:11},this),(0,o.jsxDEV)(t.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:30%",children:"Column A"},void 0,!1,{fileName:s,lineNumber:49,columnNumber:19},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",style:"width:70%",children:"Column B"},void 0,!1,{fileName:s,lineNumber:56,columnNumber:19},this)]},void 0,!0,{fileName:s,lineNumber:48,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:47,columnNumber:15},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:65,columnNumber:15},this)]},void 0,!0,{fileName:s,lineNumber:46,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:45,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:40,columnNumber:9},this),(0,o.jsxDEV)(t.default.Example,{title:"Constraining with a scrollbox",children:[(0,o.jsxDEV)("p",{children:["In this example, the ",(0,o.jsxDEV)("code",{children:"table"},void 0,!1,{fileName:s,lineNumber:72,columnNumber:34},this)," is constrained within a"," ",(0,o.jsxDEV)("code",{children:"scrollbox"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:13},this)," with a ",(0,o.jsxDEV)("code",{children:"max-height"},void 0,!1,{fileName:s,lineNumber:73,columnNumber:43},this),"."]},void 0,!0,{fileName:s,lineNumber:71,columnNumber:11},this),(0,o.jsxDEV)(t.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"max-height:250px",className:"hyp-scrollbox--with-header",children:(0,o.jsxDEV)("table",{className:"hyp-table",children:[(0,o.jsxDEV)("thead",{children:(0,o.jsxDEV)("tr",{children:[(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column A"},void 0,!1,{fileName:s,lineNumber:83,columnNumber:21},this),(0,o.jsxDEV)("th",{scope:"col",className:"hyp-table__header",children:"Column B"},void 0,!1,{fileName:s,lineNumber:86,columnNumber:21},this)]},void 0,!0,{fileName:s,lineNumber:82,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:81,columnNumber:17},this),(0,o.jsxDEV)(r.SampleTableBody,{},void 0,!1,{fileName:s,lineNumber:91,columnNumber:17},this)]},void 0,!0,{fileName:s,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:75,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:70,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:15,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:5},this)};var l,t=(l=e("../Library"))&&l.__esModule?l:{default:l},r=e("./samples"),o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TablePatterns.js"},{"../Library":29,"./samples":48,"preact/compat/jsx-dev-runtime":55}],46:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Thumbnail",children:[(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:s,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,o.jsxDEV)("code",{children:"Thumbnail"},void 0,!1,{fileName:s,lineNumber:11,columnNumber:21},this)," has no content, it will render a placeholder. If its ",(0,o.jsxDEV)("code",{children:"isLoading"},void 0,!1,{fileName:s,lineNumber:12,columnNumber:31},this)," prop is set to"," ",(0,o.jsxDEV)("code",{children:"true"},void 0,!1,{fileName:s,lineNumber:13,columnNumber:11},this),", it will render a loading state."]},void 0,!0,{fileName:s,lineNumber:8,columnNumber:9},this),(0,o.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:s,lineNumber:15,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail with default placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(t.Thumbnail,{},void 0,!1,{fileName:s,lineNumber:24,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:23,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:22,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:21,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with image content",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(t.Thumbnail,{children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:33,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:32,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:31,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:30,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:29,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(t.Thumbnail,{isLoading:!0},void 0,!1,{fileName:s,lineNumber:42,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:41,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(t.Thumbnail,{isLoading:!0,children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:51,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:50,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:47,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Empty thumbnail with custom placeholder",children:[(0,o.jsxDEV)("p",{children:"Placeholder can be any JSX"},void 0,!1,{fileName:s,lineNumber:58,columnNumber:11},this),(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width:175px",children:(0,o.jsxDEV)(t.Thumbnail,{placeholder:"!"},void 0,!1,{fileName:s,lineNumber:61,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:60,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:59,columnNumber:11},this)]},void 0,!0,{fileName:s,lineNumber:57,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:7,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail (smaller)",children:[(0,o.jsxDEV)("p",{children:"These examples are within a 100x150px parent."},void 0,!1,{fileName:s,lineNumber:68,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Smaller loading spinner",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(t.Thumbnail,{isLoading:!0,size:"small"},void 0,!1,{fileName:s,lineNumber:72,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:71,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:70,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:69,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Constrained image proportions",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(t.Thumbnail,{size:"small",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:81,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:80,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:79,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:78,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:77,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Constrained image proportions: placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width:150px; height:100px",children:(0,o.jsxDEV)(t.Thumbnail,{size:"small"},void 0,!1,{fileName:s,lineNumber:90,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:89,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:88,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:87,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:67,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../.."),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailComponents.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],47:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(){return(0,o.jsxDEV)(r.default.Page,{title:"Thumbnails",children:[(0,o.jsxDEV)("p",{children:["The ",(0,o.jsxDEV)("code",{children:"thumbnail"},void 0,!1,{fileName:s,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:s,lineNumber:7,columnNumber:7},this),(0,o.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:s,lineNumber:13,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail",children:[(0,o.jsxDEV)("p",{children:"These examples show a thumbnail that is contained within a parent container sized to 250x175px."},void 0,!1,{fileName:s,lineNumber:20,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with content",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/200/300",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:29,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:28,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:27,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:26,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:25,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:24,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail with placeholder",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:s,lineNumber:41,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:40,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:39,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:38,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:37,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:36,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"thumbnail in loading state",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"height: 250px; width: 175px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner"},void 0,!1,{fileName:s,lineNumber:53,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:52,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:51,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:50,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:49,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:48,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:19,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnail in smaller dimensions",children:[(0,o.jsxDEV)("p",{children:"These examples show all three states of a thumnbail in a smaller space: 150x100px."},void 0,!1,{fileName:s,lineNumber:62,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"All three states shown",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:[(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/100/150",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:71,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:70,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:69,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:68,columnNumber:13},this),(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("span",{className:"hyp-thumbnail__placeholder",children:"..."},void 0,!1,{fileName:s,lineNumber:79,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:78,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:77,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:76,columnNumber:13},this),(0,o.jsxDEV)("div",{style:"width: 100px; height: 150px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)(t.SvgIcon,{name:"hyp-spinner",className:"hyp-spinner--small"},void 0,!1,{fileName:s,lineNumber:87,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:86,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:85,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:84,columnNumber:13},this)]},void 0,!0,{fileName:s,lineNumber:67,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:66,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:61,columnNumber:7},this),(0,o.jsxDEV)(r.default.Pattern,{title:"Thumbnails: aspect ratio",children:[(0,o.jsxDEV)("p",{children:"An image in a thumnbail is constrained to the available space, and retains aspect ratio."},void 0,!1,{fileName:s,lineNumber:96,columnNumber:9},this),(0,o.jsxDEV)(r.default.Example,{title:"Thumbnail showing retention of image aspect ratio",children:(0,o.jsxDEV)(r.default.Demo,{withSource:!0,children:(0,o.jsxDEV)("div",{style:"width: 175px; height: 250px",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail",children:(0,o.jsxDEV)("div",{className:"hyp-thumbnail__content",children:(0,o.jsxDEV)("img",{src:"http://placekitten.com/350/250",alt:"kitty"},void 0,!1,{fileName:s,lineNumber:105,columnNumber:19},this)},void 0,!1,{fileName:s,lineNumber:104,columnNumber:17},this)},void 0,!1,{fileName:s,lineNumber:103,columnNumber:15},this)},void 0,!1,{fileName:s,lineNumber:102,columnNumber:13},this)},void 0,!1,{fileName:s,lineNumber:101,columnNumber:11},this)},void 0,!1,{fileName:s,lineNumber:100,columnNumber:9},this)]},void 0,!0,{fileName:s,lineNumber:95,columnNumber:7},this)]},void 0,!0,{fileName:s,lineNumber:6,columnNumber:5},this)};var l,t=e("../../.."),r=(l=e("../Library"))&&l.__esModule?l:{default:l},o=e("preact/compat/jsx-dev-runtime"),s="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailPatterns.js"},{"../../..":28,"../Library":29,"preact/compat/jsx-dev-runtime":55}],48:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.SampleListElements=function(){return(0,l.jsxDEV)(l.Fragment,{children:[(0,l.jsxDEV)("li",{children:"Alpha"},void 0,!1,{fileName:t,lineNumber:12,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Bravo"},void 0,!1,{fileName:t,lineNumber:13,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Charlie"},void 0,!1,{fileName:t,lineNumber:14,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Delta"},void 0,!1,{fileName:t,lineNumber:15,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Echo"},void 0,!1,{fileName:t,lineNumber:16,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Foxtrot"},void 0,!1,{fileName:t,lineNumber:17,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Golf"},void 0,!1,{fileName:t,lineNumber:18,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Hotel"},void 0,!1,{fileName:t,lineNumber:19,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"India"},void 0,!1,{fileName:t,lineNumber:20,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Juliett"},void 0,!1,{fileName:t,lineNumber:21,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Kilo"},void 0,!1,{fileName:t,lineNumber:22,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Lima"},void 0,!1,{fileName:t,lineNumber:23,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Mike"},void 0,!1,{fileName:t,lineNumber:24,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"November"},void 0,!1,{fileName:t,lineNumber:25,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Oscar"},void 0,!1,{fileName:t,lineNumber:26,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Papa"},void 0,!1,{fileName:t,lineNumber:27,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Quebec"},void 0,!1,{fileName:t,lineNumber:28,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Romeo"},void 0,!1,{fileName:t,lineNumber:29,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Sierra"},void 0,!1,{fileName:t,lineNumber:30,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Tango"},void 0,!1,{fileName:t,lineNumber:31,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Uniform"},void 0,!1,{fileName:t,lineNumber:32,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Victor"},void 0,!1,{fileName:t,lineNumber:33,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Whiskey"},void 0,!1,{fileName:t,lineNumber:34,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"XRay"},void 0,!1,{fileName:t,lineNumber:35,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Yankee"},void 0,!1,{fileName:t,lineNumber:36,columnNumber:7},this),(0,l.jsxDEV)("li",{children:"Zulu"},void 0,!1,{fileName:t,lineNumber:37,columnNumber:7},this)]},void 0,!0)},n.SampleTableBody=function(){return(0,l.jsxDEV)("tbody",{children:[(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:t,lineNumber:46,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:t,lineNumber:47,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:45,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:t,lineNumber:50,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:t,lineNumber:51,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:49,columnNumber:7},this),(0,l.jsxDEV)("tr",{className:"is-selected",children:[(0,l.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:t,lineNumber:54,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:t,lineNumber:55,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:53,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:t,lineNumber:58,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:t,lineNumber:59,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:57,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:t,lineNumber:62,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:t,lineNumber:63,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:61,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:t,lineNumber:66,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Katydid Lozenges Moebius"},void 0,!1,{fileName:t,lineNumber:67,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:65,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Elephantine Fry-ups"},void 0,!1,{fileName:t,lineNumber:70,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Gargantuan Hiccups"},void 0,!1,{fileName:t,lineNumber:71,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:69,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Illicit Jugglers"},void 0,!1,{fileName:t,lineNumber:74,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Katydid Lozenges Meringue"},void 0,!1,{fileName:t,lineNumber:75,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:73,columnNumber:7},this),(0,l.jsxDEV)("tr",{children:[(0,l.jsxDEV)("td",{children:"Alphanumeric Balloons"},void 0,!1,{fileName:t,lineNumber:78,columnNumber:9},this),(0,l.jsxDEV)("td",{children:"Champagne Delusions"},void 0,!1,{fileName:t,lineNumber:79,columnNumber:9},this)]},void 0,!0,{fileName:t,lineNumber:77,columnNumber:7},this)]},void 0,!0,{fileName:t,lineNumber:44,columnNumber:5},this)},n.LoremIpsum=function(){return(0,l.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:t,lineNumber:92,columnNumber:5},this)},n.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 l=e("preact/compat/jsx-dev-runtime"),t="/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/samples.js"},{"preact/compat/jsx-dev-runtime":55}],49:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.startApp=function({baseURL:e="",extraRoutes:i=[],icons:n={}}={}){const a={...r.default,...n};(0,t.registerIcons)(a);const u=document.querySelector("#app");(0,l.render)((0,s.jsxDEV)(o.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),u)};var l=e("preact"),t=e("../"),r=a(e("../icons")),o=a(e("./components/PlaygroundApp")),s=e("preact/compat/jsx-dev-runtime");function a(e){return e&&e.__esModule?e:{default:e}}},{"../":28,"../icons":27,"./components/PlaygroundApp":31,preact:56,"preact/compat/jsx-dev-runtime":55}],50:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.useRoute=function(e,i){const[n,r]=(0,l.useState)((()=>t(e))),o=(0,l.useMemo)((()=>i.find((e=>n.match(e.route)))),[n,i]),s=`${o.title}: Hypothesis UI playground`;return(0,l.useEffect)((()=>{document.title=s}),[s]),(0,l.useEffect)((()=>{const i=()=>{r(t(e))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}}),[e]),[o,(i,n)=>{i.preventDefault(),history.pushState({},s,e+n),r(n)}]};var l=e("preact/hooks");function t(e){return location.pathname.slice(e.length)}},{"preact/hooks":57}],51:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getRoutes=function(e){return e?j.filter((i=>i.group===e)):j};var l=g(e("./components/LibraryHome")),t=g(e("./components/patterns/ColorFoundations")),r=g(e("./components/patterns/LayoutFoundations")),o=g(e("./components/patterns/FormPatterns")),s=g(e("./components/patterns/ContainerPatterns")),a=g(e("./components/patterns/PanelPatterns")),u=g(e("./components/patterns/SpinnerPatterns")),m=g(e("./components/patterns/TablePatterns")),c=g(e("./components/patterns/ThumbnailPatterns")),d=g(e("./components/patterns/ButtonComponents")),h=g(e("./components/patterns/ContainerComponents")),N=g(e("./components/patterns/DialogComponents")),b=g(e("./components/patterns/FormComponents")),f=g(e("./components/patterns/PanelComponents")),p=g(e("./components/patterns/SpinnerComponents")),v=g(e("./components/patterns/TableComponents")),x=g(e("./components/patterns/ThumbnailComponents"));function g(e){return e&&e.__esModule?e:{default:e}}const j=[{route:/^\/?$/,title:"Home",component:l.default,group:"home"},{route:"/foundations-colors",title:"Colors",component:t.default,group:"foundations"},{route:"/foundations-layout",title:"Layout",component:r.default,group:"foundations"},{route:"/patterns-containers",title:"Containers",component:s.default,group:"patterns"},{route:"/patterns-forms",title:"Forms",component:o.default,group:"patterns"},{route:"/patterns-panels",title:"Panels",component:a.default,group:"patterns"},{route:"/patterns-spinners",title:"Spinners",component:u.default,group:"patterns"},{route:"/patterns-tables",title:"Tables",component:m.default,group:"patterns"},{route:"/patterns-thumbnails",title:"Thumbnails",component:c.default,group:"patterns"},{route:"/components-buttons",title:"Buttons",component:d.default,group:"components"},{route:"/components-containers",title:"Containers",component:h.default,group:"components"},{route:"/components-dialogs",title:"Dialogs",component:N.default,group:"components"},{route:"/components-forms",title:"Forms",component:b.default,group:"components"},{route:"/components-panel",title:"Panel",component:f.default,group:"components"},{route:"/components-spinner",title:"Spinner",component:p.default,group:"components"},{route:"/components-table",title:"Table",component:v.default,group:"components"},{route:"/components-thumbnail",title:"Thumbnail",component:x.default,group:"components"}]},{"./components/LibraryHome":30,"./components/patterns/ButtonComponents":32,"./components/patterns/ColorFoundations":33,"./components/patterns/ContainerComponents":34,"./components/patterns/ContainerPatterns":35,"./components/patterns/DialogComponents":36,"./components/patterns/FormComponents":37,"./components/patterns/FormPatterns":38,"./components/patterns/LayoutFoundations":39,"./components/patterns/PanelComponents":40,"./components/patterns/PanelPatterns":41,"./components/patterns/SpinnerComponents":42,"./components/patterns/SpinnerPatterns":43,"./components/patterns/TableComponents":44,"./components/patterns/TablePatterns":45,"./components/patterns/ThumbnailComponents":46,"./components/patterns/ThumbnailPatterns":47}],52:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.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 n=function(e){return"string"==typeof e?e:e.displayName||e.name}(i.type);let l=Object.entries(i.props).map((([e,i])=>"children"===e?"":"boolean"==typeof i?i?e:"":`${e}=${"string"==typeof i?`"${function(e){return e.replace(/"/g,'\\"')}(i)}"`:`{${i}}`}`)).join(" ").trim();l.length>0&&(l=" "+l);const t=i.props.children;if(t){let i=Array.isArray(t)?t.map(e).join("\n"):e(t);return i=function(e,i){const n=" ".repeat(i);return e.split("\n").map((e=>n+e)).join("\n")}(i,2),`<${n}${l}>\n${i}\n</${n}>`}return`<${n}${l} />`}return""}},{}],53:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.downcastRef=function(e){return e}},{}],54:[function(e,i,n){(function(e){(function(){
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
- !function(){"use strict";var n={}.hasOwnProperty;function t(){for(var e=[],i=0;i<arguments.length;i++){var l=arguments[i];if(l){var r=typeof l;if("string"===r||"number"===r)e.push(l);else if(Array.isArray(l)){if(l.length){var o=t.apply(null,l);o&&e.push(o)}}else if("object"===r)if(l.toString===Object.prototype.toString)for(var s in l)n.call(l,s)&&l[s]&&e.push(s);else e.push(l.toString())}}return e.join(" ")}void 0!==i&&i.exports?(t.default=t,i.exports=t):"function"==typeof e&&"object"==typeof e.amd&&e.amd?e("classnames",[],(function(){return t})):window.classNames=t}()}).call(this)}).call(this,void 0)},{}],55:[function(e,i,n){i.exports=e("preact/jsx-runtime")},{"preact/jsx-runtime":58}],56:[function(e,i,n){var t,l,r,o,s,a,u={},m=[],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 t,l,r,o=arguments,s={};for(r in i)"key"==r?t=i[r]:"ref"==r?l=i[r]:s[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);if(null!=n&&(s.children=n),"function"==typeof e&&null!=e.defaultProps)for(r in e.defaultProps)void 0===s[r]&&(s[r]=e.defaultProps[r]);return b(e,s,t,l,null)}function b(e,i,n,l,r){var o={type:e,props:i,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++t.__v:r};return null!=t.vnode&&t.vnode(o),o}function f(e){return e.children}function p(e,i){this.props=e,this.context=i}function v(e,i){if(null==i)return e.__?v(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?v(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 g(e){(!e.__d&&(e.__d=!0)&&r.push(e)&&!j.__r++||s!==t.debounceRendering)&&((s=t.debounceRendering)||o)(j)}function j(){for(var e;j.__r=r.length;)e=r.sort((function(e,i){return e.__v.__b-i.__v.__b})),r=[],e.some((function(e){var i,n,t,l,r,o;e.__d&&(r=(l=(i=e).__v).__e,(o=i.__P)&&(n=[],(t=d({},l)).__v=l.__v+1,L(o,l,t,i.__n,void 0!==o.ownerSVGElement,null!=l.__h?[r]:null,n,null==r?v(l):r,l.__h),C(n,l),l.__e!=r&&x(l)))}))}function D(e,i,n,t,l,r,o,s,a,c){var d,h,N,p,x,g,j,D=t&&t.__k||m,V=D.length;for(n.__k=[],d=0;d<i.length;d++)if(null!=(p=n.__k[d]=null==(p=i[d])||"boolean"==typeof p?null:"string"==typeof p||"number"==typeof p||"bigint"==typeof p?b(null,p,null,null,p):Array.isArray(p)?b(f,{children:p},null,null,null):p.__b>0?b(p.type,p.props,p.key,null,p.__v):p)){if(p.__=n,p.__b=n.__b+1,null===(N=D[d])||N&&p.key==N.key&&p.type===N.type)D[d]=void 0;else for(h=0;h<V;h++){if((N=D[h])&&p.key==N.key&&p.type===N.type){D[h]=void 0;break}N=null}L(e,p,N=N||u,l,r,o,s,a,c),x=p.__e,(h=p.ref)&&N.ref!=h&&(j||(j=[]),N.ref&&j.push(N.ref,null,p),j.push(h,p.__c||x,p)),null!=x?(null==g&&(g=x),"function"==typeof p.type&&null!=p.__k&&p.__k===N.__k?p.__d=a=E(p,a,e):a=y(e,p,N,D,x,a),c||"option"!==n.type?"function"==typeof n.type&&(n.__d=a):e.value=""):a&&N.__e==a&&a.parentNode!=e&&(a=v(N))}for(n.__e=g,d=V;d--;)null!=D[d]&&("function"==typeof n.type&&null!=D[d].__e&&D[d].__e==n.__d&&(n.__d=v(t,d+1)),I(D[d],D[d]));if(j)for(d=0;d<j.length;d++)S(j[d],j[++d],j[++d])}function E(e,i,n){var t,l;for(t=0;t<e.__k.length;t++)(l=e.__k[t])&&(l.__=e,i="function"==typeof l.type?E(l,i,n):y(n,l,l,e.__k,l.__e,i));return i}function y(e,i,n,t,l,r){var o,s,a;if(void 0!==i.__d)o=i.__d,i.__d=void 0;else if(null==n||l!=r||null==l.parentNode)e:if(null==r||r.parentNode!==e)e.appendChild(l),o=null;else{for(s=r,a=0;(s=s.nextSibling)&&a<t.length;a+=2)if(s==l)break e;e.insertBefore(l,r),o=r}return void 0!==o?o:l.nextSibling}function V(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,t,l){var r;e:if("style"===i)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof t&&(e.style.cssText=t=""),t)for(i in t)n&&i in n||V(e.style,i,"");if(n)for(i in n)t&&n[i]===t[i]||V(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?t||e.addEventListener(i,r?k:_,r):e.removeEventListener(i,r?k:_,r);else if("dangerouslySetInnerHTML"!==i){if(l)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 _(e){this.l[e.type+!1](t.event?t.event(e):e)}function k(e){this.l[e.type+!0](t.event?t.event(e):e)}function L(e,i,n,l,r,o,s,a,u){var m,c,h,N,b,v,x,g,j,E,y,V=i.type;if(void 0!==i.constructor)return null;null!=n.__h&&(u=n.__h,a=i.__e=n.__e,i.__h=null,o=[a]),(m=t.__b)&&m(i);try{e:if("function"==typeof V){if(g=i.props,j=(m=V.contextType)&&l[m.__c],E=m?j?j.props.value:m.__:l,n.__c?x=(c=i.__c=n.__c).__=c.__E:("prototype"in V&&V.prototype.render?i.__c=c=new V(g,E):(i.__c=c=new p(g,E),c.constructor=V,c.render=B),j&&j.sub(c),c.props=g,c.state||(c.state={}),c.context=E,c.__n=l,h=c.__d=!0,c.__h=[]),null==c.__s&&(c.__s=c.state),null!=V.getDerivedStateFromProps&&(c.__s==c.state&&(c.__s=d({},c.__s)),d(c.__s,V.getDerivedStateFromProps(g,c.__s))),N=c.props,b=c.state,h)null==V.getDerivedStateFromProps&&null!=c.componentWillMount&&c.componentWillMount(),null!=c.componentDidMount&&c.__h.push(c.componentDidMount);else{if(null==V.getDerivedStateFromProps&&g!==N&&null!=c.componentWillReceiveProps&&c.componentWillReceiveProps(g,E),!c.__e&&null!=c.shouldComponentUpdate&&!1===c.shouldComponentUpdate(g,c.__s,E)||i.__v===n.__v){c.props=g,c.state=c.__s,i.__v!==n.__v&&(c.__d=!1),c.__v=i,i.__e=n.__e,i.__k=n.__k,i.__k.forEach((function(e){e&&(e.__=i)})),c.__h.length&&s.push(c);break e}null!=c.componentWillUpdate&&c.componentWillUpdate(g,c.__s,E),null!=c.componentDidUpdate&&c.__h.push((function(){c.componentDidUpdate(N,b,v)}))}c.context=E,c.props=g,c.state=c.__s,(m=t.__r)&&m(i),c.__d=!1,c.__v=i,c.__P=e,m=c.render(c.props,c.state,c.context),c.state=c.__s,null!=c.getChildContext&&(l=d(d({},l),c.getChildContext())),h||null==c.getSnapshotBeforeUpdate||(v=c.getSnapshotBeforeUpdate(N,b)),y=null!=m&&m.type===f&&null==m.key?m.props.children:m,D(e,Array.isArray(y)?y:[y],i,n,l,r,o,s,a,u),c.base=i.__e,i.__h=null,c.__h.length&&s.push(c),x&&(c.__E=c.__=null),c.__e=!1}else null==o&&i.__v===n.__v?(i.__k=n.__k,i.__e=n.__e):i.__e=P(n.__e,i,n,l,r,o,s,u);(m=t.diffed)&&m(i)}catch(e){i.__v=null,(u||null!=o)&&(i.__e=a,i.__h=!!u,o[o.indexOf(a)]=null),t.__e(e,i,n)}}function C(e,i){t.__c&&t.__c(i,e),e.some((function(i){try{e=i.__h,i.__h=[],e.some((function(e){e.call(i)}))}catch(e){t.__e(e,i.__v)}}))}function P(e,i,n,t,l,r,o,s){var a,c,d,N,b=n.props,f=i.props,p=i.type,v=0;if("svg"===p&&(l=!0),null!=r)for(;v<r.length;v++)if((a=r[v])&&(a===e||(p?a.localName==p:3==a.nodeType))){e=a,r[v]=null;break}if(null==e){if(null===p)return document.createTextNode(f);e=l?document.createElementNS("http://www.w3.org/2000/svg",p):document.createElement(p,f.is&&f),r=null,s=!1}if(null===p)b===f||s&&e.data===f||(e.data=f);else{if(r=r&&m.slice.call(e.childNodes),c=(b=n.props||u).dangerouslySetInnerHTML,d=f.dangerouslySetInnerHTML,!s){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,t,l){var r;for(r in n)"children"===r||"key"===r||r in i||w(e,r,null,n[r],t);for(r in i)l&&"function"!=typeof i[r]||"children"===r||"key"===r||"value"===r||"checked"===r||n[r]===i[r]||w(e,r,i[r],n[r],t)}(e,f,b,l,s),d)i.__k=[];else if(v=i.props.children,D(e,Array.isArray(v)?v:[v],i,n,t,l&&"foreignObject"!==p,r,o,e.firstChild,s),null!=r)for(v=r.length;v--;)null!=r[v]&&h(r[v]);s||("value"in f&&void 0!==(v=f.value)&&(v!==e.value||"progress"===p&&!v)&&w(e,"value",v,b.value,!1),"checked"in f&&void 0!==(v=f.checked)&&v!==e.checked&&w(e,"checked",v,b.checked,!1))}return e}function S(e,i,n){try{"function"==typeof e?e(i):e.current=i}catch(e){t.__e(e,n)}}function I(e,i,n){var l,r,o;if(t.unmount&&t.unmount(e),(l=e.ref)&&(l.current&&l.current!==e.__e||S(l,null,i)),n||"function"==typeof e.type||(n=null!=(r=e.__e)),e.__e=e.__d=void 0,null!=(l=e.__c)){if(l.componentWillUnmount)try{l.componentWillUnmount()}catch(e){t.__e(e,i)}l.base=l.__P=null}if(l=e.__k)for(o=0;o<l.length;o++)l[o]&&I(l[o],i,n);null!=r&&h(r)}function B(e,i,n){return this.constructor(e,n)}function T(e,i,n){var l,r,o;t.__&&t.__(e,i),r=(l="function"==typeof n)?null:n&&n.__k||i.__k,o=[],L(i,e=(!l&&n||i).__k=N(f,null,[e]),r||u,u,void 0!==i.ownerSVGElement,!l&&n?[n]:r?null:i.firstChild?m.slice.call(i.childNodes):null,o,!l&&n?n:r?r.__e:i.firstChild,l),C(o,e)}t={__e:function(e,i){for(var n,t,l;i=i.__;)if((n=i.__c)&&!n.__)try{if((t=n.constructor)&&null!=t.getDerivedStateFromError&&(n.setState(t.getDerivedStateFromError(e)),l=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),l=n.__d),l)return n.__E=n}catch(i){e=i}throw e},__v:0},l=function(e){return null!=e&&void 0===e.constructor},p.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),g(this))},p.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),g(this))},p.prototype.render=f,r=[],o="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,j.__r=0,a=0,n.render=T,n.hydrate=function e(i,n){T(i,n,e)},n.createElement=N,n.h=N,n.Fragment=f,n.createRef=function(){return{current:null}},n.isValidElement=l,n.Component=p,n.cloneElement=function(e,i,n){var t,l,r,o=arguments,s=d({},e.props);for(r in i)"key"==r?t=i[r]:"ref"==r?l=i[r]:s[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);return null!=n&&(s.children=n),b(e.type,s,t||e.key,l||e.ref,null)},n.createContext=function(e,i){var n={__c:i="__cC"+a++,__:e,Consumer:function(e,i){return e.children(i)},Provider:function(e){var n,t;return this.getChildContext||(n=[],(t={})[i]=this,this.getChildContext=function(){return t},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(g)},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},n.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},n.options=t},{}],57:[function(e,i,n){var t,l,r,o=e("preact"),s=0,a=[],u=o.options.__b,m=o.options.__r,c=o.options.diffed,d=o.options.__c,h=o.options.unmount;function N(e,i){o.options.__h&&o.options.__h(l,e,s||i),s=0;var n=l.__H||(l.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function b(e){return s=1,f(y,e)}function f(e,i,n){var r=N(t++,2);return r.t=e,r.__c||(r.__=[n?n(i):y(void 0,i),function(e){var i=r.t(r.__[0],e);r.__[0]!==i&&(r.__=[i,r.__[1]],r.__c.setState({}))}],r.__c=l),r.__}function p(e,i){var n=N(t++,4);!o.options.__s&&E(n.__H,i)&&(n.__=e,n.__H=i,l.__h.push(n))}function v(e,i){var n=N(t++,7);return E(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}function x(){a.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(j),e.__H.__h.forEach(D),e.__H.__h=[]}catch(l){e.__H.__h=[],o.options.__e(l,e.__v)}})),a=[]}o.options.__b=function(e){l=null,u&&u(e)},o.options.__r=function(e){m&&m(e),t=0;var i=(l=e.__c).__H;i&&(i.__h.forEach(j),i.__h.forEach(D),i.__h=[])},o.options.diffed=function(e){c&&c(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==a.push(i)&&r===o.options.requestAnimationFrame||((r=o.options.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(t),g&&cancelAnimationFrame(i),setTimeout(e)},t=setTimeout(n,100);g&&(i=requestAnimationFrame(n))})(x)),l=void 0},o.options.__c=function(e,i){i.some((function(e){try{e.__h.forEach(j),e.__h=e.__h.filter((function(e){return!e.__||D(e)}))}catch(r){i.some((function(e){e.__h&&(e.__h=[])})),i=[],o.options.__e(r,e.__v)}})),d&&d(e,i)},o.options.unmount=function(e){h&&h(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(j)}catch(e){o.options.__e(e,i.__v)}};var g="function"==typeof requestAnimationFrame;function j(e){var i=l;"function"==typeof e.__c&&e.__c(),l=i}function D(e){var i=l;e.__c=e.__(),l=i}function E(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}function y(e,i){return"function"==typeof i?i(e):i}n.useState=b,n.useReducer=f,n.useEffect=function(e,i){var n=N(t++,3);!o.options.__s&&E(n.__H,i)&&(n.__=e,n.__H=i,l.__H.__h.push(n))},n.useLayoutEffect=p,n.useRef=function(e){return s=5,v((function(){return{current:e}}),[])},n.useImperativeHandle=function(e,i,n){s=6,p((function(){"function"==typeof e?e(i()):e&&(e.current=i())}),null==n?n:n.concat(e))},n.useMemo=v,n.useCallback=function(e,i){return s=8,v((function(){return e}),i)},n.useContext=function(e){var i=l.context[e.__c],n=N(t++,9);return n.__c=e,i?(null==n.__&&(n.__=!0,i.sub(l)),i.props.value):e.__},n.useDebugValue=function(e,i){o.options.useDebugValue&&o.options.useDebugValue(i?i(e):e)},n.useErrorBoundary=function(e){var i=N(t++,10),n=b();return i.__=e,l.componentDidCatch||(l.componentDidCatch=function(e){i.__&&i.__(e),n[1](e)}),[n[0],function(){n[1](void 0)}]}},{preact:56}],58:[function(e,i,n){var t=e("preact");function l(e,i,n,l,r){var o={};for(var s in i)"ref"!=s&&(o[s]=i[s]);var a,u,m={type:e,props:o,key:n,ref:i&&i.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++t.options.__v,__source:l,__self:r};if("function"==typeof e&&(a=e.defaultProps))for(u in a)void 0===o[u]&&(o[u]=a[u]);return t.options.vnode&&t.options.vnode(m),m}n.Fragment=t.Fragment,n.jsx=l,n.jsxs=l,n.jsxDEV=l},{preact:56}],59:[function(e,i,n){i.exports='<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>'},{}],60:[function(e,i,n){i.exports='<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'},{}],61:[function(e,i,n){arguments[4][3][0].apply(n,arguments)},{dup:3}],62:[function(e,i,n){arguments[4][4][0].apply(n,arguments)},{dup:4}],63:[function(e,i,n){arguments[4][5][0].apply(n,arguments)},{dup:5}],64:[function(e,i,n){i.exports='<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'},{}],65:[function(e,i,n){i.exports='<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'},{}],66:[function(e,i,n){i.exports='<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'},{}],67:[function(e,i,n){arguments[4][6][0].apply(n,arguments)},{dup:6}],68:[function(e,i,n){i.exports='<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>'},{}],69:[function(e,i,n){arguments[4][8][0].apply(n,arguments)},{dup:8}],70:[function(e,i,n){i.exports='<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>'},{}],71:[function(e,i,n){i.exports='<?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'},{}],72:[function(e,i,n){arguments[4][9][0].apply(n,arguments)},{dup:9}],73:[function(e,i,n){i.exports='<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'},{}],74:[function(e,i,n){i.exports='<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>'},{}],75:[function(e,i,n){i.exports='<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>'},{}],76:[function(e,i,n){i.exports='<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'},{}],77:[function(e,i,n){i.exports='<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'},{}],78:[function(e,i,n){i.exports='<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'},{}],79:[function(e,i,n){i.exports='<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'},{}],80:[function(e,i,n){i.exports='<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'},{}],81:[function(e,i,n){i.exports='<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'},{}],82:[function(e,i,n){i.exports='<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'},{}],83:[function(e,i,n){i.exports='<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'},{}],84:[function(e,i,n){i.exports='<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'},{}],85:[function(e,i,n){i.exports='<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'},{}],86:[function(e,i,n){i.exports='<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'},{}],87:[function(e,i,n){i.exports='<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'},{}],88:[function(e,i,n){i.exports='<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'},{}],89:[function(e,i,n){i.exports='<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>'},{}],90:[function(e,i,n){i.exports='<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'},{}],91:[function(e,i,n){i.exports='<?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'},{}],92:[function(e,i,n){arguments[4][10][0].apply(n,arguments)},{dup:10}],93:[function(e,i,n){i.exports='<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'},{}],94:[function(e,i,n){arguments[4][11][0].apply(n,arguments)},{dup:11}],95:[function(e,i,n){i.exports='<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'},{}],96:[function(e,i,n){i.exports='<?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'},{}],97:[function(e,i,n){i.exports='<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'},{}],98:[function(e,i,n){i.exports='<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'},{}],99:[function(e,i,n){i.exports='<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'},{}],100:[function(e,i,n){i.exports='<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'},{}],101:[function(e,i,n){i.exports='<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'},{}],102:[function(e,i,n){arguments[4][13][0].apply(n,arguments)},{dup:13}],103:[function(e,i,n){i.exports='<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'},{}],104:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t={add:e("../images/icons/add.svg"),annotate:e("../images/icons/annotate.svg"),"arrow-left":e("../images/icons/arrow-left.svg"),"arrow-right":e("../images/icons/arrow-right.svg"),cancel:e("../images/icons/cancel.svg"),"caret-right":e("../images/icons/caret-right.svg"),"cc-std":e("../images/icons/cc-std.svg"),"cc-zero":e("../images/icons/cc-zero.svg"),"collapse-menu":e("../images/icons/collapse-menu.svg"),collapsed:e("../images/icons/collapsed.svg"),copy:e("../images/icons/copy.svg"),cursor:e("../images/icons/cursor.svg"),edit:e("../images/icons/edit.svg"),email:e("../images/icons/email.svg"),"expand-menu":e("../images/icons/expand-menu.svg"),error:e("../images/icons/cancel.svg"),external:e("../images/icons/external.svg"),facebook:e("../images/icons/facebook.svg"),flag:e("../images/icons/flag.svg"),"flag--active":e("../images/icons/flag--active.svg"),"format-bold":e("../images/icons/format-bold.svg"),"format-functions":e("../images/icons/format-functions.svg"),"format-italic":e("../images/icons/format-italic.svg"),"format-list-numbered":e("../images/icons/format-list-numbered.svg"),"format-list-unordered":e("../images/icons/format-list-unordered.svg"),"format-quote":e("../images/icons/format-quote.svg"),groups:e("../images/icons/groups.svg"),help:e("../images/icons/help.svg"),highlight:e("../images/icons/highlight.svg"),image:e("../images/icons/image.svg"),leave:e("../images/icons/leave.svg"),link:e("../images/icons/link.svg"),lock:e("../images/icons/lock.svg"),logo:e("../images/icons/logo.svg"),pointer:e("../images/icons/pointer.svg"),profile:e("../images/icons/profile.svg"),public:e("../images/icons/public.svg"),refresh:e("../images/icons/refresh.svg"),restricted:e("../images/icons/restricted.svg"),reply:e("../images/icons/reply.svg"),search:e("../images/icons/search.svg"),share:e("../images/icons/share.svg"),success:e("../images/icons/check.svg"),sort:e("../images/icons/sort.svg"),trash:e("../images/icons/trash.svg"),twitter:e("../images/icons/twitter.svg")};n.default=t},{"../images/icons/add.svg":59,"../images/icons/annotate.svg":60,"../images/icons/arrow-left.svg":61,"../images/icons/arrow-right.svg":62,"../images/icons/cancel.svg":63,"../images/icons/caret-right.svg":64,"../images/icons/cc-std.svg":65,"../images/icons/cc-zero.svg":66,"../images/icons/check.svg":67,"../images/icons/collapse-menu.svg":68,"../images/icons/collapsed.svg":69,"../images/icons/copy.svg":70,"../images/icons/cursor.svg":71,"../images/icons/edit.svg":72,"../images/icons/email.svg":73,"../images/icons/expand-menu.svg":74,"../images/icons/external.svg":75,"../images/icons/facebook.svg":76,"../images/icons/flag--active.svg":77,"../images/icons/flag.svg":78,"../images/icons/format-bold.svg":79,"../images/icons/format-functions.svg":80,"../images/icons/format-italic.svg":81,"../images/icons/format-list-numbered.svg":82,"../images/icons/format-list-unordered.svg":83,"../images/icons/format-quote.svg":84,"../images/icons/groups.svg":85,"../images/icons/help.svg":86,"../images/icons/highlight.svg":87,"../images/icons/image.svg":88,"../images/icons/leave.svg":89,"../images/icons/link.svg":90,"../images/icons/lock.svg":91,"../images/icons/logo.svg":92,"../images/icons/pointer.svg":93,"../images/icons/profile.svg":94,"../images/icons/public.svg":95,"../images/icons/refresh.svg":96,"../images/icons/reply.svg":97,"../images/icons/restricted.svg":98,"../images/icons/search.svg":99,"../images/icons/share.svg":100,"../images/icons/sort.svg":101,"../images/icons/trash.svg":102,"../images/icons/twitter.svg":103}]},{},[2]);
7
+ !function(){"use strict";var n={}.hasOwnProperty;function l(){for(var e=[],i=0;i<arguments.length;i++){var t=arguments[i];if(t){var r=typeof t;if("string"===r||"number"===r)e.push(t);else if(Array.isArray(t)){if(t.length){var o=l.apply(null,t);o&&e.push(o)}}else if("object"===r)if(t.toString===Object.prototype.toString)for(var s in t)n.call(t,s)&&t[s]&&e.push(s);else e.push(t.toString())}}return e.join(" ")}void 0!==i&&i.exports?(l.default=l,i.exports=l):"function"==typeof e&&"object"==typeof e.amd&&e.amd?e("classnames",[],(function(){return l})):window.classNames=l}()}).call(this)}).call(this,void 0)},{}],55:[function(e,i,n){i.exports=e("preact/jsx-runtime")},{"preact/jsx-runtime":58}],56:[function(e,i,n){var l,t,r,o,s,a,u={},m=[],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,s={};for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:s[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);if(null!=n&&(s.children=n),"function"==typeof e&&null!=e.defaultProps)for(r in e.defaultProps)void 0===s[r]&&(s[r]=e.defaultProps[r]);return b(e,s,l,t,null)}function b(e,i,n,t,r){var o={type:e,props:i,key:n,ref:t,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++l.__v:r};return null!=l.vnode&&l.vnode(o),o}function f(e){return e.children}function p(e,i){this.props=e,this.context=i}function v(e,i){if(null==i)return e.__?v(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?v(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 g(e){(!e.__d&&(e.__d=!0)&&r.push(e)&&!j.__r++||s!==l.debounceRendering)&&((s=l.debounceRendering)||o)(j)}function j(){for(var e;j.__r=r.length;)e=r.sort((function(e,i){return e.__v.__b-i.__v.__b})),r=[],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,L(o,t,l,i.__n,void 0!==o.ownerSVGElement,null!=t.__h?[r]:null,n,null==r?v(t):r,t.__h),C(n,t),t.__e!=r&&x(t)))}))}function D(e,i,n,l,t,r,o,s,a,c){var d,h,N,p,x,g,j,D=l&&l.__k||m,y=D.length;for(n.__k=[],d=0;d<i.length;d++)if(null!=(p=n.__k[d]=null==(p=i[d])||"boolean"==typeof p?null:"string"==typeof p||"number"==typeof p||"bigint"==typeof p?b(null,p,null,null,p):Array.isArray(p)?b(f,{children:p},null,null,null):p.__b>0?b(p.type,p.props,p.key,null,p.__v):p)){if(p.__=n,p.__b=n.__b+1,null===(N=D[d])||N&&p.key==N.key&&p.type===N.type)D[d]=void 0;else for(h=0;h<y;h++){if((N=D[h])&&p.key==N.key&&p.type===N.type){D[h]=void 0;break}N=null}L(e,p,N=N||u,t,r,o,s,a,c),x=p.__e,(h=p.ref)&&N.ref!=h&&(j||(j=[]),N.ref&&j.push(N.ref,null,p),j.push(h,p.__c||x,p)),null!=x?(null==g&&(g=x),"function"==typeof p.type&&null!=p.__k&&p.__k===N.__k?p.__d=a=E(p,a,e):a=V(e,p,N,D,x,a),c||"option"!==n.type?"function"==typeof n.type&&(n.__d=a):e.value=""):a&&N.__e==a&&a.parentNode!=e&&(a=v(N))}for(n.__e=g,d=y;d--;)null!=D[d]&&("function"==typeof n.type&&null!=D[d].__e&&D[d].__e==n.__d&&(n.__d=v(l,d+1)),I(D[d],D[d]));if(j)for(d=0;d<j.length;d++)P(j[d],j[++d],j[++d])}function E(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?E(t,i,n):V(n,t,t,e.__k,t.__e,i));return i}function V(e,i,n,l,t,r){var o,s,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(s=r,a=0;(s=s.nextSibling)&&a<l.length;a+=2)if(s==t)break e;e.insertBefore(t,r),o=r}return void 0!==o?o:t.nextSibling}function y(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||y(e.style,i,"");if(n)for(i in n)l&&n[i]===l[i]||y(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:_,r):e.removeEventListener(i,r?k:_,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 _(e){this.l[e.type+!1](l.event?l.event(e):e)}function k(e){this.l[e.type+!0](l.event?l.event(e):e)}function L(e,i,n,t,r,o,s,a,u){var m,c,h,N,b,v,x,g,j,E,V,y=i.type;if(void 0!==i.constructor)return null;null!=n.__h&&(u=n.__h,a=i.__e=n.__e,i.__h=null,o=[a]),(m=l.__b)&&m(i);try{e:if("function"==typeof y){if(g=i.props,j=(m=y.contextType)&&t[m.__c],E=m?j?j.props.value:m.__:t,n.__c?x=(c=i.__c=n.__c).__=c.__E:("prototype"in y&&y.prototype.render?i.__c=c=new y(g,E):(i.__c=c=new p(g,E),c.constructor=y,c.render=B),j&&j.sub(c),c.props=g,c.state||(c.state={}),c.context=E,c.__n=t,h=c.__d=!0,c.__h=[]),null==c.__s&&(c.__s=c.state),null!=y.getDerivedStateFromProps&&(c.__s==c.state&&(c.__s=d({},c.__s)),d(c.__s,y.getDerivedStateFromProps(g,c.__s))),N=c.props,b=c.state,h)null==y.getDerivedStateFromProps&&null!=c.componentWillMount&&c.componentWillMount(),null!=c.componentDidMount&&c.__h.push(c.componentDidMount);else{if(null==y.getDerivedStateFromProps&&g!==N&&null!=c.componentWillReceiveProps&&c.componentWillReceiveProps(g,E),!c.__e&&null!=c.shouldComponentUpdate&&!1===c.shouldComponentUpdate(g,c.__s,E)||i.__v===n.__v){c.props=g,c.state=c.__s,i.__v!==n.__v&&(c.__d=!1),c.__v=i,i.__e=n.__e,i.__k=n.__k,i.__k.forEach((function(e){e&&(e.__=i)})),c.__h.length&&s.push(c);break e}null!=c.componentWillUpdate&&c.componentWillUpdate(g,c.__s,E),null!=c.componentDidUpdate&&c.__h.push((function(){c.componentDidUpdate(N,b,v)}))}c.context=E,c.props=g,c.state=c.__s,(m=l.__r)&&m(i),c.__d=!1,c.__v=i,c.__P=e,m=c.render(c.props,c.state,c.context),c.state=c.__s,null!=c.getChildContext&&(t=d(d({},t),c.getChildContext())),h||null==c.getSnapshotBeforeUpdate||(v=c.getSnapshotBeforeUpdate(N,b)),V=null!=m&&m.type===f&&null==m.key?m.props.children:m,D(e,Array.isArray(V)?V:[V],i,n,t,r,o,s,a,u),c.base=i.__e,i.__h=null,c.__h.length&&s.push(c),x&&(c.__E=c.__=null),c.__e=!1}else null==o&&i.__v===n.__v?(i.__k=n.__k,i.__e=n.__e):i.__e=S(n.__e,i,n,t,r,o,s,u);(m=l.diffed)&&m(i)}catch(e){i.__v=null,(u||null!=o)&&(i.__e=a,i.__h=!!u,o[o.indexOf(a)]=null),l.__e(e,i,n)}}function C(e,i){l.__c&&l.__c(i,e),e.some((function(i){try{e=i.__h,i.__h=[],e.some((function(e){e.call(i)}))}catch(e){l.__e(e,i.__v)}}))}function S(e,i,n,l,t,r,o,s){var a,c,d,N,b=n.props,f=i.props,p=i.type,v=0;if("svg"===p&&(t=!0),null!=r)for(;v<r.length;v++)if((a=r[v])&&(a===e||(p?a.localName==p:3==a.nodeType))){e=a,r[v]=null;break}if(null==e){if(null===p)return document.createTextNode(f);e=t?document.createElementNS("http://www.w3.org/2000/svg",p):document.createElement(p,f.is&&f),r=null,s=!1}if(null===p)b===f||s&&e.data===f||(e.data=f);else{if(r=r&&m.slice.call(e.childNodes),c=(b=n.props||u).dangerouslySetInnerHTML,d=f.dangerouslySetInnerHTML,!s){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,s),d)i.__k=[];else if(v=i.props.children,D(e,Array.isArray(v)?v:[v],i,n,l,t&&"foreignObject"!==p,r,o,e.firstChild,s),null!=r)for(v=r.length;v--;)null!=r[v]&&h(r[v]);s||("value"in f&&void 0!==(v=f.value)&&(v!==e.value||"progress"===p&&!v)&&w(e,"value",v,b.value,!1),"checked"in f&&void 0!==(v=f.checked)&&v!==e.checked&&w(e,"checked",v,b.checked,!1))}return e}function P(e,i,n){try{"function"==typeof e?e(i):e.current=i}catch(e){l.__e(e,n)}}function I(e,i,n){var t,r,o;if(l.unmount&&l.unmount(e),(t=e.ref)&&(t.current&&t.current!==e.__e||P(t,null,i)),n||"function"==typeof e.type||(n=null!=(r=e.__e)),e.__e=e.__d=void 0,null!=(t=e.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount()}catch(e){l.__e(e,i)}t.base=t.__P=null}if(t=e.__k)for(o=0;o<t.length;o++)t[o]&&I(t[o],i,n);null!=r&&h(r)}function B(e,i,n){return this.constructor(e,n)}function T(e,i,n){var t,r,o;l.__&&l.__(e,i),r=(t="function"==typeof n)?null:n&&n.__k||i.__k,o=[],L(i,e=(!t&&n||i).__k=N(f,null,[e]),r||u,u,void 0!==i.ownerSVGElement,!t&&n?[n]:r?null:i.firstChild?m.slice.call(i.childNodes):null,o,!t&&n?n:r?r.__e:i.firstChild,t),C(o,e)}l={__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},t=function(e){return null!=e&&void 0===e.constructor},p.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),g(this))},p.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),g(this))},p.prototype.render=f,r=[],o="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,j.__r=0,a=0,n.render=T,n.hydrate=function e(i,n){T(i,n,e)},n.createElement=N,n.h=N,n.Fragment=f,n.createRef=function(){return{current:null}},n.isValidElement=t,n.Component=p,n.cloneElement=function(e,i,n){var l,t,r,o=arguments,s=d({},e.props);for(r in i)"key"==r?l=i[r]:"ref"==r?t=i[r]:s[r]=i[r];if(arguments.length>3)for(n=[n],r=3;r<arguments.length;r++)n.push(o[r]);return null!=n&&(s.children=n),b(e.type,s,l||e.key,t||e.ref,null)},n.createContext=function(e,i){var n={__c:i="__cC"+a++,__: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(g)},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},n.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},n.options=l},{}],57:[function(e,i,n){var l,t,r,o=e("preact"),s=0,a=[],u=o.options.__b,m=o.options.__r,c=o.options.diffed,d=o.options.__c,h=o.options.unmount;function N(e,i){o.options.__h&&o.options.__h(t,e,s||i),s=0;var n=t.__H||(t.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function b(e){return s=1,f(V,e)}function f(e,i,n){var r=N(l++,2);return r.t=e,r.__c||(r.__=[n?n(i):V(void 0,i),function(e){var i=r.t(r.__[0],e);r.__[0]!==i&&(r.__=[i,r.__[1]],r.__c.setState({}))}],r.__c=t),r.__}function p(e,i){var n=N(l++,4);!o.options.__s&&E(n.__H,i)&&(n.__=e,n.__H=i,t.__h.push(n))}function v(e,i){var n=N(l++,7);return E(n.__H,i)&&(n.__=e(),n.__H=i,n.__h=e),n.__}function x(){a.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(j),e.__H.__h.forEach(D),e.__H.__h=[]}catch(t){e.__H.__h=[],o.options.__e(t,e.__v)}})),a=[]}o.options.__b=function(e){t=null,u&&u(e)},o.options.__r=function(e){m&&m(e),l=0;var i=(t=e.__c).__H;i&&(i.__h.forEach(j),i.__h.forEach(D),i.__h=[])},o.options.diffed=function(e){c&&c(e);var i=e.__c;i&&i.__H&&i.__H.__h.length&&(1!==a.push(i)&&r===o.options.requestAnimationFrame||((r=o.options.requestAnimationFrame)||function(e){var i,n=function(){clearTimeout(l),g&&cancelAnimationFrame(i),setTimeout(e)},l=setTimeout(n,100);g&&(i=requestAnimationFrame(n))})(x)),t=void 0},o.options.__c=function(e,i){i.some((function(e){try{e.__h.forEach(j),e.__h=e.__h.filter((function(e){return!e.__||D(e)}))}catch(r){i.some((function(e){e.__h&&(e.__h=[])})),i=[],o.options.__e(r,e.__v)}})),d&&d(e,i)},o.options.unmount=function(e){h&&h(e);var i=e.__c;if(i&&i.__H)try{i.__H.__.forEach(j)}catch(e){o.options.__e(e,i.__v)}};var g="function"==typeof requestAnimationFrame;function j(e){var i=t;"function"==typeof e.__c&&e.__c(),t=i}function D(e){var i=t;e.__c=e.__(),t=i}function E(e,i){return!e||e.length!==i.length||i.some((function(i,n){return i!==e[n]}))}function V(e,i){return"function"==typeof i?i(e):i}n.useState=b,n.useReducer=f,n.useEffect=function(e,i){var n=N(l++,3);!o.options.__s&&E(n.__H,i)&&(n.__=e,n.__H=i,t.__H.__h.push(n))},n.useLayoutEffect=p,n.useRef=function(e){return s=5,v((function(){return{current:e}}),[])},n.useImperativeHandle=function(e,i,n){s=6,p((function(){"function"==typeof e?e(i()):e&&(e.current=i())}),null==n?n:n.concat(e))},n.useMemo=v,n.useCallback=function(e,i){return s=8,v((function(){return e}),i)},n.useContext=function(e){var i=t.context[e.__c],n=N(l++,9);return n.__c=e,i?(null==n.__&&(n.__=!0,i.sub(t)),i.props.value):e.__},n.useDebugValue=function(e,i){o.options.useDebugValue&&o.options.useDebugValue(i?i(e):e)},n.useErrorBoundary=function(e){var i=N(l++,10),n=b();return i.__=e,t.componentDidCatch||(t.componentDidCatch=function(e){i.__&&i.__(e),n[1](e)}),[n[0],function(){n[1](void 0)}]}},{preact:56}],58:[function(e,i,n){var l=e("preact");function t(e,i,n,t,r){var o={};for(var s in i)"ref"!=s&&(o[s]=i[s]);var a,u,m={type:e,props:o,key:n,ref:i&&i.ref,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:++l.options.__v,__source:t,__self:r};if("function"==typeof e&&(a=e.defaultProps))for(u in a)void 0===o[u]&&(o[u]=a[u]);return l.options.vnode&&l.options.vnode(m),m}n.Fragment=l.Fragment,n.jsx=t,n.jsxs=t,n.jsxDEV=t},{preact:56}],59:[function(e,i,n){i.exports='<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>'},{}],60:[function(e,i,n){i.exports='<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'},{}],61:[function(e,i,n){arguments[4][3][0].apply(n,arguments)},{dup:3}],62:[function(e,i,n){arguments[4][4][0].apply(n,arguments)},{dup:4}],63:[function(e,i,n){arguments[4][5][0].apply(n,arguments)},{dup:5}],64:[function(e,i,n){i.exports='<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'},{}],65:[function(e,i,n){i.exports='<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'},{}],66:[function(e,i,n){i.exports='<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'},{}],67:[function(e,i,n){arguments[4][6][0].apply(n,arguments)},{dup:6}],68:[function(e,i,n){i.exports='<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>'},{}],69:[function(e,i,n){arguments[4][8][0].apply(n,arguments)},{dup:8}],70:[function(e,i,n){i.exports='<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>'},{}],71:[function(e,i,n){i.exports='<?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'},{}],72:[function(e,i,n){arguments[4][9][0].apply(n,arguments)},{dup:9}],73:[function(e,i,n){i.exports='<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'},{}],74:[function(e,i,n){i.exports='<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>'},{}],75:[function(e,i,n){i.exports='<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>'},{}],76:[function(e,i,n){i.exports='<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'},{}],77:[function(e,i,n){i.exports='<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'},{}],78:[function(e,i,n){i.exports='<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'},{}],79:[function(e,i,n){i.exports='<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'},{}],80:[function(e,i,n){i.exports='<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'},{}],81:[function(e,i,n){i.exports='<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'},{}],82:[function(e,i,n){i.exports='<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'},{}],83:[function(e,i,n){i.exports='<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'},{}],84:[function(e,i,n){i.exports='<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'},{}],85:[function(e,i,n){i.exports='<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'},{}],86:[function(e,i,n){i.exports='<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'},{}],87:[function(e,i,n){i.exports='<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'},{}],88:[function(e,i,n){i.exports='<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'},{}],89:[function(e,i,n){i.exports='<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>'},{}],90:[function(e,i,n){i.exports='<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'},{}],91:[function(e,i,n){i.exports='<?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'},{}],92:[function(e,i,n){arguments[4][10][0].apply(n,arguments)},{dup:10}],93:[function(e,i,n){i.exports='<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'},{}],94:[function(e,i,n){arguments[4][11][0].apply(n,arguments)},{dup:11}],95:[function(e,i,n){i.exports='<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'},{}],96:[function(e,i,n){i.exports='<?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'},{}],97:[function(e,i,n){i.exports='<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'},{}],98:[function(e,i,n){i.exports='<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'},{}],99:[function(e,i,n){i.exports='<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'},{}],100:[function(e,i,n){i.exports='<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'},{}],101:[function(e,i,n){i.exports='<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'},{}],102:[function(e,i,n){arguments[4][13][0].apply(n,arguments)},{dup:13}],103:[function(e,i,n){i.exports='<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'},{}],104:[function(e,i,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=K(e("../images/icons/add.svg")),t=K(e("../images/icons/annotate.svg")),r=K(e("../images/icons/arrow-left.svg")),o=K(e("../images/icons/arrow-right.svg")),s=K(e("../images/icons/cancel.svg")),a=K(e("../images/icons/caret-right.svg")),u=K(e("../images/icons/cc-std.svg")),m=K(e("../images/icons/cc-zero.svg")),c=K(e("../images/icons/collapse-menu.svg")),d=K(e("../images/icons/collapsed.svg")),h=K(e("../images/icons/copy.svg")),N=K(e("../images/icons/cursor.svg")),b=K(e("../images/icons/edit.svg")),f=K(e("../images/icons/email.svg")),p=K(e("../images/icons/expand-menu.svg")),v=K(e("../images/icons/external.svg")),x=K(e("../images/icons/facebook.svg")),g=K(e("../images/icons/flag.svg")),j=K(e("../images/icons/flag--active.svg")),D=K(e("../images/icons/format-bold.svg")),E=K(e("../images/icons/format-functions.svg")),V=K(e("../images/icons/format-italic.svg")),y=K(e("../images/icons/format-list-numbered.svg")),w=K(e("../images/icons/format-list-unordered.svg")),_=K(e("../images/icons/format-quote.svg")),k=K(e("../images/icons/groups.svg")),L=K(e("../images/icons/help.svg")),C=K(e("../images/icons/highlight.svg")),S=K(e("../images/icons/image.svg")),P=K(e("../images/icons/leave.svg")),I=K(e("../images/icons/link.svg")),B=K(e("../images/icons/lock.svg")),T=K(e("../images/icons/logo.svg")),M=K(e("../images/icons/pointer.svg")),z=K(e("../images/icons/profile.svg")),H=K(e("../images/icons/public.svg")),A=K(e("../images/icons/refresh.svg")),q=K(e("../images/icons/restricted.svg")),O=K(e("../images/icons/reply.svg")),F=K(e("../images/icons/search.svg")),R=K(e("../images/icons/share.svg")),U=K(e("../images/icons/check.svg")),$=K(e("../images/icons/sort.svg")),W=K(e("../images/icons/trash.svg")),G=K(e("../images/icons/twitter.svg"));function K(e){return e&&e.__esModule?e:{default:e}}var Z={add:l.default,annotate:t.default,"arrow-left":r.default,"arrow-right":o.default,cancel:s.default,"caret-right":a.default,"cc-std":u.default,"cc-zero":m.default,"collapse-menu":c.default,collapsed:d.default,copy:h.default,cursor:N.default,edit:b.default,email:f.default,"expand-menu":p.default,error:s.default,external:v.default,facebook:x.default,flag:g.default,"flag--active":j.default,"format-bold":D.default,"format-functions":E.default,"format-italic":V.default,"format-list-numbered":y.default,"format-list-unordered":w.default,"format-quote":_.default,groups:k.default,help:L.default,highlight:C.default,image:S.default,leave:P.default,link:I.default,lock:B.default,logo:T.default,pointer:M.default,profile:z.default,public:H.default,refresh:A.default,restricted:q.default,reply:O.default,search:F.default,share:R.default,success:U.default,sort:$.default,trash:W.default,twitter:G.default};n.default=Z},{"../images/icons/add.svg":59,"../images/icons/annotate.svg":60,"../images/icons/arrow-left.svg":61,"../images/icons/arrow-right.svg":62,"../images/icons/cancel.svg":63,"../images/icons/caret-right.svg":64,"../images/icons/cc-std.svg":65,"../images/icons/cc-zero.svg":66,"../images/icons/check.svg":67,"../images/icons/collapse-menu.svg":68,"../images/icons/collapsed.svg":69,"../images/icons/copy.svg":70,"../images/icons/cursor.svg":71,"../images/icons/edit.svg":72,"../images/icons/email.svg":73,"../images/icons/expand-menu.svg":74,"../images/icons/external.svg":75,"../images/icons/facebook.svg":76,"../images/icons/flag--active.svg":77,"../images/icons/flag.svg":78,"../images/icons/format-bold.svg":79,"../images/icons/format-functions.svg":80,"../images/icons/format-italic.svg":81,"../images/icons/format-list-numbered.svg":82,"../images/icons/format-list-unordered.svg":83,"../images/icons/format-quote.svg":84,"../images/icons/groups.svg":85,"../images/icons/help.svg":86,"../images/icons/highlight.svg":87,"../images/icons/image.svg":88,"../images/icons/leave.svg":89,"../images/icons/link.svg":90,"../images/icons/lock.svg":91,"../images/icons/logo.svg":92,"../images/icons/pointer.svg":93,"../images/icons/profile.svg":94,"../images/icons/public.svg":95,"../images/icons/refresh.svg":96,"../images/icons/reply.svg":97,"../images/icons/restricted.svg":98,"../images/icons/search.svg":99,"../images/icons/share.svg":100,"../images/icons/sort.svg":101,"../images/icons/trash.svg":102,"../images/icons/twitter.svg":103}]},{},[2]);
8
8
  //# sourceMappingURL=ui-playground.bundle.js.map