@uniformdev/context-devtools 19.67.0 → 19.68.1-alpha.27

package/dist/esm/index.js

@@ -173,7 +173,7 @@ 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);
+  background-color: var(--gray-50);
   padding: var(--spacing-base) var(--spacing-md);
   margin: var(--spacing-base) 0;
   position: relative;
@@ -182,8 +182,8 @@ var cta = css`
   }
 `;
 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")
+  background: var(--gray-50)
+    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='%237953c6' /%3E%3C/svg%3E")
     no-repeat var(--spacing-sm) var(--spacing-base);
   padding: var(--spacing-base) var(--spacing-xl);
 `;
@@ -202,7 +202,7 @@ var ctaClose = css`
   align-items: center;
   border: none;
   background: transparent
-    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='%232ecdb4' /%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='%236b7280' /%3E%3C/svg%3E")
     no-repeat center center;
   cursor: pointer;
   color: var(--brand-secondary-3);
@@ -262,7 +262,7 @@ var ExtensionVersion = () => {
     {
       css: css2`
         font-size: var(--fs-sm);
-        color: var(--gray-400);
+        color: var(--gray-500);
         position: absolute;
         bottom: 2px;
         right: 5px;
@@ -320,7 +320,7 @@ var links = [
     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"/>
+    <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="currentColor"/>
     </svg>
     `
   },
@@ -348,12 +348,12 @@ var links = [
     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"/>
+    <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="currentColor"/>
     </svg>
     `
   }
 ];
-var googleChromeExtensionSvg = `<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="currentColor" 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>
@@ -373,7 +373,7 @@ var Menu = ({ ...props }) => {
     "nav",
     {
       css: css3`
-        background: var(--brand-secondary-1);
+        background: var(--gray-50);
         padding: var(--spacing-base) var(--spacing-base) var(--spacing-md);
         min-width: 200px;
         display: flex;
@@ -426,7 +426,7 @@ var Menu = ({ ...props }) => {
                       "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"
+                        fill: "var(--brand-secondary-1)"
                       }
                     )
                   ] }),
@@ -472,10 +472,11 @@ var Menu = ({ ...props }) => {
                     NavigationLink_default,
                     {
                       css: css3`
+                  --icon: var(--gray-500);
                   align-items: center;
                   border-radius: var(--rounded-base);
                   display: flex;
-                  color: var(--white);
+                  color: var(--brand-secondary-1);
                   gap: var(--spacing-sm);
                   padding: var(--spacing-sm) var(--spacing-base);
                   text-decoration: none;
@@ -483,7 +484,11 @@ var Menu = ({ ...props }) => {
 
                   &:hover,
                   &.active {
-                    background: var(--gray-700);
+                    background: var(--gray-200);
+                  }
+
+                  &.active {
+                    --icon: var(--brand-secondary-3);
                   }
                 `,
                       className: isActivePath(item.href),
@@ -493,6 +498,7 @@ var Menu = ({ ...props }) => {
                           "i",
                           {
                             css: css3`
+                    color: var(--icon);
                     align-items: center;
                     display: flex;
                   `,
@@ -504,12 +510,13 @@ var Menu = ({ ...props }) => {
                           "span",
                           {
                             css: css3`
+                      background: var(--raspberry-beret-400);
+                      color: var(--white);
                       font-size: var(--fs-xxs);
                       display: inline-block;
                       width: 12px;
                       height: 12px;
                       border-radius: 6px;
-                      background-color: var(--red-tooltip);
                       text-align: center;
                       line-height: 12px;
                     `,
@@ -535,7 +542,7 @@ var Menu = ({ ...props }) => {
             border-radius: var(--rounded-base);
             display: flex;
             font-size: var(--fs-sm);
-            color: var(--white);
+            color: var(--brand-secondary-1);
             gap: var(--spacing-sm);
             padding: var(--spacing-sm) var(--spacing-base);
             text-decoration: none;
@@ -543,7 +550,7 @@ var Menu = ({ ...props }) => {
 
             &:hover,
             &.active {
-              background: var(--gray-700);
+              background: var(--gray-200);
             }
           `,
             rel: "noreferrer",
@@ -553,6 +560,7 @@ var Menu = ({ ...props }) => {
                 {
                   css: css3`
               align-items: center;
+              color: var(--gray-500);
               display: flex;
             `,
                   dangerouslySetInnerHTML: { __html: googleChromeExtensionSvg }
@@ -646,7 +654,7 @@ 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);
+  border-bottom: 1px solid var(--gray-400);
   font-size: var(--fs-base);
   margin: 0;
 `;
@@ -655,14 +663,16 @@ var btnStyle = css4`
   border: none;
   background: none;
   cursor: pointer;
+  color: var(--brand-secondary-1);
   display: flex;
   width: 100%;
   padding: var(--spacing-sm) 0;
-  font-weight: var(--fw-bold);
   justify-content: space-between;
 `;
 var iconStyle = css4`
   align-self: center;
+  color: var(--gray-400);
+  transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
 var iconActiveStyle = css4`
   transform: rotate(-180deg);
@@ -1438,7 +1448,7 @@ var Dimensions = ({
       /* @__PURE__ */ jsx18("div", { css: styles.reset, children: /* @__PURE__ */ jsx18(
         Button3,
         {
-          buttonType: "ghost",
+          buttonType: "ghostDestructive",
           onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget),
           children: "clear all dimensions"
         }
@@ -1466,7 +1476,6 @@ var Dimensions = ({
 };
 
 // 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 = ({
@@ -1498,12 +1507,12 @@ var Overrides = ({
       /* @__PURE__ */ jsx19("div", { css: styles.reset, children: /* @__PURE__ */ jsx19(
         Button4,
         {
-          buttonType: "ghost",
+          buttonType: "ghostDestructive",
           onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores }),
           children: "delete all overrides"
         }
       ) }),
-      /* @__PURE__ */ jsx19(AddButton, { onClick: addNewOverride })
+      /* @__PURE__ */ jsx19(Button4, { buttonType: "secondaryInvert", size: "sm", onClick: addNewOverride, children: "Add override" })
     ] }),
     /* @__PURE__ */ jsx19("p", { children: "Override dimension scores to test personalization" }),
     totalOverrides > 0 ? /* @__PURE__ */ jsx19(
@@ -1686,7 +1695,7 @@ var Settings = ({
       /* @__PURE__ */ jsx22(
         Button7,
         {
-          buttonType: "tertiary",
+          buttonType: "secondary",
           onClick: () => {
             saveSettings({ ...settings, route: "/connect" });
           },
@@ -1738,6 +1747,7 @@ var Settings = ({
           onClick: () => {
             clearAllExtensionData();
           },
+          buttonType: "destructive",
           children: "Clear"
         }
       ),

package/dist/index.d.mts

@@ -75,7 +75,7 @@ type EmbeddedContextDevToolsProps = {
     /** Initial settings for the devtools. */
     initialSettings?: DevToolsSettings;
 };
-/** Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */
+/** @deprecated Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */
 declare function EmbeddedContextDevTools({ context, initialSettings }: EmbeddedContextDevToolsProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */

package/dist/index.d.ts

@@ -75,7 +75,7 @@ type EmbeddedContextDevToolsProps = {
     /** Initial settings for the devtools. */
     initialSettings?: DevToolsSettings;
 };
-/** Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */
+/** @deprecated Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */
 declare function EmbeddedContextDevTools({ context, initialSettings }: EmbeddedContextDevToolsProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Renders Uniform Context DevTools in an embedded state (as a React component that can be an island on a demo page, for example) */

package/dist/index.js

@@ -42,7 +42,7 @@ var React = __toESM(require("react"));
 
 // src/components/ContextDevTools.tsx
 var import_react18 = require("@emotion/react");
-var import_design_system14 = require("@uniformdev/design-system");
+var import_design_system13 = require("@uniformdev/design-system");
 
 // src/hooks/useDimensionIndex.ts
 var import_api = require("@uniformdev/context/api");
@@ -207,7 +207,7 @@ var import_design_system = require("@uniformdev/design-system");
 // src/components/CallToAction/cta.styles.ts
 var import_react4 = require("@emotion/react");
 var cta = import_react4.css`
-  background-color: var(--gray-100);
+  background-color: var(--gray-50);
   padding: var(--spacing-base) var(--spacing-md);
   margin: var(--spacing-base) 0;
   position: relative;
@@ -216,8 +216,8 @@ var cta = import_react4.css`
   }
 `;
 var ctaWithIcon = import_react4.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")
+  background: var(--gray-50)
+    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='%237953c6' /%3E%3C/svg%3E")
     no-repeat var(--spacing-sm) var(--spacing-base);
   padding: var(--spacing-base) var(--spacing-xl);
 `;
@@ -236,7 +236,7 @@ var ctaClose = import_react4.css`
   align-items: center;
   border: none;
   background: transparent
-    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='%232ecdb4' /%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='%236b7280' /%3E%3C/svg%3E")
     no-repeat center center;
   cursor: pointer;
   color: var(--brand-secondary-3);
@@ -296,7 +296,7 @@ var ExtensionVersion = () => {
     {
       css: import_react5.css`
         font-size: var(--fs-sm);
-        color: var(--gray-400);
+        color: var(--gray-500);
         position: absolute;
         bottom: 2px;
         right: 5px;
@@ -354,7 +354,7 @@ var links = [
     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"/>
+    <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="currentColor"/>
     </svg>
     `
   },
@@ -382,12 +382,12 @@ var links = [
     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"/>
+    <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="currentColor"/>
     </svg>
     `
   }
 ];
-var googleChromeExtensionSvg = `<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="currentColor" 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>
@@ -407,7 +407,7 @@ var Menu = ({ ...props }) => {
     "nav",
     {
       css: import_react6.css`
-        background: var(--brand-secondary-1);
+        background: var(--gray-50);
         padding: var(--spacing-base) var(--spacing-base) var(--spacing-md);
         min-width: 200px;
         display: flex;
@@ -460,7 +460,7 @@ var Menu = ({ ...props }) => {
                       "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"
+                        fill: "var(--brand-secondary-1)"
                       }
                     )
                   ] }),
@@ -506,10 +506,11 @@ var Menu = ({ ...props }) => {
                     NavigationLink_default,
                     {
                       css: import_react6.css`
+                  --icon: var(--gray-500);
                   align-items: center;
                   border-radius: var(--rounded-base);
                   display: flex;
-                  color: var(--white);
+                  color: var(--brand-secondary-1);
                   gap: var(--spacing-sm);
                   padding: var(--spacing-sm) var(--spacing-base);
                   text-decoration: none;
@@ -517,7 +518,11 @@ var Menu = ({ ...props }) => {
 
                   &:hover,
                   &.active {
-                    background: var(--gray-700);
+                    background: var(--gray-200);
+                  }
+
+                  &.active {
+                    --icon: var(--brand-secondary-3);
                   }
                 `,
                       className: isActivePath(item.href),
@@ -527,6 +532,7 @@ var Menu = ({ ...props }) => {
                           "i",
                           {
                             css: import_react6.css`
+                    color: var(--icon);
                     align-items: center;
                     display: flex;
                   `,
@@ -538,12 +544,13 @@ var Menu = ({ ...props }) => {
                           "span",
                           {
                             css: import_react6.css`
+                      background: var(--raspberry-beret-400);
+                      color: var(--white);
                       font-size: var(--fs-xxs);
                       display: inline-block;
                       width: 12px;
                       height: 12px;
                       border-radius: 6px;
-                      background-color: var(--red-tooltip);
                       text-align: center;
                       line-height: 12px;
                     `,
@@ -569,7 +576,7 @@ var Menu = ({ ...props }) => {
             border-radius: var(--rounded-base);
             display: flex;
             font-size: var(--fs-sm);
-            color: var(--white);
+            color: var(--brand-secondary-1);
             gap: var(--spacing-sm);
             padding: var(--spacing-sm) var(--spacing-base);
             text-decoration: none;
@@ -577,7 +584,7 @@ var Menu = ({ ...props }) => {
 
             &:hover,
             &.active {
-              background: var(--gray-700);
+              background: var(--gray-200);
             }
           `,
             rel: "noreferrer",
@@ -587,6 +594,7 @@ var Menu = ({ ...props }) => {
                 {
                   css: import_react6.css`
               align-items: center;
+              color: var(--gray-500);
               display: flex;
             `,
                   dangerouslySetInnerHTML: { __html: googleChromeExtensionSvg }
@@ -680,7 +688,7 @@ var React3 = __toESM(require("react"));
 var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var willChange = (0, import_react7.css)({ willChange: "height" });
 var titleStyle = import_react7.css`
-  border-bottom: 2px solid var(--brand-secondary-1);
+  border-bottom: 1px solid var(--gray-400);
   font-size: var(--fs-base);
   margin: 0;
 `;
@@ -689,14 +697,16 @@ var btnStyle = import_react7.css`
   border: none;
   background: none;
   cursor: pointer;
+  color: var(--brand-secondary-1);
   display: flex;
   width: 100%;
   padding: var(--spacing-sm) 0;
-  font-weight: var(--fw-bold);
   justify-content: space-between;
 `;
 var iconStyle = import_react7.css`
   align-self: center;
+  color: var(--gray-400);
+  transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
 var iconActiveStyle = import_react7.css`
   transform: rotate(-180deg);
@@ -1472,7 +1482,7 @@ var Dimensions = ({
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { css: styles.reset, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_design_system5.Button,
         {
-          buttonType: "ghost",
+          buttonType: "ghostDestructive",
           onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget),
           children: "clear all dimensions"
         }
@@ -1501,7 +1511,6 @@ var Dimensions = ({
 
 // src/components/Personalization/Overrides.tsx
 var import_design_system7 = require("@uniformdev/design-system");
-var import_design_system8 = require("@uniformdev/design-system");
 var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 var Overrides = ({
   dimensionIndex: { index: dimensionIndex },
@@ -1530,14 +1539,14 @@ var Overrides = ({
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { css: styles.headingGroup, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { css: styles.title, children: "What if?" }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { css: styles.reset, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_design_system8.Button,
+        import_design_system7.Button,
         {
-          buttonType: "ghost",
+          buttonType: "ghostDestructive",
           onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores }),
           children: "delete all overrides"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system7.AddButton, { onClick: addNewOverride })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system7.Button, { buttonType: "secondaryInvert", size: "sm", onClick: addNewOverride, children: "Add override" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: "Override dimension scores to test personalization" }),
     totalOverrides > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -1552,18 +1561,18 @@ var Overrides = ({
       {
         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__ */ (0, import_jsx_runtime18.jsx)(import_design_system8.Button, { buttonType: "destructive", onClick: toggleControlGroup, children: "Exit control group" }) : null
+        buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system7.Button, { buttonType: "destructive", onClick: toggleControlGroup, children: "Exit control group" }) : null
       }
     )
   ] }) });
 };
 
 // src/components/Personalization/Quirks.tsx
-var import_design_system10 = require("@uniformdev/design-system");
+var import_design_system9 = require("@uniformdev/design-system");
 var import_react16 = require("react");
 
 // src/components/Inputs/EditableText.tsx
-var import_design_system9 = require("@uniformdev/design-system");
+var import_design_system8 = require("@uniformdev/design-system");
 var import_react15 = require("react");
 var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
 var EditableText = ({ name, value, submit }) => {
@@ -1576,9 +1585,9 @@ var EditableText = ({ name, value, submit }) => {
   };
   const isSameValue = inputValue === value;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_design_system9.Input, { type: "text", css: [textInput], name, value: inputValue, onChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_design_system8.Input, { type: "text", css: [textInput], name, value: inputValue, onChange }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_design_system9.Button,
+      import_design_system8.Button,
       {
         buttonType: "primary",
         disabled: isSameValue,
@@ -1660,7 +1669,7 @@ var Quirks = ({ ...props }) => {
               }
             ) : null,
             editable === id && editableQuirkMetaData && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: editableQuirkMetaData.options ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_design_system10.InputSelect,
+              import_design_system9.InputSelect,
               {
                 showLabel: false,
                 label: `Change ${name}`,
@@ -1672,7 +1681,7 @@ var Quirks = ({ ...props }) => {
             ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EditableText_default, { name: id, value, submit: submitOverride }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TData, { children: editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_design_system10.Button,
+            import_design_system9.Button,
             {
               buttonType: "ghost",
               onClick: () => {
@@ -1681,7 +1690,7 @@ var Quirks = ({ ...props }) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("small", { children: "Clear Override" })
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_design_system10.Button,
+            import_design_system9.Button,
             {
               buttonType: "ghost",
               onClick: () => {
@@ -1703,8 +1712,8 @@ var Quirks = ({ ...props }) => {
 };
 
 // src/components/Personalization/Settings.tsx
+var import_design_system10 = require("@uniformdev/design-system");
 var import_design_system11 = require("@uniformdev/design-system");
-var import_design_system12 = require("@uniformdev/design-system");
 var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
 var Settings = ({
   settings,
@@ -1718,9 +1727,9 @@ var Settings = ({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Data Connection" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_design_system11.Button,
+        import_design_system10.Button,
         {
-          buttonType: "tertiary",
+          buttonType: "secondary",
           onClick: () => {
             saveSettings({ ...settings, route: "/connect" });
           },
@@ -1731,7 +1740,7 @@ var Settings = ({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Storage Consent" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_design_system12.Switch,
+        import_design_system11.Switch,
         {
           label: "Store visitor data",
           id: "consent-mode",
@@ -1751,7 +1760,7 @@ var Settings = ({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Logging" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_design_system12.Switch,
+        import_design_system11.Switch,
         {
           label: "Write Uniform Context diagnostic logs to browser console",
           id: "logging",
@@ -1767,11 +1776,12 @@ var Settings = ({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Fieldset, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Legend, { children: "Clear extension storage" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_design_system11.Button,
+        import_design_system10.Button,
         {
           onClick: () => {
             clearAllExtensionData();
           },
+          buttonType: "destructive",
           children: "Clear"
         }
       ),
@@ -1783,7 +1793,7 @@ var Settings = ({
 // src/components/QuickConnect/QuickConnect.tsx
 var import_context2 = require("@uniformdev/context");
 var import_api3 = require("@uniformdev/context/api");
-var import_design_system13 = require("@uniformdev/design-system");
+var import_design_system12 = require("@uniformdev/design-system");
 var import_formik2 = require("formik");
 var React5 = __toESM(require("react"));
 var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
@@ -1843,8 +1853,8 @@ function QuickConnect(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
     error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.ErrorMessage, { message: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { buttonType: "destructive", type: "button", onClick: onDisconnect, children: "Clear old/broken settings" })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system12.ErrorMessage, { message: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system12.Button, { buttonType: "destructive", type: "button", onClick: onDisconnect, children: "Clear old/broken settings" })
     ] }) : null,
     state === "qc" || state === "mc" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConnectForm, { ...props, state, setState, onConnect }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: manifest ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
@@ -1867,7 +1877,7 @@ function QuickConnect(props) {
           ")"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { buttonType: "destructive", type: "button", onClick: onDisconnect, children: "Disconnect" })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system12.Button, { buttonType: "destructive", type: "button", onClick: onDisconnect, children: "Disconnect" })
     ] }) : null })
   ] });
 }
@@ -1891,7 +1901,7 @@ function ConnectForm({
       onSubmit: onConnect,
       children: ({ setFieldValue, setFieldError, errors: { qc }, isSubmitting }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_formik2.Form, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("fieldset", { css: { display: "flex", flexDirection: "column", gap: "var(--spacing-base)" }, children: state === "qc" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_design_system13.Input,
+          import_design_system12.Input,
           {
             placeholder: "Paste Quick Connect Code Here",
             caption: "Copy the Quick Connect code after creating an API key in Uniform.",
@@ -1909,9 +1919,9 @@ function ConnectForm({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system12.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_design_system13.Button,
+            import_design_system12.Button,
             {
               type: "button",
               buttonType: "ghost",
@@ -1950,9 +1960,9 @@ function ConnectForm({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { css: { display: "flex", gap: "var(--spacing-sm)" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system13.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system12.Button, { type: "submit", buttonType: "primary", disabled: isSubmitting, children: isSubmitting ? "Verifying..." : "Connect" }),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_design_system13.Button,
+            import_design_system12.Button,
             {
               type: "button",
               buttonType: "ghost",
@@ -2099,7 +2109,7 @@ function ContextDevTools(props) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DevToolsSettingsContextProvider, { settings: props.settings, saveSettings: props.saveSettings, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system14.Theme, { disableReset: true, disableGlobalReset: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system13.Theme, { disableReset: true, disableGlobalReset: true }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Theme, {}),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
@@ -2254,7 +2264,7 @@ function EmbeddedContextDevTools({ context, initialSettings }) {
 
 // src/components/ToggleEmbeddedContextDevTools.tsx
 var import_react20 = require("@emotion/react");
-var import_design_system15 = require("@uniformdev/design-system");
+var import_design_system14 = require("@uniformdev/design-system");
 var React7 = __toESM(require("react"));
 var import_react_use4 = require("react-use");
 
@@ -2345,7 +2355,7 @@ function ToggleEmbeddedContextDevTools(props) {
     return null;
   }
   return contextValue ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system15.Theme, { disableGlobalReset: true, disableReset: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system14.Theme, { disableGlobalReset: true, disableReset: true }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Theme, {}),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmbedToggleButton, { onClick: () => setDevtoolsOpen((prev) => !prev) }),
     devtoolsOpen ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -2365,10 +2375,10 @@ function ToggleEmbeddedContextDevTools(props) {
             css: import_react20.css`
                 padding: var(--spacing-md);
               `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_design_system15.Callout, { type: "danger", title: "This functionality is disabled.", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system15.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." }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_design_system14.Callout, { type: "danger", title: "This functionality is disabled.", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_design_system14.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__ */ (0, import_jsx_runtime29.jsx)(
-                import_design_system15.Button,
+                import_design_system14.Button,
                 {
                   css: import_react20.css`
                     margin-top: var(--spacing-md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/context-devtools",
-  "version": "19.67.0",
+  "version": "19.68.1-alpha.27+9da5c6b31",
   "description": "Uniform Context developer tools components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
-    "@uniformdev/context": "19.67.0",
-    "@uniformdev/design-system": "19.67.0",
+    "@uniformdev/context": "19.68.1-alpha.27+9da5c6b31",
+    "@uniformdev/design-system": "19.68.1-alpha.27+9da5c6b31",
     "formik": "^2.2.9",
     "react-use": "^17.4.0",
     "reakit": "^1.3.11",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9cd9a40e3d0743f52457ebab0dfafc048014c916"
+  "gitHead": "9da5c6b318807a05aa003ceb52317b27f4e1d8cf"
 }