363-7851d6e24e2cc0d5.js

js p22.studio collected 2026-10-04 02:06:35 UTC 92,217 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[363],{3020:function(e,t,n){n.d(t,{fe:function(){return d},hU:function(){return c},zx:function(){return l}});var r=n(5893),a=n(7294),i=n(6480),o=n(1156);let s=(0,o.zo)("button",{all:"unset",boxSizing:"border-box",height:"$controlHeight",paddingLeft:"$paddingUIXL",paddingRight:"$paddingUIXL",fontSize:"$base",lineHeight:"$normal",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",gap:"$paddingBetweenSmall",borderWidth:"$control",borderColor:"transparent",borderStyle:"solid",borderRadius:"$L",cursor:"pointer",whiteSpace:"nowrap",color:"$fgHigh","&:focus-visible":{boxShadow:"$focus",outline:"none"},"&:disabled":{cursor:"not-allowed"},"&:has(> div:not(:last-child))":{paddingLeft:"$paddingUIM"},"&:has(> div:last-child)":{paddingRight:"$paddingUIM"},variants:{variant:{primary:{backgroundColor:"$actionPrimary"},secondary:{backgroundColor:"$actionSecondary"},tertiary:{borderColor:"$actionOutline",backgroundColor:"transparent",color:"$text",'&[data-state="open"]':{backgroundColor:"$actionSecondary",borderColor:"transparent"},"&:active":{backgroundColor:"$actionSecondary"}},ghost:{backgroundColor:"transparent",color:"$text","&:hover:not(:disabled)":{backgroundColor:"$actionSecondary"}},danger:{backgroundColor:"$surfaceDangerHigh","& > span":{color:"$fgHighDanger"}}},disabledVariant:{true:{backgroundColor:"$actionDisabled","& > span":{color:"$fgMed"}}},active:{true:{}}},compoundVariants:[{active:!0,variant:"tertiary",css:{borderColor:"$highContrast"}},{variant:"danger",disabledVariant:!0,css:{backgroundColor:"$surfaceDangerLow","& > span":{color:"$fgMedDanger"}}},{variant:"tertiary",disabledVariant:!0,css:{backgroundColor:"transparent"}},{variant:"ghost",disabledVariant:!0,css:{backgroundColor:"transparent"}}],defaultVariants:{variant:"primary"}}),l=a.forwardRef(function(e,t){let{children:n,disabled:o,...l}=e,c=a.Children.map(n,e=>"string"==typeof e?(0,r.jsx)(i.uT,{as:"span",children:e}):e);return(0,r.jsx)(s,{disabled:o,disabledVariant:o,ref:t,type:"button",...l,children:c})}),c=a.forwardRef((e,t)=>{let{css:n,...a}=e;return(0,r.jsx)(l,{css:{flexShrink:0,width:"$controlHeight",padding:"0 !important",...n},ref:t,...a})}),d=a.forwardRef((e,t)=>{let{active:n,...a}=e;return(0,r.jsx)(l,{ref:t,variant:n?"primary":"ghost",...a})})},1427:function(e,t,n){n.d(t,{J:function(){return eC}});var r,a,i,o,s,l,c,d,u,h,p,g,m,A,f,v,b,w,x,y,j,C,k,O,$,S,z,E,R,B,L,M,T,I,V,H,D,U=n(5893),P=n(7294);function W(){return(W=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function X(){return(X=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function F(){return(F=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function N(){return(N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Q(){return(Q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Y(){return(Y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function G(){return(G=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function q(){return(q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function J(){return(J=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function K(){return(K=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Z(){return(Z=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function _(){return(_=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ee(){return(ee=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function et(){return(et=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function en(){return(en=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function er(){return(er=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ea(){return(ea=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ei(){return(ei=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eo(){return(eo=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function es(){return(es=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function el(){return(el=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ec(){return(ec=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ed(){return(ed=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eu(){return(eu=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eh(){return(eh=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ep(){return(ep=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eg(){return(eg=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function em(){return(em=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eA(){return(eA=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ef(){return(ef=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ev(){return(ev=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function eb(){return(eb=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ew(){return(ew=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var ex=n(1156);let ey={add:function(e){return P.createElement("svg",X({viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),a||(a=P.createElement("path",{d:"M7 1v6m0 0v6m0-6h6M7 7H1",stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square"})))},addSmall:function(e){return P.createElement("svg",W({viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),r||(r=P.createElement("path",{d:"M6 1v5m0 0v5m0-5h5M6 6H1",stroke:"currentcolor",strokeLinecap:"square"})))},arrowUpRight:function(e){return P.createElement("svg",q({width:12,height:12,fill:"none",xmlns:"http://www.w3.org/2000/svg"}

1,e),d||(d=P.createElement("path",{d:"M1.05 10.95l9.9-9.9m0 0v9.9m0-9.9h-9.9",stroke:"currentcolor",strokeWidth:1.4})))},arrowUp:function(e){return P.createElement("svg",J({viewBox:"0 0 14 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),u||(u=P.createElement("path",{d:"M7 13V1m0 0l6 6M7 1L1 7",stroke:"currentcolor",strokeWidth:1.4})))},arrowDown:function(e){return P.createElement("svg",F({viewBox:"0 0 14 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),i||(i=P.createElement("path",{d:"M7 0v12m0 0L1 6m6 6l6-6",stroke:"currentcolor",strokeWidth:1.4})))},arrowLeft:function(e){return P.createElement("svg",Q({viewBox:"0 0 13 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),s||(s=P.createElement("path",{d:"M13 7H1m0 0l6-6M1 7l6 6",stroke:"currentcolor",strokeWidth:1.4})))},arrowLeftSmall:function(e){return P.createElement("svg",N({viewBox:"0 0 11 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),o||(o=P.createElement("path",{d:"M11 6H1m0 0l5-5M1 6l5 5",stroke:"currentcolor"})))},arrowRight:function(e){return P.createElement("svg",G({viewBox:"0 0 13 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),c||(c=P.createElement("path",{d:"M0 7h12m0 0l-6 6m6-6L6 1",stroke:"currentcolor",strokeWidth:1.4})))},arrowRightSmall:function(e){return P.createElement("svg",Y({viewBox:"0 0 11 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l||(l=P.createElement("path",{d:"M0 6h10m0 0l-5 5m5-5L5 1",stroke:"currentcolor"})))},check:function(e){return P.createElement("svg",Z({viewBox:"0 0 16 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),p||(p=P.createElement("path",{d:"M15 2.8l-9.465 9.333L1 7.661",stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square",strokeLinejoin:"round"})))},checkSmall:function(e){return P.createElement("svg",K({viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),h||(h=P.createElement("path",{d:"M11 2L4.24 8.667 1 5.472",stroke:"currentcolor",strokeLinecap:"square",strokeLinejoin:"round"})))},chevronUp:function(e){return P.createElement("svg",ea({viewBox:"0 0 14 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),b||(b=P.createElement("path",{d:"M1 9l6-6 6 6",stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square"})))},chevronUpSmall:function(e){return P.createElement("svg",er({viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),v||(v=P.createElement("path",{d:"M1 7.5l5-5 5 5",stroke:"currentcolor",strokeLinecap:"square"})))},chevronDown:function(e){return P.createElement("svg",ee({viewBox:"0 0 16 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),m||(m=P.createElement("path",{d:"M15 3.5l-7 7-7-7",stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square"})))},chevronDownSmall:function(e){return P.createElement("svg",_({viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),g||(g=P.createElement("path",{d:"M11 2.5l-5 5-5-5",stroke:"currentcolor",strokeLinecap:"square"})))},chevronLeft:function(e){return P.createElement("svg",et({viewBox:"0 0 15 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),A||(A=P.createElement("path",{d:"M15 8.1H1m0 0l7-7m-7 7l7 7",stroke:"currentcolor",strokeWidth:1.4})))},chevronRight:function(e){return P.createElement("svg",en({viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f||(f=P.createElement("path",{d:"M.313 8.4h14m0 0l-7 7m7-7l-7-7",stroke:"currentcolor",strokeWidth:1.4})))},circle:function(e){return P.createElement("svg",eo({viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg"},e),x||(x=P.createElement("circle",{cx:14,cy:14,r:14,fill:"currentcolor"})))},circleSmall:function(e){return P.createElement("svg",ei({viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},e),w||(w=P.createElement("circle",{cx:5,cy:5,r:5,fill:"currentcolor"})))},close:function(e){return P.createElement("svg",el({viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),j||(j=P.createElement("path",{d:"M.5.5l13 13m0-13l-13 13",stroke:"currentcolor",strokeWidth:1.4})))},closeSmall:function(e){return P.createElement("svg",es({viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),y||(y=P.createElement("path",{d:"M.357.357l9.286 9.286m0-9.286L.357 9.643",stroke:"currentcolor"})))},copy:function(e){return P.createElement("svg",ec({viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},e),C||(C=P.createElement("path",{d:"M2.04 2.04v16.6h5.81v-1.66H3.7V3.7h9.96v.83h1.66V2.04zm6.64 3.32v16.6h13.28V5.36zm1.66 1.66h9.96V20.3h-9.96z"})))},ellipsis:function(e){return P.createElement("svg",eu({viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),S||(S=P.createElement("circle",{cx:6,cy:2.356,r:.827,fill:"currentcolor"})),z||(z=P.createElement("circle",{cx:6,cy:6,r:.827,fill:"currentcolor"})),E||(E=P.createElement("circle",{cx:6,cy:9.644,r:.827,fill:"currentcolor"})))},ellipsisSmall:function(e){return P.createElement("svg",ed({viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),k||(k=P.createElement("circle",{cx:5.104,cy:1.561,r:.804,fill:"currentcolor"})),O||(O=P.createElement("circle",{cx:5.104,cy:5.104,r:.804,fill:"currentcolor"})),$||($=P.createElement("circle",{cx:5.104,cy:8.646,r:.804,fill:"currentcolor"})))},play:function(e){return P.createElement("svg",em({viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),M||(M=P.createElement("path",{d:"M10.559 6L1.9 10.81V1.19L10.559

16z",stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square"})))},playSmall:function(e){return P.createElement("svg",eg({viewBox:"0 0 11 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),L||(L=P.createElement("path",{d:"M9.399 5l-7.47 4.15V.85L9.399 5z",stroke:"currentcolor",strokeLinecap:"square"})))},stop:function(e){return P.createElement("svg",eb({viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),H||(H=P.createElement("path",{stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square",d:"M.7.7h10.6v10.6H.7z"})))},stopSmall:function(e){return P.createElement("svg",ev({viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),V||(V=P.createElement("path",{stroke:"currentcolor",strokeLinecap:"square",d:"M.5.5h9v9h-9z"})))},square:function(e){return P.createElement("svg",ef({viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),I||(I=P.createElement("path",{stroke:"currentcolor",strokeWidth:1.4,strokeLinecap:"square",d:"M.7.7h12.6v12.6H.7z"})))},squareSmall:function(e){return P.createElement("svg",eA({viewBox:"0 0 10 11",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),T||(T=P.createElement("path",{stroke:"currentcolor",strokeLinecap:"square",d:"M.5.6h9v9h-9z"})))},union:function(e){return P.createElement("svg",ew({viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),D||(D=P.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.33.05a1.333 1.333 0 10.7 2.573A1.333 1.333 0 007.33.05zm4.907 2.648a1.333 1.333 0 10.79-2.546 1.333 1.333 0 00-.79 2.546zM6.982 19.847a1.333 1.333 0 10.79-2.547 1.333 1.333 0 00-.79 2.547zM17.29 4.603A1.335 1.335 0 1115.4 2.715a1.335 1.335 0 011.889 1.888zM2.719 17.288a1.336 1.336 0 101.889-1.889 1.336 1.336 0 00-1.889 1.889zm16.293-8.325a1.333 1.333 0 11-.7-2.572 1.333 1.333 0 01.7 2.572zM.05 12.67a1.333 1.333 0 102.572-.7 1.333 1.333 0 00-2.572.7zm18.265.83a1.333 1.333 0 11.7-2.573 1.333 1.333 0 01-.7 2.574zM.054 7.222a1.333 1.333 0 102.573.699A1.333 1.333 0 00.054 7.22zm15.352 10.065a1.336 1.336 0 111.89-1.89 1.336 1.336 0 01-1.89 1.89zM2.726 2.714a1.336 1.336 0 101.889 1.89 1.336 1.336 0 00-1.89-1.89zm8.31 16.3a1.333 1.333 0 112.573-.7 1.333 1.333 0 01-2.572.7z",fill:"currentcolor"})))},p22:function(e){return P.createElement("svg",ep({viewBox:"0 0 17 23",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),B||(B=P.createElement("path",{d:"M6.48 1.722h7.352V.5H1.577v1.222H6.48zm4.901 1.222h1.226V1.722H.352v1.222h1.225v1.223h9.804V2.944zM10.156 5.39H6.479V6.61H1.577V5.39H.352V4.167h9.804v1.222zM5.254 6.61H.352v1.222h1.225v1.223H6.48V7.833H5.254V6.611zm6.127-2.444h1.226v6.11h1.225V9.057h-1.225V2.944h1.225v1.223h1.226V11.5H8.93v-1.222h2.451V4.167zM.351 9.056h4.903v1.222h1.225V11.5H1.577v-1.222H.352V9.056zM5.255 11.5H.352v1.222h1.225v1.222h11.03v-1.222h1.225V11.5H7.705v1.222H5.254V11.5zm1.225 2.444H.352v1.223h1.225v1.222H6.48v-1.222h4.902v-1.223H6.48zM.352 16.39h4.902v1.222h1.225v1.222H1.577v-1.222H.352V16.39zm4.902 2.444H.352v1.223h1.225v1.222H6.48v-1.223H5.254v-1.222zM.352 21.278h4.902V22.5H.352v-1.222zM16.283 2.944h-1.225v6.112h1.226V2.944z",fill:"currentcolor"})))},p22Small:function(e){return P.createElement("svg",eh({viewBox:"0 0 14 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),R||(R=P.createElement("path",{d:"M5.977 1h6.016V0H1.966v1h4.01zm4.01 1h1.004V1H.963v1h1.003v1H9.988V2zM8.986 4H5.977v1h-4.01V4H.962V3h8.022v1zm-4.01 1H.962v1h1.003v1h4.01V6H4.975V5zm5.013-2h1.003V2h1.002v1h1.003v6H7.982V8h2.006V3zm1.003 5h1.002V7h-1.002v1zM.963 7h4.011v1h1.003v1h-4.01V8H.962V7zm4.011 2H.964v1h4.01V9zM6.98 9h5.013v1H6.98V9zM.963 11v1h1.003v1h4.01v-1h4.012v-1H.963zm4.011 2v1H.964v-1h4.01zm-4.01 2v1h4.01v-1H.964zm4.01 2v1H.964v-1h4.01zM14 2h-1.003v5h1.003V2zM1.966 10v1h9.025v-1H1.966zm0 4v1h4.01v-1h-4.01zm0 3v-1h4.01v1h-4.01z",fill:"currentcolor"})))}},ej=(0,ex.zo)("div",{display:"grid",placeItems:"center",color:"$fgHigh",borderRadius:"$M",variants:{variant:{xsmall:{size:"$iconSmall"},small:{size:"$iconSmall"},large:{size:"$iconBase"},logo:{size:"$iconLogo"}}},defaultVariants:{variant:"large"}}),eC=P.forwardRef((e,t)=>

1{let{name:n,...r}=e,a="xsmall"===r.variant||"small"===r.variant?n+"Small":n,i=ey[a];return i?(0,U.jsx)(ej,{"data-icon-box":!0,ref:t,...r,children:(0,U.jsx)(i,{})}):null})},2583:function(e,t,n){n.d(t,{u:function(){return a}});var r=n(1156);let a=(0,r.zo)("p",{color:"$fgHigh",fontFamily:"$octave",variants:{variant:{base:{fontSize:"$base",lineHeight:"$4",letterSpacing:"0.01rem",wordSpacing:"0.025rem"},xsmall:{fontSize:"$xsmall",lineHeight:"$3"},small:{fontSize:"$small",lineHeight:"$3"},large:{fontSize:"$large",lineHeight:"$2",letterSpacing:"-0.01rem"}},bold:{true:{fontWeight:"$medium"}},opacity:{default:{},med:{color:"$fgMed"},low:{color:"$fgLow"}},indented:{true:{textIndent:"3.2rem","@sm":{textIndent:"3.6rem"}}}},defaultVariants:{variant:"base"},compoundVariants:[{variant:"large",indented:!0,css:{textIndent:"3.2rem","@sm":{textIndent:"7.2rem"}}}]})},6480:function(e,t,n){n.d(t,{uT:function(){return r.u},X6:function(){return i}});var r=n(2583),a=n(1156);(0,a.zo)("p",{color:"$fgHigh",lineHeight:"$4",fontFamily:"$oracleTriple",fontFeatureSettings:"'ss18' on, 'ss17' on, 'ss19' on",variants:{variant:{base:{fontSize:"$base"},small:{fontSize:"$small"}}},defaultVariants:{variant:"base"}});let i=(0,a.zo)("p",{color:"$fgHigh",fontFamily:"$octave",variants:{variant:{extraLarge:{fontSize:"$extraLarge",lineHeight:"$1"},extraLargeMono:{fontFamily:"$oracleTriple",fontSize:"$extraLarge",lineHeight:"$3"},sub:{fontSize:"$base",lineHeight:"$3",textTransform:"uppercase",textAlign:"center",letterSpacing:"0.01rem"}},bold:{true:{fontWeight:"$medium"}},uppercase:{true:{textTransform:"uppercase"}}},defaultVariants:{variant:"extraLarge"}})},4163:function(e,t,n){n.r(t),n.d(t,{CldVideoPlayer:function(){return h}});var r=n(5893),a=n(3020),i=n(1427),o=n(4298),s=n.n(o),l=n(7294),c=n(1367);let d=(0,c.zo)(a.hU,{position:"absolute",cursor:"pointer",top:"50%",left:"50%",transform:"translate(-50%, -50%)",backgroundColor:"$surfaceFg !important",zIndex:10}),u=(0,c.zo)(i.J,{}),h=e=>{let{publicId:t,cloud:n="p22",...a}=e,[i,o]=(0,l.useState)(!0),c=(0,l.useRef)(Math.ceil(1e7*Math.random())),h=(0,l.useRef)(),p=(0,l.useRef)(),g=(0,l.useRef)(null),m=()=>{"cloudinary"in window&&(h.current=window.cloudinary,p.current=h.current.videoPlayer(g.current,{cloud_name:n,publicId:t,bigPlayButton:!1,autoplay:!0,autoplayMode:"on-scroll",controls:!1,loop:!0,muted:!0,secure:!0,hideContextMenu:!0,transformation:[{fetch_format:"auto"},{quality:"auto:best"}]}),p.current.on("play",()=>{o(!1)}))};return(0,r.jsxs)(r.Fragment,{children:[i&&(0,r.jsx)(d,{variant:"primary","aria-hidden":"true",onClick:e=>{e.preventDefault(),p.current&&p.current.play()},children:(0,r.jsx)(u,{name:"play",variant:"large"})}),(0,r.jsx)("video",{id:"".concat(t,"-").concat(c.current),ref:g,className:"cld-video-player cld-fluid",muted:!0,...a}),(0,r.jsx)(s(),{id:"cld-video-".concat(c.current),src:"https://unpkg.com/cloudinary-video-player/dist/cld-video-player.light.min.js",type:"text/javascript",onLoad:m,onError:e=>console.warn("Failed to load Cloudinary Video Player: ".concat(e.message))})]})}},7363:function(e,t,n){n.r(t),n.d(t,{default:function(){return nx}});var r=n(5893),a=n(7294),i=n(7217),o=n(1427),s=n(1156);let l=e=>e?{"aria-disabled":!0}:{},c=(0,s.zo)("div",{'&[aria-disabled="true"]':{opacity:.35,pointerEvents:"none"},display:"flex",justifyContent:"center",alignItems:"center",'&[role="button"]':{cursor:"pointer"},variants:{shape:{circle:{borderRadius:"$L"},square:{borderRadius:"$M"}},variant:{xsmall:{size:"$iconBoxSmall"},small:{size:"$iconBoxSmall"},large:{size:"$controlHeight"}},border:{true:{border:"$borderWidths$control solid $strokeSolid"}}},defaultVariants:{shape:"circle"}}),d={xsmall:"xsmall",small:"large",large:"large"},u=a.forwardRef((e,t)=>{let{variant:n,disabled:a,name:i,iconCss:s,...u}=e,h="string"!=typeof n?n:d[n];return(0,r.jsx)(c,{variant:n,...l(a),...u,children:(0,r.jsx)(o.J,{ref:t,name:i,variant:h,css:s})})});var h=n(3020);let p=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:150,t=(0,a.useRef)(null),[n,r]=(0,a.useState)(!0),[i,o]=(0,a.useState)(!1),[s,l]=(0,a.useState)(!0);(0,a.useEffect)(()=>

1{if(t.current){let{scrollWidth:e,clientWidth:n}=t.current;void 0!==e&&void 0!==n&&l(e>n)}},[t]);let c=()=>{var n;null===(n=t.current)||void 0===n||n.scrollBy({left:-e,behavior:"smooth"})},d=()=>{var n;null===(n=t.current)||void 0===n||n.scrollBy({left:e,behavior:"smooth"})},u=e=>{if(e.currentTarget){let{scrollLeft:t,scrollWidth:n,clientWidth:a}=e.currentTarget;0===t?r(!0):r(!1),n-t<=a?o(!0):o(!1)}};return{ref:t,moveLeftDisabled:n,moveRightDisabled:i,showArrows:s,isOnBorders:u,moveLeft:c,moveRight:d}},g=(0,s.zo)("div",{boxSizing:"border-box",padding:0}),m=(0,s.zo)("div",{alignItems:"center",fontSize:"$base",variants:{stretch:{true:{}}}}),A=(0,s.zo)("div",{display:"grid",$$spacing:"$space$paddingBetweenSmall",["".concat(m)]:{stackH:"$$spacing"},variants:{hoverable:{true:{"&:hover":{backgroundColor:"$actionTertiary",cursor:"pointer"}}},variant:{large:{gridTemplateRows:"minmax(calc($infoMinHeight - calc($space$paddingContainerLevelOne * 2)),1fr)",paddingY:"$paddingContainerLevelOne"},small:{gridTemplateRows:"minmax($controlHeight,1fr)"}},paddingZero:{true:{padding:0}},active:{true:{backgroundColor:"$actionTertiary !important"}}},compoundVariants:[{variant:"small",paddingZero:!1,css:{paddingLeft:"$paddingUIXL",paddingRight:"$paddingUIXL"}}],defaultVariants:{hoverable:!1,variant:"large",paddingZero:!1}}),f=(0,s.zo)(m,{gridColumn:"1",justifyContent:"flex-start",variants:{preventLineBreak:{true:{overflow:"auto",whiteSpace:"nowrap",maskImage:"linear-gradient(to right, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0.1) 93%, transparent)",paddingRight:"9rem",maskPosition:"right","&::-webkit-scrollbar":{height:0},"& > *":{width:"auto"}}}}}),v=e=>{let{ref:t,isOnBorders:n,showArrows:a,moveRightDisabled:i,moveRight:s}=p();return(0,r.jsxs)(g,{css:{position:"relative",display:"flex",alignItems:"center",overflow:"auto"},children:[(0,r.jsx)(f,{preventLineBreak:!0,onScroll:n,ref:t,...e}),a&&!i?(0,r.jsx)(h.hU,{onClick:s,variant:"secondary",css:{position:"absolute",right:"$paddingUIS",display:"none","@sm":{display:"flex"}},children:(0,r.jsx)(o.J,{name:"arrowRight"})}):null]})},b=e=>{let{arrowOnOverflow:t,...n}=e;return t?(0,r.jsx)(v,{...n}):(0,r.jsx)(f,{...n})},w=(0,s.zo)(m,{gridColumn:"2",whiteSpace:"nowrap",justifyContent:"center"}),x=(0,s.zo)(m,{gridColumn:"3",justifyContent:"flex-end"}),y=[b,w,x],j=e=>{let t=Array.isArray(e)?e:[e];if(2===t.length&&!(t[0].type===b&&t[1].type===x))return"1fr 1fr 1fr";let n=t.some(e=>{let{props:t}=e;return t.stretch});if(3===t.length&&!n)return"1fr 1fr 1fr";let r=e=>{let r=t.find(t=>{let{type:n}=t;return n===y[e]});return r&&(!n||r.props.stretch)?"auto":"min-content"};return[r(0),r(1),r(2)].join(" ")},C=a.forwardRef((e,t)=>{let{css:n={},...a}=e;if("gridTemplateColumns"in a)throw Error("gridTemplateColumns is managed by Row. Use BaseRow if you need to manage this property");return n.gridTemplateColumns=n.gridTemplateColumns||j(a.children),(0,r.jsx)(A,{ref:t,css:n,hoverable:"href"in a||"onClick"in a,...a})});(0,s.zo)(C,{backgroundColor:"$surfaceBg"});let k=(0,s.zo)(C,{backgroundColor:"$surfaceBg"});(0,s.zo)(C,{backgroundColor:"$surfaceBg"});let O=(0,s.zo)("div",{all:"unset",listStyle:"none",display:"flex",padding:"$paddingUITabbed",borderWidth:"$control",borderStyle:"solid",alignItems:"center",background:"transparent",borderRadius:"$L",variants:{variant:{fullWidth:{width:"100%"},minWidth:{width:"fit-content"}},fill:{true:{background:"$surfaceFg"}},stroke:{true:{borderColor:"$strokeSecondary"},false:{borderColor:"transparent"}}},defaultVariants:{stroke:!0}}),$=(0,s.zo)(i.fC,{all:"unset",position:"relative",stackH:"$paddingBetweenSmall",flex:1,variants:{fixed:{true:{position:"fixed",left:"50%",transform:"translateX(-50%)",boxShadow:"none",bottom:"$paddingUIXL",zIndex:"$navigation",width:"fit-content"}}}}),S=e=>(0,r.jsx)($,{...e}),z=(0,s.zo)(O,{width:"fit-content",boxShadow:"$levelTwo",backgroundColor:"$surfaceFg"}),E=a.forwardRef((e,t)=>(0,r.jsx)(z,{ref:t,as:i.aV,...e})),R=e=>{let{...t}=e;return(0,r.jsx)(i.xz,{asChild:!0,children:(0,r.jsx)(h.fe,{onPointerMove:e=>{e.preventDefault()},onPointerLeave:e=>{e.preventDefault()},...t})})},B=e=>{let{name:t,iconVariant:n,...a}=e;return(0,r.jsx)(i.xz,{asChild:!0,children:(0,r.jsx)(h.hU,{onPointerMove:e=>{e.preventDefault()},onPointerLeave:e=>{e.preventDefault()},variant:"ghost","aria-label":"Open navigation menu",...a,children:(0,r.jsx)(o.J,{variant:n,name:t})})})},L=(0,s.zo)(i.VY,{backgroundColor:"$surfaceFg",zIndex:"$popover",boxShadow:"$levelTwo",minWidth:"$articleWidthXS",borderRadius:"$M"}),M=e=>{let{children:t,navigable:n=!0,...a}=e;return(0,r.jsxs)(C,{hoverable:!0,css:{"& > *:last-child svg":{display:"none"},padding:"$paddingUIXL","&:hover":{"& > *:last-child svg":{display:"block"}}},...a,children:[t,n&&(0,r.jsx)(x,{children:(0,r.jsx)(u,{css:{backgroundColor:"$surfaceBg"},variant:"large",shape:"square",name:"chevronRight"})})]})},T=(0,s.zo)(k,{minHeight:"6rem",padding:"$paddingContainerLevelOne",borderTopLeftRadius:"$M",borderTopRightRadius:"$M"}),I=(0,s.zo)("footer",{backgroundColor:"$surfaceBg",minHeight:"6rem",padding:"$paddingContainerLevelOne",borderBottomLeftRadius:"$M",borderBottomRightRadius:"$M"}),V=(0,s.zo)(i.OK,{$$height:"4.8rem",position:"absolute",variants:{position:{top:{bottom:"calc($$height + $paddingBetweenXL)"},bottom:{top:"calc($$height + $paddingBetweenXL)"}}}}

1),H={Root:S,List:E,Item:i.ck,Viewport:V,Trigger:R,Icon:B,Content:L,ContentHeader:T,ContentHeaderLeft:b,ContentHeaderRight:x,ContentFooter:I,Row:M,RowLeft:b};var D=n(2010);let U=()=>{let{setTheme:e,resolvedTheme:t}=(0,D.F)(),n=()=>{e("light"===t?"dark":"light")};return(0,r.jsx)(H.Icon,{iconVariant:"logo",name:"p22",onClick:n})};var P=n(6480);let W=[{id:"ffe-fifa",title:"FIFA AI League",publicId:"website/ffe_fifa",stubText:"What unique challenges are involved in launching a complex digital experience to a captive, global audience?",projectPage:{title:"What unique challenges are involved in launching a complex digital experience to a captive, global audience?",description:"As a significant global audience prepared to tune in to the biggest sporting event of the year â the 2022 FIFA World cup â ASM were busy concepting a unique digital experience that could engage the attention and passion of football fans online.\n Launching the AI League football strategy game alongside the World Cup carried significant and unique challenges â officially promoted by FIFA, the system had to be prepared to handle potential thousands of user sign ups simultaneously upon launch, and deliver quality experiences to potential millions of users throughout the tournament. P22 led the technical aspects of the project, collaborating with a broader team of 50+ experts to deliver this ambitious project to a short and hard deadline â World Cup Game 1.",section:{title:"BUILT UNDER PRESSURE",content:"It was our remit to build the entire front and backend to ASMâs requirements in three tight months, architect complex points and prediction systems, and deliver high quality UI throughout.\n We handled the logic that allowed users to make predictions for the next dayâs matches â not only who would win, but at which minute the first goal would be scored, and the prediction of <em>random events</em> that could occur during the match. The game was required to generate new events every day, while the points system kept tally of various inputs from each of the daily predictions and fed the results to live leaderboards â both the standard global board, an automatically assigned <em>rivals</em> board, and personalised <em>friends</em> boards. Prizes were awarded at the end of every World Cup round. Lastly, the experience had to be shareable for users to invite friends to join and compete together, and had to stand up against a potential user load of millions. The requirements were unique, complex, and large-scale, and we relished rising to the challenge for a successful launch alongside the ASM team."},video:{publicId:"website/ASM_Video",ratio:"16/10"},testimonial:{content:"âP22 went above and beyond to deliver and maintain the codebase for a complex, global digital experience. We had an extremely ambitious timeline and P22âs quality of work, adaptability, and technical expertise were essential in the delivery and success of the projectâ",name:"Guy Trowbridge",role:"Head of Design at Altered State Machine"},projectDetails:[{title:"Completed",content:"2022"},{title:"Technology",content:"React, Artificial Intelligence, Vanilla Javascript"},{title:"Libraries",content:"i18 Next, Radix, Redux, Stitches, Jest, Typescript+"},{title:"Services",content:"Localizely, QStash"},{title:"Client",content:"alteredstatemachine.xyz",url:"https://alteredstatemachine.xyz"}]}},{id:"odo",title:"Odo",publicId:"website/odo",stubText:"How do individuals and collaborative teams approach the problem of time?",projectPage:{title:"HOW DO INDIVIDUALS AND COLLABORATIVE TEAMS APPROACH THE PROBLEM OF TIME?",description:"Time is a valuable, finite resource. Not only does time represent <em>money</em> when youâre working under a project budget or billing clients by the hour, it is also the unit by which we measure our lives â time with loved ones, time spent pursuing interests and passions, time invested in making a positive contribution to the world.\n Time has become a critical part of our explorations at P22, where we believe <em>quality of life</em> is the most important consideration, and <em>quality of work</em> will be its positive by-product. This belief has led us to pursue a 24 hour work week for all P22 staff, a goal we hope to reach via incremental downward adjustments by early 2024.",section:{title:"ODO: WHY WE BUILT IT",content:"We could not achieve this goal without taking a serious look at time: how we spend it, where we waste it, what helps us harness it, and what stops us from maximising it. We tried other time tracking tools in the market but found they were either too clunky â with too many unnecessary features â or too rigid â built for corporate teams that work to a fixed blueprint, rather than being flexible to our unique ways of working. Our needs were basic: something simple and easy-to-use, that would help us claim back t

1ime for the things we love, rather than drain even more of this precious resource.\n The product of that exploration is Odo â short for Odometer (a tool that measures how far youâve travelled). An uncomplicated time tracker, perfect for small teams and freelancers who want to understand how they use their time, and perhaps make some improvements. At P22, weâve been using Odo for over 18 months, and have just launched our product to the public in 2023. You can visit the live project and try Odo for yourself below."},video:{publicId:"website/odo_v1_site"},testimonial:{content:"âOdo is simple, straightforward, browser-based, easy to understand and use. As an independent freelancer, it had never occurred to me that by tracking how long I was spending on tasks, I could more accurately decide how much to quote future clients. Itâs been so valuable!â",name:"Timon Martin",role:"Independent Music Producer"},projectDetails:[{title:"Launched",content:"2023"},{title:"Technology",content:"Next.js, Supabase, Serverless, Scaffold"},{title:"Libraries",content:"Slate, Lottie, Radix, Stitches, Recharts, SWR, Jest, Typescript +"},{title:"Services",content:"Stripe,  Sentry"},{title:"Live project",content:"odo.p22.studio",url:"https://odo.p22.studio"}]}},{id:"givelink",title:"Givelink",publicId:"website/givelink",stubText:"Can simple, accessible tools help make charitable giving the norm?",projectPage:{title:"can simple, accessible TOOLS HELP MAKE CHARITABLE GIVING THE NORM?",description:"In 2021 we began our partnership with Every.org â a nonprofit organisation that offers world class tech and other services to nonprofits, to help them raise more funding and strengthen their relationships with donors. Their mission is to create lasting change in and through the nonprofit sector.\n After undertaking a series of internal projects with the Every.org team, we learned a great deal about the ways charitable giving is facilitated in the US, and around the world. Surprisingly, while numerous tools exist to help individuals host online fundraisers for their favourite causes, most of these tools are offered by for-profit companies who take a fee from all donations. To us, this felt like a barrier to advancing and normalising charitable giving.",section:{title:"ENTER: GIVELINK",content:"We saw the opportunity to use Every.orgâs impressive, free Charity payments API to concept and build a simple, easy-to-use fundraiser tool that would never take any fees, and give 100% of the donated funds to the connected non-profit. Staying true to the <em>truly free</em> model, we invested our time to design and build this tool, with no pathway to profit or monetary return. For us, exploring the challenge of <em>what kind of tools will help make charitable giving the norm</em> (and at no cost to the giver) has been reward enough.\n We called our tool Givelink, because thatâs exactly what it is, a <em>giving link</em> that connects givers with reputable non-profits, with no fee-taking in between.\xa0You can learn more about how Givelink works here.\xa0Or visit Every.org to learn about their free Charity API."},video:{publicId:"website/P22_Site_Givelink"},testimonial:{content:"âP22 are uniquely talented when it comes to going from zero to a fully fledged product. Theyâve designed, coded, and delivered completely new product lines for us. Their ability to rapidly develop initial concepts into products that are both innovative and intuitive is rare.â",name:"Mark Ulrich",role:"CEO, Every.org"},projectDetails:[{title:"Launched",content:"2022"},{title:"Technology",content:"Next.js, Supabase, Serverless"},{title:"Libraries",content:"Radix, Stitches, SWR, Jest, Typescript"},{title:"Services",content:"Every API, Cloudinary, Sentry"},{title:"Live project",content:"givel.ink",url:"https://givel.ink"}]}},{id:"smallhold",title:"Smallhold",publicId:"website/smallhold",stubText:"Can clever technology unlock successful community farming, at scale?",projectPage:{title:"CAN CLEVER TECHNOLOGY UNLOCK SUCCESSFUL COMMUNITY FARMING, AT SCALE?",description:"Smallholdâs mission is to enable the stable and productive growth of mushrooms in communities, in order to help reconnect people with their food, environment, and farmers. After developing a network of mushroom farms across the US, they were inundated with raw sensor data delivered in real time from each individual farm reflecting temperature, humidity, CO2, and more. \n P22 was tasked with the significant challenge of designing and building a custom interface to easily visualise all the data, accessible to farm technicians on any screen/device - allowing the technicians to easily observe, understand, and make changes to the conditions of any single mushroom farm, remotely from anywhere.",section:{title:"TECHNOLOGY: THE KEY TO THE KINGDOM (OF MUSHROOMS)",content:"Smallholdâs technology is the âkey to the kingdomâ for distributed mushroom farming - allowing them to create and maintain optimum conditions for the specific needs of all different types of gourmet mushrooms, and to do so at scale. Our tool had to meet the unique requirements of the staff at Smallholdsâ labs, for maximum efficiency and impact. In addition to desktop & mobile use, we designed for the digital screens that would sit outside each Smallhold lab, so that the live app data would be visible enough for the technicians to spot problems at a glance while walking through the lab - without having to approach and engage with any screen. \n 	Now appearing in urban environments from Texas Central Markets to Whole Foods across California, and with a carbon footprint 30% lower than other mushroom farms, we are proud of the part weâve played in enabling this impressive movement of community farming to âmushroomâ across the United States and beyond."},assets:[{name:"Smallhold laboratory",path:{src:"/_next/static/media/smallhold_1.14c3ba4b.jpg",height:1126,width:1500,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAdEAEAAgICAwAAAAAAAAAAAAABABECBQMEEhMx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABYRAAMAAAAAAAAAAAAAAAAAAAACMf/aAAwDAQACEQMRAD8AotJsXYdjshj66Ma5APJKtE+VERBYLU//2Q==",blurWidth:8,blurHeight:6},ratio:"4/3"},{name:"Smallhold fungus vitrine",path:{src:"/_next/static/media/smallhold_2.cb5c0faa.jpg",height:1126,width:1500,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAL/xAAcEAABBQEBAQAAAAAAAAAAAAABAAIDBAURQaH/xAAVAQEBAAAAAAAAAAAAAAAAAAACBP/EABcRAQADAAAAAAAAAAAAAAAAAAABAhH/2gAMAwEAAhEDEQA/AKq6I17coo5lauWxElzpXNI6POD4iIr7Tgv/2Q==",blurWidth:8,blurHeight:6},ratio:"4/3"},{name:"Smallhold dashboard",path:{src:"/_next/static/media/smallhold_3.82fe47ba.png",height:2251,width:3e3,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAElBMVEX19vbY2Ni6urr9/f35+vns7e7aO2x9AAAAA3RSTlP++/rvDLlwAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJUlEQVR4nC2KQQ4AIAyD0LL/f9k0kyPAADJgFrAgGjXhh66V5z4NzwCCotOVuQAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:6},ratio:"4/3"}],testimonial:{content:"âThe work we did together with P22 is really the foundational design we're still using to push forward with. Small increments in the front end have been able to keep it up to date with whatever keeps coming up. This is the beauty of it!â",name:"Jordi Borras Albert",role:"VP of Engineering, Smallhold"},projectDetails:[{title:"Completed",content:"2021"},{title:"Technology",content:"Next.js, GraphQL, Vercel"},{title:"Libraries",content:"i18 Next, radix-ui, Stitches, Typescript"},{title:"Client",content:"smallhold.com",url:"https://smallhold.com"}]}}],X=[{id:"baseline",title:"Baseline",content:"Can we build a new way to <em>be</em> online, for meaningful discourse and community-led conversations?",status:"Beta",shape:"square",projectPage:{t

1itle:"CAN WE BUILD A NEW WAY TO <em>BE</em> ONLINE?",description:"Creative counsel Background and partner Leslie Benzies came to us with a compelling idea: could we rethink the many pitfalls of communal, online spaces (social media, news media, forums and comments sections) and imagine a new way for users to show up and interact online. \n The project was titled <em>Baseline</em> â a new foundation â and we began to collaboratively design the framework for a distinct digital environment that could house nuanced conversation and meaningful exchange in a manner that felt additive, not addictive, and could welcome diverse points-of-view while limiting knee-jerk reactions, sensationalism and mistrust.",section:{title:"GOING DEEPER",content:"Baseline is an ambitious project that has evolved through multiple prototypes into a now live Beta version, with an updated Beta 2 in final stages of development at time of writing. \n Fusing a unique visual language (centered around the ABC of Align, Build and Challenge) with intentionally minimal design and deliberate UX - Baseline offers a simple, thoughtful space for engaging with ideas, reflecting on biases, presenting considered opinions, and hosting substantial conversations in a distinctly different online space. You can visit Baseline in its current live form below, or contact us to be connected with the Baseline founders."},video:{publicId:"website/baseline_site"},testimonial:{content:"âWe brought a very early-stage concept to P22 and were impressed by their willingness to creatively problem solve and their openness to perspectives outside of their own industry (such as ours). They are a highly skilled design and engineering team, but also carry a broad knowledge of other cultural movements that clearly enriches their work.â",name:"Margaret Zhang",role:"Background Creative Counsel & Vogue"},projectDetails:[{title:"Launched",content:"In beta"},{title:"Technology",content:"Next.js, Firebase, Serverless, Vercel"},{title:"Libraries",content:"Radix, Stitches, Redux, Jest, Typescript"},{title:"Services",content:"Cloudinary, Sentry"},{title:"Live project",content:"baseline.world",url:"https://baseline.world"}]}},{title:"Every.org",content:"âP22âs ability to rapidly develop initial concepts into products that are both innovative and intuitive is rare.â",name:"Mark Ulrich, CEO",status:"Live",shape:"circle",link:"https://www.every.org"},{id:"p22-cowork",title:"P22 Coworking Studio â Auckland",content:"What kind of physical environment do small teams and freelancers need to be inspired and thrive?",status:"Live",shape:"square",projectPage:{title:"WHAT KIND OF PHYSICAL ENVIRONMENT DO WE NEED TO BE INSPIRED AND THRIVE?",description:"As a remote first company, our team has had the benefit of traveling around the world while earning a wage, defining their own schedules, and collaborating with colleagues across any time zone. Weâve had the opportunity work and co-work in spaces across the globe, and consider what features of a physical space allow us, as individuals, to thrive in states of flow. \nThe kind of future weâd like to live in is one where even independent, remote workers can access generative, communal environments that foster inspiration, collaboration and positive shared experiences. So in 2023, we channeled our ideas into our own co-work space in downtown, central Auckland, where some of our team live and work.",section:{title:"OUR SPACE",content:"Our co-work space is a physical extension of our belief that quality of life is the best predictor for quality of work. By curating a space that encourages community, creativity, deep work and overall well being, we hope to positively contribute to the quality of life and work, not just of our team, but anyone who shares our space. We also believe this kind of environment should be affordable and non-exclusionary for all types of members, and have priced ourselves accordingly.\nOn the functional side, our co-work space features abundant natural light, a world class coffee shop on the ground floor, one of the largest private rooftops in the city for socialising and special events, custom made and ergonomic furniture, plus hyper-fast internet. In other words, our essentials! If youâd like to join our community, get in touch."},assets:[{name:"Group reunited working at P22 cowork in Auckland, NZ",path:{src:"/_next/static/media/group-working.8c00f8b1.png",height:4668,width:6032,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAM1BMVEWnp6eNjY3Hx8ddXV1paWmYmJiurq5xcXG1tbWgoKDOzs7k5OR+fn5VVVVJSUktLS0fHx9ZFOsMAAAACXBIWXMAACxLAAAsSwGlPZapAAAAM0lEQVR4nAXBgQHAIAgEsUOBB7W1+0/bBIAaa5C19+osWl32zCZc4feFrsjzSZxws+n6AR+VATji86nJAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:6},ratio:"5/4"},{name:"P22 cowork in Auckland, NZ",path:{src:"/_next/static/media/cowork-space.569d7f3b.png",height:4668,width:6032,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAVFBMVEVweV9YZyVEQDeChUpkaDh1cF6MkGqNkolYU0+FgHusoo7Sv6tiZUaNknh2d0Z5fWR9fVCclHsxKylhZlpNVTSknY2Ch4t3gHp1fnleZ2muopyYmZXzruA8AAAACXBIWXMAACxLAAAsSwGlPZapAAAAOklEQVR4nAXBCQKAIAgEwFVBwCM7tfT//2wG2348xA0IUVYVALH2z0Z5IZeqMd04veWZgoPXlLmQ+wE5FQH3uW3dSwAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:6},ratio:"5/4"}],projectDetails:[{title:"Launched",content:"2023"},{title:"Enquiries",content:"Contact us",url:"https://www.sharedspace.co.nz/listings/detail/index.php?option=com_listings&view=listing&id=12212"}]}},{id:"scaffold",title:"Scaffold",content:"Developing a unique visual and technical language to help communicate our mission through every product",status:"Exploring",shape:"circle",projectPage:{t

1itle:"Developing a unique visual and technical language to help communicate our mission THROUGH every PRODUCT",description:"Applying a bootstrap model at P22 has allowed us to concept, build and self-fund our own unique product ideas, while continuing to collaborate with outside teams and clients. \n As we began to allocate more time and resources to internal projects, we were faced with the task of defining what our own, unique marker of quality looked like â a visual and technical language that would permeate all of our work, and grow into a signature that communicated our values to the world both explicitly and implicitly.",section:{title:"PROJECT <em>scaffold</em>",content:"<em>Scaffold</em> is an ongoing, internal project to develop our unique design system made up of reusable components, that allows us to pilot new tools quickly and efficiently, and communicate our capabilities externally to users and clients. \n Whether we are validating a new product idea, designing the visual identity for an internal or external project, or engineering a new feature within an existing tool, Scaffold provides a systematic framework to guide our decisions and ensure every action is contributing to a greater whole."},video:{publicId:"website/scaffold_v1_site"},projectDetails:[{title:"Launched",content:"Ongoing"},{title:"Technology",content:"React, Storybook"},{title:"Libraries",content:"Stitches, Radix, Typescript"}]}},{title:"A hypothesis for quality",content:"âQuality of life is the most important predictor for quality of work.",status:"Exploring",shape:"circle"},{title:"Odo",content:"Need to track your billable hours? Want to make more use of your time? Pilot our uncomplicated time tracker.",status:"Live",shape:"square",link:"https://odo.p22.studio"}],F=[{id:"1",letter:"B",title:"Bootstrap",stubText:"Weâve kept P22 independent from outside investment, meaning we rely on partnered client work to power our internal projects. Not only do we embrace this ebb and flow, we believe weâre better for it, and have seen our own work enriched by the diversity of clients and projects weâre fortunate to collaborate on.",image:{path:{src:"/_next/static/media/bootstrap.099e4df7.png",height:2062,width:2367,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAFVBMVEXLy8vFxcXR0dG2tra9vb3X19elpaV7AcqoAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAKklEQVR4nBXDgQ0AIAwDINZO/z/ZSIITSVAxZrXzFVnjz53Z2rbLJQ6ZBwvjAGX03tW9AAAAAElFTkSuQmCC",blurWidth:8,blurHeight:7},ratio:"3/2",name:"Chaussures",artist:"illustration from Larousse du XX\xe8me si\xe8cle Encyclopedia, 1932"}},{id:"5",letter:"R",title:"Re-useable",stubText:"In a world filled with waste, we hope to build our company around concepts of reusability and modularity. The digital concepts that we work on daily are rigorously examined for these properties: Is it modular? Is it fit for purpose and reusable in other contexts? Can it evolve with its surroundings? Where else could this solution apply?",image:{path:{src:"/_next/static/media/reuseable.d39fb978.png",height:2481,width:2589,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAJ1BMVEV8pF1lkUmCqWFejkRWhz11nlZtl0tjmEhzmFVDejBQgTmVs2+mxYaHzeAoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAOUlEQVR4nBXGQRLAMAgDsTWGAGn//95OdRK2c7eDrBd7hSBmdeF5YpxJRIn50+06R0Bb1EU6h6j5ACf3AQ4D8YlEAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8},ratio:"5/4",name:"Image Satellite image of crops growing in Kansas",artist:"NASA Earth Observatory, 2001"}},{id:"8",letter:"A",title:"AAA",stubText:"Our three essential ingredients â operating Asynchronously allows our team the freedom that leads to great work, while high levels of Agency keeps every member engaged in directing and defining the movement of our projects. Together, these pillars make us Adaptable to many shapes of work â a great advantage in any dynamic landscape.",image:{videosrc:"/videos/a.mp4",ratio:"1/1"}},{id:"2",letter:"C",title:"Curiosity",stubText:"Whether itâs a psychological principle, a lesson recorded in history, a scientific breakthrough or cultural phenomenon â we work hard to stay curious about the world beyond the bounds of our own industry, and allow it to creatively inform all facets of our work in real time.",image:{path:{src:"/_next/static/media/curiosity.2dc8f792.png",height:2200,width:2750,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAM1BMVEUhPgYtPBMuNBqXhmQeKxA9SiZ/e2wpQQwzRhU/UySpl5tTYkJybFqhjoBIVi6HeFloYz8Keb5hAAAACXBIWXMAACTpAAAk6QFQJOf4AAAAM0l

1EQVR4nBXKyRHAMAwDsbUtiZRz9l9tJngDCZANdHdbZO21zjTHvp4354C7yjP+iUaEPh78ARwO7q0TAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:6},ratio:"5/4",name:"Anthocharis cardamines female",artist:"Michael Apel, 2012  / CC BY-SA 3.0"}},{id:"6",letter:"A",title:"Agitation",stubText:"We preference agitating the accepted order of things, over following prescribed norms. This includes adopting or testing early stage tools developed by others in our industry; developing ways of working that are custom fit for us and our needs; embracing and adapting to changes in our environment; building our own tools where we see gaps or outdated solutions; and more.",image:{videosrc:"/videos/square.mp4",ratio:"1/1"}},{id:"9",letter:"C",title:"Constraints = Creativity",stubText:"âHow can we do the most X, with the least Y?â E.g. âHow can we do the most collaborative work, with the least meetings?â Or âHow can we create the best user experience, with the least complex interface?â We fundamentally believe that embracing constraints leads to more useful, creative, and high quality output, not the opposite!",image:{path:{src:"/_next/static/media/constraints.e7e91013.png",height:1006,width:1599,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAASFBMVEWGnz9cdjsuPhnFh2tEVy/RfmyDmEZfckhtgEh/gmm2i1teaUiRpk9hcj2dsWNyiEpIRC5HXSmaqIS+dWODjHG9kmmPnn2Em2IL3hYKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAM0lEQVR4nAXBBwKAIAwAsSsUWkBlOPj/T02441trTInwbBEvA/s8aCuGrT71dCNf+QD4ASJbAWJPTdajAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:5},ratio:"3/2",forceMobileRatio:!0,name:"Small greenhouse with grapevines escaping (G\xe5seberg, Lysekil Municipality, Sweden)",artist:"W. Carter, 2017"}},{id:"3",letter:"S",title:"Solutions-led",stubText:"A lens we apply to both our external product work and our internal team work â taking the agency to not just identify a problem, but to find ways to solve it. We are a team that is inspired by any creative problem in need of solving.",image:{path:{src:"/_next/static/media/solutionsled.10fea095.png",height:2827,width:1882,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAMAAAAGL8UJAAAAPFBMVEVjAgWcICeRQFiWAACTCw92ChEoAQeEBAc7AAdJAARaNDsaBAiRFh29cGORUWhZGx6Jb41rHC1WPlKYi67pxSYZAAAACXBIWXMAAC4jAAAuIwF4pT92AAAALklEQVR4nAXBhQEAIAwEsUO/uO2/KwlWb26ct0tG3mMEN1Mh9JFA0UWBqsBY2Ace5wEbxq31vQAAAABJRU5ErkJggg==",blurWidth:5,blurHeight:8},ratio:"4/3",name:"Burning filament of a light bulb with damaged glass bulb",artist:"Stefan Krause, 2012  / LAL"}},{id:"7",letter:"Q",title:"Quality",stubText:"Our definition for quality reflects the learnings and values that have made us who we are. When pursuing a high quality product or process we prioritise: Knowledge â what learnings from history and science inform this idea? Contribution â is it positively contributing to the world, not just adding to the noise? And Longevity â is this an agile solution that serves current and future needs?",image:{path:{src:"/_next/static/media/quality.d6e5266e.png",height:3056,width:4592,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAPFBMVEWKZ0VySyedg2SsoJC9yMuHVyp/Vi2Wc1JrPhSri2yvm4G3uLGqqKGifFubckyGc1x9XDlmQh+ykXG8rJdLeFCjAAAACXBIWXMAACTpAAAk6QFQJOf4AAAAL0lEQVR4nAXBhwEAIAjAsKoo4B7//2qCSGu1dyFF3RbKI60TtuLUaFkHF5+WUfwDHJwBOh5hQjIAAAAASUVORK5CYII=",blurWidth:8,blurHeight:5},ratio:"4/3",forceMobileRatio:!0,name:"Temple of Zeus (Athens, Greece)",artist:"Artist unknown, 2015"}},{id:"10",letter:"C",title:"Context shifting",stubText:"A human behavioural term that speaks to the mental load involved in moving from one focused task to another, and the attention deficit that occurs. Avoiding excessive context shifting has helped our team access focused flow states and prioritise sustained attention to detail, even amongst the demands of our work.",image:{path:{src:"/_next/static/media/contextshifting.08b0b183.png",height:1431,width:1500,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAYFBMVEUQGA6oyNtIS1APEhsUSEtqeoU9QUMXHyEiLCl1eXqXssBWV1lOUVWkvcwoS02IrL4mLj0ZQEEyVVqJlqBQY2/s9v0yOjFfc3tWb2pyma2Mu95skZ46RlmztKZkaWuHjJJ3rEc9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVR4nBXBBRLAMAgAMKpAXefy/1/ulsCxbzk7ISCeumntIoxWU02rAeaHCBXCnB3hZ/ooihYCfs1VpEW4OXgZvP0AdM0DEaJ9tFwAAAAASUVORK5CYII=",blurWidth:8,blurHeight:8},ratio:"1/1",portrait:!0,name:"Left Exit 12 Off Ramp",artist:"Meme, 2017"}}

1,{id:"7",letter:"C",title:"Currently Exploring",stubText:"We like to think of all our work as an exploration â naming a hypothesis and testing our solution concepts, before presenting our findings as simple ideas or digital artefacts. Whether itâs a client-led or internal project, bringing this exploratory lens to our work keeps curiosity and creativity at the forefront.",image:{path:{src:"/_next/static/media/currentlyexploring.ce69594f.png",height:1869,width:1400,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAMAAADtGH4KAAAAGFBMVEXt7e3i4uLt7e3y8vKpqanNzc1NTU2YmJjBrtXnAAAAAnRSTlP0+lsr8oMAAAAJcEhZcwAACxMAAAsTAQCanBgAAAArSURBVHicLcqxDQAgDMRAx5/A/hsjAZWLM6oBzUuVYK+1C6d7CpNc+6fKAQyrAHJLyI+lAAAAAElFTkSuQmCC",blurWidth:6,blurHeight:8},applyFilter:!0,ratio:"1/1",name:"Eye Miniature (14 x 27 mm)",artist:"British Painter, early 19th century"}}],N={assets:[{name:"First diagram explanation",caption:"Traditional company model",path:{src:"/_next/static/media/diagram1.5be4e63b.png",height:8889,width:8912,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAABlBMVEXo6Ojs7OyvkP6eAAAACXBIWXMAACxLAAAsSwGlPZapAAAAJUlEQVR4nE2JhwkAAAzCkv+fLtJBRTQoCqDxgum3nCRXomFupQAEkgAdboaD9wAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:8},ratio:"1/1"},{name:"Second diagram explanation",caption:"P22 model",path:{src:"/_next/static/media/diagram2.f372d970.png",height:8889,width:8912,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAABlBMVEXr6+vm5uZrvN1MAAAACXBIWXMAACxLAAAsSwGlPZapAAAAGUlEQVR4nGNgQAKMMIqREcpmhAkxIlhYRQAChAAU0jMKIgAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:8},ratio:"1/1"},{name:"P22 team sync 2023 in Auckland, New Zealand",caption:"Team sync 2023",path:{src:"/_next/static/media/group.ceaf3f48.jpg",height:2184,width:2912,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIDBAUREiH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlsydjVb0exyZRcE+Ha/EwAB//9k=",blurWidth:8,blurHeight:6},ratio:"1/1"}],clientsAndColaborators:["Every.org","MayaMD","Columbia University","Background cc","Gladeye","Smallhold","Ghost Partners","Bill & Melinda Gates Foundation","Altered State Machine"]},Q=["Buenos Aires","Rosario","Cairns","Sydney","Melbourne","Auckland","New York City"],Y=["Brand Strategy","Product Strategy","Market Strategy","Design Concept","Project Management","Front-end Development","Back-end Development"];var G=n(3039),q=n(1922);let J=(e,t)=>(0,q.$G)(G.A,{keyPrefix:e,...t});var K=n(1163);let Z=(0,s.zo)("div",{display:"flex",overflow:"hidden",variants:{ratio:{11:{aspectRatio:"1/1"},54:{aspectRatio:"5/4"},43:{aspectRatio:"4/3"},32:{aspectRatio:"3/2"},1610:{aspectRatio:"16/10"}},portrait:{true:{}},forceMobileRatio:{true:{}}},compoundVariants:[{portrait:!0,ratio:"54",css:{aspectRatio:"4/5"}},{portrait:!0,ratio:"43",css:{aspectRatio:"3/4"}},{portrait:!0,ratio:"32",css:{aspectRatio:"2/3"}},{portrait:!0,ratio:"1610",css:{aspectRatio:"10/16"}},{forceMobileRatio:!0,ratio:"32",css:{aspectRatio:"5/4","@sm":{aspectRatio:"3/2"}}},{forceMobileRatio:!0,ratio:"43",css:{aspectRatio:"5/4","@sm":{aspectRatio:"4/3"}}}],defaultVariants:{ratio:"54"}}),_={"1/1":"11","5/4":"54","4/3":"43","3/2":"32","16/10":"1610"},ee=a.forwardRef((e,t)=>{let{ratio:n,...a}=e;return(0,r.jsx)(Z,{ref:t,ratio:_[n],...a})}),et=(0,s.F4)({"0%":{opacity:0},"100%":{opacity:1}}),en=(0,s.zo)("div",{backgroundColor:"$overlay",position:"fixed",top:0,bottom:0,right:0,left:0,inset:0,zIndex:"$modal","@media (prefers-reduced-motion: no-preference)":{animation:"".concat(et," 150ms cubic-bezier(0.16, 1, 0.3, 1)")}}),er=(0,s.zo)("div",{display:"grid",gridTemplateColumns:"repeat(auto-fit, 1fr)"}),ea=e=>{let{children:t,columns:n=12,fixed:a,customCSS:i}=e,o={"@md":{gridTemplateColumns:"repeat(".concat(n,", ").concat(a?"$gridColumnWidth":"minmax(0, 1fr)",")")}};return(0,r.jsx)(er,{css:{...o,...i},children:t})};var ei=n(6825);let eo={},es=(0,s.zo)(ee,{position:"relative",borderRadius:"$M"}),el=(0,s.zo)(en,{paddingBottom:"$spacerYM",paddingTop:"$spacerYXS",overflow:"scroll","@sm":{paddingTop:"$spacerYS",paddingBottom:"$spacerYL"}}),ec=(0,ei.animated)(el),ed=e=>{let{children:t,isOpen:n,css:a}=e,i=(0,ei.useTransition)(n,{...eo,from:{opacity:0,animationDuration:"800ms",animationDirection:"cubic-bezier(0.16, 1, 0.3, 1)"},enter:{opacity:1,animationDuration:"800ms",animationDirection:"cubic-bezier(0.16, 1, 0.3, 1)"},leave:{opacity:0,animationDuration:"800ms",animationDirection:"cubic-bezier(0.16, 1, 0.3, 1)"}});return i((e,n)=>n?(0,r.jsx)(ec,{style:e,css:a,children:t}):"")},eu=(0,s.zo)("div",{height:"100%",position:"fixed",width:"100%",top:0}),eh=(0,ei.animated)(eu),ep=e=>{let{isOpen:t,onClick:n}=e,a=(0,ei.useTransition)(t,{...eo,from:{backdropFilter:"blur(12px) opacity(0)",transition:"backdrop-filter 800ms"},enter:{backdropFilter:"blur(12px) opacity(1)",transition:"backdrop-filter 800ms"},leave:{backdropFilter:"blur(12px) opacity(0)",transition:"backdrop-filter 800ms"}});return a((e,t)=>t?(0,r.jsx)(eh,{style:e,onClick:n}):"")},eg=(0,s.zo)("div",{stack:"$spacerYS",gridColumn:"1/-1",variants:{type:{primary:{},secondary:{gridColumn:"1/-1","@md":{gridColumn:"2/-2"}},tertiary:{gridColumn:"1/-1","@md":{gridColumn:"3/-3"}}}}}),em=(0,s.zo)("div",{position:"absolute",top:0,left:0,height:"100%"}),eA=(0,s.zo)("div",{position:"relative",gridColumn:"1/-1",outline:"none",zIndex:"$modal",backgroundColor:"$surfaceFg",paddingY:"$spacerYM",paddingX:"$paddingContainerLevelTwo",border:"none",width:"fit-content",boxShadow:"$levelOne",pointerEvents:"auto",height:"min-content",borderRadius:"$M","@md":{marginX:"auto",paddingX:"$spacerYM",paddingTop:"$spacerYM",paddingBottom:"$spacerYL"}}),ef=(0,ei.animated)(eA),ev=e=>{let{children:t,isOpen:n,...a}=e,i=(0,ei.useTransition)(n,{...eo,from:{y:800,animationDuration:"800ms",animationDirection:"cubic-bezier(.24,.22,.22,1.04)",animationFillMode:"forwards"},enter:{y:0,animationDuration:"800ms",animationDirection:"cubic-bezier(.24,.22,.22,1.04)",animationFillMode:"forwards"},leave:{y:800,animationDuration:"800ms",animationDirection:"cubic-bezier(.24,.22,.22,1.04)",animationFillMode:"forwards"}});return i((e,n)=>n?(0,r.jsx)(ef,{style:e,...a,children:t}):"")}

1,eb=(0,s.zo)("div",{zIndex:"$modal",display:"block",position:"fixed",boxShadow:"$levelTwo",backgroundColor:"$surfaceFg",left:"50%",transform:"translateX(-50%)",borderRadius:"$L",padding:"$paddingUIS",top:"calc($spacerYXS / 2)","@sm":{top:"calc($spacerYS / 2)"}}),ew=e=>(0,r.jsx)(eb,{children:(0,r.jsx)(h.zx,{...e})}),ex=e=>{let{children:t,overlayCSS:n,filter:a,showFloatingClose:i=!1,onClose:o,isOpen:s=!1,...l}=e;return(0,r.jsx)("div",{children:(0,r.jsxs)(ed,{isOpen:s,css:n,children:[a&&(0,r.jsx)(ep,{isOpen:s,onClick:o}),(0,r.jsx)(ev,{isOpen:s,...l,children:(0,r.jsx)(ea,{fixed:!0,customCSS:{columnGap:"$paddingContainerLevelOne",rowGap:"$spacerYM"},children:t})}),i&&(0,r.jsx)(ew,{onClick:o,children:"Close"})]})})},ey={Root:em,GroupImage:es,Section:eg,Content:ex};var ej=n(9260),eC=n.n(ej),ek=n(3896),eO=n(6979);let e$=(0,s.zo)(eO.fC,{backgroundColor:"$strokePrimary",height:"0.5rem",borderRadius:"$M",zIndex:1,overflow:"hidden",width:"100%"}),eS=(0,s.zo)(eO.z$,{backgroundColor:"$fgHigh",height:"100%",width:"100%",transition:"transform 10ms cubic-bezier(0.65, 0, 0.35, 1)"}),ez=(e,t)=>{let n=n=>{if(t.current){let r=t.current.getBoundingClientRect(),a=r.left,i=r.width,o=n.pageX-a;a<n.pageX&&e(o/i)}};return n},eE=(e,t)=>{let n=(0,ek.useDrag)(n=>{let{active:r,xy:[a]}=n;if(t.current&&r){let n=t.current.getBoundingClientRect(),r=n.left,i=n.width,o=(a-r)/i;o>=0&&o<=1&&e(o)}},{axis:"x",preventScroll:!0});return n},eR=(0,ei.animated)(eS),eB=e=>{let{onSetProgress:t=()=>{},progress:n,percentage:i,css:o,onMouseUp:s}=e,l=(0,a.useRef)(null),c=ez(t,l),d=eE(t,l),u=(0,ei.to)([n],e=>"translateX(-".concat(100-100*e,"%)"));return(0,r.jsx)(e$,{"aria-label":"Animated progress bar",onClick:c,onMouseUp:s,css:o,value:i,ref:l,children:(0,r.jsx)(eR,{style:{transform:u},...d()})})},eL=(0,s.zo)("div",{width:"100%",display:"flex",flexDirection:"row",gap:"$paddingBetweenSmall",position:"absolute",bottom:"0.4rem",padding:"$paddingUIXL",alignItems:"end","@sm":{visibility:"hidden"}}),eM=e=>{let{progress:t,percentage:n,currentIndicator:i,max:o,css:s}=e;(0,a.useRef)(null),(0,ei.to)([t],e=>"translateX(-".concat(100-100*e,"%)"));let l=Math.max(1,Math.min(i,o));return(0,r.jsx)(eL,{className:"story-progress-bar",role:"progressbar","aria-valuemax":o,"aria-valuemin":1,"aria-valuenow":l,"aria-valuetext":"".concat(l," of ").concat(o),css:s,children:Array.from({length:o},(e,a)=>{let i=a+1;return(0,r.jsx)(eB,{percentage:n,progress:i<l?1:i==l?t:0},i)})})};var eT=n(5675),eI=n.n(eT);let eV=e=>{let{asset:t,onAssetLoad:n}=e;return(0,r.jsx)(eI(),{priority:!0,quality:80,onLoad:()=>n(),placeholder:"blur",style:{objectFit:"cover"},src:t.path,alt:t.name,fill:!0})},eH=(e,t,n,r)=>{let i=(0,a.useRef)(void 0),o=()=>{let a=Date.now()-t;i.current=setInterval(()=>{let t=Date.now()-a;n(t),r({progress:t/e})},10)},s=()=>{clearInterval(i.current)},l=()=>{clearInterval(i.current),n(0),o()};return{handleStart:o,handlePause:s,handleReset:l}},eD=(0,s.F4)({"0%":{width:"0px"},"33%":{width:"6px"},"66%":{width:"20px"},"100%":{width:"30px"}}),eU=(0,s.zo)("div",{position:"absolute",stackH:"$paddingBetweenSmall",zIndex:1,transform:"translate(50%,-50%)",top:"50%",right:"50%"}),eP=(0,s.zo)(P.uT,{"&::after":{overflow:"hidden",display:"inline-block",verticalAlign:"bottom","-webkit-animation":"".concat(eD,"  steps(4, end) 900ms infinite"),animation:"".concat(eD," steps(4, end) 900ms infinite"),content:"...",width:"0px"}}),eW=()=>(0,r.jsxs)(eU,{children:[(0,r.jsx)(P.uT,{variant:"base",children:"Loading"}),(0,r.jsx)("div",{style:{width:"30px"},children:(0,r.jsx)(eP,{variant:"base"})})]}),eX=(0,s.zo)(P.uT,{variants:{level:{primary:{color:"$fgHigh"},secondary:{color:"$fgMed"}}},defaultVariants:{level:"primary"}}),eF=(0,s.zo)(P.uT,{variants:{level:{primary:{color:"$fgMed"},secondary:{color:"$fgLow"}}},defaultVariants:{level:"primary"}}),eN=(0,s.zo)("div",{display:"flex",variants:{orientation:{horizontal:{stackH:"$paddingBetweenMed"},vertical:{stack:"$paddingBetweenZero"}},variant:{base:{},small:{}}},defaultVariants:{orientation:"horizontal"},compoundVariants:[{orientation:"horizontal",variant:"small",css:{stackH:"$paddingBetweenSmall"}}]}),eQ=(e,t)=>(n,r)=>{let a=n||e,i=r||t;return{...a?{variant:a}:{},...i?{level:i}:{}}},eY=e=>!!(null==e?void 0:e.props),eG=a.forwardRef((e,t)=>

1{let{variant:n,level:i,children:o,...s}=e,l=eQ(n,i),c=a.Children.map(o,e=>{var t,n;let r=eY(e)?l(null==e?void 0:null===(t=e.props)||void 0===t?void 0:t.variant,null==e?void 0:null===(n=e.props)||void 0===n?void 0:n.level):l();return e?(0,a.cloneElement)(e,r):null});return(0,r.jsx)(eN,{ref:t,variant:n,...s,children:c})}),eq={Root:eG,Primary:eX,Secondary:eF},eJ=(0,s.zo)(eq.Root,{backgroundColor:"$surfaceFg",borderWidth:"$default",borderStyle:"solid",borderColor:"$strokeTertiary",width:"fit-content",paddingTop:"$paddingUIM",paddingBottom:"$paddingUIM",paddingRight:"$paddingUIL",paddingLeft:"$paddingUIL",boxShadow:"$levelOne",borderRadius:"$S"}),eK=a.forwardRef((e,t)=>(0,r.jsx)(eJ,{ref:t,variant:"small",...e})),eZ=e=>(0,r.jsx)(eq.Primary,{bold:!0,...e}),e_=eq.Primary,e0={Root:eK,Primary:eZ,Secondary:e_},e1=(0,s.zo)("div",{position:"relative",cursor:"pointer","&:hover":{".story-progress-bar":{visibility:"visible"}}}),e2=(0,s.zo)(e0.Root,{zIndex:1,position:"absolute",bottom:"4rem",left:"2.5rem"}),e3=(0,s.zo)(ee,{"& > *":{borderRadius:"$M"}}),e5=e=>{let{assets:t}=e,n=(0,a.useRef)(null),[i,o]=(0,a.useState)(0),[s,l]=(0,a.useState)(0),[c,d]=(0,a.useState)(0),[u,h]=(0,a.useState)(!0),[{progress:p},{set:g}]=(0,ei.useSpring)(()=>({progress:0,onChange:e=>{let{value:t}=e;l(Math.round(100*t.progress))}})),{handleStart:m,handleReset:A}=eH(4e3,c,d,g),f=t.length,v=t[i],b=()=>

1o(e=>(g({progress:0}),A(),e===f-1?0:e+1)),w=(0,a.useCallback)(()=>{m(),h(!1);let e=setInterval(()=>{b()},4e3);return()=>clearInterval(e)},[]),x=e=>{let{currentTime:t,totalTime:n}=e,r=t/n;r<.99?g({progress:r}):b()};return(0,r.jsxs)(e1,{onClick:()=>b(),children:[u&&(0,r.jsx)(eW,{}),t.map((e,t)=>(0,r.jsxs)(e3,{ratio:e.ratio||"3/2",portrait:e.portrait,css:e.path!==v.path?{display:"none"}:{},children:[e.caption&&(0,r.jsx)(e2,{children:(0,r.jsx)(e0.Primary,{children:e.caption})}),e.animationData?(0,r.jsx)(eC(),{lottieRef:n,animationData:e.animationData,onEnterFrame:x,rendererSettings:{preserveAspectRatio:"xMidYMid slice"}}):(0,r.jsx)(eV,{asset:e,onAssetLoad:e.path===v.path?()=>w():()=>{}},t)]},t)),f>1&&!u&&(0,r.jsx)(eM,{progress:p,percentage:s,currentIndicator:i+1,max:f})]})},e6=(0,s.zo)("div",{stack:"$paddingBetweenSmall","@sm":{display:"grid",gridTemplateColumns:"repeat(2, 1fr)"}}),e4=()=>{let{t:e}=J("pages.about"),{assets:t,clientsAndColaborators:n}=N,{asPath:a}=(0,K.useRouter)();return(0,r.jsx)(ey.Root,{children:(0,r.jsxs)(ey.Content,{isOpen:"/about"===a,overlayCSS:{background:"$surfaceBg"},children:[(0,r.jsxs)(ey.Section,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("title")}),(0,r.jsxs)("div",{children:[(0,r.jsx)(P.uT,{variant:"large",children:e("content1")}),(0,r.jsx)(P.uT,{variant:"large",indented:!0,children:e("content2")}),(0,r.jsx)(P.uT,{variant:"large",indented:!0,children:(0,r.jsx)(q.cC,{i18nKey:"pages.about.content3"})})]})]}),(0,r.jsxs)(ey.Section,{type:"secondary",children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("subtitle1")}),(0,r.jsx)(P.uT,{variant:"base",children:e("body1a")}),t&&(0,r.jsx)(ey.Section,{type:"secondary",children:(0,r.jsx)(e5,{assets:t})}),(0,r.jsxs)("div",{children:[(0,r.jsx)(P.uT,{variant:"base",children:e("body1b")}),(0,r.jsx)(P.uT,{variant:"base",indented:!0,children:e("body1c")})]})]}),(0,r.jsxs)(ey.Section,{type:"secondary",children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("subtitle2")}),(0,r.jsxs)("div",{children:[(0,r.jsx)(P.uT,{variant:"base",children:e("body2a")}),(0,r.jsx)(P.uT,{variant:"base",indented:!0,children:e("body2b")})]})]}),(0,r.jsxs)(ey.Section,{type:"secondary",children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("subtitle3")}),(0,r.jsx)(e6,{children:n.map((e,t)=>(0,r.jsx)(P.uT,{variant:"base",children:e},t))})]})]})})};var e7=n(1664),e9=n.n(e7);let e8=(0,s.zo)("div",{stack:"$spacerYS"}),te=(0,s.zo)("div",{stack:"$paddingBetweenSmall"}),tt=()=>{let{t:e}=J("pages.contact"),{asPath:t}=(0,K.useRouter)(),n=()=>{window.open("mailto:".concat("[email protected]","?subject=Hello P22 - I want to get in touch!"))};return(0,r.jsx)(ey.Root,{children:(0,r.jsxs)(ey.Content,{isOpen:"/contact"===t,overlayCSS:{background:"$surfaceBg"},children:[(0,r.jsxs)(ey.Section,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("title")}),(0,r.jsx)(P.uT,{variant:"large",children:e("content")})]}),(0,r.jsx)(ey.Section,{children:(0,r.jsxs)(ea,{columns:3,customCSS:{rowGap:"$spacerYS"},children:[(0,r.jsxs)(e8,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("column1")}),(0,r.jsxs)(te,{children:[(0,r.jsx)("div",{children:(0,r.jsx)(h.zx,{onClick:n,variant:"secondary",children:e("cta1")})}),(0,r.jsx)("div",{children:(0,r.jsx)(e9(),{href:"https://instagram.com/p22.studio/",passHref:!0,target:"_blank",children:(0,r.jsx)(h.zx,{variant:"secondary",children:e("cta2")})})})]})]}),(0,r.jsxs)(e8,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("column2")}),(0,r.jsx)(te,{children:Y.map((e,t)=>(0,r.jsx)(P.uT,{variant:"base",children:e},t))})]}),(0,r.jsxs)(e8,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("column3")}),(0,r.jsx)(te,{children:Q.map((e,t)=>(0,r.jsx)(P.uT,{variant:"base",children:e},t))})]})]})})]})})};var tn=n(2583);let tr=a.forwardRef((e,t)=>(0,r.jsx)(tn.u,{variant:"base",bold:!0,ref:t,...e})),ta=a.forwardRef((e,t)=>(0,r.jsx)(tn.u,{variant:"small",ref:t,...e})),ti=(0,s.zo)("div",{stack:"$paddingBetweenMed",padding:"$paddingContainerLevelTwo",borderRadius:"$S",backgroundColor:"$surfaceFg",boxShadow:"$levelOne"}),to={Root:ti,Title:tr,Content:ta},ts=(0,s.zo)("div",{position:"relative"}),tl=(0,s.zo)(ee,{position:"relative",borderBottomRightRadius:"$M",borderBottomLeftRadius:"$M"}),tc=(0,s.zo)(to.Root,{position:"absolute",maxWidth:"$articleWidthXXS",bottom:"$paddingContainerLevelTwo",left:"$paddingContainerLevelTwo","@sm":{maxWidth:"$articleWidthS"}}

1),td=(0,s.zo)(C,{padding:"$paddingContainerLevelOne",backgroundColor:"$surfaceFg",borderTopRightRadius:"$M",borderTopLeftRadius:"$M"}),tu={Root:ts,Ribbon:td,RibbonLeft:b,RibbonCenter:w,RibbonRight:x,Content:tl,Stub:tc,StubTitle:to.Title,StubContent:to.Content},th=(0,s.zo)(tu.Stub,{width:"$articleWidthXXS","@sm":{display:"none"}});var tp=n(4163),tg=n(2090);let tm=(0,s.zo)(tg.f,{"&:not([data-orientation=vertical])":{height:"$borderWidths$default"},"&[data-orientation=vertical]":{width:"$borderWidths$default"},variants:{type:{primary:{backgroundColor:"$strokeSecondary"},secondary:{backgroundColor:"$strokeTertiary"}}},defaultVariants:{type:"primary"}});var tA=n(769);let tf=(0,s.F4)({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.9)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),tv=(0,s.zo)(tA.aV,en),tb=(0,s.zo)(C,{color:"$text",textAlign:"center",verticalAlign:"middle",backgroundColor:"$surfaceBg",borderTopLeftRadius:"$M",borderTopRightRadius:"$M",margin:0}),tw=(0,s.zo)(tA.Dx,P.uT,{margin:0,color:"$fgHigh"});(0,s.zo)(C,{borderBottomLeftRadius:"$M",borderBottomRightRadius:"$M",backgroundColor:"$surfaceBg",padding:"$paddingContainerLevelOne"}),(0,s.zo)("div",{padding:"$paddingContainerLevelOne",stack:"$paddingBetweenXL"});let tx=(0,s.zo)(tA.VY,{position:"fixed",top:"$paddingContainerLevelOne",left:"50%",transform:"translateX(-50%)",outline:"none",zIndex:"$modal",backgroundColor:"$surfaceFg",border:"none",width:"95%",borderRadius:"$M",boxShadow:"$levelOne",pointerEvents:"auto","@sm":{width:"min($articleWidthXS, 95%)",top:"$sizes$infoMinHeight"},"@media (prefers-reduced-motion: no-preference)":{animation:"".concat(tf," 150ms cubic-bezier(0.16, 1, 0.3, 1)"),willChange:"transform"}});tA.fC,tA.xz;let ty=(0,s.F4)({"0%":{transform:"translate(0,100%) scale(1)"},"100%":{transform:"translate(0, 0) scale(1)"}}),tj=(0,s.F4)({"0%":{transform:"translate(0, 0) scale(1)"},"100%":{transform:"translate(0,100%) scale(1)"}}),tC=(0,s.F4)({"0%":{opacity:0},"100%":{opacity:1}}),tk=(0,s.F4)({"0%":{opacity:1},"100%":{opacity:0}}),tO=(0,s.zo)(en,{paddingBottom:"$spacerYM",paddingTop:"$spacerYXS",overflow:"scroll","@sm":{paddingTop:"$spacerYS",paddingBottom:"$spacerYL"},"@media (prefers-reduced-motion: no-preference)":{'&[data-state="closed"]':{animation:"".concat(tk," 800ms cubic-bezier(0.16, 1, 0.3, 1)")}},variants:{animate:{true:{"@media (prefers-reduced-motion: no-preference)":{'&[data-state="open"]':{animation:"".concat(tC," 800ms cubic-bezier(0.16, 1, 0.3, 1)")}}}}},defaultVariants:{animate:!0}}),t$=(0,s.zo)(tA.aV,tO),tS=(0,s.zo)("div",{height:"100%",position:"fixed",width:"100%",top:0,backdropFilter:"$shadows$filter"}),tz=(0,s.zo)("div",{gridColumn:"1/-1",variants:{type:{primary:{},secondary:{gridColumn:"1/-1","@md":{gridColumn:"2/-2"}},tertiary:{gridColumn:"1/-1","@md":{gridColumn:"3/-3"}}}}}),tE=(0,s.zo)("div",{zIndex:"$modal",display:"block",position:"fixed",boxShadow:"$levelTwo",backgroundColor:"$surfaceFg",left:"50%",transform:"translateX(-50%)",borderRadius:"$L",padding:"$paddingUIS",top:"calc($spacerYXS / 2)","@sm":{top:"calc($spacerYS / 2)"}}),tR=e=>(0,r.jsx)(tE,{children:(0,r.jsx)(h.zx,{as:tA.x8,...e})}),tB=(0,s.zo)(tA.VY,{position:"relative",gridColumn:"1/-1",outline:"none",zIndex:"$modal",backgroundColor:"$surfaceFg",paddingY:"$spacerYM",paddingX:"$paddingContainerLevelTwo",border:"none",width:"fit-content",boxShadow:"$levelOne",pointerEvents:"auto",height:"min-content",borderRadius:"$M","@md":{marginX:"auto",paddingX:"$spacerYM",paddingTop:"$spacerYM",paddingBottom:"$spacerYL"},"@media (prefers-reduced-motion: no-preference)":{'&[data-state="open"]':{animation:"".concat(ty," 800ms cubic-bezier(.24,.22,.22,1.04) forwards")},'&[data-state="closed"]':{animation:"".concat(tj," 800ms cubic-bezier(.24,.22,.22,1.04) forwards")}}}),tL=a.forwardRef((e,t)=>{let{children:n,container:a,overlayCSS:i,filter:o,showFloatingClose:s=!1,onClose:l,...c}=e;return(0,r.jsxs)(tA.h_,{container:a,children:[!o&&(0,r.jsx)(tS,{}),(0,r.jsxs)(t$,{css:i,animate:!o,children:[o&&(0,r.jsx)(tS,{onClick:l}),(0,r.jsx)(tB,{ref:t,...c,children:(0,r.jsx)(ea,{fixed:!0,customCSS:{columnGap:"$paddingContainerLevelOne",rowGap:"$spacerYM"},children:n})}),s&&(0,r.jsx)(tR,{onClick:l,children:"Close"})]})]})}),tM={Root:tA.fC,Trigger:tA.xz,Content:tL,Section:tz},tT=(0,s.zo)(tM.Section,{borderRadius:"$M",backgroundColor:"$surfaceBg"}),tI=(0,s.zo)(C,{padding:"$paddingUIXL!important","@sm":{alignItems:"center"}}),tV=(0,s.zo)("div",{stack:"$paddingBetweenNone",textAlign:"center"}),tH=e=>{let{children:t,id:n}=e,{push:a}=(0,K.useRouter)();return(0,r.jsx)("div",{onClick:()=>a("/project/".concat(n),void 0,{scroll:!1}),children:t})},tD=e=>{var t;let{id:n,projectPage:a}=e,{title:i,description:o,section:s,video:l,assets:c,testimonial:d,projectDetails:u}=a,p=o.split("\n");null==d||null===(t=d.content)||void 0===t||t.split("\n");let g=s.content.split("\n"),{asPath:m,push:A}=(0,K.useRouter)(),f=()=>{A("/",void 0,{scroll:!1})};return(0,r.jsx)(ey.Root,{children:(0,r.jsx)(ey.Content,{filter:!0,showFloating

1Close:!0,onClose:f,isOpen:m==="/project/".concat(n),children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(ey.Section,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:(0,r.jsx)(q.cC,{children:i})}),(0,r.jsx)("div",{children:p.map((e,t)=>(0,r.jsx)(P.uT,{variant:"large",indented:t>0,children:(0,r.jsx)(q.cC,{children:e})},t))})]}),(0,r.jsxs)(ey.Section,{type:"secondary",children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:(0,r.jsx)(q.cC,{children:s.title})}),(0,r.jsx)("div",{children:g.map((e,t)=>(0,r.jsx)(P.uT,{variant:"base",indented:t>0,children:(0,r.jsx)(q.cC,{children:e})},t))})]}),l&&(0,r.jsx)(ey.Section,{type:"secondary",children:(0,r.jsx)(tu.Content,{ratio:l.ratio||"3/2",css:{borderRadius:"$M"},children:(0,r.jsx)(tp.CldVideoPlayer,{publicId:l.publicId,style:{height:"100%",objectFit:"cover",objectPosition:"center"}})})}),c&&(0,r.jsx)(ey.Section,{type:"secondary",children:(0,r.jsx)(e5,{assets:c})}),d&&(0,r.jsxs)(ey.Section,{type:"tertiary",children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:"TESTIMONIAL"}),(0,r.jsx)(P.uT,{variant:"large",children:d.content}),(0,r.jsxs)(tV,{children:[(0,r.jsx)(P.uT,{variant:"base",css:{color:"$fgMed"},children:(0,r.jsx)(q.cC,{children:d.name})}),(0,r.jsx)(P.uT,{variant:"base",css:{color:"$fgMed"},children:(0,r.jsx)(q.cC,{children:d.role})})]})]}),(0,r.jsx)(tT,{children:u.map((e,t)=>(0,r.jsxs)("div",{children:[(0,r.jsxs)(tI,{children:[(0,r.jsx)(b,{children:(0,r.jsx)(q.cC,{children:e.title})}),(0,r.jsx)(x,{css:{textAlign:"end",width:"min-content",marginLeft:"auto","@sm":{marginLeft:"0",width:"inherit"}},children:e.url?(0,r.jsx)(e9(),{href:e.url,passHref:!0,target:"_blank",children:(0,r.jsx)(h.zx,{children:(0,r.jsx)(q.cC,{children:e.content})})}):(0,r.jsx)(q.cC,{children:e.content})})]}),t<u.length-1&&(0,r.jsx)(tm,{})]},t))})]})})})};var tU=n(5152),tP=n.n(tU);let tW=tP()(()=>Promise.resolve().then(n.bind(n,4163)).then(e=>e.CldVideoPlayer),{loadableGenerated:{webpack:()=>[4163]},ssr:!1}),tX=(0,s.zo)(tu.Ribbon,{paddingX:"$paddingContainerLevelOne"}),tF=(0,s.zo)("div",{stackH:"$paddingBetweenMed"}),tN=(0,s.zo)(tu.Root,{cursor:"pointer","&:hover":{".project-stub":{display:"block"}}}),tQ=e=>{let{project:t}=e,{push:n}=(0,K.useRouter)(),{id:a,title:i,publicId:o,stubText:s,projectPage:l}=t,c=()=>n("/project/".concat(a),void 0,{scroll:!1});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{id:"cover-to-click",onClick:c,onTouchStart:c,children:(0,r.jsxs)(tN,{children:[(0,r.jsxs)(tX,{hoverable:!1,variant:"large",role:"button","aria-hidden":"true",children:[(0,r.jsx)(tu.RibbonLeft,{children:(0,r.jsx)(eq.Root,{children:(0,r.jsx)(eq.Primary,{children:(0,r.jsx)(q.cC,{children:i})})})}),(0,r.jsx)(tu.RibbonRight,{children:(0,r.jsxs)(tF,{className:"testimonial-label",children:[(0,r.jsx)(u,{name:"circle",iconCss:{color:"$fgLow"}}),(0,r.jsx)(P.uT,{opacity:"low",children:"Live"})]})})]}),(0,r.jsx)(tu.Content,{ratio:"3/2",role:"button","aria-hidden":"true",children:(0,r.jsx)(tW,{publicId:o,style:{height:"100%",objectFit:"cover",objectPosition:"center"}})}),(0,r.jsx)(th,{className:"project-stub",role:"button","aria-hidden":"true",children:(0,r.jsx)(tu.StubContent,{variant:"base",children:(0,r.jsx)(q.cC,{children:s})})})]})}),(0,r.jsx)(tD,{projectPage:l,id:a})]})},tY=(0,s.zo)("div",{display:"flex",justifyContent:"center",flexDirection:"column",position:"relative",padding:"$paddingContainerLevelTwo",textAlign:"center",aspectRatio:"1/1",variants:{shape:{circle:{padding:"calc($paddingContainerBubbleX * 2)",borderRadius:"50%"},square:{}}},defaultVariants:{shape:"square"}}),tG=(0,s.zo)("div",{position:"absolute",bottom:"$paddingContainerLevelTwo",left:"50%",paddingX:"$spacerYS",transform:"translateX(-50%)","@sm":{paddingX:"$spacerYXS"}}),tq=(0,s.iv)({position:"absolute",top:"$paddingContainerLevelTwo",left:"50%",paddingX:"$spacerYS",transform:"translateX(-50%)","@sm":{paddingX:"$spacerYXS"}}),tJ=a.forwardRef((e,t)=>(0,r.jsx)(P.uT,{ref:t,className:"".concat(tq),...e})),tK=a.forwardRef((e,t)=>(0,r.jsx)(P.uT,{variant:"large",ref:t,...e})),tZ=a.forwardRef((e,t)=>(0,r.jsx)(tG,{ref:t,...e})),t_=a.forwardRef((e,t)=>

1{let{shape:n="square",background:a="$team600",...i}=e;return(0,r.jsx)(tY,{shape:n,css:{background:a},ref:t,ratio:"1/1",...i})}),t0={Root:t_,Title:tJ,Content:tK,Bottom:tZ},t1=(0,s.zo)(t0.Bottom,{stackH:"$paddingBetweenMed"}),t2=(0,s.zo)(t0.Bottom,{display:"none"}),t3=(0,s.zo)(t0.Root,{cursor:"pointer","&:hover":{".testimonial-label":{display:"none"},".testimonial-button":{display:"block"}}}),t5=e=>{let{testimonial:t}=e,{title:n,content:a,status:i,shape:o,link:s,name:l}=t;return(0,r.jsxs)(t3,{background:"$surfaceFg",shape:o,children:[(0,r.jsx)(t0.Title,{children:(0,r.jsx)(q.cC,{children:n})}),(0,r.jsx)(t0.Content,{children:(0,r.jsx)(q.cC,{children:a})}),l&&(0,r.jsx)(P.uT,{variant:"base",css:{paddingTop:"$paddingBetweenLarge"},children:(0,r.jsx)(q.cC,{children:l})}),(0,r.jsxs)(t1,{...s&&{className:"testimonial-label"},children:[(0,r.jsx)(u,{name:"circle",iconCss:{color:"$fgMed"}}),(0,r.jsx)(P.uT,{opacity:"med",children:(0,r.jsx)(q.cC,{children:i})})]}),s&&(0,r.jsx)(t2,{className:"testimonial-button",children:(0,r.jsxs)(h.zx,{variant:"secondary",children:["Visit site",(0,r.jsx)(u,{variant:"small",name:"arrowUpRight"})]})})]})},t6=e=>{let{testimonial:t}=e;return t.link?(0,r.jsx)(e9(),{href:t.link,passHref:!0,target:"_blank",children:(0,r.jsx)(t5,{testimonial:t})}):(0,r.jsx)(t5,{testimonial:t})},t4=e=>{let{testimonial:t}=e,{title:n,content:a,status:i,shape:o,name:s,projectPage:l,id:c}=t;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(tH,{id:c,children:(0,r.jsxs)(t3,{background:"$surfaceFg",shape:o,role:"button",children:[(0,r.jsx)(t0.Title,{children:(0,r.jsx)(q.cC,{children:n})}),(0,r.jsx)(t0.Content,{children:(0,r.jsx)(q.cC,{children:a})}),s&&(0,r.jsx)(P.uT,{variant:"base",css:{paddingTop:"$paddingBetweenLarge"},children:(0,r.jsx)(q.cC,{children:s})}),(0,r.jsxs)(t1,{className:"testimonial-label",children:[(0,r.jsx)(u,{name:"circle",iconCss:{color:"$fgMed"}}),(0,r.jsx)(P.uT,{opacity:"med",children:(0,r.jsx)(q.cC,{children:i})})]}),(0,r.jsx)(t2,{className:"testimonial-button",children:(0,r.jsx)(h.zx,{variant:"secondary",children:"Learn more"})})]})}),(0,r.jsx)(tD,{projectPage:l,id:c})]})},t7=(0,s.zo)("div",{stack:"$paddingContainerLevelOne"}),t9=(0,s.zo)("div",{stack:"$spacerYS",textAlign:"center",alignItems:"center",paddingX:"$spacerYXS","@sm":{paddingTop:"$spacerYXL"}}),t8=(0,s.zo)("div",{display:"grid",width:"inherit",gap:"$paddingContainerLevelOne",gridTemplateColumns:"minmax(0, 1fr)",paddingX:"$paddingContainerLevelOne","@md":{gridTemplateColumns:"repeat(2, minmax(512px, 1fr))"}}),ne=(0,s.zo)("div",{display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gap:"$paddingContainerLevelOne",paddingX:"$paddingContainerLevelOne","@sm":{gridTemplateColumns:"repeat(auto-fit, minmax(375px, 1fr))"}}),nt=()=>{let{t:e}=J("sections.currentlyExploring");return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t9,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("title")}),(0,r.jsx)(P.X6,{variant:"extraLarge",children:e("subtitle")})]}),(0,r.jsxs)(t7,{children:[(0,r.jsx)(t8,{children:W.map((e,t)=>(0,r.jsx)(tQ,{project:e},t))}),(0,r.jsx)(ne,{children:X.map((e,t)=>e.id?(0,r.jsx)(t4,{testimonial:e},t):(0,r.jsx)(t6,{testimonial:e},t))})]})]})},nn=e=>{let{pageName:t,buttonName:n,isNav:a=!1}=e,{pathname:i,push:o}=(0,K.useRouter)(),{t:s}=J("navigation"),l=a?h.fe:h.zx;return(0,r.jsx)(l,{as:a?"li":"button",onClick:()=>o("/".concat(t),void 0,{scroll:!1}),active:i==="/".concat(t),children:n||s("".concat(t))})},nr={alignItems:"center",justifyContent:"center",paddingX:"$paddingContainerLevelTwo",columnGap:"$paddingContainerLevelOne",rowGap:"$spacerYS","& > p":{gridColumn:"1/-1"},"& > button":{gridColumn:"1/-1",marginX:"auto"}},na=()=>{let{t:e}=J("sections.description"),{push:t}=(0,K.useRouter)(),n=e("cta");return(0,r.jsxs)(ea,{fixed:!0,customCSS:nr,children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("title")}),(0,r.jsx)(P.uT,{variant:"large",children:e("body")}),(0,r.jsx)(nn,{pageName:"about",buttonName:n}),(0,r.jsx)(e4,{})]})},ni=tP()(()=>n.e(4).then(n.t.bind(n,2004,23)),{loadableGenerated:{webpack:()=>[2004]},ssr:!1}),no=(0,s.zo)(tu.Stub,{$$paddingAbsolute:"calc($space$paddingContainerLevelTwo * 2)",maxWidth:"calc(100% - $$paddingAbsolute)",'&[data-state="open"]':{display:"block"},'&[data-state="closed"]':{display:"none"},"@sm":{width:"$articleWidthXXS"}}),ns=(0,s.zo)("div",{display:"block",margin:"0 0 $paddingContainerLevelOne","-webkit-column-break-inside":"avoid","page-break-inside":"avoid",breakInside:"avoid",width:"100%","@md":{"&:hover":{".glossary-stub":{display:"block"}}}}),nl=(0,s.zo)(h.hU,{position:"absolute",bottom:"$paddingContainerLevelOne",left:"$paddingContainerLevelOne",backgroundColor:"$surfaceBg!important",borderStyle:"solid",borderColor:"$fgHighInvert",outlineWidth:"thin",outlineStyle:"solid",outlineColor:"$surfaceBg",'&[data-state="open"]':{display:"none"},'&[data-state="closed"]':{display:"flex","@md":{display:"none"}}}),nc=e=>{let{glossary:t}=e,[n,i]=(0,a.useState)(!1),{id:o,letter:s,title:l,image:c,stubText:d}=t;return(0,r.jsx)(ns,{children:(0,r.jsxs)(tu.Root,{children:[(0,r.jsxs)(tu.Ribbon,{hoverable:!1,variant:"small",children:[(0,r.jsx)(tu.RibbonLeft,{children:(0,r.jsx)(eq.Root,{children:(0,r.jsx)(eq.Primary,{variant:"small",children:(0,r.jsx)(q.cC,{children:s})})})}),(0,r.jsx)(tu.RibbonRight,{children:(0,r.jsx)(P.uT,{children:(0,r.jsx)(q.cC,{children:l})})})]}),(0,r.jsxs)(tu.Content,{ratio:c.ratio,portrait:!!c.portrait,forceMobileRatio:c.forceMobileRatio,children:[c.videosrc&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ni,{url:c.videosrc,loop:!0,width:"100%",height:"inherit",playsinline:!0,muted:!0,playing:!0,controls:!1,light:!1,pip:!0}),(0,r.jsx)("source",{src:c.videosrc,type:"video/mp4"})]}

1),c.path&&(0,r.jsx)(eI(),{priority:!0,quality:100,style:{objectFit:"cover",...c.applyFilter&&{filter:"contrast(0.9)"}},src:c.path,alt:l,sizes:"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",fill:!0})]}),(0,r.jsxs)(no,{className:"glossary-stub","data-state":n?"open":"closed",onClick:()=>i(e=>!e),children:[(0,r.jsx)(tu.StubContent,{variant:"small",children:(0,r.jsx)(q.cC,{children:d})}),c.name&&(0,r.jsx)("div",{children:(0,r.jsxs)(P.uT,{variant:"xsmall",children:[(0,r.jsx)("b",{children:"Image "}),(0,r.jsxs)("em",{children:[c.name,", "]}),c.artist]})})]}),(0,r.jsx)(nl,{onClick:()=>i(e=>!e),"data-state":n?"open":"closed",children:(0,r.jsx)(P.uT,{variant:"base",children:"?"})})]})})},nd=(0,s.zo)("div",{columnCount:1,columnGap:"$paddingContainerLevelOne",columnFill:"balance",padding:"0 $paddingContainerLevelOne","@media (min-width: 790px)":{columnCount:2},"@media (min-width: 1177px)":{columnCount:3},"@media (min-width: 1559px)":{columnCount:4},"@media (min-width: 1951px)":{columnCount:5},"@media (min-width: 2338px)":{columnCount:6}}),nu=()=>{let{t:e}=J("sections.glossary");return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t9,{children:[(0,r.jsx)(P.X6,{uppercase:!0,variant:"sub",children:e("title")}),(0,r.jsx)(P.X6,{variant:"extraLarge",children:e("subtitle")})]}),(0,r.jsx)(t7,{children:(0,r.jsx)(nd,{children:F.map((e,t)=>(0,r.jsx)(nc,{glossary:e},t))})})]})},nh=tP()(()=>Promise.all([n.e(737),n.e(685),n.e(263),n.e(324)]).then(n.bind(n,6324)),{loadableGenerated:{webpack:()=>[6324]},ssr:!1}),np=(0,s.zo)("div",{background:"$heroBackground"}),ng=(0,s.zo)("div",{position:"relative",height:"100vh",width:"100vw"}),nm=(0,s.zo)("div",{position:"sticky",top:0,height:"150vh",width:"100vw"}),nA=(0,s.zo)("div",{position:"sticky",top:0,height:"100vh"}),nf={position:"sticky",top:"50%",columnGap:"$paddingContainerLevelOne",justifyContent:"center",textAlign:"center",marginX:"4.3rem",transform:"translateY(-50%)","& > p":{gridColumn:"1/-1",userSelect:"none","-webkit-user-select":"none"}},nv=()=>(0,r.jsx)(np,{children:(0,r.jsx)(ng,{children:(0,r.jsx)(nm,{children:(0,r.jsxs)(nA,{children:[(0,r.jsx)(nh,{}),(0,r.jsx)(ea,{fixed:!0,customCSS:nf,children:(0,r.jsx)(P.X6,{css:{color:"$blackSolid"},children:"What does it mean to build the kind of future weâd like to inhabit?"})})]})})})}),nb=(0,s.zo)("section",{paddingTop:"$spacerYM",paddingBottom:"$spacerYL",borderWidth:"$focus",position:"relative",top:"-$spacerYS",backgroundColor:"$surfaceBg",borderTopRightRadius:"$L",borderTopLeftRadius:"$L",stack:"$spacerYL","@media (prefers-reduced-motion: no-preference)":{transition:"background 0.3s"},"@sm":{paddingTop:"$spacerYL",paddingBottom:"$spacerYXL"}}),nw=()=>{let{pathname:e,push:t}=(0,K.useRouter)(),{t:n}=J("navigation"),i="/"!==e;return(0,a.useEffect)(()=>{i?document.body.style.overflow="hidden":document.body.style.overflow="visible"},[i]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(H.Root,{fixed:!0,css:{zIndex:"20",pointerEvents:"all"},children:[(0,r.jsx)(H.List,{children:(0,r.jsx)(H.Item,{children:(0,r.jsx)(U,{})})}),(0,r.jsxs)(H.List,{children:[(0,r.jsx)(h.fe,{as:"li",onClick:()=>t("/",void 0,{scroll:!1}),active:"/about"!==e&&"/contact"!==e,children:n("p22")}),(0,r.jsx)(nn,{isNav:!0,pageName:"about"}),(0,r.jsx)(nn,{isNav:!0,pageName:"contact"})]})]}),(0,r.jsx)(e4,{}),(0,r.jsx)(tt,{}),(0,r.jsx)(nv,{}),(0,r.jsxs)(nb,{children:[(0,r.jsx)(na,{}),(0,r.jsx)(nt,{}),(0,r.jsx)(nu,{})]})]})};var nx=nw}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.