@uniformdev/context-devtools 17.7.1-alpha.34 → 18.0.0

package/dist/esm/index.js

@@ -1,4 +1,160 @@
-import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}from"@emotion/react";import{Theme as sr}from"@uniformdev/design-system";import{computeDimensionDefinitionDisplayData as Nt,computeDimensionDisplayData as Ae,UncachedDimensionClient as Zt}from"@uniformdev/context/api";import*as Be from"react";import{useAsync as zt}from"react-use";function Qe({apiHost:e,apiKey:o,projectId:r},t){let{loading:n,error:s,value:l}=zt(async()=>{if(!o||!r)return d;let m=(await new Zt({projectId:r,apiKey:o,apiHost:e||void 0}).get()).dimensions,i={};return m.map(a=>{var c,v,u,f,C,w,k,q;if(i[a.dim]={...Nt(a),cap:a.cap,str:(f=(u=(v=(c=t==null?void 0:t.project.pz)==null?void 0:c.sig)==null?void 0:v[a.dim])==null?void 0:u.str)!=null?f:50},i[a.dim].type==="Enrichment"){let N=a.dim.split("_")[0];i[a.dim].cap=(q=(k=(w=(C=t==null?void 0:t.project.pz)==null?void 0:C.enr)==null?void 0:w[N])==null?void 0:k.cap)!=null?q:100}}),i},[e,o,r]),d=Be.useMemo(()=>{var m,i,a,c;let p={};return t&&(Object.entries((i=(m=t==null?void 0:t.project.pz)==null?void 0:m.sig)!=null?i:{}).map(([v,u])=>{let f=Ae(v,t);f&&(p[v]={...u,...f})}),Object.entries((c=(a=t==null?void 0:t.project.pz)==null?void 0:a.enr)!=null?c:{}).map(([v,u])=>{var w;let f=Ae(v,t),C={cap:(w=u.cap)!=null?w:100,str:10};f&&(p[v]={...f,cap:C.cap,str:C.str})}),l&&Object.entries(l).map(([v,u])=>{p[v]={...p[v],...u}})),p},[t,l]);return{loading:n,error:s,index:d}}import{UncachedQuirkClient as Ut}from"@uniformdev/context/api";import{useMemo as jt}from"react";import{useAsync as _t}from"react-use";function Fe({apiHost:e,apiKey:o,projectId:r},t){let{loading:n,error:s,value:l}=_t(async()=>{if(!o||!r)return{};let m=await new Ut({projectId:r,apiKey:o,apiHost:e||void 0}).get(),i={};return m.quirks.map(a=>{i[a.id]={...a,value:t[a.id]}}),i},[e,o,r]),d=jt(()=>{let p={};return Object.entries(t).map(([m,i])=>p[m]={value:i,id:m,name:m}),l&&Object.entries(l).map(([m,i])=>p[m]={...i,value:t[m]}),p},[t,l]);return{loading:n,error:s,index:d}}import{createContext as Gt,useContext as $t}from"react";import{jsx as Kt}from"@emotion/react/jsx-runtime";var qe=Gt({settings:{},saveSettings:()=>{}}),ce=()=>$t(qe),Ne=({children:e,settings:o,saveSettings:r})=>Kt(qe.Provider,{value:{settings:o,saveSettings:r},children:e});import{jsx as Wt}from"@emotion/react/jsx-runtime";function le(){return Wt("style",{children:`
+// ../../scripts/emotion-jsx-shim.js
+import { jsx } from "@emotion/react";
+import * as React from "react";
+
+// src/components/ContextDevTools.tsx
+import { css as css12 } from "@emotion/react";
+import { Theme as DesignSystemTheme } from "@uniformdev/design-system";
+
+// src/hooks/useDimensionIndex.ts
+import {
+  computeDimensionDefinitionDisplayData,
+  computeDimensionDisplayData,
+  UncachedDimensionClient
+} from "@uniformdev/context/api";
+import * as React2 from "react";
+import { useAsync } from "react-use";
+function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
+  const { loading, error, value } = useAsync(async () => {
+    if (!apiKey || !projectId) {
+      return manifestData;
+    }
+    const client = new UncachedDimensionClient({
+      projectId,
+      apiKey,
+      apiHost: apiHost ? apiHost : void 0
+    });
+    const dimensions = (await client.get()).dimensions;
+    const result = {};
+    dimensions.map((dimension) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      result[dimension.dim] = {
+        ...computeDimensionDefinitionDisplayData(dimension),
+        cap: dimension.cap,
+        str: (_d = (_c = (_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) == null ? void 0 : _b[dimension.dim]) == null ? void 0 : _c.str) != null ? _d : 50
+      };
+      if (result[dimension.dim].type === "Enrichment") {
+        const enrId = dimension.dim.split("_")[0];
+        result[dimension.dim].cap = (_h = (_g = (_f = (_e = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _e.enr) == null ? void 0 : _f[enrId]) == null ? void 0 : _g.cap) != null ? _h : 100;
+      }
+    });
+    return result;
+  }, [apiHost, apiKey, projectId]);
+  const manifestData = React2.useMemo(() => {
+    var _a, _b, _c, _d;
+    const data = {};
+    if (!manifest) {
+      return data;
+    }
+    Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
+      const dim = computeDimensionDisplayData(dimensionId, manifest);
+      if (dim) {
+        data[dimensionId] = { ...dimension, ...dim };
+      }
+    });
+    Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
+      var _a2;
+      const dim = computeDimensionDisplayData(dimensionId, manifest);
+      const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
+      if (dim) {
+        data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
+      }
+    });
+    if (value) {
+      Object.entries(value).map(([dimensionId, dimension]) => {
+        data[dimensionId] = {
+          ...data[dimensionId],
+          ...dimension
+        };
+      });
+    }
+    return data;
+  }, [manifest, value]);
+  return {
+    loading,
+    error,
+    index: manifestData
+  };
+}
+
+// src/hooks/useQuirkIndex.ts
+import { UncachedQuirkClient } from "@uniformdev/context/api";
+import { useMemo as useMemo2 } from "react";
+import { useAsync as useAsync2 } from "react-use";
+function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
+  const { loading, error, value } = useAsync2(async () => {
+    if (!apiKey || !projectId) {
+      return {};
+    }
+    const client = new UncachedQuirkClient({
+      projectId,
+      apiKey,
+      apiHost: apiHost ? apiHost : void 0
+    });
+    const quirksResponse = await client.get();
+    const quirksIndexData = {};
+    quirksResponse.quirks.map((quirkData) => {
+      quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
+    });
+    return quirksIndexData;
+  }, [apiHost, apiKey, projectId]);
+  const contextStateQuirkData = useMemo2(() => {
+    const data = {};
+    Object.entries(quirksData).map(
+      ([quirkId, queryrValue]) => data[quirkId] = {
+        value: queryrValue,
+        id: quirkId,
+        name: quirkId
+      }
+    );
+    if (value) {
+      Object.entries(value).map(
+        ([quirkId, quirkValue]) => data[quirkId] = {
+          ...quirkValue,
+          value: quirksData[quirkId]
+        }
+      );
+    }
+    return data;
+  }, [quirksData, value]);
+  return {
+    loading,
+    error,
+    index: contextStateQuirkData
+  };
+}
+
+// src/lib/DevToolsSettingsContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
+var DevToolsSettingsContext = createContext({
+  settings: {},
+  saveSettings: () => {
+    return;
+  }
+});
+var useDevToolsSettingsContext = () => useContext(DevToolsSettingsContext);
+var DevToolsSettingsContextProvider = ({
+  children,
+  settings,
+  saveSettings
+}) => {
+  return /* @__PURE__ */ jsx2(
+    DevToolsSettingsContext.Provider,
+    {
+      value: {
+        settings,
+        saveSettings
+      },
+      children
+    }
+  );
+};
+
+// src/utils/Theme.tsx
+import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
+function Theme() {
+  return /* @__PURE__ */ jsx3("style", { children: `
   :root {
     --site-width: 700px;
 
@@ -8,7 +164,15 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
 
     --min-height: 450px;
   }
-  `})}import{Button as Ue}from"@uniformdev/design-system";import{css as j}from"@emotion/react";var de=j`
+  ` });
+}
+
+// src/components/CallToAction/ConnectApiKey.tsx
+import { Button } from "@uniformdev/design-system";
+
+// src/components/CallToAction/cta.styles.ts
+import { css } from "@emotion/react";
+var cta = css`
   background-color: var(--gray-100);
   padding: var(--spacing-base) var(--spacing-md);
   margin: var(--spacing-base) 0;
@@ -16,21 +180,25 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
   &:first-of-type {
     margin: 0 0 var(--spacing-base);
   }
-`,Ze=j`
+`;
+var ctaWithIcon = css`
   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);
-`,pe=j`
+`;
+var ctaTitle = css`
   color: var(--brand-secondary-1);
   margin: 0;
   font-size: var(--fs-base);
   font-weight: var(--fw-bold);
-`,me=j`
+`;
+var ctaText = css`
   color: var(--brand-secondary-1);
   margin: var(--spacing-xs) 0 0;
   font-size: var(--fs-sm);
-`,ze=j`
+`;
+var ctaClose = css`
   align-items: center;
   border: none;
   background: transparent
@@ -50,17 +218,86 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
   &:hover {
     opacity: 0.6;
   }
-`,ue=j`
+`;
+var ctaBtnGroup = css`
   display: flex;
   margin: var(--spacing-sm) 0 0;
   gap: var(--spacing-base);
-`;import{jsx as _,jsxs as je}from"@emotion/react/jsx-runtime";var Se=({settings:e,saveSettings:o})=>{let r=()=>{o({...e,route:"/connect"})},t=()=>{o({...e,ignoreApiKeyPrompt:!0})},n=e.route==="/connect",s=!(e!=null&&e.apiKey);return!e.ignoreApiKeyPrompt&&s&&!n?je("div",{css:[de,Ze],children:[_("h2",{css:pe,children:"Connect to a Uniform Project"}),_("p",{css:me,children:"This allows reading human-readable labels for the dimensions."}),je("div",{css:ue,children:[_(Ue,{buttonType:"secondary",onClick:r,children:"Connect this site"}),_(Ue,{buttonType:"ghost",onClick:t,children:"Skip for now"})]}),_("button",{type:"button",css:ze,title:"close",onClick:t,children:_("span",{hidden:!0,children:"Close"})})]}):null};import{css as V}from"@emotion/react";import{css as Yt}from"@emotion/react";import{jsx as Jt}from"@emotion/react/jsx-runtime";var _e=()=>{var r;let e=typeof chrome!="undefined"&&typeof chrome.storage!="undefined"&&((r=chrome==null?void 0:chrome.runtime)==null?void 0:r.getManifest()),o=e?e==null?void 0:e.version:"DEV";return Jt("div",{css:Yt`
+`;
+
+// src/components/CallToAction/ConnectApiKey.tsx
+import { jsx as jsx4, jsxs } from "@emotion/react/jsx-runtime";
+var ConnectApiKey = ({ settings, saveSettings }) => {
+  const handleRedirect = () => {
+    saveSettings({ ...settings, route: "/connect" });
+  };
+  const dismissPrompt = () => {
+    saveSettings({ ...settings, ignoreApiKeyPrompt: true });
+  };
+  const isOnConnect = settings.route === "/connect";
+  const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
+  return !settings.ignoreApiKeyPrompt && missingApiKey && !isOnConnect ? /* @__PURE__ */ jsxs("div", { css: [cta, ctaWithIcon], children: [
+    /* @__PURE__ */ jsx4("h2", { css: ctaTitle, children: "Connect to a Uniform Project" }),
+    /* @__PURE__ */ jsx4("p", { css: ctaText, children: "This allows reading human-readable labels for the dimensions." }),
+    /* @__PURE__ */ jsxs("div", { css: ctaBtnGroup, children: [
+      /* @__PURE__ */ jsx4(Button, { buttonType: "secondary", onClick: handleRedirect, children: "Connect this site" }),
+      /* @__PURE__ */ jsx4(Button, { buttonType: "ghost", onClick: dismissPrompt, children: "Skip for now" })
+    ] }),
+    /* @__PURE__ */ jsx4("button", { type: "button", css: ctaClose, title: "close", onClick: dismissPrompt, children: /* @__PURE__ */ jsx4("span", { hidden: true, children: "Close" }) })
+  ] }) : null;
+};
+
+// src/components/Navigation/Menu.tsx
+import { css as css3 } from "@emotion/react";
+
+// src/components/ExtensionVersion.tsx
+import { css as css2 } from "@emotion/react";
+import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
+var ExtensionVersion = () => {
+  var _a;
+  const manifestData = typeof chrome !== "undefined" && typeof chrome.storage !== "undefined" && ((_a = chrome == null ? void 0 : chrome.runtime) == null ? void 0 : _a.getManifest());
+  const extensionVersion = manifestData ? manifestData == null ? void 0 : manifestData.version : "DEV";
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      css: css2`
         font-size: var(--fs-sm);
         color: var(--gray-400);
         position: absolute;
         bottom: 2px;
         right: 5px;
-      `,children:`v${o}`})};import{jsx as eo}from"@emotion/react/jsx-runtime";var Xt=({route:e,children:o,className:r})=>{let{settings:t,saveSettings:n}=ce();return eo("a",{href:"",className:r,onClick:s=>{s.preventDefault(),n({...t,route:e})},children:o})},G=Xt;import{jsx as T,jsxs as re}from"@emotion/react/jsx-runtime";var to=[{title:"Dimensions",href:"/dimensions",icon:`<svg
+      `,
+      children: `v${extensionVersion}`
+    }
+  );
+};
+
+// src/components/Navigation/NavigationLink.tsx
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+var NavigationLink = ({ route, children, className }) => {
+  const { settings, saveSettings } = useDevToolsSettingsContext();
+  return /* @__PURE__ */ jsx6(
+    "a",
+    {
+      href: "",
+      className,
+      onClick: (e) => {
+        e.preventDefault();
+        saveSettings({ ...settings, route });
+      },
+      children
+    }
+  );
+};
+var NavigationLink_default = NavigationLink;
+
+// src/components/Navigation/Menu.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var links = [
+  {
+    title: "Dimensions",
+    href: "/dimensions",
+    icon: `<svg
     width="24"
     height="24"
     viewBox="0 0 24 24"
@@ -77,10 +314,20 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
       fill="currentColor"
     />
   </svg>
-    `},{title:"What if?",href:"/overrides",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    `
+  },
+  {
+    title: "What if?",
+    href: "/overrides",
+    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5123 7.91666L14.5804 8.4343L13.9179 5.96175L11.3371 10.0021L11.3575 10.0143C11.1348 10.3854 10.8997 10.7125 10.6556 11.0003H18.7603L16.9135 9.15347L18.3277 7.73926L22.5703 11.9819L18.3276 16.2245L16.9134 14.8103L18.7235 13.0003H6.65606C6.89995 13.2879 7.13495 13.6148 7.35749 13.9857L7.33713 13.9979L9.9179 18.0382L10.5804 15.5657L12.5123 16.0833L10.9594 21.8789L5.16384 20.326L5.68147 18.3941L8.20425 19.0701C8.20425 19.0701 6.17064 16.0325 5.21659 14.398C4.70173 13.7544 4.17055 13.4257 3.70352 13.2461C3.10532 13.016 2.54358 13.0011 2.06154 13.0003H2V13.0002V11.0003V11.0002L2.02253 11.0002C2.05059 11.0002 2.07985 11.0002 2.11025 11.0003H6V10.9998C6.49549 10.9998 7.07968 10.9939 7.70352 10.7539C8.17055 10.5743 8.70173 10.2456 9.21659 9.60198C10.1706 7.96745 12.2043 4.92988 12.2043 4.92988L9.68147 5.60586L9.16384 3.67401L14.9594 2.12109L16.5123 7.91666Z" fill="white"/>
     </svg>
-    `},{title:"Quirks",href:"/quirks",icon:`<svg
+    `
+  },
+  {
+    title: "Quirks",
+    href: "/quirks",
+    icon: `<svg
     width="24"
     height="24"
     viewBox="0 0 24 24"
@@ -95,32 +342,124 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
       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">
+  </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>
-    `}],oo=`<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
+    `
+  }
+];
+var googleChromeExtensionSvg = `<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
   <g>
     <path d="M84.55,116.66c2.49,0,4.53-1.99,4.53-4.41V88.08c1.55-13.03,7.27-9.16,14-5.13 c16.27,9.74,27.08-15.88,13.93-23.78c-10.32-6.2-14.79,4.46-22.35,3.36c-2.92-0.43-4.95-3.5-5.59-8.17V36.9 c0-2.43-2.04-4.41-4.53-4.41H63.73c-17.18-2.12-1.93-11.37-1.93-19.98C61.81,5.6,55.38,0,47.45,0c-7.92,0-15.19,5.6-15.19,12.51 c0,8.12,15.78,17.86-1.64,19.98H4.53C2.04,32.49,0,34.47,0,36.9v17.42c1.33,7.43,6.49,9.15,13.1,4.25 c2.23-1.66,5.99-3.59,8.71-3.59c7.09,0,12.85,6.25,12.85,13.96S28.91,84.6,21.81,84.6c-2.53,0-4.89-0.8-6.89-2.19 c0,0.59-12.4-10.85-14.92,3.15v26.71c0,2.43,2.04,4.41,4.53,4.41c13.97,0,27.92,0,41.88-0.01c0.55-2.55-1.24-5.47-2.92-8 c-13.22-19.93,38.21-21.92,24.99,0.62c-0.65,1.11-1.3,2.19-1.8,3.24c-0.63,1.31-1.05,2.91-0.96,4.14L84.55,116.66L84.55,116.66z"></path>
   </g>
-</svg>`,Ge=({...e})=>{var t,n;let o=s=>{var d;let l="active";return!((d=e.settings)!=null&&d.route)&&s==="/dimensions"||e.settings.route===s?l:""},r=Boolean(typeof window!="undefined"&&((n=(t=window.chrome)==null?void 0:t.runtime)==null?void 0:n.id));return re("nav",{css:V`
+</svg>`;
+var Menu = ({ ...props }) => {
+  var _a, _b;
+  const isActivePath = (href) => {
+    var _a2;
+    const cssName = "active";
+    if (!((_a2 = props.settings) == null ? void 0 : _a2.route) && href === "/dimensions") {
+      return cssName;
+    }
+    return props.settings.route === href ? cssName : "";
+  };
+  const isChromeExtension = Boolean(typeof window !== "undefined" && ((_b = (_a = window.chrome) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id));
+  return /* @__PURE__ */ jsxs2(
+    "nav",
+    {
+      css: css3`
         background: var(--brand-secondary-1);
         padding: var(--spacing-base) var(--spacing-base) var(--spacing-md);
         min-width: 200px;
         display: flex;
         flex-direction: column;
         position: relative;
-      `,children:[T("a",{css:V`
+      `,
+      children: [
+        /* @__PURE__ */ jsx7(
+          "a",
+          {
+            css: css3`
           flex-grow: 0;
           display: inline-block;
           margin: 0 var(--spacing-base);
-        `,href:"https://uniform.dev/",children:re("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[re("g",{clipPath:"url(#clip0_41_612)",children:[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",{children:T("clipPath",{id:"clip0_41_612",children:T("rect",{width:"120",height:"38",fill:"white"})})})]})}),T("ul",{css:V`
+        `,
+            href: "https://uniform.dev/",
+            children: /* @__PURE__ */ jsxs2(
+              "svg",
+              {
+                css: { display: "block" },
+                width: "120",
+                height: "38",
+                viewBox: "0 0 120 38",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_41_612)", children: [
+                    /* @__PURE__ */ jsx7(
+                      "path",
+                      {
+                        d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
+                        fill: "#83C6E1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "path",
+                      {
+                        d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
+                        fill: "#438FD5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "path",
+                      {
+                        d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
+                        fill: "#F4220B"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "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"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "clip0_41_612", children: /* @__PURE__ */ jsx7("rect", { width: "120", height: "38", fill: "white" }) }) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "ul",
+          {
+            css: css3`
           display: flex;
           flex-flow: column nowrap;
           padding: 0;
           margin: 0;
           list-style-type: none;
           flex-grow: 1;
-        `,children:to.map((s,l)=>{var p,m,i,a;let d=0;return s.href==="/overrides"&&Object.keys((p=e.settings.scoreOverrides)!=null?p:{}).length>0&&(d=Object.keys((m=e.settings.scoreOverrides)!=null?m:{}).length),s.href==="/quirks"&&Object.keys((i=e.settings.quirkOverrides)!=null?i:{}).length>0&&(d=Object.keys((a=e.settings.quirkOverrides)!=null?a:{}).length),T("li",{css:V`
+        `,
+            children: links.map((item, index) => {
+              var _a2, _b2, _c, _d;
+              let overrideCount = 0;
+              if (item.href === "/overrides" && Object.keys((_a2 = props.settings.scoreOverrides) != null ? _a2 : {}).length > 0) {
+                overrideCount = Object.keys((_b2 = props.settings.scoreOverrides) != null ? _b2 : {}).length;
+              }
+              if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
+                overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
+              }
+              return /* @__PURE__ */ jsx7(
+                "li",
+                {
+                  css: css3`
                 padding: 0;
                 margin: 0;
                 list-style-type: none;
@@ -128,7 +467,11 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
                 &:last-of-type {
                   margin-top: auto;
                 }
-              `,children:re(G,{css:V`
+              `,
+                  children: /* @__PURE__ */ jsxs2(
+                    NavigationLink_default,
+                    {
+                      css: css3`
                   align-items: center;
                   border-radius: var(--rounded-base);
                   display: flex;
@@ -142,10 +485,25 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
                   &.active {
                     background: var(--gray-700);
                   }
-                `,className:o(s.href),route:s.href,children:[T("i",{css:V`
+                `,
+                      className: isActivePath(item.href),
+                      route: item.href,
+                      children: [
+                        /* @__PURE__ */ jsx7(
+                          "i",
+                          {
+                            css: css3`
                     align-items: center;
                     display: flex;
-                  `,dangerouslySetInnerHTML:{__html:s.icon}}),s.title,d?T("span",{css:V`
+                  `,
+                            dangerouslySetInnerHTML: { __html: item.icon }
+                          }
+                        ),
+                        item.title,
+                        overrideCount ? /* @__PURE__ */ jsx7(
+                          "span",
+                          {
+                            css: css3`
                       font-size: var(--fs-xxs);
                       display: inline-block;
                       width: 12px;
@@ -154,7 +512,25 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
                       background-color: var(--red-tooltip);
                       text-align: center;
                       line-height: 12px;
-                    `,children:d}):null]})},l)})}),!r&&re("a",{target:"_blank",href:"https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",css:V`
+                    `,
+                            children: overrideCount
+                          }
+                        ) : null
+                      ]
+                    }
+                  )
+                },
+                index
+              );
+            })
+          }
+        ),
+        !isChromeExtension && /* @__PURE__ */ jsxs2(
+          "a",
+          {
+            target: "_blank",
+            href: "https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",
+            css: css3`
             align-items: center;
             border-radius: var(--rounded-base);
             display: flex;
@@ -169,14 +545,110 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
             &.active {
               background: var(--gray-700);
             }
-          `,rel:"noreferrer",children:[T("i",{css:V`
+          `,
+            rel: "noreferrer",
+            children: [
+              /* @__PURE__ */ jsx7(
+                "i",
+                {
+                  css: css3`
               align-items: center;
               display: flex;
-            `,dangerouslySetInnerHTML:{__html:oo}}),"Install Chrome Extension"]}),T(_e,{})]})};import{Button as Ro}from"@uniformdev/design-system";import{Field as pt,Form as Vo,Formik as Po}from"formik";import*as X from"yup";function ne({scores:e,scoreOverrides:o}){let r=[];return o?(Object.entries(o).forEach(([t,n])=>{var d;let s=(d=e[t])!=null?d:0;if(s===n.override)return;let l=n.override-s;r.push({type:"modscoreS",data:{dimension:t,delta:l}})}),r):[]}function ge({quirks:e,quirkOverrides:o}){let r={};if(!!o)return Object.entries(o).forEach(([t,n])=>{e[t]!==n.override&&(r[t]=n.override)}),Object.keys(r).length>0?r:void 0}import{Context as ro,TransitionDataStore as no}from"@uniformdev/context";function $e({manifest:e,visitor:o,override:r}){let t=new ro({manifest:e,transitionStore:new Le({initialData:o})}),n={...t.scores};t.storage.updateData([r]);let l={...{...t.scores}};return Object.entries(l).forEach(([d,p])=>{n[d]===p&&delete l[d]}),l}var Le=class extends no{async handleDelete(){}async handleUpdateData(){}};import{css as K}from"@emotion/react";import*as We from"react";import{Fragment as lo,jsx as $,jsxs as Ke}from"@emotion/react/jsx-runtime";var Ye=K({willChange:"height"}),io=K`
+            `,
+                  dangerouslySetInnerHTML: { __html: googleChromeExtensionSvg }
+                }
+              ),
+              "Install Chrome Extension"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(ExtensionVersion, {})
+      ]
+    }
+  );
+};
+
+// src/components/Personalization/AddOverride.tsx
+import { Button as Button2 } from "@uniformdev/design-system";
+import { Field, Form, Formik } from "formik";
+import * as yup from "yup";
+
+// src/lib/applyOverrides.ts
+function applyScoreOverrides({
+  scores,
+  scoreOverrides
+}) {
+  const commands = [];
+  if (!scoreOverrides)
+    return [];
+  Object.entries(scoreOverrides).forEach(([dim, override]) => {
+    var _a;
+    const score = (_a = scores[dim]) != null ? _a : 0;
+    if (score === override.override) {
+      return;
+    }
+    const delta = override.override - score;
+    commands.push({
+      type: "modscoreS",
+      data: { dimension: dim, delta }
+    });
+  });
+  return commands;
+}
+function applyQuirkOverrides({
+  quirks,
+  quirkOverrides
+}) {
+  const quirkVector = {};
+  if (!quirkOverrides)
+    return void 0;
+  Object.entries(quirkOverrides).forEach(([quirk, override]) => {
+    const quirkValue = quirks[quirk];
+    if (quirkValue === override.override) {
+      return;
+    }
+    quirkVector[quirk] = override.override;
+  });
+  return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
+}
+
+// src/lib/computeOverrideEffects.ts
+import { Context, TransitionDataStore } from "@uniformdev/context";
+function computeOverrideEffects({ manifest, visitor, override }) {
+  const contextCopy = new Context({
+    manifest,
+    transitionStore: new CopyTransitionDataStore({ initialData: visitor })
+  });
+  const currentScores = { ...contextCopy.scores };
+  contextCopy.storage.updateData([override]);
+  const newScores = { ...contextCopy.scores };
+  const changes = { ...newScores };
+  Object.entries(changes).forEach(([key, value]) => {
+    const oldScore = currentScores[key];
+    if (oldScore === value) {
+      delete changes[key];
+    }
+  });
+  return changes;
+}
+var CopyTransitionDataStore = class extends TransitionDataStore {
+  async handleDelete() {
+  }
+  async handleUpdateData() {
+  }
+};
+
+// src/components/Accordion/Accordion.tsx
+import { css as css4 } from "@emotion/react";
+import * as React3 from "react";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var willChange = css4({ willChange: "height" });
+var titleStyle = css4`
   border-bottom: 2px solid var(--brand-secondary-1);
   font-size: var(--fs-base);
   margin: 0;
-`,so=K`
+`;
+var btnStyle = css4`
   align-items: center;
   border: none;
   background: none;
@@ -186,24 +658,119 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
   padding: var(--spacing-sm) 0;
   font-weight: var(--fw-bold);
   justify-content: space-between;
-`,ao=K`
+`;
+var iconStyle = css4`
   align-self: center;
-`,co=K`
+`;
+var iconActiveStyle = css4`
   transform: rotate(-180deg);
-`,ve=({children:e})=>$("div",{css:[Ye],children:e}),fe=({title:e,children:o})=>{let[r,t]=We.useState(!1),n=e.split(" ").join("-").toLocaleLowerCase();return Ke(lo,{children:[$("h3",{css:io,children:Ke("button",{"aria-expanded":r,css:so,title:e,id:n,"aria-controls":`${n}-section`,onClick:()=>t(s=>!s),type:"button",children:[e,$("i",{css:[ao,r?co:void 0],children:$("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:$("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"})})})]})}),$("div",{id:`${n}-section`,css:[Ye,K`
+`;
+var Accordion = ({ children }) => {
+  return /* @__PURE__ */ jsx8("div", { css: [willChange], children });
+};
+var AccordionItem = ({ title, children }) => {
+  const [visibility, setVisibility] = React3.useState(false);
+  const id = title.split(" ").join("-").toLocaleLowerCase();
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx8("h3", { css: titleStyle, children: /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        "aria-expanded": visibility,
+        css: btnStyle,
+        title,
+        id,
+        "aria-controls": `${id}-section`,
+        onClick: () => setVisibility((prev) => !prev),
+        type: "button",
+        children: [
+          title,
+          /* @__PURE__ */ jsx8("i", { css: [iconStyle, visibility ? iconActiveStyle : void 0], children: /* @__PURE__ */ jsx8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8(
+            "path",
+            {
+              d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
+              fill: "currentColor"
+            }
+          ) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        id: `${id}-section`,
+        css: [
+          willChange,
+          css4`
             padding: var(--spacing-sm) 0;
-          `],role:"region","aria-labelledby":n,children:r?o:null})]})};import{css as po}from"@emotion/react";import{jsx as mo}from"@emotion/react/jsx-runtime";var B=({children:e,...o})=>mo("fieldset",{css:po`
+          `
+        ],
+        role: "region",
+        "aria-labelledby": id,
+        children: visibility ? children : null
+      }
+    )
+  ] });
+};
+
+// src/components/Form/Fieldset.tsx
+import { css as css5 } from "@emotion/react";
+import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
+var Fieldset = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx9(
+    "fieldset",
+    {
+      css: css5`
         border: none;
         padding: 0;
         & legend {
           margin-bottom: var(--spacing-base);
         }
-      `,...o,children:e});import{css as uo}from"@emotion/react";import{jsx as go}from"@emotion/react/jsx-runtime";var W=({children:e})=>go("legend",{css:uo`
+      `,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Form/Legend.tsx
+import { css as css6 } from "@emotion/react";
+import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
+var Legend = ({ children }) => {
+  return /* @__PURE__ */ jsx10(
+    "legend",
+    {
+      css: css6`
         font-size: var(--fs-md);
         font-weight: var(--fw-bold);
         border-bottom: 1px solid var(--gray-400);
         width: 100%;
-      `,children:e});import{Input as fo,InputSelect as ho}from"@uniformdev/design-system";import{jsx as vo}from"@emotion/react/jsx-runtime";var Oe=e=>({field:o,form:r,meta:t,...n})=>vo(e,{...o,...n,errorMessage:r.errors[o.name]});var he=Oe(fo),Je=Oe(ho);import{Caption as bo,ErrorMessage as xo}from"@uniformdev/design-system";import{css as Z}from"@emotion/react";var Xe=Z`
+      `,
+      children
+    }
+  );
+};
+
+// src/components/Inputs/FormikInputs.tsx
+import { Input, InputSelect } from "@uniformdev/design-system";
+
+// src/utils/withFormikField.tsx
+import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
+var withFormikField = (Component) => {
+  return ({ field, form, meta, ...rawProps }) => {
+    return /* @__PURE__ */ jsx11(Component, { ...field, ...rawProps, errorMessage: form.errors[field.name] });
+  };
+};
+
+// src/components/Inputs/FormikInputs.tsx
+var FormikInput = withFormikField(Input);
+var FormikInputSelect = withFormikField(InputSelect);
+
+// src/components/Inputs/FormikSliderInput.tsx
+import { Caption, ErrorMessage } from "@uniformdev/design-system";
+
+// src/components/Inputs/inputs.styles.ts
+import { css as css7 } from "@emotion/react";
+var textInput = css7`
   background: var(--white);
   border: 1px solid var(--gray-500);
   border-radius: var(--rounded-base);
@@ -214,26 +781,32 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
     cursor: not-allowed;
     color: var(--gray-200);
   }
-`,hn=Z`
+`;
+var inputWrapper = css7`
   margin: var(--spacing-base) 0;
-`,et=Z`
+`;
+var inputLabel = css7`
   color: var(--brand-secondary-1);
   display: flex;
   flex-direction: column;
   margin: 0 0 var(--spacing-sm);
-`,tt=Z`
+`;
+var inputText = css7`
   color: var(--brand-secondary-1);
   display: block;
   flex: 1 100%;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-sm);
