@uniformdev/context-devtools 12.2.1-alpha.184 → 14.2.1-alpha.119

package/dist/esm/index.js

@@ -0,0 +1,768 @@
+import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}from"@emotion/react";var St=[{title:"Dimensions",href:"/dimensions",icon:`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13 7H11V17H13V7Z" fill="currentColor" />
+    <path
+      d="M5.99996 7.75732L7.41418 9.17154L5.58572 11L9.99996 11V13L5.58579 13L7.41418 14.8284L5.99996 16.2426L1.75732 12L5.99996 7.75732Z"
+      fill="currentColor"
+    />
+    <path
+      d="M18 16.2427L16.5858 14.8285L18.4143 13H14V11L18.4142 11L16.5858 9.17161L18 7.75739L22.2427 12L18 16.2427Z"
+      fill="currentColor"
+    />
+  </svg>
+    `},{title:"Quirks",href:"/quirks",icon:`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M6 6H10V4H4V10H6V6Z" fill="currentColor" />
+    <path d="M10 18H6V14H4V20H10V18Z" fill="currentColor" />
+    <path d="M14 6H18V10H20V4H14V6Z" fill="currentColor" />
+    <path d="M14 18H18V14H20V20H14V18Z" fill="currentColor" />
+    <path
+      d="M12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5Z"
+      fill="currentColor"
+    />
+  </svg>`},{title:"Settings",href:"/settings",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.1469 12.716C19.1986 12.2636 19.201 11.8069 19.1539 11.354L21.7429 9.474C21.8681 9.3822 21.9548 9.24723 21.9862 9.0952C22.0176 8.94316 21.9915 8.78489 21.9129 8.651L19.9939 5.399C19.9182 5.26986 19.7985 5.17231 19.6568 5.1242C19.515 5.07608 19.3606 5.08063 19.2219 5.137L16.3599 6.292C15.9237 5.9578 15.4502 5.67525 14.9489 5.45L14.5739 2.545C14.5547 2.39441 14.4813 2.25598 14.3673 2.15566C14.2534 2.05534 14.1068 1.99999 13.9549 2H10.0859C9.93402 1.99997 9.78728 2.05527 9.67317 2.15558C9.55906 2.25588 9.48539 2.39432 9.46595 2.545L9.09395 5.433C8.63957 5.63249 8.20723 5.87882 7.80395 6.168L5.00895 4.954C4.87173 4.89484 4.71787 4.88672 4.57519 4.9311C4.4325 4.97549 4.3104 5.06945 4.23095 5.196L2.22195 8.398C2.1396 8.52998 2.10934 8.68789 2.13707 8.84096C2.1648 8.99403 2.24854 9.1313 2.37195 9.226L4.86795 11.142C4.83172 11.4266 4.81302 11.7131 4.81195 12C4.81195 12.18 4.82095 12.362 4.83795 12.558L2.26495 14.375C2.13766 14.4647 2.04844 14.5987 2.01478 14.7508C1.98112 14.9028 2.00543 15.0619 2.08295 15.197L3.95695 18.474C4.11095 18.742 4.43695 18.857 4.72595 18.746L7.56095 17.644C8.00795 17.997 8.49195 18.294 9.00795 18.53L9.33795 21.396C9.37495 21.709 9.63795 21.946 9.95195 21.95L13.8169 22H13.8249C14.1349 22 14.3989 21.771 14.4439 21.463L14.8549 18.59C15.3703 18.3674 15.8579 18.0855 16.3079 17.75L19.1279 18.93C19.4129 19.05 19.7419 18.944 19.9029 18.679L21.8669 15.452C21.9477 15.319 21.976 15.1608 21.9464 15.0081C21.9168 14.8554 21.8315 14.7192 21.7069 14.626L19.1469 12.716ZM11.9999 15C10.3459 15 8.99995 13.655 8.99995 12C8.99995 10.346 10.3449 9 11.9999 9C13.6539 9 14.9999 10.345 14.9999 12C14.9999 13.654 13.6539 15 11.9999 15Z" fill="white"/>
+    </svg>
+    `}],ot=({...e})=>{let r=o=>{if(o.preventDefault(),o.currentTarget.pathname)return e.saveSettings({...e.settings,route:o.currentTarget.pathname})},n=o=>{var i;let a="active";return!((i=e.settings)!=null&&i.route)&&o==="/dimensions"||e.settings.route===o?a:""};return t("nav",{css:S`
+        background: var(--brand-secondary-1);
+        padding: var(--spacing-base);
+        min-width: 200px;
+      `},t("a",{css:S`
+          display: inline-block;
+          margin: 0 var(--spacing-base);
+        `,href:"/settings",onClick:o=>r(o)},t("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("g",{clipPath:"url(#clip0_41_612)"},t("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),t("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),t("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),t("path",{d:"M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",fill:"white"})),t("defs",null,t("clipPath",{id:"clip0_41_612"},t("rect",{width:"120",height:"38",fill:"white"}))))),t("ul",{css:S`
+          display: flex;
+          flex-flow: column nowrap;
+          padding: 0;
+          margin: 0;
+          list-style-type: none;
+          height: calc(100% - var(--spacing-base) * 2.5);
+        `},St.map((o,a)=>t("li",{css:S`
+              padding: 0;
+              margin: 0;
+              list-style-type: none;
+
+              &:last-of-type {
+                margin-top: auto;
+              }
+            `,key:a},t("a",{css:S`
+                align-items: center;
+                border-radius: var(--rounded-base);
+                display: flex;
+                color: var(--white);
+                gap: var(--spacing-sm);
+                padding: var(--spacing-sm) var(--spacing-base);
+                text-decoration: none;
+                transition: background-color 0.25s ease-in-out;
+
+                &:hover,
+                &.active {
+                  background: var(--gray-700);
+                }
+              `,className:n(o.href),href:o.href,title:o.title,onClick:i=>r(i)},t("i",{css:S`
+                  align-items: center;
+                  display: flex;
+                `,dangerouslySetInnerHTML:{__html:o.icon}}),o.title)))))};var rt=()=>t("article",null,t("h1",null,"Something when wrong"),t("p",null,"We could not find the page you're looking for."));import*as _ from"react";import{css as H}from"@emotion/react";import*as I from"react";var nt=H({willChange:"height"}),Ht=H`
+  border-bottom: 2px solid var(--brand-secondary-1);
+  font-size: var(--font-base);
+  margin: 0;
+`,Vt=H`
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-sm) 0;
+  font-weight: var(--font-bold);
+  justify-content: space-between;
+`,Pt=H`
+  align-self: center;
+`,At=H`
+  transform: rotate(-180deg);
+`,E=({children:e})=>t("div",{css:[nt]},e),B=({title:e,children:r})=>{let[n,o]=I.useState(!1),a=e.split(" ").join("-").toLocaleLowerCase();return t(I.Fragment,null,t("h3",{css:Ht},t("button",{"aria-expanded":n,css:Vt,title:e,id:a,"aria-controls":`${a}-section`,onClick:()=>o(i=>!i),type:"button"},e,t("i",{css:[Pt,n?At:void 0]},t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),t("div",{id:`${a}-section`,css:[nt,H`
+            padding: var(--spacing-sm) 0;
+          `],role:"region","aria-labelledby":a},n?r:null))};import{css as T}from"@emotion/react";import*as at from"react";var Mt=T`
+  align-items: center;
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
+  padding: var(--spacing-sm) var(--spacing-base);
+  transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  font-size: var(--font-sm);
+  &:hover {
+    opacity: 0.8;
+  }
+`;function zt(e){let r=T`
+    color: var(--white);
+  `,n=T`
+    font-weight: var(--font-bold);
+  `;switch(e){case"primary":return T`
+        background: var(--brand-secondary-1);
+        ${r}
+        ${n}
+      `;case"secondary":return T`
+        background: var(--brand-secondary-5);
+        ${r}
+        ${n}
+      `;case"unimportant":return T`
+        background: var(--brand-secondary-3);
+        color: var(--brand-secondary-1);
+        ${n}
+      `;case"ghost":return T`
+        background: transparent;
+        color: var(--brand-secondary-5);
+        &:hover {
+          border: 1px solid var(--brand-secondary-5);
+        }
+      `}}var k=({buttonType:e="primary",children:r,className:n,...o})=>t(at.Fragment,null,t("button",{type:"button",css:[Mt,zt(e)],className:n,...o},r));import{css as V}from"@emotion/react";var F=V`
+  background-color: var(--gray-100);
+  padding: var(--spacing-base) var(--spacing-md);
+  margin: var(--spacing-base) 0;
+  position: relative;
+  &:first-of-type {
+    margin: 0 0 var(--spacing-base);
+  }
+`,it=V`
+  background: var(--gray-100)
+    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 2C8.44771 2 8 2.44772 8 3V5C8 5.55228 8.44771 6 9 6C9.55229 6 10 5.55228 10 5V3C10 2.44772 9.55229 2 9 2ZM8 9H16V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V9ZM13 16.917C15.8377 16.441 18 13.973 18 11V7H6V11C6 13.973 8.16229 16.441 11 16.917V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V16.917ZM14 3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6C14.4477 6 14 5.55228 14 5V3Z' fill='%232ecdb4' /%3E%3C/svg%3E")
+    no-repeat var(--spacing-sm) var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-xl);
+`,Z=V`
+  color: var(--brand-secondary-1);
+  margin: 0;
+  font-size: var(--font-base);
+  font-weight: var(--font-bold);
+`,U=V`
+  color: var(--brand-secondary-1);
+  margin: var(--spacing-xs) 0 0;
+  font-size: var(--font-sm);
+`,st=V`
+  align-items: center;
+  border: none;
+  background: transparent
+    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='%232ecdb4' /%3E%3C/svg%3E")
+    no-repeat center center;
+  cursor: pointer;
+  color: var(--brand-secondary-3);
+  display: flex;
+  padding: 0;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: var(--spacing-base);
+  right: var(--spacing-sm);
+  transition: opacity 0.2s ease-in-out;
+
+  &:hover {
+    opacity: 0.6;
+  }
+`,N=V`
+  display: flex;
+  margin: var(--spacing-sm) 0 0;
+  gap: var(--spacing-base);
+`;var O=({title:e,text:r,buttonGroup:n,children:o})=>t("div",{css:F},t("h2",{css:Z},e),t("p",{css:U},r),o,n?t("div",{css:N},n):null);import{css as A}from"@emotion/react";var ct=A`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: var(--spacing-xs);
+`,lt=A`
+  color: var(--gray-500);
+  font-size: var(--font-sm);
+`,be=A`
+  background: var(--gray-600);
+`,pt=A`
+  display: block;
+  background: var(--gray-400);
+  border-radius: var(--rounded-full);
+  position: relative;
+  height: 16px;
+  width: 32px;
+  &:before {
+    border-radius: var(--rounded-full);
+    background: var(--white);
+    content: '';
+    display: block;
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    transform: translateX(2px);
+    transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
+  }
+`,dt=A`
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  height: 0;
+  width: 0;
+  text-indent: -9999px;
+
+  &:checked ~ :before {
+    transform: translateX(17px);
+  }
+
+  &:checked ~ span {
+    background: var(--brand-secondary-5);
+  }
+`;var mt=({label:e,...r})=>t("label",{css:ct},t("span",{css:lt},e),t("input",{type:"checkbox",css:dt,...r}),t("span",{css:pt}));import{css as y}from"@emotion/react";var M=({children:e})=>t("table",{css:y`
+        border-collapse: collapse;
+        display: table;
+        width: 100%;
+        font-size: var(--font-sm);
+      `},e),ut=({children:e})=>t("thead",{css:y`
+        background: var(--gray-50);
+        text-align: left;
+        & tr {
+          border-bottom: 1px solid var(--gray-200);
+        }
+      `},e),z=({children:e})=>t("tbody",null,e),P=({border:e,children:r})=>t("tr",{css:e?y`
+              border-bottom: 1px solid var(--gray-200);
+              &:where(:last-child) {
+                border: none;
+              }
+            `:void 0},r),J=({children:e})=>t("th",{css:y`
+        outline: none;
+        padding: var(--spacing-sm);
+      `},e);function It(e){switch(e){case"light":return y`
+        color: var(--gray-400);
+      `;case"dark":return y`
+        color: var(--brand-secondary-1);
+      `}}function Et(e){return y`
+    text-align: ${e};
+  `}var w=({alignment:e="left",border:r,color:n="dark",children:o})=>t("td",{css:[y`
+          padding: var(--spacing-base);
+          max-width: 180px;
+          overflow-wrap: break-word;
+          position: relative;
+        `,It(n),Et(e),r?y`
+              border-left: 1px solid var(--gray-200);
+            `:void 0]},o);import{css as x,keyframes as Bt}from"@emotion/react";var Ft=Bt`from {
+  transform: scale(1);
+}
+to {
+  transform: scale(1.2);
+}
+`,g={page:x`
+    color: var(--brand-secondary-1);
+  `,text:x`
+    margin: var(--spacing-sm) 0;
+  `,title:x`
+    margin: 0 0 var(--spacing-sm);
+    font-size: var(--font-md);
+    & > small {
+      display: block;
+      font-size: var(--font-xs);
+      font-weight: var(--font-regular);
+      margin: var(--spacing-xxs) 0 0;
+    }
+  `,headingGroup:x`
+    align-items: baseline;
+    display: flex;
+    justify-content: space-between;
+  `,divider:x`
+    background: var(--gray-300);
+    display: block;
+    width: 1px;
+    height: calc(100% - 1rem);
+    position: absolute;
+    inset: 0 auto 0 0;
+    margin: auto 0;
+  `,submitButton:x`
+    position: absolute;
+    right: var(--spacing-base);
+    bottom: var(--spacing-base);
+    animation: 0.5s 2 alternate ${Ft};
+  `,error:x`
+    color: var(--brand-secondary-5);
+    font-size: var(--font-sm);
+  `};var gt=({dimensionIndex:{index:e},state:{scores:r,data:n},actions:o})=>{let a=_.useMemo(()=>Object.keys(e).filter(l=>!r[l]).map(l=>{var p;return(p=e[l])!=null?p:{name:l,dim:l,type:"Unknown"}}),[r,e]),i=Object.keys(r).length,u=i+a.length,f=()=>{o.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])};return t(_.Fragment,null,t("article",{css:g.page},t("div",{css:g.headingGroup},t("h2",{css:g.title},"Dimensions",t("small",null,i," active of ",u)),t(mt,{label:"Control Group",onChange:f,checked:n.controlGroup})),i>0?t(M,null,t(z,null,Object.entries(r).map(([l,p],d)=>{var C;let{name:h,type:v,category:b}=(C=e==null?void 0:e[l])!=null?C:{name:l,dim:l,type:"Unknown"};return t(P,{key:d},t(w,null,t("b",null,p)),t(w,null,t("span",{css:g.divider,role:"presentation"}),t("strong",null,b?`${b}:`:""," ",h)),t(w,{alignment:"right",color:"light"},v))}))):t(O,{title:n.controlGroup?"In control group":"No active dimensions",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:n.controlGroup?t(k,{buttonType:"secondary",onClick:f},"Exit control group"):null}),t(E,null,t(B,{title:"Inactive Dimensions"},t(M,null,t(z,null,a.map(({dim:l,type:p,name:d,category:h})=>t(P,{key:l},t(w,null,t("strong",null,h?`${h}:`:""," ",d)),t(w,{alignment:"right",color:"light"},p)))))))))};var bt=({...e})=>{let{state:{data:r}}=e;return t(m.Fragment,null,t("article",{css:g.page},t("h1",{css:g.title},"Quirks"),t("p",{css:g.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(r.quirks).length?t(M,null,t(ut,null,t(P,null,t(J,null,"Key"),t(J,null,"Value"))),t(z,null,Object.entries(r.quirks).map(([n,o],a)=>t(P,{key:a,border:"bottom"},t(w,null,t("strong",null,n)),t(w,null,o))))):t(O,{title:"No quirks configured",text:"There are currently no quirks setup."})))};import{Field as X,Form as _t,Formik as Gt}from"formik";import{ErrorMessage as Zt}from"formik";import{css as D}from"@emotion/react";var ft=D`
+  background: var(--white);
+  border: 1px solid var(--gray-500);
+  border-radius: var(--rounded-base);
+  color: var(--brand-secondary-1);
+  padding: var(--spacing-base);
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--gray-200);
+  }
+`,ht=D`
+  appearance: none;
+  background: var(--white) url('./assets/chevon-down.svg') no-repeat 98% 50%;
+  border: 1px solid var(--gray-500);
+  border-radius: var(--rounded-base);
+  color: var(--brand-secondary-1);
+  padding: var(--spacing-base);
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--gray-200);
+  }
+`,G=D`
+  margin: var(--spacing-base) 0;
+`,K=D`
+  color: var(--brand-secondary-1);
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 var(--spacing-sm);
+`,$=D`
+  color: var(--brand-secondary-1);
+  display: block;
+  font-weight: var(--font-bold);
+  margin: 0 0 var(--spacing-sm);
+`,q=D`
+  color: var(--gray-600);
+  font-size: var(--font-sm);
+`,W=D`
+  color: var(--brand-secondary-5);
+  display: block;
+`;var Q=({field:e,form:r,meta:n,...o})=>{let{label:a,caption:i,...u}=o;return t("div",{css:G},t("label",{css:K},t("span",{css:$},a),t("input",{type:"text",css:ft,...e,...u})),i?t("span",{css:q},i):null,t(Zt,{component:"div",css:W,name:e.name}))};import{ErrorMessage as Ut}from"formik";var vt=({field:e,form:r,meta:n,...o})=>{let{label:a,options:i,caption:u,...f}=o;return t("div",{css:G},t("label",{css:K},t("span",{css:$},a),t("select",{...e,...f,css:ht},i.map((l,p)=>t("option",{value:l.value,key:p},l.text)))),u?t("span",{css:q},u):null,t(Ut,{component:"div",css:W,name:e.name}))};import*as R from"yup";import{css as Nt}from"@emotion/react";var j=({children:e,...r})=>t("fieldset",{css:Nt`
+        border: none;
+        padding: 0;
+      `,...r},e);import{css as Ot}from"@emotion/react";var tt=({children:e})=>t("legend",{css:Ot`
+        font-size: var(--font-base);
+        font-weight: var(--font-bold);
+      `},e);var Kt=R.object({apiKey:R.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:R.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logLevel:R.string(),projectId:R.string().uuid()}),yt=({settings:e,saveSettings:r,dimensionIndex:{error:n,loading:o}})=>{let a=[{value:"none",text:"Logging off"},{value:"info",text:"Log info, warnings, and errors"},{value:"warn",text:"Log warnings and errors"},{value:"error",text:"Log errors"},{value:"debug",text:"Verbose debug logging"}];return t(Gt,{initialValues:{apiHost:"",apiKey:"",projectId:"",logLevel:"none",...e},validationSchema:Kt,enableReinitialize:!0,onSubmit:i=>{r({...e,apiHost:i.apiHost,apiKey:i.apiKey,projectId:i.projectId,logLevel:i.logLevel})}},({dirty:i,isValid:u,isSubmitting:f})=>t(_t,{css:g.page},t("h1",{css:g.title},"Settings"),t(X,{component:vt,label:"Logging",caption:"Logs can be viewed in the browser console",id:"logging",name:"logLevel",options:a,disabled:f}),t(j,{disabled:f},t(tt,null,"Data Connection"),!o&&n?t("p",{css:g.error},"Unable to fetch data from Uniform",t("br",null),t("em",null,n.message)):null,t("p",{css:g.text},t("small",null,"Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")),t(X,{component:Q,label:"Uniform API key",caption:"Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",id:"api-key",name:"apiKey",autoComplete:"off"}),t(X,{component:Q,label:"Uniform Project ID",caption:"Available after generating an API key ",id:"project-id",name:"projectId",autoComplete:"off"}),t(E,null,t(B,{title:"Advanced"},t(X,{component:Q,label:"Alternative API Host",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option.",id:"api-host",name:"apiHost",autoComplete:"off"}))),i?t(k,{type:"submit",css:g.submitButton,disabled:!u},"Save"):null)))};var et=({settings:e,saveSettings:r})=>{let n=()=>{r({...e,route:"/settings"})},o=()=>{r({...e,ignoreApiKeyPrompt:!0})},a=!(e!=null&&e.apiKey);return!e.ignoreApiKeyPrompt&&a?t("div",{css:[F,it]},t("h2",{css:Z},"Connect this site"),t("p",{css:U},"Add a Uniform API key to get better data."),t("div",{css:N},t(k,{buttonType:"secondary",onClick:n},"Connect this site"),t(k,{buttonType:"ghost",onClick:o},"Skip for now")),t("button",{type:"button",css:st,title:"close",onClick:o},t("span",{hidden:!0},"Close"))):null};import{computeDimensionDefinitionDisplayData as $t,computeDimensionDisplayData as wt,DimensionClient as qt}from"@uniformdev/context/api";import{useAsync as Wt}from"react-use";import*as Ct from"react";function Lt({apiHost:e,apiKey:r,projectId:n},o){let a=Ct.useMemo(()=>{var p,d,h,v;let l={};return o&&(Object.keys((d=(p=o==null?void 0:o.project.pz)==null?void 0:p.sig)!=null?d:{}).forEach(b=>{let C=wt(b,o);C&&(l[b]=C)}),Object.keys((v=(h=o==null?void 0:o.project.pz)==null?void 0:h.agg)!=null?v:{}).forEach(b=>{let C=wt(b,o);C&&(l[b]=C)})),l},[o]),{loading:i,error:u,value:f}=Wt(async()=>{if(!r||!n)return a;let p=(await new qt({projectId:n,apiKey:r,apiHost:e||void 0}).get()).dimensions,d={...a};return p.forEach(h=>{d[h.dim]=$t(h)}),d},[e,r,n,a]);return{loading:i,error:u,index:f!=null?f:a}}import{css as Tt}from"@emotion/react";function Y(){return t("style",null,`
+  :root {
+    --brand-primary-1: #438fd5; /* bright blue */
+    --brand-primary-2: #f4220b; /* red */
+    --brand-primary-3: #83c6e1; /* slate blue */
+
+    /* secondary colours */
+    --brand-secondary-1: #1f2b34; /* carbon */
+    --brand-secondary-2: #ecf1f1; /* silver */
+    --brand-secondary-3: #2ecdb4; /* teal */
+    --brand-secondary-4: #f6f1c3; /* yellow */
+    --brand-secondary-5: #d9534f; /* brick red */
+    --brand-secondary-6: #dbf6f2; /* mint */
+
+    /* off brand */
+    --input-border: rgba(31, 43, 52, 0.5);
+
+    /* site settings */
+    --site-width: 700px;
+    --min-height: 450px;
+
+    --spacing-base: 1.15rem;
+    --spacing-xs: calc(var(--spacing-base) - 0.75rem);
+    --spacing-sm: calc(var(--spacing-base) - 0.5rem);
+    --spacing-md: calc(var(--spacing-base) * 1.5);
+    --spacing-lg: calc(var(--spacing-base) * 2);
+    --spacing-xl: calc(var(--spacing-base) * 2.5);
+
+    /* font sizes */
+    --font-base: 1rem; /* 16px */
+    --font-xxs: calc(var(--font-base) - 0.5rem);
+    --font-xs: calc(var(--font-base) - 0.25rem);
+    --font-sm: calc(var(--font-base) - 0.125rem); /* 14px */
+    --font-md: calc(var(--font-base) * 1.25);
+    --font-lg: calc(var(--font-base) * 1.5);
+
+    /* font-weight */
+    --font-regular: 400;
+    --font-bold: 700;
+
+    /* brand shadow styles */
+    --shadow-base: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+
+    /* rounder corners  */
+    --rounded-base: 6px;
+    --rounded-full: 99999px;
+
+    /* gray spectrum */
+    --white: #fff;
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+
+    /* z-indexs */
+    --z-10: 10;
+  }
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+html {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+	margin: 0;
+}
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet system-ui */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}`)}var Qt=Tt`
+  background: var(--white);
+  padding: var(--spacing-base);
+  overflow-y: auto;
+  @supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
+    /*
+        #d1d5db = bg-gray-300
+        scrollbar-color first arg is the thumb, the second arg is the trackbar color
+        hover state in firefox is controlled within the browser
+     */
+    scrollbar-color: #d1d5db transparent;
+    scrollbar-width: thin;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: var(--rounded-base);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--gray-300);
+    border-radius: var(--rounded-base);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-500);
+  }
+`;function kt(e){let r=Lt(e.settings,e.state.manifest),n={...e,dimensionIndex:r},o=()=>{var a;switch((a=e.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return t(gt,{...n});case"/quirks":return t(bt,{...n});case"/settings":return t(yt,{...n});default:return t(rt,null)}};return t(m.Fragment,null,t(Y,null),t("div",{css:Tt`
+          display: grid;
+          grid-template-columns: 200px auto;
+          font-weight: var(--font-regular);
+          font-size: var(--base-font-size);
+          font-family: var(--base-font-family);
+          line-height: var(--base-line-height);
+          height: var(--min-height);
+          min-width: var(--site-width);
+        `},t(ot,{...e}),t("main",{css:Qt},t(et,{...e}),o())))}import{Context as Xt,createDebugConsoleLogDrain as Yt}from"@uniformdev/context";import*as L from"react";function xt({context:e,initialSettings:r}){let n=e!=null?e:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new Xt({manifest:{project:{}}}),[a,i]=L.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[u,f]=L.useState(r!=null?r:{});L.useEffect(()=>{var d;let p=Yt((d=u.logLevel)!=null?d:"none");return o.events.on("log",p),()=>{o.events.off("log",p)}},[u,o]),L.useEffect(()=>{let p=()=>{i(v=>({...v,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},d=v=>{!v.changed||i(b=>({...b,personalizations:[...b.personalizations,v]}))},h=v=>{!v.variantAssigned||i(b=>({...b,tests:[...b.tests,v]}))};return o.events.on("personalizationResult",d),o.events.on("testResult",h),o.storage.events.on("*",p),()=>{o.storage.events.off("*",p),o.events.off("personalizationResult",d),o.events.off("testResult",h)}},[o,u]);let l=L.useMemo(()=>({update:d=>o.update(d),forget:()=>o.forget(!1),rawUpdate:d=>o.storage.updateData(d)}),[o]);return n?t(kt,{state:a,actions:l,settings:u,saveSettings:f}):t("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}import{css as te}from"@emotion/react";import*as Rt from"react";import{css as Jt}from"@emotion/react";var jt=Jt`
+  align-items: center;
+  border-radius: var(--rounded-full);
+  background: var(--brand-secondary-5);
+  border: none;
+  box-shadow: var(--shadow-base);
+  color: var(--white);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  bottom: var(--spacing-base);
+  right: var(--spacing-base);
+  z-index: 20;
+  width: 52px;
+  height: 52px;
+  transform: scale(0.9);
+  transition: transform 0.25s ease-in-out;
+  &:hover {
+    transform: scale(1);
+  }
+  & svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+`,Dt=({...e})=>t("button",{type:"button",css:jt,...e},t("span",{hidden:!0},"Uniform devtools"),t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),t("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),t("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function Fo(e){var a;let[r,n]=Rt.useState(!1);return((a=e.context)!=null?a:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?t("div",null,t(Y,null),t(Dt,{onClick:()=>n(i=>!i)}),r?t("div",{css:te`
+            box-shadow: var(--shadow-base);
+            position: fixed;
+            bottom: 82px;
+            right: var(--spacing-base);
+            z-index: var(--z-10);
+            max-width: var(--site-width);
+          `},t(xt,{...e})):null):t("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{kt as ContextDevTools,xt as EmbeddedContextDevTools,Fo as ToggleEmbeddedContextDevTools};