-`,bn=Z`
+`;
+var inputCaption = css7`
   color: var(--gray-600);
   font-size: var(--fs-sm);
-`,xn=Z`
+`;
+var errorMsg = css7`
   color: var(--brand-secondary-5);
   display: block;
-`,ot=Z`
+`;
+var rangeInput = css7`
   flex-direction: row;
   flex-wrap: wrap;
 
@@ -301,40 +874,96 @@ import{jsx as g}from"@emotion/react";import*as b from"react";import{css as Mt}fr
     flex: 1 0 20%;
     padding: 10px;
   }
-`;import{jsx as ie,jsxs as rt}from"@emotion/react/jsx-runtime";var nt=({field:e,form:o,meta:r,...t})=>{var m,i;let{label:n,caption:s,min:l=0,max:d=100,step:p}=t;return rt("div",{children:[rt("label",{css:[et,ot],children:[ie("span",{css:tt,children:n}),ie("input",{type:"range",min:l,max:d,step:p,...e,value:(m=e.value)!=null?m:0}),ie("span",{className:"value-display",children:(i=e.value)!=null?i:0})]}),s?ie(bo,{children:s}):null,o.touched[e.name]&&o.errors[e.name]?ie(xo,{message:o.errors[e.name]}):null]})};import{css as yo}from"@emotion/react";import{jsx as ko}from"@emotion/react/jsx-runtime";var Co=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+`;
+
+// src/components/Inputs/FormikSliderInput.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var FormikSliderInput = ({ field, form, meta, ...rawProps }) => {
+  var _a, _b;
+  const { label, caption, min = 0, max = 100, step } = rawProps;
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4("label", { css: [inputLabel, rangeInput], children: [
+      /* @__PURE__ */ jsx12("span", { css: inputText, children: label }),
+      /* @__PURE__ */ jsx12("input", { type: "range", min, max, step, ...field, value: (_a = field.value) != null ? _a : 0 }),
+      /* @__PURE__ */ jsx12("span", { className: "value-display", children: (_b = field.value) != null ? _b : 0 })
+    ] }),
+    caption ? /* @__PURE__ */ jsx12(Caption, { children: caption }) : null,
+    form.touched[field.name] && form.errors[field.name] ? /* @__PURE__ */ jsx12(ErrorMessage, { message: form.errors[field.name] }) : null
+  ] });
+};
+
+// src/styles/icons.tsx
+import { css as css8 } from "@emotion/react";
+import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
+var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4.2 7.2C4.53137 7.2 4.8 6.93137 4.8 6.6C4.8 6.26863 4.53137 6 4.2 6C3.86863 6 3.6 6.26863 3.6 6.6C3.6 6.93137 3.86863 7.2 4.2 7.2Z" fill="#828282"/>
 <path d="M8.4 6.6C8.4 6.93137 8.13137 7.2 7.8 7.2C7.46863 7.2 7.2 6.93137 7.2 6.6C7.2 6.26863 7.46863 6 7.8 6C8.13137 6 8.4 6.26863 8.4 6.6Z" fill="#828282"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 5.49824 10.723 5.01447 10.5802 4.55984C10.0795 4.69533 9.55274 4.76763 9.00913 4.76763C6.77526 4.76763 4.82652 3.54683 3.79366 1.73601C2.25282 2.53492 1.2 4.14451 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8Z" fill="#828282"/>
-</svg>`,wo=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3.59995 5.05775C4.9254 5.05775 5.99992 3.98325 5.99992 2.65778C5.99992 1.33232 4.9254 0.257812 3.59995 0.257812C2.27448 0.257812 1.19998 1.33232 1.19998 2.65778C1.19998 3.98325 2.27448 5.05775 3.59995 5.05775ZM3.59999 3.85777C4.26272 3.85777 4.79997 3.32052 4.79997 2.65778C4.79997 1.99505 4.26272 1.4578 3.59999 1.4578C2.93725 1.4578 2.4 1.99505 2.4 2.65778C2.4 3.32052 2.93725 3.85777 3.59999 3.85777Z" fill="#828282"/>
 <path d="M5.39993 6.8577C5.73131 6.8577 5.99993 7.12632 5.99993 7.45769V11.0576H7.19991V7.45769C7.19991 6.46356 6.39406 5.65771 5.39993 5.65771H1.79998C0.80588 5.65771 0 6.46356 0 7.45769V11.0576H1.19999V7.45769C1.19999 7.12632 1.46861 6.8577 1.79998 6.8577H5.39993Z" fill="#828282"/>
 <path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
 <path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
 <path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
-</svg>`,it=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.113 3.12646C8.16729 3.12646 9.02195 3.98113 9.02195 5.03541C9.02195 5.86658 8.49075 6.57368 7.74932 6.83573V10.1259H6.47669V6.83573C5.73526 6.57368 5.20405 5.86658 5.20405 5.03541C5.20405 3.98113 6.05872 3.12646 7.113 3.12646ZM7.113 4.39909C7.46443 4.39909 7.74932 4.68398 7.74932 5.03541C7.74932 5.38684 7.46443 5.67172 7.113 5.67172C6.76158 5.67172 6.47669 5.38684 6.47669 5.03541C6.47669 4.68398 6.76158 4.39909 7.113 4.39909Z" fill="#828282"/>
 <path d="M3.96336 1.88578C3.15733 2.69183 2.65879 3.80537 2.65879 5.03535C2.65879 6.42093 3.29145 7.65875 4.28366 8.47569L5.1895 7.56984C4.42501 6.98876 3.93142 6.06969 3.93142 5.03535C3.93142 4.1568 4.28752 3.36142 4.86325 2.78567L3.96336 1.88578Z" fill="#828282"/>
 <path d="M9.36269 2.7856C9.93846 3.36136 10.2946 4.15676 10.2946 5.03535C10.2946 6.06973 9.80096 6.98882 9.03643 7.5699L9.94228 8.47575C10.9345 7.65881 11.5672 6.42096 11.5672 5.03535C11.5672 3.80533 11.0687 2.69177 10.2626 1.88571L9.36269 2.7856Z" fill="#828282"/>
 <path d="M0.113525 5.03534C0.113525 3.10251 0.896953 1.35266 2.16359 0.0860049L3.06347 0.985892C2.02714 2.02224 1.38616 3.45394 1.38616 5.03534C1.38616 6.61674 2.02714 8.04844 3.06347 9.08479L2.16358 9.98468C0.89695 8.71802 0.113525 6.96817 0.113525 5.03534Z" fill="#828282"/>
 <path d="M12.0624 9.98474C13.329 8.71809 14.1125 6.96821 14.1125 5.03534C14.1125 3.10248 13.329 1.3526 12.0624 0.0859375L11.1625 0.985824C12.1988 2.02218 12.8398 3.4539 12.8398 5.03534C12.8398 6.61678 12.1988 8.0485 11.1625 9.08486L12.0624 9.98474Z" fill="#828282"/>
-</svg>`,st=({type:e})=>{let o="";switch(e){case"Audience":o=Co;break;case"Signal":o=it;break;case"Intent":o=it;break;case"Enrichment":o=wo;break}return ko("i",{css:yo`
+</svg>`;
+var Icon = ({ type }) => {
+  let iconHtml = "";
+  switch (type) {
+    case "Audience":
+      iconHtml = audienceIcon;
+      break;
+    case "Signal":
+      iconHtml = signalIcon;
+      break;
+    case "Intent":
+      iconHtml = signalIcon;
+      break;
+    case "Enrichment":
+      iconHtml = enrichmentIcon;
+      break;
+  }
+  return /* @__PURE__ */ jsx13(
+    "i",
+    {
+      css: css8`
         align-items: center;
         display: inline-block;
-      `,dangerouslySetInnerHTML:{__html:o}})};import{css as O,keyframes as To}from"@emotion/react";var Do=To`from {
+      `,
+      dangerouslySetInnerHTML: { __html: iconHtml }
+    }
+  );
+};
+
+// src/components/Personalization/page.styles.ts
+import { css as css9, keyframes } from "@emotion/react";
+var popIn = keyframes`from {
   transform: scale(1);
 }
 to {
   transform: scale(1.2);
 }
-`,h={page:O`
+`;
+var styles = {
+  page: css9`
     color: var(--brand-secondary-1);
-  `,text:O`
+  `,
+  text: css9`
     margin: var(--spacing-sm) 0;
-  `,reset:O`
+  `,
+  reset: css9`
     margin: 0 var(--spacing-md);
     font-size: var(--fs-sm);
     color: var(--gray-500);
-  `,title:O`
+  `,
+  title: css9`
     margin: 0 0 var(--spacing-sm);
     font-size: var(--fs-md);
     & > small {
@@ -343,12 +972,14 @@ to {
       font-weight: var(--fw-regular);
       margin: var(--spacing-xxs) 0 0;
     }
-  `,headingGroup:O`
+  `,
+  headingGroup: css9`
     align-items: baseline;
     display: flex;
     justify-content: space-between;
     align-items: center;
-  `,divider:O`
+  `,
+  divider: css9`
     background: var(--gray-300);
     display: block;
     width: 1px;
@@ -356,67 +987,146 @@ to {
     position: absolute;
     inset: 0 auto 0 0;
     margin: auto 0;
-  `,submitButton:O`
+  `,
+  submitButton: css9`
     position: absolute;
     right: var(--spacing-base);
     bottom: var(--spacing-base);
-    animation: 0.5s 2 alternate ${Do};
-  `,cancelButton:O`
+    animation: 0.5s 2 alternate ${popIn};
+  `,
+  cancelButton: css9`
     position: absolute;
     left: calc(200px + var(--spacing-base));
     bottom: var(--spacing-base);
     background: white;
     padding: var(--spacing-sm);
     border: 1px solid var(--gray-300);
-  `,error:O`
+  `,
+  error: css9`
     color: var(--brand-secondary-5);
     font-size: var(--fs-sm);
-  `,quirks:O`
+  `,
+  quirks: css9`
     .uniform-input-select,
     input {
       padding: var(--spacing-sm);
     }
-  `};import{css as P}from"@emotion/react";import{jsx as Y}from"@emotion/react/jsx-runtime";var be=({children:e})=>Y("table",{css:P`
+  `
+};
+
+// src/components/Table/Table.tsx
+import { css as css10 } from "@emotion/react";
+import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
+var Table = ({ children }) => {
+  return /* @__PURE__ */ jsx14(
+    "table",
+    {
+      css: css10`
         border-collapse: collapse;
         display: table;
         width: 100%;
         font-size: var(--fs-sm);
-      `,children:e}),at=({children:e})=>Y("thead",{css:P`
+      `,
+      children
+    }
+  );
+};
+var THead = ({ children }) => {
+  return /* @__PURE__ */ jsx14(
+    "thead",
+    {
+      css: css10`
         background: var(--gray-50);
         text-align: left;
         & tr {
           border-bottom: 1px solid var(--gray-200);
         }
-      `,children:e}),xe=({children:e})=>Y("tbody",{children:e}),se=({border:e,children:o})=>Y("tr",{css:e?P`
+      `,
+      children
+    }
+  );
+};
+var TBody = ({ children }) => {
+  return /* @__PURE__ */ jsx14("tbody", { children });
+};
+var TRow = ({ border, children }) => {
+  return /* @__PURE__ */ jsx14(
+    "tr",
+    {
+      css: border ? css10`
               border-bottom: 1px solid var(--gray-200);
               &:where(:last-child) {
                 border: none;
               }
-            `:void 0,children:o}),ye=({children:e,width:o})=>Y("th",{css:P`
+            ` : void 0,
+      children
+    }
+  );
+};
+var THeading = ({ children, width }) => {
+  return /* @__PURE__ */ jsx14(
+    "th",
+    {
+      css: css10`
         outline: none;
         padding: var(--spacing-sm);
-        width: ${o!=null?o:"auto"};
-      `,children:e});function So(e){switch(e){case"light":return P`
+        width: ${width != null ? width : "auto"};
+      `,
+      children
+    }
+  );
+};
+function colour(color) {
+  switch (color) {
+    case "light":
+      return css10`
         color: var(--gray-400);
-      `;case"dark":return P`
+      `;
+    case "dark":
+      return css10`
         color: var(--brand-secondary-1);
-      `}}function Lo(e){return P`
-    text-align: ${e};
-  `}var Q=({alignment:e="left",border:o,color:r="dark",children:t})=>Y("td",{css:[P`
+      `;
+  }
+}
+function align(alignment) {
+  return css10`
+    text-align: ${alignment};
+  `;
+}
+var TData = ({ alignment = "left", border, color = "dark", children }) => {
+  return /* @__PURE__ */ jsx14(
+    "td",
+    {
+      css: [
+        css10`
           padding: var(--spacing-base);
           max-width: 180px;
           overflow-wrap: break-word;
           position: relative;
-        `,So(r),Lo(e),o?P`
+        `,
+        colour(color),
+        align(alignment),
+        border ? css10`
               border-left: 1px solid var(--gray-200);
-            `:void 0],children:t});import{css as Re}from"@emotion/react";var ct=Re`
+            ` : void 0
+      ],
+      children
+    }
+  );
+};
+
+// src/components/Table/table.styles.ts
+import { css as css11 } from "@emotion/react";
+var scoreTd = css11`
   position: relative;
   display: inline-block;
   font-size: var(--fs-base);
-`,lt=Re`
+`;
+var overriddenValue = css11`
   display: block;
   text-decoration: line-through;
-`,dt=Re`
+`;
+var isOverriddenTooltip = css11`
   position: absolute;
   width: 6px;
   height: 6px;
@@ -424,7 +1134,863 @@ to {
   top: 9px;
   background: var(--red-tooltip);
   border-radius: 3px;
-`;import{jsx as I,jsxs as J}from"@emotion/react/jsx-runtime";var Oo=({dimensionIndex:e,dimensions:o,disableEditOverride:r,onClick:t,preemptiveOverrides:n})=>{var d;let{settings:s}=ce(),l=(d=n!=null?n:s.scoreOverrides)!=null?d:{};return I(be,{children:I(xe,{children:Object.entries(o).sort(([p],[m])=>p.localeCompare(m)).map(([p,m])=>{var f;let{dim:i,name:a,type:c,category:v}=(f=e[p])!=null?f:{name:p,dim:p,type:void 0,category:void 0},u=l[i];return J(se,{children:[J(Q,{children:[u!==void 0?I("s",{css:lt,children:u.initial}):null,J("b",{css:ct,children:[m,u!==void 0&&I("i",{css:dt})]})]}),I(Q,{children:J("div",{onClick:()=>t==null?void 0:t(i),css:t?{cursor:"pointer"}:void 0,children:[I("span",{css:h.divider,role:"presentation"}),J("div",{children:[I(st,{type:c})," ",c]}),J("strong",{children:[v?`${v}:`:""," ",a]})]})}),I(Q,{alignment:"right",color:"light",children:u!==void 0&&!r?I(G,{route:`/overrides/${i}`,children:"Edit override"}):null})]},i)})})})},z=Oo;import{jsx as L,jsxs as mt}from"@emotion/react/jsx-runtime";var Io=X.object({dimension:X.string(),score:X.number()}),Ve=({settings:e,saveSettings:o,state:r,actions:t,dimensionIndex:{index:n}})=>{var p,m;let s=e.route?[...e.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],l=s[0]?s[0][1]:"";if(!((p=r.manifest.project.pz)!=null&&p.sig))return L("p",{children:"Error, manifest is broken or there is no signal to override."});let d=Object.entries(n).filter(([,i])=>i.type!=="Audience"&&i.type!=="Intent").map(([i,a])=>{let c=a.type?`${a.type}: `:"",v=a.category?`${a.category} - `:"",u=`${c}${v}${a.name}`;return{value:i,label:u}});return d.unshift({value:"",label:"Choose dimension to override"}),L(Po,{initialValues:{dimension:l,score:(m=r.scores[l])!=null?m:0},validate:i=>{let a={};return(i.score===r.scores[i.dimension]||i.score===0&&!r.scores[l])&&(a.score="You have to modify current score value"),a},validationSchema:Io,enableReinitialize:!0,validateOnChange:!1,validateOnBlur:!1,onSubmit:async i=>{var f,C,w,k,q,N;let a=(C=(f=n[i.dimension])==null?void 0:f.cap)!=null?C:0,c=Math.min(i.score,a),v={...e,scoreOverrides:{...e.scoreOverrides,[i.dimension]:{initial:(N=(q=(k=(w=e.scoreOverrides)==null?void 0:w[i.dimension])==null?void 0:k.initial)!=null?q:r.scores[i.dimension])!=null?N:0,override:c}},route:"/overrides"};await o(v);let u=ne({scores:r.scores,scoreOverrides:v.scoreOverrides});t.rawUpdate(u)},children:({isSubmitting:i,values:a,setFieldValue:c})=>{var w;let v=$e({manifest:r.manifest,visitor:r.data,override:{type:"modscore",data:{dimension:a.dimension,delta:a.score-((w=r.scores[a.dimension])!=null?w:0)}}}),u=Object.entries(r.scores).reduce((k,[q,N])=>(k[q]={initial:N,override:N},k),{}),f={max:100,step:50};n[a.dimension]&&(f.max=n[a.dimension].cap,f.step=n[a.dimension].str);let C=a.score&&Object.keys(v).length>0;return mt(Vo,{css:h.page,children:[L("h1",{css:h.title,children:"Override Dimension"}),L(pt,{component:Je,label:"Dimension",id:"dimension",name:"dimension",options:d,disabled:i,onChange:k=>{c("score",0,!1),c("dimension",k.target.value)}}),L("p",{css:h.text,children:L("small",{children:"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly."})}),a.dimension?L(pt,{component:nt,name:"score",label:"Score",disabled:i,max:f.max,step:f.step,caption:`Range: 0 - ${f.max} in increments of ${f.step}`}):null,mt(B,{disabled:i,css:{marginBottom:"2rem"},children:[C?L(ve,{children:L(fe,{title:`Impacted Dimensions (${Object.keys(v).length})`,children:L(z,{preemptiveOverrides:u,dimensionIndex:n,dimensions:v,disableEditOverride:!0})})}):null,L(Ro,{type:"submit",css:h.submitButton,disabled:i,children:"Save"}),L(G,{route:"/overrides",css:h.cancelButton,children:"Cancel"})]})]})}})};import{Button as gt}from"@uniformdev/design-system";import{Switch as Mo}from"@uniformdev/design-system";import*as vt from"react";async function Ce({actions:e,saveSettings:o,scores:r,settings:t}){var d,p;let n=(d=t.scoreOverrides)!=null?d:{},s={...n},l=[];for(let m of Object.keys(n)){let i=n==null?void 0:n[m];delete s[m],l.push({type:"modscoreS",data:{dimension:m,delta:i.initial-((p=r[m])!=null?p:0)}})}await o({...t,scoreOverrides:s}),await e.rawUpdate(l)}async function ut({quirk:e,settings:o,saveSettings:r,actions:t}){var l;let n=(l=o.quirkOverrides)==null?void 0:l[e];if(!n)return;let s={...o.quirkOverrides};delete s[e],await r({...o,quirkOverrides:s}),await t.rawUpdate([{type:"setquirk",data:{key:e,value:n.initial}}])}import{jsx as Pe,jsxs as Ho}from"@emotion/react/jsx-runtime";var ee=({title:e,text:o,buttonGroup:r,children:t})=>Ho("div",{css:de,children:[Pe("h2",{css:pe,children:e}),Pe("p",{css:me,children:o}),t,r?Pe("div",{css:ue,children:r}):null]});import{Fragment as Eo,jsx as R,jsxs as we}from"@emotion/react/jsx-runtime";var ft=({dimensionIndex:{index:e},state:{scores:o,data:r},actions:t,saveSettings:n,settings:s})=>{let l=vt.useMemo(()=>{let i={};return Object.keys(e).filter(a=>!o[a]).map(a=>{i[e[a].dim]=0}),i},[o,e]),d=Object.keys(o).length,p=d+Object.keys(l).length,m=()=>{t.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])};return R(Eo,{children:we("article",{css:h.page,children:[we("div",{css:h.headingGroup,children:[we("h2",{css:h.title,children:["Dimensions",we("small",{children:[d," active of ",p]})]}),R("div",{css:h.reset,children:R(gt,{buttonType:"ghost",onClick:()=>Ce({actions:t,saveSettings:n,scores:o,settings:s}).then(t.forget),children:"clear all dimensions"})}),R(Mo,{name:"controlGroup",label:"Control Group",onChange:m,checked:r.controlGroup})]}),d>0?R(z,{dimensionIndex:e,dimensions:o}):R(ee,{title:r.controlGroup?"In control group":"No active dimensions",text:r.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:r.controlGroup?R(gt,{buttonType:"secondary",onClick:m,children:"Exit control group"}):null}),R(ve,{children:R(fe,{title:`Inactive Dimensions (${Object.keys(l).length})`,children:R(z,{dimensionIndex:e,dimensions:l})})})]})})};import{AddButton as Ao}from"@uniformdev/design-system";import{Button as ht}from"@uniformdev/design-system";import{Fragment as Bo,jsx as H,jsxs as bt}from"@emotion/react/jsx-runtime";var xt=({dimensionIndex:{index:e},state:{data:o,scores:r},actions:t,settings:n,saveSettings:s})=>{var a;let l=(a=n.scoreOverrides)!=null?a:{},d=Object.keys(l).length,p=c=>(c==null||c.preventDefault(),s({...n,route:"/overrides/add"})),m=()=>{t.rawUpdate([{type:"setcontrol",data:!o.controlGroup}])},i={};return Object.entries(r).map(([c,v])=>{l[c]!==void 0&&(i[c]=v)}),H(Bo,{children:bt("article",{css:h.page,children:[bt("div",{css:h.headingGroup,children:[H("h2",{css:h.title,children:"What if?"}),H("div",{css:h.reset,children:H(ht,{buttonType:"ghost",onClick:()=>Ce({actions:t,settings:n,saveSettings:s,scores:r}),children:"delete all overrides"})}),H(Ao,{onClick:p})]}),H("p",{children:"Override dimension scores to test personalization"}),d>0?H(z,{dimensionIndex:e,dimensions:i,onClick:c=>s({...n,route:`/overrides/${c}`})}):H(ee,{title:o.controlGroup?"In control group":"No overrides",text:o.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 any dimension overrides yet.",buttonGroup:o.controlGroup?H(ht,{buttonType:"secondary",onClick:m,children:"Exit control group"}):null})]})})};import{Button as wt,InputSelect as Uo}from"@uniformdev/design-system";import{useState as jo}from"react";import{Button as Qo,Input as Fo}from"@uniformdev/design-system";import{useEffect as qo,useState as No}from"react";import{jsx as yt,jsxs as zo}from"@emotion/react/jsx-runtime";var Zo=({name:e,value:o,submit:r})=>{let[t,n]=No(o!=null?o:"");return qo(()=>{n(o!=null?o:"")},[o]),zo("div",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[yt(Fo,{type:"text",css:[Xe],name:e,value:t,onChange:d=>{n(d.target.value)}}),yt(Qo,{buttonType:"primary",disabled:t===o,size:"sm",onClick:()=>r(e,t!=null?t:""),children:"Save"})]})},Ct=Zo;import{Fragment as kt,jsx as y,jsxs as te}from"@emotion/react/jsx-runtime";var Tt=({...e})=>{let{state:{data:{quirks:o}},quirksIndex:{index:r},settings:t,saveSettings:n,actions:s}=e,[l,d]=jo(""),p;l&&(p=r[l]);let m=async(i,a)=>{var u,f,C;d("");let c={...t,quirkOverrides:{...t.quirkOverrides,[i]:{initial:(C=(f=(u=t.quirkOverrides)==null?void 0:u[i])==null?void 0:f.initial)!=null?C:o[i],override:a}}};await n(c);let v=ge({quirks:o,quirkOverrides:c.quirkOverrides});await s.update({quirks:v})};return y(kt,{children:te("article",{css:[h.page,h.quirks],children:[y("h1",{css:h.title,children:"Quirks"}),y("p",{css:h.text,children:"Keys defined in Uniform and their current, programmatically defined values for this visit."}),Object.keys(r).length?te(be,{children:[y(at,{children:te(se,{children:[y(ye,{width:"30%",children:"Key"}),y(ye,{width:"50%",children:"Value"}),y(ye,{width:"20%",children:""})]})}),y(xe,{children:Object.values(r).map(({name:i,value:a,id:c})=>{var f,C,w;let v=(C=(f=t.quirkOverrides)==null?void 0:f[i])==null?void 0:C.initial,u=[];return p&&p.options&&(u=p.options.map(k=>({value:k.value,label:k.name}))),te(se,{border:"bottom",children:[y(Q,{children:y("strong",{children:i})}),te(Q,{children:[l!==c?te("div",{onClick:()=>{d(c)},children:[v?y("div",{children:y("s",{children:v})}):null,a]}):null,l===c&&p&&y(kt,{children:p.options?y(Uo,{showLabel:!1,label:`Change ${i}`,defaultOption:`Change ${i}`,name:c,onChange:k=>m(k.target.name,k.target.value),options:u}):y(Ct,{name:c,value:a,submit:m})})]}),y(Q,{children:l?null:(w=t.quirkOverrides)!=null&&w[c]?y(wt,{buttonType:"ghost",onClick:()=>{ut({quirk:c,settings:t,saveSettings:n,actions:s})},children:y("small",{children:"Clear Override"})}):y(wt,{buttonType:"ghost",onClick:()=>{d(c)},children:y("small",{children:"Override"})})})]},c)})})]}):y(ee,{title:"No quirks configured",text:"There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."})]})})};import{Button as Dt}from"@uniformdev/design-system";import{Switch as St}from"@uniformdev/design-system";import{jsx as D,jsxs as ae}from"@emotion/react/jsx-runtime";var Lt=({settings:e,saveSettings:o,actions:r,state:{data:t},clearAllExtensionData:n})=>ae("article",{css:[h.page,{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}],children:[D("h1",{css:h.title,children:"Settings"}),ae(B,{children:[D(W,{children:"Data Connection"}),D(Dt,{buttonType:"tertiary",onClick:()=>{o({...e,route:"/connect"})},children:"Manage Connection to Uniform"})]}),ae(B,{children:[D(W,{children:"Storage Consent"}),D(St,{label:"Store visitor data",id:"consent-mode",name:"consentMode",checked:t.consent,onChange:s=>{r.rawUpdate([{type:"consent",data:s.currentTarget.checked}]),o({...e,consentMode:s.currentTarget.checked})}}),D("p",{children:D("small",{children:"Enabling storage consent allows storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh."})})]}),ae(B,{children:[D(W,{children:"Logging"}),D(St,{label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging",checked:e.logLevel==="debug",onChange:s=>o({...e,logLevel:s.currentTarget.checked?"debug":"none"})})]}),ae(B,{children:[D(W,{children:"Clear extension storage"}),D(Dt,{onClick:()=>{n()},children:"Clear"}),D("p",{children:D("small",{children:"May be necessary when you have multiple different sites on the same domain name (e.g. http://localhost:3000) and there are some conflicts or other unexpected behaviour."})})]})]});import{parseQuickConnect as _o}from"@uniformdev/context";import{ApiClientError as Go,UncachedManifestClient as $o}from"@uniformdev/context/api";import{Button as oe,ErrorMessage as Ko,Input as Wo}from"@uniformdev/design-system";import{Field as Ie,Form as Yo,Formik as Jo}from"formik";import*as F from"react";import{Fragment as ke,jsx as x,jsxs as M}from"@emotion/react/jsx-runtime";function Ot(e){let[o,r]=F.useState(e.currentData?"c":"qc"),[t,n]=F.useState(void 0),[s,l]=F.useState(void 0),d=F.useCallback(async i=>{let a=new $o(i);n(void 0);try{let c=await a.get({preview:!0});return l({manifest:c,target:i}),c}catch(c){if(c instanceof Go){c.statusCode===403?n("API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."):n(c.errorMessage);return}if("message"in c){c.message==="Failed to fetch"?n("A network error occurred. Ensure the API host is valid."):n(c.message);return}n(JSON.stringify(c,null,2));return}},[]);F.useEffect(()=>{!e.currentData||d(e.currentData)},[d,e.currentData]);let p=async i=>{await d(i)&&(r("c"),await e.onConnect(i))},m=()=>{confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")&&(r("qc"),l(void 0),n(void 0),e.onConnect(null))};return M("div",{children:[t?M(ke,{children:[x(Ko,{message:t}),x(oe,{buttonType:"secondary",type:"button",onClick:m,children:"Clear old/broken settings"})]}):null,o==="qc"||o==="mc"?x(Xo,{...e,state:o,setState:r,onConnect:p}):x("div",{children:s?M(ke,{children:[M("p",{children:["Connected to"," ",x("a",{href:`${s==null?void 0:s.target.apiHost}/projects/${s==null?void 0:s.target.projectId}`,target:"_blank",rel:"noopener noreferrer",css:{textDecoration:"underline"},children:x("strong",{children:s==null?void 0:s.manifest.project.name})})," ",M("small",{children:["(",s==null?void 0:s.manifest.project.id,")"]})]}),x(oe,{buttonType:"secondary",type:"button",onClick:m,children:"Disconnect"})]}):null})]})}function Xo({setState:e,state:o,currentData:r,onConnect:t}){var n,s,l;return x("div",{children:x(Jo,{initialValues:{apiHost:(n=r==null?void 0:r.apiHost)!=null?n:"https://uniform.app",apiKey:(s=r==null?void 0:r.apiKey)!=null?s:"",projectId:(l=r==null?void 0:r.projectId)!=null?l:"",qc:""},onSubmit:t,children:({setFieldValue:d,setFieldError:p,errors:{qc:m},isSubmitting:i})=>x(Yo,{children:x("fieldset",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"},children:o==="qc"?M(ke,{children:[x("div",{children:x(Wo,{placeholder:"Paste Quick Connect Code Here",caption:"Copy the Quick Connect code after creating an API key in Uniform.",errorMessage:m,onChange:a=>{try{let c=_o(a.currentTarget.value);d("apiHost",c.apiHost),d("apiKey",c.apiKey),d("projectId",c.projectId)}catch(c){p("qc",c.message)}}})}),M("section",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[x(oe,{type:"submit",buttonType:"primary",disabled:i,children:i?"Verifying...":"Connect"}),x(oe,{type:"button",buttonType:"ghost",onClick:()=>e("mc"),disabled:i,children:"Connect Manually"})]})]}):M(ke,{children:[x("div",{children:x(Ie,{component:he,label:"API Key",name:"apiKey",caption:"Generate an API key in your Uniform team settings."})}),x("div",{children:x(Ie,{component:he,label:"Project ID",name:"projectId",caption:"Available to copy after generating an API key"})}),x("div",{children:x(Ie,{component:he,label:"API Host",name:"apiHost",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option."})}),M("section",{css:{display:"flex",gap:"var(--spacing-sm)"},children:[x(oe,{type:"submit",buttonType:"primary",disabled:i,children:i?"Verifying...":"Connect"}),x(oe,{type:"button",buttonType:"ghost",onClick:()=>e("qc"),disabled:i,children:"Use Quick Connect"})]})]})})})})})}import{jsx as Te,jsxs as er}from"@emotion/react/jsx-runtime";var Rt=({settings:e,saveSettings:o})=>{let r=e.apiKey&&e.projectId?{apiKey:e.apiKey,projectId:e.projectId,apiHost:e.apiHost}:void 0;return er("article",{css:h.page,children:[Te("h1",{css:h.title,children:"Connect to a Uniform Project"}),Te("p",{css:h.text,children:Te("small",{children:"Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this."})}),Te(Ot,{onConnect:async t=>{t?await o({...e,apiKey:t.apiKey,projectId:t.projectId,apiHost:t.apiHost}):await o({...e,apiKey:void 0,projectId:void 0,apiHost:void 0})},currentData:r})]})};import{useEffect as tr,useState as or}from"react";import{useMountedState as rr}from"react-use";import{jsx as Vt,jsxs as nr}from"@emotion/react/jsx-runtime";var Pt=()=>{let[e,o]=or(!1),r=rr();return tr(()=>{setTimeout(()=>{r()&&o(!0)},1e3)},[r]),e?nr("article",{css:h.page,children:[Vt("h1",{children:"Loading..."}),Vt("p",{children:"Connecting to Uniform API for complete data."})]}):null};import{jsx as It,jsxs as ir}from"@emotion/react/jsx-runtime";var Ht=()=>ir("article",{children:[It("h1",{children:"Something when wrong"}),It("p",{children:"We could not find the page you're looking for."})]});import{jsx as S,jsxs as He}from"@emotion/react/jsx-runtime";var ar=Mt`
+`;
+
+// src/components/Table/DimensionsTable.tsx
+import { jsx as jsx15, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+var DimensionsTable = ({
+  dimensionIndex,
+  dimensions,
+  disableEditOverride,
+  onClick,
+  preemptiveOverrides
+}) => {
+  var _a;
+  const { settings } = useDevToolsSettingsContext();
+  const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
+  return /* @__PURE__ */ jsx15(Table, { children: /* @__PURE__ */ jsx15(TBody, { children: Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
+    var _a2;
+    const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
+      name: key,
+      dim: key,
+      type: void 0,
+      category: void 0
+    };
+    const override = overrides[dim];
+    return /* @__PURE__ */ jsxs5(TRow, { children: [
+      /* @__PURE__ */ jsxs5(TData, { children: [
+        override !== void 0 ? /* @__PURE__ */ jsx15("s", { css: overriddenValue, children: override.initial }) : null,
+        /* @__PURE__ */ jsxs5("b", { css: scoreTd, children: [
+          value,
+          override !== void 0 && /* @__PURE__ */ jsx15("i", { css: isOverriddenTooltip })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx15(TData, { children: /* @__PURE__ */ jsxs5("div", { onClick: () => onClick == null ? void 0 : onClick(dim), css: onClick ? { cursor: "pointer" } : void 0, children: [
+        /* @__PURE__ */ jsx15("span", { css: styles.divider, role: "presentation" }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx15(Icon, { type }),
+          " ",
+          type
+        ] }),
+        /* @__PURE__ */ jsxs5("strong", { children: [
+          category ? `${category}:` : "",
+          " ",
+          name
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx15(TData, { alignment: "right", color: "light", children: override !== void 0 && !disableEditOverride ? /* @__PURE__ */ jsx15(NavigationLink_default, { route: `/overrides/${dim}`, children: "Edit override" }) : null })
+    ] }, dim);
+  }) }) });
+};
+var DimensionsTable_default = DimensionsTable;
+
+// src/components/Personalization/AddOverride.tsx
+import { jsx as jsx16, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var overrideSettingsSchema = yup.object({
+  dimension: yup.string(),
+  score: yup.number()
+});
+var AddOverride = ({
+  settings,
+  saveSettings,
+  state,
+  actions,
+  dimensionIndex: { index }
+}) => {
+  var _a, _b;
+  const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
+  const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
+  if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
+    return /* @__PURE__ */ jsx16("p", { children: "Error, manifest is broken or there is no signal to override." });
+  }
+  const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
+    const type = value.type ? `${value.type}: ` : "";
+    const category = value.category ? `${value.category} - ` : "";
+    const label = `${type}${category}${value.name}`;
+    return {
+      value: key,
+      label
+    };
+  });
+  overridableDimensions.unshift({
+    value: "",
+    label: "Choose dimension to override"
+  });
+  return /* @__PURE__ */ jsx16(
+    Formik,
+    {
+      initialValues: {
+        dimension: overriddenDimension,
+        score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
+      },
+      validate: (values) => {
+        const errors = {};
+        if (values.score === state.scores[values.dimension] || values.score === 0 && !state.scores[overriddenDimension]) {
+          errors.score = "You have to modify current score value";
+        }
+        return errors;
+      },
+      validationSchema: overrideSettingsSchema,
+      enableReinitialize: true,
+      validateOnChange: false,
+      validateOnBlur: false,
+      onSubmit: async (values) => {
+        var _a2, _b2, _c, _d, _e, _f;
+        const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
+        const cappedOverrideScore = Math.min(values.score, cap);
+        const newSettings = {
+          ...settings,
+          scoreOverrides: {
+            ...settings.scoreOverrides,
+            [values.dimension]: {
+              initial: (_f = (_e = (_d = (_c = settings.scoreOverrides) == null ? void 0 : _c[values.dimension]) == null ? void 0 : _d.initial) != null ? _e : state.scores[values.dimension]) != null ? _f : 0,
+              override: cappedOverrideScore
+            }
+          },
+          route: "/overrides"
+        };
+        await saveSettings(newSettings);
+        const applyCommands = applyScoreOverrides({
+          scores: state.scores,
+          scoreOverrides: newSettings.scoreOverrides
+        });
+        actions.rawUpdate(applyCommands);
+      },
+      children: ({ isSubmitting, values, setFieldValue }) => {
+        var _a2;
+        const overrideEffects = computeOverrideEffects({
+          manifest: state.manifest,
+          visitor: state.data,
+          override: {
+            type: "modscore",
+            data: {
+              dimension: values.dimension,
+              delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
+            }
+          }
+        });
+        const preemptiveOverrides = Object.entries(state.scores).reduce(
+          (acc, [key, value]) => {
+            acc[key] = {
+              initial: value,
+              override: value
+            };
+            return acc;
+          },
+          {}
+        );
+        const rangeProps = {
+          max: 100,
+          step: 50
+        };
+        if (index[values.dimension]) {
+          rangeProps.max = index[values.dimension].cap;
+          rangeProps.step = index[values.dimension].str;
+        }
+        const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
+        return /* @__PURE__ */ jsxs6(Form, { css: styles.page, children: [
+          /* @__PURE__ */ jsx16("h1", { css: styles.title, children: "Override Dimension" }),
+          /* @__PURE__ */ jsx16(
+            Field,
+            {
+              component: FormikInputSelect,
+              label: "Dimension",
+              id: "dimension",
+              name: "dimension",
+              options: overridableDimensions,
+              disabled: isSubmitting,
+              onChange: (e) => {
+                setFieldValue("score", 0, false);
+                setFieldValue("dimension", e.target.value);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx16("p", { css: styles.text, children: /* @__PURE__ */ jsx16("small", { children: "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly." }) }),
+          values.dimension ? /* @__PURE__ */ jsx16(
+            Field,
+            {
+              component: FormikSliderInput,
+              name: "score",
+              label: "Score",
+              disabled: isSubmitting,
+              max: rangeProps.max,
+              step: rangeProps.step,
+              caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs6(Fieldset, { disabled: isSubmitting, css: { marginBottom: "2rem" }, children: [
+            hasScoreEffects ? /* @__PURE__ */ jsx16(Accordion, { children: /* @__PURE__ */ jsx16(AccordionItem, { title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`, children: /* @__PURE__ */ jsx16(
+              DimensionsTable_default,
+              {
+                preemptiveOverrides,
+                dimensionIndex: index,
+                dimensions: overrideEffects,
+                disableEditOverride: true
+              }
+            ) }) }) : null,
+            /* @__PURE__ */ jsx16(Button2, { type: "submit", css: styles.submitButton, disabled: isSubmitting, children: "Save" }),
+            /* @__PURE__ */ jsx16(NavigationLink_default, { route: "/overrides", css: styles.cancelButton, children: "Cancel" })
+          ] })
+        ] });
+      }
+    }
+  );
+};
+
+// src/components/Personalization/Dimensions.tsx
+import { Button as Button3 } from "@uniformdev/design-system";
+import { Switch } from "@uniformdev/design-system";
+import * as React4 from "react";
+
+// src/lib/deleteOverride.ts
+async function deleteScoreOverrides({
+  actions,
+  saveSettings,
+  scores,
+  settings
+}) {
+  var _a, _b;
+  const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
+  const newOverrides = { ...scoreOverrides };
+  const commands = [];
+  for (const dim of Object.keys(scoreOverrides)) {
+    const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
+    delete newOverrides[dim];
+    commands.push({
+      type: "modscoreS",
+      data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
+    });
+  }
+  await saveSettings({
+    ...settings,
+    scoreOverrides: newOverrides
+  });
+  await actions.rawUpdate(commands);
+}
+async function deleteQuirkOverride({
+  quirk: dim,
+  settings,
+  saveSettings,
+  actions
+}) {
+  var _a;
+  const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
+  if (!override) {
+    return;
+  }
+  const newOverrides = { ...settings.quirkOverrides };
+  delete newOverrides[dim];
+  await saveSettings({
+    ...settings,
+    quirkOverrides: newOverrides
+  });
+  await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
+}
+
+// src/components/CallToAction/NoActiveDimensions.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
+  return /* @__PURE__ */ jsxs7("div", { css: cta, children: [
+    /* @__PURE__ */ jsx17("h2", { css: ctaTitle, children: title }),
+    /* @__PURE__ */ jsx17("p", { css: ctaText, children: text }),
+    children,
+    buttonGroup ? /* @__PURE__ */ jsx17("div", { css: ctaBtnGroup, children: buttonGroup }) : null
+  ] });
+};
+
+// src/components/Personalization/Dimensions.tsx
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+var Dimensions = ({
+  dimensionIndex: { index: dimensionIndex },
+  state: { scores, data },
+  actions,
+  saveSettings,
+  settings
+}) => {
+  const remainingDimensions = React4.useMemo(() => {
+    const newRemainingDimensions = {};
+    Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
+      newRemainingDimensions[dimensionIndex[key].dim] = 0;
+    });
+    return newRemainingDimensions;
+  }, [scores, dimensionIndex]);
+  const activeDims = Object.keys(scores).length;
+  const totalDims = activeDims + Object.keys(remainingDimensions).length;
+  const toggleControlGroup = () => {
+    actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
+  };
+  return /* @__PURE__ */ jsx18(Fragment2, { children: /* @__PURE__ */ jsxs8("article", { css: styles.page, children: [
+    /* @__PURE__ */ jsxs8("div", { css: styles.headingGroup, children: [
+      /* @__PURE__ */ jsxs8("h2", { css: styles.title, children: [
+        "Dimensions",
+        /* @__PURE__ */ jsxs8("small", { children: [
+          activeDims,
+          " active of ",
+          totalDims
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx18("div", { css: styles.reset, children: /* @__PURE__ */ jsx18(
+        Button3,
+        {
+          buttonType: "ghost",
+          onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget),
+          children: "clear all dimensions"
+        }
+      ) }),
+      /* @__PURE__ */ jsx18(
+        Switch,
+        {
+          name: "controlGroup",
+          label: "Control Group",
+          onChange: toggleControlGroup,
+          checked: data.controlGroup
+        }
+      )
+    ] }),
+    activeDims > 0 ? /* @__PURE__ */ jsx18(DimensionsTable_default, { dimensionIndex, dimensions: scores }) : /* @__PURE__ */ jsx18(
+      NoActiveDimensions,
+      {
+        title: data.controlGroup ? "In control group" : "No active dimensions",
+        text: data.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: data.controlGroup ? /* @__PURE__ */ jsx18(Button3, { buttonType: "secondary", onClick: toggleControlGroup, children: "Exit control group" }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx18(Accordion, { children: /* @__PURE__ */ jsx18(AccordionItem, { title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`, children: /* @__PURE__ */ jsx18(DimensionsTable_default, { dimensionIndex, dimensions: remainingDimensions }) }) })
+  ] }) });
+};
+
+// src/components/Personalization/Overrides.tsx
+import { AddButton } from "@uniformdev/design-system";
+import { Button as Button4 } from "@uniformdev/design-system";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+var Overrides = ({
+  dimensionIndex: { index: dimensionIndex },
+  state: { data, scores },
+  actions,
+  settings,
+  saveSettings
+}) => {
+  var _a;
+  const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
+  const totalOverrides = Object.keys(overrides).length;
+  const addNewOverride = (e) => {
+    e == null ? void 0 : e.preventDefault();
+    return saveSettings({ ...settings, route: "/overrides/add" });
+  };
+  const toggleControlGroup = () => {
+    actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
+  };
+  const scoresAffectedByOverrides = {};
+  Object.entries(scores).map(([key, value]) => {
+    if (overrides[key] !== void 0) {
+      scoresAffectedByOverrides[key] = value;
+    }
+  });
+  return /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsxs9("article", { css: styles.page, children: [
+    /* @__PURE__ */ jsxs9("div", { css: styles.headingGroup, children: [
+      /* @__PURE__ */ jsx19("h2", { css: styles.title, children: "What if?" }),
+      /* @__PURE__ */ jsx19("div", { css: styles.reset, children: /* @__PURE__ */ jsx19(
+        Button4,
+        {
+          buttonType: "ghost",
+          onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores }),
+          children: "delete all overrides"
+        }
+      ) }),
+      /* @__PURE__ */ jsx19(AddButton, { onClick: addNewOverride })
+    ] }),
+    /* @__PURE__ */ jsx19("p", { children: "Override dimension scores to test personalization" }),
+    totalOverrides > 0 ? /* @__PURE__ */ jsx19(
+      DimensionsTable_default,
+      {
+        dimensionIndex,
+        dimensions: scoresAffectedByOverrides,
+        onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
+      }
+    ) : /* @__PURE__ */ jsx19(
+      NoActiveDimensions,
+      {
+        title: data.controlGroup ? "In control group" : "No overrides",
+        text: data.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 any dimension overrides yet.",
+        buttonGroup: data.controlGroup ? /* @__PURE__ */ jsx19(Button4, { buttonType: "secondary", onClick: toggleControlGroup, children: "Exit control group" }) : null
+      }
+    )
+  ] }) });
+};
+
+// src/components/Personalization/Quirks.tsx
+import { Button as Button6, InputSelect as InputSelect2 } from "@uniformdev/design-system";
+import { useState as useState3 } from "react";
+
+// src/components/Inputs/EditableText.tsx
+import { Button as Button5, Input as Input2 } from "@uniformdev/design-system";
+import { useEffect, useState as useState2 } from "react";
+import { jsx as jsx20, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var EditableText = ({ name, value, submit }) => {
+  const [inputValue, setInputValue] = useState2(value != null ? value : "");
+  useEffect(() => {
+    setInputValue(value != null ? value : "");
+  }, [value]);
+  const onChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const isSameValue = inputValue === value;
+  return /* @__PURE__ */ jsxs10("div", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
+    /* @__PURE__ */ jsx20(Input2, { type: "text", css: [textInput], name, value: inputValue, onChange }),
+    /* @__PURE__ */ jsx20(
+      Button5,
+      {
+        buttonType: "primary",
+        disabled: isSameValue,
+        size: "sm",
+        onClick: () => submit(name, inputValue != null ? inputValue : ""),
+        children: "Save"
+      }
+    )
+  ] });
+};
+var EditableText_default = EditableText;
+
+// src/components/Personalization/Quirks.tsx
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+var Quirks = ({ ...props }) => {
+  const {
+    state: {
+      data: { quirks }
+    },
+    quirksIndex: { index: quirksIndex },
+    settings,
+    saveSettings,
+    actions
+  } = props;
+  const [editable, setEditable] = useState3("");
+  let editableQuirkMetaData;
+  if (editable) {
+    editableQuirkMetaData = quirksIndex[editable];
+  }
+  const submitOverride = async (name, value) => {
+    var _a, _b, _c;
+    setEditable("");
+    const newSettings = {
+      ...settings,
+      quirkOverrides: {
+        ...settings.quirkOverrides,
+        [name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
+      }
+    };
+    await saveSettings(newSettings);
+    const quirkOverrides = applyQuirkOverrides({
+      quirks,
+      quirkOverrides: newSettings.quirkOverrides
+    });
+    await actions.update({ quirks: quirkOverrides });
+  };
+  return /* @__PURE__ */ jsx21(Fragment4, { children: /* @__PURE__ */ jsxs11("article", { css: [styles.page, styles.quirks], children: [
+    /* @__PURE__ */ jsx21("h1", { css: styles.title, children: "Quirks" }),
+    /* @__PURE__ */ jsx21("p", { css: styles.text, children: "Keys defined in Uniform and their current, programmatically defined values for this visit." }),
+    Object.keys(quirksIndex).length ? /* @__PURE__ */ jsxs11(Table, { children: [
+      /* @__PURE__ */ jsx21(THead, { children: /* @__PURE__ */ jsxs11(TRow, { children: [
+        /* @__PURE__ */ jsx21(THeading, { width: "30%", children: "Key" }),
+        /* @__PURE__ */ jsx21(THeading, { width: "50%", children: "Value" }),
+        /* @__PURE__ */ jsx21(THeading, { width: "20%", children: "" })
+      ] }) }),
+      /* @__PURE__ */ jsx21(TBody, { children: Object.values(quirksIndex).map(({ name, value, id }) => {
+        var _a, _b, _c;
+        const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
+        let quirkOptions = [];
+        if (editableQuirkMetaData && editableQuirkMetaData.options) {
+          quirkOptions = editableQuirkMetaData.options.map((option) => ({
+            value: option.value,
+            label: option.name
+          }));
+        }
+        return /* @__PURE__ */ jsxs11(TRow, { border: "bottom", children: [
+          /* @__PURE__ */ jsx21(TData, { children: /* @__PURE__ */ jsx21("strong", { children: name }) }),
+          /* @__PURE__ */ jsxs11(TData, { children: [
+            editable !== id ? /* @__PURE__ */ jsxs11(
+              "div",
+              {
+                onClick: () => {
+                  setEditable(id);
+                },
+                children: [
+                  initialValue ? /* @__PURE__ */ jsx21("div", { children: /* @__PURE__ */ jsx21("s", { children: initialValue }) }) : null,
+                  value
+                ]
+              }
+            ) : null,
+            editable === id && editableQuirkMetaData && /* @__PURE__ */ jsx21(Fragment4, { children: editableQuirkMetaData.options ? /* @__PURE__ */ jsx21(
+              InputSelect2,
+              {
+                showLabel: false,
+                label: `Change ${name}`,
+                defaultOption: `Change ${name}`,
+                name: id,
+                onChange: (e) => submitOverride(e.target.name, e.target.value),
+                options: quirkOptions
+              }
+            ) : /* @__PURE__ */ jsx21(EditableText_default, { name: id, value, submit: submitOverride }) })
+          ] }),
+          /* @__PURE__ */ jsx21(TData, { children: editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ jsx21(
+            Button6,
+            {
+              buttonType: "ghost",
+              onClick: () => {
+                deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
+              },
+              children: /* @__PURE__ */ jsx21("small", { children: "Clear Override" })
+            }
+          ) : /* @__PURE__ */ jsx21(
+            Button6,
+            {
+              buttonType: "ghost",
+              onClick: () => {
+                setEditable(id);
+              },
+              children: /* @__PURE__ */ jsx21("small", { children: "Override" })
+            }
+          ) })
+        ] }, id);
+      }) })
+    ] }) : /* @__PURE__ */ jsx21(
+      NoActiveDimensions,
+      {
+        title: "No quirks configured",
+        text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
+      }
+    )
+  ] }) });
+};
+
+// src/components/Personalization/Settings.tsx
+import { Button as Button7 } from "@uniformdev/design-system";
+import { Switch as Switch2 } from "@uniformdev/design-system";
+import { jsx as jsx22, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var Settings = ({
+  settings,
+  saveSettings,
+  actions,
+  state: { data },
+  clearAllExtensionData
+}) => {
+  return /* @__PURE__ */ jsxs12("article", { css: [styles.page, { display: "flex", flexDirection: "column", gap: "var(--spacing-base)" }], children: [
+    /* @__PURE__ */ jsx22("h1", { css: styles.title, children: "Settings" }),
+    /* @__PURE__ */ jsxs12(Fieldset, { children: [
+      /* @__PURE__ */ jsx22(Legend, { children: "Data Connection" }),
+      /* @__PURE__ */ jsx22(
+        Button7,
+        {
+          buttonType: "tertiary",
+          onClick: () => {
+            saveSettings({ ...settings, route: "/connect" });
+          },
+          children: "Manage Connection to Uniform"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12(Fieldset, { children: [
+      /* @__PURE__ */ jsx22(Legend, { children: "Storage Consent" }),
+      /* @__PURE__ */ jsx22(
+        Switch2,
+        {
+          label: "Store visitor data",
+          id: "consent-mode",
+          name: "consentMode",
+          checked: data.consent,
+          onChange: (e) => {
+            actions.rawUpdate([{ type: "consent", data: e.currentTarget.checked }]);
+            saveSettings({
+              ...settings,
+              consentMode: e.currentTarget.checked
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx22("p", { children: /* @__PURE__ */ jsx22("small", { children: "Enabling storage consent allows storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh." }) })
+    ] }),
+    /* @__PURE__ */ jsxs12(Fieldset, { children: [
+      /* @__PURE__ */ jsx22(Legend, { children: "Logging" }),
+      /* @__PURE__ */ jsx22(
+        Switch2,
+        {
+          label: "Write Uniform Context diagnostic logs to browser console",
+          id: "logging",
+          name: "logging",
+          checked: settings.logLevel === "debug",
+          onChange: (e) => saveSettings({
+            ...settings,
+            logLevel: e.currentTarget.checked ? "debug" : "none"
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12(Fieldset, { children: [
+      /* @__PURE__ */ jsx22(Legend, { children: "Clear extension storage" }),
+      /* @__PURE__ */ jsx22(
+        Button7,
+        {
+          onClick: () => {
+            clearAllExtensionData();
+          },
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsx22("p", { children: /* @__PURE__ */ jsx22("small", { children: "May be necessary when you have multiple different sites on the same domain name (e.g. http://localhost:3000) and there are some conflicts or other unexpected behaviour." }) })
+    ] })
+  ] });
+};
+
+// src/components/QuickConnect/QuickConnect.tsx
+import { parseQuickConnect } from "@uniformdev/context";
+import { ApiClientError, UncachedManifestClient } from "@uniformdev/context/api";
+import { Button as Button8, ErrorMessage as ErrorMessage2, Input as Input3 } from "@uniformdev/design-system";
+import { Field as Field2, Form as Form2, Formik as Formik2 } from "formik";
+import * as React5 from "react";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+function QuickConnect(props) {
+  const [state, setState] = React5.useState(props.currentData ? "c" : "qc");
+  const [error, setError] = React5.useState(void 0);
+  const [manifest, setManifest] = React5.useState(void 0);
+  const fetchManifest = React5.useCallback(async (data) => {
+    const client = new UncachedManifestClient(data);
+    setError(void 0);
+    try {
+      const manifest2 = await client.get({ preview: true });
+      setManifest({ manifest: manifest2, target: data });
+      return manifest2;
+    } catch (e) {
+      if (e instanceof ApiClientError) {
+        if (e.statusCode === 403) {
+          setError(
+            "API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."
+          );
+        } else {
+          setError(e.errorMessage);
+        }
+        return;
+      }
+      if ("message" in e) {
+        if (e.message === "Failed to fetch") {
+          setError("A network error occurred. Ensure the API host is valid.");
+        } else {
+          setError(e.message);
+        }
+        return;
+      }
+      setError(JSON.stringify(e, null, 2));
+      return;
+    }
+  }, []);
+  React5.useEffect(() => {
+    if (!props.currentData)
+      return;
+    fetchManifest(props.currentData);
+  }, [fetchManifest, props.currentData]);
+  const onConnect = async (data) => {
+    const manifest2 = await fetchManifest(data);
+    if (manifest2) {
+      setState("c");
+      await props.onConnect(data);
+    }
+  };
+  const onDisconnect = () => {
+    if (confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")) {
+      setState("qc");
+      setManifest(void 0);
+      setError(void 0);
+      props.onConnect(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    error ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+      /* @__PURE__ */ jsx23(ErrorMessage2, { message: error }),
+      /* @__PURE__ */ jsx23(Button8, { buttonType: "secondary", type: "button", onClick: onDisconnect, children: "Clear old/broken settings" })
+    ] }) : null,
+    state === "qc" || state === "mc" ? /* @__PURE__ */ jsx23(ConnectForm, { ...props, state, setState, onConnect }) : /* @__PURE__ */ jsx23("div", { children: manifest ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+      /* @__PURE__ */ jsxs13("p", { children: [
+        "Connected to",
+        " ",
+        /* @__PURE__ */ jsx23(
+          "a",
+          {
+            href: `${manifest == null ? void 0 : manifest.target.apiHost}/projects/${manifest == null ? void 0 : manifest.target.projectId}`,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            css: { textDecoration: "underline" },
+            children: /* @__PURE__ */ jsx23("strong", { children: manifest == null ? void 0 : manifest.manifest.project.name })
+          }
+        ),
+        " ",
+        /* @__PURE__ */ jsxs13("small", { children: [
+          "(",
+          manifest == null ? void 0 : manifest.manifest.project.id,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx23(Button8, { buttonType: "secondary", type: "button", onClick: onDisconnect, children: "Disconnect" })
+    ] }) : null })
+  ] });
+}
+function ConnectForm({
+  setState,
+  state,
+  currentData,
+  onConnect
+}) {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+    Formik2,
+    {
+      initialValues: {
+        apiHost: (_a = currentData == null ? void 0 : currentData.apiHost) != null ? _a : "https://uniform.app",
+        apiKey: (_b = currentData == null ? void 0 : currentData.apiKey) != null ? _b : "",
+        projectId: (_c = currentData == null ? void 0 : currentData.projectId) != null ? _c : "",
+        qc: ""
+      },
+      onSubmit: onConnect,
+      children: ({ setFieldValue, setFieldError, errors: { qc }, isSubmitting }) => /* @__PURE__ */ jsx23(Form2, { children: /* @__PURE__ */ jsx23("fieldset", { css: { display: "flex", flexDirection: "column", gap: "var(--spacing-base)" }, children: state === "qc" ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+          Input3,
+          {
+            placeholder: "Paste Quick Connect Code Here",
+            caption: "Copy the Quick Connect code after creating an API key in Uniform.",
+            errorMessage: qc,
+            onChange: (e) => {
+              try {
+                const qc2 = parseQuickConnect(e.currentTarget.value);
+                setFieldValue("apiHost", qc2.apiHost);
+                setFieldValue("apiKey", qc2.apiKey);
+                setFieldValue("projectId", qc2.projectId);
+              } catch (e2) {
+                setFieldError("qc", e2.message);
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs13("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
+          /* @__PURE__ */ jsx23(Button8, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
+          /* @__PURE__ */ jsx23(
+            Button8,
+            {
+              type: "button",
+              buttonType: "ghost",
+              onClick: () => setState("mc"),
+              disabled: isSubmitting,
+              children: "Connect Manually"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+          Field2,
+          {
+            component: FormikInput,
+            label: "API Key",
+            name: "apiKey",
+            caption: "Generate an API key in your Uniform team settings."
+          }
+        ) }),
+        /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+          Field2,
+          {
+            component: FormikInput,
+            label: "Project ID",
+            name: "projectId",
+            caption: "Available to copy after generating an API key"
+          }
+        ) }),
+        /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23(
+          Field2,
+          {
+            component: FormikInput,
+            label: "API Host",
+            name: "apiHost",
+            caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option."
+          }
+        ) }),
+        /* @__PURE__ */ jsxs13("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
+          /* @__PURE__ */ jsx23(Button8, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
+          /* @__PURE__ */ jsx23(
+            Button8,
+            {
+              type: "button",
+              buttonType: "ghost",
+              onClick: () => setState("qc"),
+              disabled: isSubmitting,
+              children: "Use Quick Connect"
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  ) });
+}
+
+// src/components/QuickConnect/ConnectRoute.tsx
+import { jsx as jsx24, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+var ConnectRoute = ({ settings, saveSettings }) => {
+  const currentData = settings.apiKey && settings.projectId ? { apiKey: settings.apiKey, projectId: settings.projectId, apiHost: settings.apiHost } : void 0;
+  return /* @__PURE__ */ jsxs14("article", { css: styles.page, children: [
+    /* @__PURE__ */ jsx24("h1", { css: styles.title, children: "Connect to a Uniform Project" }),
+    /* @__PURE__ */ jsx24("p", { css: styles.text, children: /* @__PURE__ */ jsx24("small", { children: "Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this." }) }),
+    /* @__PURE__ */ jsx24(
+      QuickConnect,
+      {
+        onConnect: async (data) => {
+          if (data) {
+            await saveSettings({
+              ...settings,
+              apiKey: data.apiKey,
+              projectId: data.projectId,
+              apiHost: data.apiHost
+            });
+          } else {
+            await saveSettings({
+              ...settings,
+              apiKey: void 0,
+              projectId: void 0,
+              apiHost: void 0
+            });
+          }
+        },
+        currentData
+      }
+    )
+  ] });
+};
+
+// src/components/StatusPages/AdditionalDataLoading.tsx
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useMountedState } from "react-use";
+import { jsx as jsx25, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
+var AdditionalDataLoading = () => {
+  const [viz, setViz] = useState5(false);
+  const mounted = useMountedState();
+  useEffect3(() => {
+    setTimeout(() => {
+      if (mounted()) {
+        setViz(true);
+      }
+    }, 1e3);
+  }, [mounted]);
+  return viz ? /* @__PURE__ */ jsxs15("article", { css: styles.page, children: [
+    /* @__PURE__ */ jsx25("h1", { children: "Loading..." }),
+    /* @__PURE__ */ jsx25("p", { children: "Connecting to Uniform API for complete data." })
+  ] }) : null;
+};
+
+// src/components/StatusPages/NotFound.tsx
+import { jsx as jsx26, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var NotFound = () => {
+  return /* @__PURE__ */ jsxs16("article", { children: [
+    /* @__PURE__ */ jsx26("h1", { children: "Something when wrong" }),
+    /* @__PURE__ */ jsx26("p", { children: "We could not find the page you're looking for." })
+  ] });
+};
+
+// src/components/ContextDevTools.tsx
+import { jsx as jsx27, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+var mainLayoutStyle = css12`
   background: var(--white);
   padding: var(--spacing-base);
   overflow-y: auto;
@@ -453,7 +2019,51 @@ to {
   &::-webkit-scrollbar-thumb:hover {
     background: var(--gray-500);
   }
-`;function Et(e){let o=Qe(e.settings,e.state.manifest),r=Fe(e.settings,e.state.data.quirks),t={...e,dimensionIndex:o,quirksIndex:r},n=()=>{var s;if(o.loading||r.loading)return S(Pt,{});if(e.settings.route&&e.settings.route.match(/overrides\/\w+/))return S(Ve,{...t});switch((s=e.settings)==null?void 0:s.route){case void 0:case"/":case"/dimensions":return S(ft,{...t});case"/overrides":return S(xt,{...t});case"/overrides/add":return S(Ve,{...t});case"/quirks":return S(Tt,{...t});case"/settings":return S(Lt,{...t});case"/connect":return S(Rt,{...t});default:return S(Ht,{})}};return He(Ne,{settings:e.settings,saveSettings:e.saveSettings,children:[S(sr,{}),S(le,{}),He("div",{css:Mt`
+`;
+function ContextDevTools(props) {
+  const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
+  const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
+  const routeProps = {
+    ...props,
+    dimensionIndex,
+    quirksIndex
+  };
+  const component = () => {
+    var _a;
+    if (dimensionIndex.loading || quirksIndex.loading) {
+      return /* @__PURE__ */ jsx27(AdditionalDataLoading, {});
+    }
+    if (props.settings.route) {
+      if (props.settings.route.match(/overrides\/\w+/)) {
+        return /* @__PURE__ */ jsx27(AddOverride, { ...routeProps });
+      }
+    }
+    switch ((_a = props.settings) == null ? void 0 : _a.route) {
+      case void 0:
+      case "/":
+      case "/dimensions":
+        return /* @__PURE__ */ jsx27(Dimensions, { ...routeProps });
+      case "/overrides":
+        return /* @__PURE__ */ jsx27(Overrides, { ...routeProps });
+      case "/overrides/add":
+        return /* @__PURE__ */ jsx27(AddOverride, { ...routeProps });
+      case "/quirks":
+        return /* @__PURE__ */ jsx27(Quirks, { ...routeProps });
+      case "/settings":
+        return /* @__PURE__ */ jsx27(Settings, { ...routeProps });
+      case "/connect":
+        return /* @__PURE__ */ jsx27(ConnectRoute, { ...routeProps });
+      default:
+        return /* @__PURE__ */ jsx27(NotFound, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs17(DevToolsSettingsContextProvider, { settings: props.settings, saveSettings: props.saveSettings, children: [
+    /* @__PURE__ */ jsx27(DesignSystemTheme, {}),
+    /* @__PURE__ */ jsx27(Theme, {}),
+    /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        css: css12`
           display: grid;
           grid-template-columns: 200px auto;
           font-weight: var(--fs-base);
@@ -462,7 +2072,157 @@ to {
           line-height: var(--base-line-height);
           height: var(--min-height);
           min-width: var(--site-width);
-        `,children:[S(Ge,{...e}),He("main",{css:ar,children:[S(Se,{...e}),n()]})]})]})}import{Context as cr,createDebugConsoleLogDrain as lr}from"@uniformdev/context";import*as E from"react";import{jsx as At}from"@emotion/react/jsx-runtime";var Me="embeddedUniformDevToolsSettings";function Bt({context:e,initialSettings:o}){let r=e!=null?e:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,t=r!=null?r:new cr({manifest:{project:{}}}),[n,s]=E.useState({data:t.storage.data,manifest:t.manifest.data,scores:t.scores,personalizations:[],tests:[]}),[l,d]=E.useState(o!=null?o:{});E.useEffect(()=>{var c;let a=lr((c=l.logLevel)!=null?c:"none");return t.events.on("log",a),()=>{t.events.off("log",a)}},[l,t]),E.useEffect(()=>{let a=()=>{let u=window.localStorage.getItem(Me)||"{}",f=JSON.parse(u),C=ge({quirks:t.storage.data.quirks,quirkOverrides:f.quirkOverrides});C&&(console.log("Applying overridden quirks:",C),t.update({quirks:C}));let w=ne({scores:t.scores,scoreOverrides:f.scoreOverrides});w.length&&(console.log("Applying overridden scores:",w),t.storage.updateData(w)),s(k=>({...k,scores:t.scores,data:t.storage.data,manifest:t.manifest.data}))},c=u=>{!u.changed||s(f=>({...f,personalizations:[...f.personalizations,u]}))},v=u=>{!u.variantAssigned||s(f=>({...f,tests:[...f.tests,u]}))};return t.events.on("personalizationResult",c),t.events.on("testResult",v),t.storage.events.on("*",a),()=>{t.storage.events.off("*",a),t.events.off("personalizationResult",c),t.events.off("testResult",v)}},[t]),E.useEffect(()=>{if(window.localStorage){let a=window.localStorage.getItem(Me);if(a)try{let c=JSON.parse(a),v={...o,...c};d(v);let u=ne({scores:n.scores,scoreOverrides:v.scoreOverrides});p.rawUpdate(u)}catch(c){window.localStorage.removeItem(Me),console.error("Failed to parse settings from localStorage: ",c.message)}}},[]);let{actions:p,saveSettings:m,clearAllExtensionData:i}=E.useMemo(()=>({actions:{update:u=>t.update(u),forget:()=>t.forget(!1),rawUpdate:u=>t.storage.updateData(u)},saveSettings:async u=>{d(u),window.localStorage&&window.localStorage.setItem("embeddedUniformDevToolsSettings",JSON.stringify(u))},clearAllExtensionData:async()=>{d({route:"/"}),window.localStorage&&(window.localStorage.removeItem("embeddedUniformDevToolsSettings"),window.location.reload())}}),[t]);return r?At(Et,{state:n,actions:p,settings:l,saveSettings:m,clearAllExtensionData:i}):At("p",{children:"Unable to find Uniform Context. Ensure the devtools plugin is activated."})}import{css as Ee}from"@emotion/react";import{Button as mr,Callout as ur,Paragraph as gr,Theme as vr}from"@uniformdev/design-system";import*as U from"react";import{useLocalStorage as fr}from"react-use";import{css as dr}from"@emotion/react";import{jsx as De,jsxs as Qt}from"@emotion/react/jsx-runtime";var pr=dr`
+        `,
+        children: [
+          /* @__PURE__ */ jsx27(Menu, { ...props }),
+          /* @__PURE__ */ jsxs17("main", { css: mainLayoutStyle, children: [
+            /* @__PURE__ */ jsx27(ConnectApiKey, { ...props }),
+            component()
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/EmbeddedContextDevTools.tsx
+import {
+  Context as Context2,
+  createDebugConsoleLogDrain
+} from "@uniformdev/context";
+import * as React6 from "react";
+import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
+var LOCAL_STORAGE_SETTINGS_KEY = "embeddedUniformDevToolsSettings";
+function EmbeddedContextDevTools({ context, initialSettings }) {
+  const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
+  const contextInstance = contextValue != null ? contextValue : new Context2({ manifest: { project: {} } });
+  const [state, setState] = React6.useState({
+    data: contextInstance.storage.data,
+    manifest: contextInstance.manifest.data,
+    scores: contextInstance.scores,
+    personalizations: [],
+    tests: []
+  });
+  const [settings, setSettings] = React6.useState(initialSettings != null ? initialSettings : {});
+  React6.useEffect(() => {
+    var _a;
+    const drain = createDebugConsoleLogDrain((_a = settings.logLevel) != null ? _a : "none");
+    contextInstance.events.on("log", drain);
+    return () => {
+      contextInstance.events.off("log", drain);
+    };
+  }, [settings, contextInstance]);
+  React6.useEffect(() => {
+    const onContextDataUpdated = () => {
+      const settingsJson = window.localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY) || "{}";
+      const currentSettings = JSON.parse(settingsJson);
+      const quirkOverrides = applyQuirkOverrides({
+        quirks: contextInstance.storage.data.quirks,
+        quirkOverrides: currentSettings.quirkOverrides
+      });
+      if (quirkOverrides) {
+        console.log("Applying overridden quirks:", quirkOverrides);
+        contextInstance.update({ quirks: quirkOverrides });
+      }
+      const overrideCommands = applyScoreOverrides({
+        scores: contextInstance.scores,
+        scoreOverrides: currentSettings.scoreOverrides
+      });
+      if (overrideCommands.length) {
+        console.log("Applying overridden scores:", overrideCommands);
+        contextInstance.storage.updateData(overrideCommands);
+      }
+      setState((old) => ({
+        ...old,
+        scores: contextInstance.scores,
+        data: contextInstance.storage.data,
+        manifest: contextInstance.manifest.data
+      }));
+    };
+    const onPersonalizationResult = (e) => {
+      if (!e.changed)
+        return;
+      setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
+    };
+    const onTestResult = (e) => {
+      if (!e.variantAssigned)
+        return;
+      setState((old) => ({ ...old, tests: [...old.tests, e] }));
+    };
+    contextInstance.events.on("personalizationResult", onPersonalizationResult);
+    contextInstance.events.on("testResult", onTestResult);
+    contextInstance.storage.events.on("*", onContextDataUpdated);
+    return () => {
+      contextInstance.storage.events.off("*", onContextDataUpdated);
+      contextInstance.events.off("personalizationResult", onPersonalizationResult);
+      contextInstance.events.off("testResult", onTestResult);
+    };
+  }, [contextInstance]);
+  React6.useEffect(() => {
+    if (window.localStorage) {
+      const settingsJson = window.localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY);
+      if (settingsJson) {
+        try {
+          const parsedSettings = JSON.parse(settingsJson);
+          const newSettings = { ...initialSettings, ...parsedSettings };
+          setSettings(newSettings);
+          const applyCommands = applyScoreOverrides({
+            scores: state.scores,
+            scoreOverrides: newSettings.scoreOverrides
+          });
+          actions.rawUpdate(applyCommands);
+        } catch (e) {
+          window.localStorage.removeItem(LOCAL_STORAGE_SETTINGS_KEY);
+          console.error("Failed to parse settings from localStorage: ", e.message);
+        }
+      }
+    }
+  }, []);
+  const { actions, saveSettings, clearAllExtensionData } = React6.useMemo(() => {
+    const actions2 = {
+      update: (up) => contextInstance.update(up),
+      forget: () => contextInstance.forget(false),
+      rawUpdate: (commands) => contextInstance.storage.updateData(commands)
+    };
+    const saveSettings2 = async (settings2) => {
+      setSettings(settings2);
+      if (window.localStorage) {
+        window.localStorage.setItem("embeddedUniformDevToolsSettings", JSON.stringify(settings2));
+      }
+    };
+    const clearAllExtensionData2 = async () => {
+      setSettings({
+        route: "/"
+      });
+      if (window.localStorage) {
+        window.localStorage.removeItem("embeddedUniformDevToolsSettings");
+        window.location.reload();
+      }
+    };
+    return { actions: actions2, saveSettings: saveSettings2, clearAllExtensionData: clearAllExtensionData2 };
+  }, [contextInstance]);
+  return contextValue ? /* @__PURE__ */ jsx28(
+    ContextDevTools,
+    {
+      state,
+      actions,
+      settings,
+      saveSettings,
+      clearAllExtensionData
+    }
+  ) : /* @__PURE__ */ jsx28("p", { children: "Unable to find Uniform Context. Ensure the devtools plugin is activated." });
+}
+
+// src/components/ToggleEmbeddedContextDevTools.tsx
+import { css as css14 } from "@emotion/react";
+import { Button as Button9, Callout, Paragraph, Theme as DesignSystemTheme2 } from "@uniformdev/design-system";
+import * as React7 from "react";
+import { useLocalStorage } from "react-use";
+
+// src/components/EmbedToggleButton/EmbedToggleButton.tsx
+import { css as css13 } from "@emotion/react";
+import { jsx as jsx29, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+var btnStyle2 = css13`
   align-items: center;
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-5);
@@ -488,15 +2248,106 @@ to {
     max-width: 100%;
     height: auto;
   }
-`,Ft=({...e})=>Qt("button",{type:"button",css:pr,...e,children:[De("span",{hidden:!0,children:"Uniform devtools"}),Qt("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[De("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),De("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"}),De("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"})]})]});import{jsx as A,jsxs as qt}from"@emotion/react/jsx-runtime";var hr="dblgnkbknchechcibdojfdoeeodhmgbd",br="dcmlokofjljnfjcknpmhjocogllfbhkg";function Os(e){let[o,r]=U.useState(!1),[t,n]=U.useState(e.context),[s,l]=U.useState(!1),[d,p]=fr("isUniformInlineDevtoolsDisabled",!1);return U.useEffect(()=>{!e.context&&typeof document!="undefined"&&n(window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__)},[e.context]),U.useEffect(()=>{[br,hr].map(m=>{let i=new Image;i.src=`chrome-extension://${m}/icons/uniform-logo.png`,i.onload=()=>l(!0)})},[]),d?null:t?qt("div",{children:[A(vr,{}),A(le,{}),A(Ft,{onClick:()=>r(m=>!m)}),o?A("div",{css:Ee`
+`;
+var EmbedToggleButton = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs18("button", { type: "button", css: btnStyle2, ...props, children: [
+    /* @__PURE__ */ jsx29("span", { hidden: true, children: "Uniform devtools" }),
+    /* @__PURE__ */ jsxs18("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx29(
+        "path",
+        {
+          d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx29(
+        "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"
+        }
+      ),
+      /* @__PURE__ */ jsx29(
+        "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"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/ToggleEmbeddedContextDevTools.tsx
+import { jsx as jsx30, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+var localChromex = "dblgnkbknchechcibdojfdoeeodhmgbd";
+var prodChromex = "dcmlokofjljnfjcknpmhjocogllfbhkg";
+function ToggleEmbeddedContextDevTools(props) {
+  const [devtoolsOpen, setDevtoolsOpen] = React7.useState(false);
+  const [contextValue, setContextValue] = React7.useState(props.context);
+  const [extensionExists, setExtensionExists] = React7.useState(false);
+  const [isUniformInlineDevtoolsDisabled, setUniformInlineDevtoolsDisabled] = useLocalStorage(
+    "isUniformInlineDevtoolsDisabled",
+    false
+  );
+  React7.useEffect(() => {
+    if (!props.context && typeof document !== "undefined") {
+      setContextValue(window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__);
+    }
+  }, [props.context]);
+  React7.useEffect(() => {
+    [prodChromex, localChromex].map((extensionId) => {
+      const img = new Image();
+      img.src = `chrome-extension://${extensionId}/icons/uniform-logo.png`;
+      img.onload = () => setExtensionExists(true);
+    });
+  }, []);
+  if (isUniformInlineDevtoolsDisabled) {
+    return null;
+  }
+  return contextValue ? /* @__PURE__ */ jsxs19("div", { children: [
+    /* @__PURE__ */ jsx30(DesignSystemTheme2, {}),
+    /* @__PURE__ */ jsx30(Theme, {}),
+    /* @__PURE__ */ jsx30(EmbedToggleButton, { onClick: () => setDevtoolsOpen((prev) => !prev) }),
+    devtoolsOpen ? /* @__PURE__ */ jsx30(
+      "div",
+      {
+        css: css14`
             box-shadow: var(--shadow-base);
             position: fixed;
             bottom: 82px;
             right: var(--spacing-base);
             z-index: var(--z-10);
             max-width: var(--site-width);
-          `,children:s?A("div",{css:Ee`
+          `,
+        children: extensionExists ? /* @__PURE__ */ jsx30(
+          "div",
+          {
+            css: css14`
                 padding: var(--spacing-md);
-              `,children:qt(ur,{type:"danger",title:"This functionality is disabled.",children:[A(gr,{children:"We detected you already use the Uniform Context browser extension. Using both tools is not supported. Please use the functionality of the browser extension instead."}),A(mr,{css:Ee`
+              `,
+            children: /* @__PURE__ */ jsxs19(Callout, { type: "danger", title: "This functionality is disabled.", children: [
+              /* @__PURE__ */ jsx30(Paragraph, { children: "We detected you already use the Uniform Context browser extension. Using both tools is not supported. Please use the functionality of the browser extension instead." }),
+              /* @__PURE__ */ jsx30(
+                Button9,
+                {
+                  css: css14`
                     margin-top: var(--spacing-md);
-                  `,buttonType:"secondary",onClick:()=>p(!0),children:"Disabled inline tools"})]})}):A(Bt,{...e})}):null]}):A("p",{children:"Unable to find Uniform Context. Ensure the devtools plugin is activated."})}export{Et as ContextDevTools,Bt as EmbeddedContextDevTools,Os as ToggleEmbeddedContextDevTools};
+                  `,
+                  buttonType: "secondary",
+                  onClick: () => setUniformInlineDevtoolsDisabled(true),
+                  children: "Disabled inline tools"
+                }
+              )
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx30(EmbeddedContextDevTools, { ...props })
+      }
+    ) : null
+  ] }) : /* @__PURE__ */ jsx30("p", { children: "Unable to find Uniform Context. Ensure the devtools plugin is activated." });
+}
+export {
+  ContextDevTools,
+  EmbeddedContextDevTools,
+  ToggleEmbeddedContextDevTools
+};