@uniformdev/context-ui 19.62.0 → 19.62.1-alpha.127

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AbTestSelector: () => AbTestSelector,
   ContextData: () => ContextData,
   CriteriaMatchMenu: () => CriteriaMatchMenu,
   CriteriaOperatorMenu: () => CriteriaOperatorMenu,
@@ -41,6 +42,7 @@ __export(src_exports, {
   PersonalizationCriteria: () => PersonalizationCriteria,
   PersonalizationCriteriaStatic: () => PersonalizationCriteriaStatic,
   ProjectUIVersion: () => ProjectUIVersion,
+  addAbTestLink: () => addAbTestLink,
   addEnrichmentLink: () => addEnrichmentLink,
   contextCriteriaMenuOperators: () => contextCriteriaMenuOperators,
   convertErrorsToObj: () => convertErrorsToObj,
@@ -61,18 +63,179 @@ module.exports = __toCommonJS(src_exports);
 var import_react = require("@emotion/react");
 var React = __toESM(require("react"));
 
-// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
+// src/components/AbTestSelector/AbTestSelector.tsx
+var import_react3 = require("@emotion/react");
 var import_design_system = require("@uniformdev/design-system");
+var import_react4 = require("react");
 
-// src/components/CriteriaOperatorMenu/OperatorBubble.tsx
-var import_react2 = require("@emotion/react");
+// src/hooks/useABTests.ts
+var import_api = require("@uniformdev/context/api");
+var import_react2 = require("react");
+function useABTests({ apiHost, apiKey, projectId }) {
+  const [reload, setReload] = (0, import_react2.useState)(true);
+  const [state, setState] = (0, import_react2.useState)({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  (0, import_react2.useEffect)(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new import_api.CachedTestClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const { tests } = await client.get();
+        setState({ notConfigured: false, loading: false, error: null, result: tests });
+      } catch (e) {
+        let message;
+        if (e instanceof import_api.ApiClientError) {
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    if (reload) {
+      runEffect().then(() => {
+        setReload(false);
+      });
+    }
+  }, [apiHost, apiKey, projectId, reload]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured,
+    doReload: () => setReload(true)
+  };
+}
+
+// src/components/AbTestSelector/AbTestSelector.tsx
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+var addAbTestLink = import_react3.css`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`;
+var AbTestList = ({ contextConfig, onSelect, value }) => {
+  const { loading, result, doReload = () => {
+  } } = useABTests(contextConfig);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
+    !result || result.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.ScrollableList, { children: result.map((abTest) => {
+        const { id, name } = abTest;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design_system.ScrollableListItem,
+          {
+            buttonText: name,
+            active: id === (value == null ? void 0 : value.id),
+            onClick: () => onSelect(abTest)
+          },
+          id
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design_system.AddListButton,
+        {
+          className: "add-more",
+          onButtonClick: () => {
+            window.open(
+              `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+              "_blank"
+            );
+          },
+          buttonText: "Add new A/B Test"
+        }
+      )
+    ] })
+  ] });
+};
+var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
+  var _a;
+  const [showAbTests, setShowAbTests] = (0, import_react4.useState)(false);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "ab-test", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    !showAbTests && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      value && Object.keys(value).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Button, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
+    ] }),
+    showAbTests && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AbTestList,
+      {
+        contextConfig,
+        onSelect: (abTest) => {
+          if ((value == null ? void 0 : value.id) === abTest.id) {
+            setValue(void 0);
+            setShowAbTests(true);
+            return;
+          }
+          setValue(abTest);
+          setShowAbTests(false);
+        },
+        value
+      }
+    )
+  ] }) });
+};
+var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_design_system.Callout,
+  {
+    title: "No A/B tests found in your Uniform project.",
+    type: "caution",
+    css: { marginBlock: "var(--spacing-base)" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+      "Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          css: { ":hover": { textDecorationLine: "underline" } },
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  }
+);
+
+// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
+var import_design_system2 = require("@uniformdev/design-system");
+
+// src/components/CriteriaOperatorMenu/OperatorBubble.tsx
+var import_react5 = require("@emotion/react");
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 function OperatorBubble({ op }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       className: "operation-bubble",
-      css: import_react2.css`
+      css: import_react5.css`
         align-items: center;
         background: var(--gray-700);
         border-radius: var(--rounded-full);
@@ -89,12 +252,12 @@ function OperatorBubble({ op }) {
 }
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorOption.tsx
-var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
 var CriteriaOperatorOption = (props) => {
   var _a, _b;
   const { data, getStyles, isDisabled, innerRef, innerProps } = props;
   const [name, description] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       css: {
@@ -107,7 +270,7 @@ var CriteriaOperatorOption = (props) => {
       "aria-disabled": isDisabled,
       ...innerProps,
       children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OperatorBubble, { op: name }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OperatorBubble, { op: name }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             css: {
@@ -116,30 +279,30 @@ var CriteriaOperatorOption = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: description != null ? description : name })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: description != null ? description : name })
       ]
     }
   );
 };
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorSingleValue.tsx
-var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var CriteriaOperatorSingleValue = (props) => {
   const { data, getStyles } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       css: {
         ...getStyles("singleValue", props),
         width: "max-content"
       },
-      children: data.label.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OperatorBubble, { op: data.label }) : data.label
+      children: data.label.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OperatorBubble, { op: data.label }) : data.label
     }
   );
 };
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
-var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
 var contextCriteriaMenuOperators = [
   {
     name: "=",
@@ -172,18 +335,22 @@ var contextCriteriaMenuOperators = [
     value: "<="
   },
   {
-    name: "has the strongest score",
+    name: "has strongest score across all categories",
     value: "+"
   },
   {
     name: "has the weakest score",
     value: "-"
+  },
+  {
+    name: "has strongest category score",
+    value: "^"
   }
 ];
 function CriteriaOperatorMenu({ onChange, value, ...props }) {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_design_system.InputComboBox,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_design_system2.InputComboBox,
     {
       ...props,
       value: {
@@ -244,20 +411,20 @@ function CriteriaOperatorMenu({ onChange, value, ...props }) {
 }
 
 // src/components/DataContext/DataContext.tsx
-var import_design_system2 = require("@uniformdev/design-system");
-var import_react5 = require("react");
+var import_design_system3 = require("@uniformdev/design-system");
+var import_react8 = require("react");
 
 // src/hooks/useContextData.ts
-var import_api = require("@uniformdev/context/api");
-var import_react3 = require("react");
+var import_api2 = require("@uniformdev/context/api");
+var import_react6 = require("react");
 function useContextData({ apiHost, apiKey, projectId }) {
-  const [state, setState] = (0, import_react3.useState)({
+  const [state, setState] = (0, import_react6.useState)({
     loading: false,
     notConfigured: false,
     error: null,
     result: null
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!projectId || !apiKey || !apiHost) {
       setState({ notConfigured: true, loading: false, error: null, result: null });
       return;
@@ -265,7 +432,7 @@ function useContextData({ apiHost, apiKey, projectId }) {
     const runEffect = async () => {
       setState({ notConfigured: false, loading: true, error: null, result: null });
       try {
-        const client = new import_api.CachedManifestClient({
+        const client = new import_api2.CachedManifestClient({
           projectId,
           apiKey,
           apiHost
@@ -274,7 +441,7 @@ function useContextData({ apiHost, apiKey, projectId }) {
         setState({ notConfigured: false, loading: false, error: null, result });
       } catch (e) {
         let message;
-        if (e instanceof import_api.ApiClientError) {
+        if (e instanceof import_api2.ApiClientError) {
           if (e.statusCode === 403) {
             message = `The API key ${apiKey} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`;
           }
@@ -297,8 +464,8 @@ function useContextData({ apiHost, apiKey, projectId }) {
 }
 
 // src/hooks/useDimensions.ts
-var import_api2 = require("@uniformdev/context/api");
-var import_react4 = require("react");
+var import_api3 = require("@uniformdev/context/api");
+var import_react7 = require("react");
 
 // src/utils/objectify.ts
 function objectify(array2, keySelector, valueSelector) {
@@ -314,13 +481,13 @@ function objectify(array2, keySelector, valueSelector) {
 
 // src/hooks/useDimensions.ts
 function useDimensions({ apiHost, apiKey, projectId }) {
-  const [state, setState] = (0, import_react4.useState)({
+  const [state, setState] = (0, import_react7.useState)({
     loading: false,
     notConfigured: false,
     error: null,
     result: null
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!projectId || !apiKey || !apiHost) {
       setState({ notConfigured: true, loading: false, error: null, result: null });
       return;
@@ -328,14 +495,14 @@ function useDimensions({ apiHost, apiKey, projectId }) {
     const runEffect = async () => {
       setState({ notConfigured: false, loading: true, error: null, result: null });
       try {
-        const client = new import_api2.CachedDimensionClient({
+        const client = new import_api3.CachedDimensionClient({
           projectId,
           apiKey,
           apiHost
         });
         const dimensions = (await client.get()).dimensions.map((dim) => ({
           ...dim,
-          displayName: (0, import_api2.computeDimensionDisplayName)(dim)
+          displayName: (0, import_api3.computeDimensionDisplayName)(dim)
         }));
         const result = {
           dimensions,
@@ -348,7 +515,7 @@ function useDimensions({ apiHost, apiKey, projectId }) {
         setState({ notConfigured: false, loading: false, error: null, result });
       } catch (e) {
         let message;
-        if (e instanceof import_api2.ApiClientError) {
+        if (e instanceof import_api3.ApiClientError) {
           message = e.message;
         } else {
           message = e.toString();
@@ -368,8 +535,8 @@ function useDimensions({ apiHost, apiKey, projectId }) {
 }
 
 // src/components/DataContext/DataContext.tsx
-var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
-var ContextDataContext = (0, import_react5.createContext)(null);
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var ContextDataContext = (0, import_react8.createContext)(null);
 var ContextData = ({
   loadingComponent: LoadingComponent,
   errorComponent: ErrorComponent,
@@ -380,23 +547,23 @@ var ContextData = ({
   const dimensionsData = useDimensions(contextConfig);
   if (contextData.error || contextData.notConfigured) {
     if (ErrorComponent)
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorComponent, { contextConfig, result: contextData });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorComponent, { contextConfig, result: contextData });
     else
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: "ErrorComponent is not configured" });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "ErrorComponent is not configured" });
   }
   if (dimensionsData.error || dimensionsData.notConfigured) {
     if (ErrorComponent)
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorComponent, { contextConfig, result: dimensionsData });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorComponent, { contextConfig, result: dimensionsData });
     else
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: "ErrorComponent is not configured" });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "ErrorComponent is not configured" });
   }
   if (contextData.loading || dimensionsData.loading) {
     if (LoadingComponent)
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingComponent, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingComponent, {});
     else
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system2.LoadingIndicator, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system3.LoadingIndicator, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ContextDataContext.Provider,
     {
       value: { manifest: contextData.result, dimensions: dimensionsData.result, contextConfig },
@@ -405,21 +572,21 @@ var ContextData = ({
   );
 };
 function useContextConfig() {
-  const context = (0, import_react5.useContext)(ContextDataContext);
+  const context = (0, import_react8.useContext)(ContextDataContext);
   if (!(context == null ? void 0 : context.contextConfig)) {
     throw new Error("Not within DataContext! Configuration data is not exist.");
   }
   return context.contextConfig;
 }
 function useManifest() {
-  const context = (0, import_react5.useContext)(ContextDataContext);
+  const context = (0, import_react8.useContext)(ContextDataContext);
   if (!(context == null ? void 0 : context.manifest)) {
     throw new Error("Not within DataContext! Manifest data is not exist.");
   }
   return context.manifest;
 }
 function useDimensionsDataContext() {
-  const context = (0, import_react5.useContext)(ContextDataContext);
+  const context = (0, import_react8.useContext)(ContextDataContext);
   if (!(context == null ? void 0 : context.dimensions)) {
     throw new Error("Not within DataContext! Dimensions data is not exist.");
   }
@@ -427,11 +594,11 @@ function useDimensionsDataContext() {
 }
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
-var import_design_system5 = require("@uniformdev/design-system");
-var import_react7 = require("react");
+var import_design_system6 = require("@uniformdev/design-system");
+var import_react10 = require("react");
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
-var import_design_system3 = require("@uniformdev/design-system");
+var import_design_system4 = require("@uniformdev/design-system");
 
 // src/components/DimensionMenu/utils.ts
 function dimensionToMenuOption(dimension) {
@@ -472,11 +639,11 @@ function groupDimensions(dimensions) {
 }
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
-var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var DimensionGroupHeading = (props) => {
   var _a;
   const { data, getStyles, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       css: {
@@ -485,13 +652,13 @@ var DimensionGroupHeading = (props) => {
         fontSize: "var(--font-size-sm)"
       },
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "small",
         {
           css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system3.Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: data.label })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system4.Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: data.label })
           ]
         }
       )
@@ -500,15 +667,15 @@ var DimensionGroupHeading = (props) => {
 };
 
 // src/components/DimensionMenu/DimensionMenuErrorMessage.tsx
-var import_react6 = require("@emotion/react");
-var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+var import_react9 = require("@emotion/react");
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 function DimensionMenuErrorMessage({ message }) {
   if (!message)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
-      css: import_react6.css`
+      css: import_react9.css`
         color: var(--brand-primary-2);
         font-size: var(--fs-xs);
         position: absolute;
@@ -520,12 +687,12 @@ function DimensionMenuErrorMessage({ message }) {
 }
 
 // src/components/DimensionMenu/DimensionOption.tsx
-var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
 var DimensionOption = (props) => {
   var _a, _b;
   const { data, getStyles, cx, isDisabled, isFocused, isSelected, className, innerRef, innerProps } = props;
   const [, value] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       css: getStyles("option", props),
@@ -541,17 +708,17 @@ var DimensionOption = (props) => {
       ref: innerRef,
       "aria-disabled": isDisabled,
       ...innerProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
     }
   );
 };
 
 // src/components/DimensionMenu/DimensionValue.tsx
-var import_design_system4 = require("@uniformdev/design-system");
-var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
+var import_design_system5 = require("@uniformdev/design-system");
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
 function DimensionValue({ displayName }) {
   const [type, name] = displayName.split(":");
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       css: {
@@ -559,31 +726,31 @@ function DimensionValue({ displayName }) {
         overflow: "hidden"
       },
       children: [
-        name ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        name ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "small",
           {
             css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
             children: [
-              type ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system4.Icon, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-testid": "dimension-name", children: type })
+              type ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system5.Icon, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-testid": "dimension-name", children: type })
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
       ]
     }
   );
 }
 
 // src/components/DimensionMenu/DimensionSingleValue.tsx
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var DimensionSingleValue = (props) => {
   const { data, getStyles } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DimensionValue, { displayName: data.label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DimensionValue, { displayName: data.label }) });
 };
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 function CriteriaMatchMenu({
   onChange,
   criteriaMatch,
@@ -592,14 +759,14 @@ function CriteriaMatchMenu({
   ...props
 }) {
   var _a, _b;
-  const [inputValue, setInputValue] = (0, import_react7.useState)(
+  const [inputValue, setInputValue] = (0, import_react10.useState)(
     typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
   );
   const rDim = criteriaMatch.rDim;
   const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_design_system5.InputComboBox,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_design_system6.InputComboBox,
       {
         ...props,
         inputValue,
@@ -665,26 +832,26 @@ function CriteriaMatchMenu({
         },
         noOptionsMessage: ({ inputValue: inputValue2 }) => {
           if (isInt(inputValue2)) {
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
                 "Score: ",
                 inputValue2
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
             ] });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
               "No dimensions match your search \u201C",
               inputValue2,
               "\u201D"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: "If you want to match a literal score, enter a numeric value." })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("small", { children: "If you want to match a literal score, enter a numeric value." })
           ] });
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
   ] });
 }
 function isInt(value) {
@@ -692,12 +859,12 @@ function isInt(value) {
 }
 
 // src/components/DimensionMenu/DimensionMenu.tsx
-var import_design_system6 = require("@uniformdev/design-system");
-var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var import_design_system7 = require("@uniformdev/design-system");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_design_system6.InputComboBox,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_design_system7.InputComboBox,
       {
         ...props,
         value: value ? dimensionToMenuOption(value) : void 0,
@@ -726,17 +893,17 @@ function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props })
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
   ] });
 }
 
 // src/components/EditLink/EditLink.tsx
 var import_CgChevronRight = require("@react-icons/all-files/cg/CgChevronRight");
-var import_design_system7 = require("@uniformdev/design-system");
+var import_design_system8 = require("@uniformdev/design-system");
 
 // src/components/EditLink/EditLink.styles.ts
-var import_react8 = require("@emotion/react");
-var editLink = import_react8.css`
+var import_react11 = require("@emotion/react");
+var editLink = import_react11.css`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -750,9 +917,9 @@ var editLink = import_react8.css`
 `;
 
 // src/components/EditLink/EditLink.tsx
-var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
 var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "a",
     {
       css: editLink,
@@ -762,23 +929,23 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
       href: linkTo,
       children: [
         linkText,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system7.Icon, { icon: import_CgChevronRight.CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_CgChevronRight.CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
       ]
     }
   );
 };
 
 // src/components/EnrichmentTag/EnrichmentTag.tsx
-var import_react9 = require("@emotion/react");
+var import_react12 = require("@emotion/react");
 var import_CgCloseO = require("@react-icons/all-files/cg/CgCloseO");
 var import_CgMathMinus = require("@react-icons/all-files/cg/CgMathMinus");
 var import_CgMathPlus = require("@react-icons/all-files/cg/CgMathPlus");
 var import_context = require("@uniformdev/context");
-var import_design_system8 = require("@uniformdev/design-system");
-var import_immer = __toESM(require("immer"));
-var import_react10 = require("react");
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
-var addEnrichmentLink = import_react9.css`
+var import_design_system9 = require("@uniformdev/design-system");
+var import_immer = require("immer");
+var import_react13 = require("react");
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var addEnrichmentLink = import_react12.css`
   flex: 2;
   display: flex;
   width: 50%;
@@ -797,11 +964,11 @@ var EnrichmentTag = ({
   displayTitle = true
 }) => {
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
-  const allEnrichments = (0, import_react10.useMemo)(() => {
+  const allEnrichments = (0, import_react13.useMemo)(() => {
     if (dimensions)
       return dimensions.dimensions.filter((dimension) => dimension.category === "ENR");
   }, [dimensions]);
-  const remainingEnrichments = (0, import_react10.useMemo)(() => {
+  const remainingEnrichments = (0, import_react13.useMemo)(() => {
     if (!value)
       return allEnrichments;
     if (allEnrichments)
@@ -809,9 +976,9 @@ var EnrichmentTag = ({
         (enr) => !value.some((val) => (0, import_context.getEnrichmentVectorKey)(val.cat, val.key) === enr.dim)
       );
   }, [allEnrichments, value]);
-  const [selectValue, setSelectValue] = (0, import_react10.useState)("");
-  const [score, setScore] = (0, import_react10.useState)(50);
-  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = (0, import_react10.useState)(false);
+  const [selectValue, setSelectValue] = (0, import_react13.useState)("");
+  const [score, setScore] = (0, import_react13.useState)(50);
+  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = (0, import_react13.useState)(false);
   const selectedEnrichment = allEnrichments == null ? void 0 : allEnrichments.find((dimension) => dimension.dim === selectValue);
   const addEnrichment = () => {
     const [cat, key] = selectValue.split("_");
@@ -834,21 +1001,21 @@ var EnrichmentTag = ({
     setValue(finalValue);
   };
   if (error)
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Callout, { type: "danger", children: error });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { type: "danger", children: error });
   if (loading || dimensions === null)
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.LoadingIndicator, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("fieldset", { className: "enrichment-tag", children: [
-    displayTitle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
-    !(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_design_system8.Callout,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.LoadingIndicator, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("fieldset", { className: "enrichment-tag", children: [
+    displayTitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
+    !(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_design_system9.Callout,
       {
         title: "No enrichment tags assigned.",
         type: "info",
         css: { marginBlock: "var(--spacing-base)" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { children: [
           "Click",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "a",
             {
               onClick: () => setShowAddNewEnrichmentTagPanel(true),
@@ -862,9 +1029,9 @@ var EnrichmentTag = ({
           "to assign your first enrichment tag."
         ] })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      dimensions && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
-      showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      dimensions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
+      showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           className: "add-enrichment-tag",
@@ -876,8 +1043,8 @@ var EnrichmentTag = ({
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_design_system8.InputSelect,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_design_system9.InputSelect,
               {
                 name: `enrichment-type`,
                 label: "Enrichment Tag",
@@ -893,7 +1060,7 @@ var EnrichmentTag = ({
                 onChange: (e) => setSelectValue(e.currentTarget.value)
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               ScoreCounter,
               {
                 score,
@@ -902,8 +1069,8 @@ var EnrichmentTag = ({
                 css: { flexBasis: "9rem" }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_design_system8.Button,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_design_system9.Button,
               {
                 buttonType: "tertiary",
                 size: "xl",
@@ -921,21 +1088,21 @@ var EnrichmentTag = ({
           ]
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           className: "enrichment-cta",
           style: { paddingTop: "10px", display: "flex", justifyContent: "space-between" },
           children: [
-            !showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_design_system8.AddListButton,
+            !showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_design_system9.AddListButton,
               {
                 className: "add-more",
                 buttonText: "Add More",
                 onButtonClick: () => setShowAddNewEnrichmentTagPanel(true)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               EditLink,
               {
                 name: "Enrichments",
@@ -951,10 +1118,10 @@ var EnrichmentTag = ({
     ] })
   ] });
 };
-var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Callout, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { children: [
   "Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment",
   " ",
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "a",
     {
       href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
@@ -971,7 +1138,7 @@ var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_ru
 var getCappedValue = (value, maxCap = 100, minCap = 0) => {
   return Math.max(Math.min(value, maxCap), minCap);
 };
-var scoreCounterMinusButtonStyles = import_react9.css`
+var scoreCounterMinusButtonStyles = import_react12.css`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -984,7 +1151,7 @@ var scoreCounterMinusButtonStyles = import_react9.css`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
 `;
-var scoreCounterPlusButtonStyles = import_react9.css`
+var scoreCounterPlusButtonStyles = import_react12.css`
   ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
@@ -1005,9 +1172,9 @@ var ScoreCounter = ({
     }
     setValue(newScore);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { css: { position: "relative" }, ...otherProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_design_system8.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: { position: "relative" }, ...otherProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_design_system9.Input,
       {
         label: "Strength",
         id: "enrichment-score",
@@ -1019,7 +1186,7 @@ var ScoreCounter = ({
         css: { textAlign: "center", boxSizing: "border-box" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -1028,10 +1195,10 @@ var ScoreCounter = ({
         disabled: score === 0,
         className: "scoreCounterButton",
         css: scoreCounterMinusButtonStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_CgMathMinus.CgMathMinus, iconColor: "gray", size: "1.5rem" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Icon, { icon: import_CgMathMinus.CgMathMinus, iconColor: "gray", size: "1.5rem" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -1039,7 +1206,7 @@ var ScoreCounter = ({
         onClick: () => handleCounter("increment"),
         className: "scoreCounterButton",
         css: scoreCounterPlusButtonStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_CgMathPlus.CgMathPlus, iconColor: "gray", size: "1.5rem" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Icon, { icon: import_CgMathPlus.CgMathPlus, iconColor: "gray", size: "1.5rem" })
       }
     )
   ] });
@@ -1047,7 +1214,7 @@ var ScoreCounter = ({
 var SelectedEnrichments = ({ list, setList, dimIndex }) => {
   const removeEnrichment = (index) => {
     setList(
-      (0, import_immer.default)(list, (draft) => {
+      (0, import_immer.produce)(list, (draft) => {
         draft.splice(index, 1);
       })
     );
@@ -1056,16 +1223,16 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
     var _a;
     const cap = (_a = dimIndex[`${list[index].cat}_${list[index].key}`]) == null ? void 0 : _a.cap;
     setList(
-      (0, import_immer.default)(list, (draft) => {
+      (0, import_immer.produce)(list, (draft) => {
         draft[index].str = getCappedValue(Number(value) || 0, cap);
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: list.map((enrichment, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: list.map((enrichment, index) => {
     const dimData = dimIndex[(0, import_context.getEnrichmentVectorKey)(enrichment.cat, enrichment.key)];
     if (!dimData)
       return;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         css: {
@@ -1080,14 +1247,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
         },
         className: "selected-enrichments",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               css: { fontWeight: "var(--fw-bold)", color: dimData ? void 0 : "var(--brand-secondary-5)" },
               children: dimData ? dimData.displayName : `Enrichment '${enrichment.cat}_${enrichment.key}' is unknown`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               css: {
@@ -1100,8 +1267,8 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
                 padding: "var(--spacing-sm) var(--spacing-base)",
                 flexBasis: "9rem"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                import_design_system8.Input,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_design_system9.Input,
                 {
                   type: "text",
                   min: 0,
@@ -1114,14 +1281,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
               title: `Delete enrichment`,
               onClick: () => removeEnrichment(index),
               css: { border: 0 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_CgCloseO.CgCloseO, iconColor: "red", size: "1.5rem" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Icon, { icon: import_CgCloseO.CgCloseO, iconColor: "red", size: "1.5rem" })
             }
           )
         ]
@@ -1132,8 +1299,8 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
 };
 
 // src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
-var import_design_system10 = require("@uniformdev/design-system");
-var import_react13 = require("react");
+var import_design_system11 = require("@uniformdev/design-system");
+var import_react16 = require("react");
 var import_react_use = require("react-use");
 var yup = __toESM(require("yup"));
 
@@ -1145,19 +1312,19 @@ function isPersonalizationCriteriaData(obj) {
   return obj.crit !== void 0;
 }
 function opHasRhs(op) {
-  return op !== "+" && op !== "-";
+  return op !== "+" && op !== "-" && op !== "^";
 }
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-var import_react12 = require("@emotion/react");
+var import_react15 = require("@emotion/react");
 var import_CgCloseO2 = require("@react-icons/all-files/cg/CgCloseO");
-var import_design_system9 = require("@uniformdev/design-system");
-var import_immer2 = __toESM(require("immer"));
+var import_design_system10 = require("@uniformdev/design-system");
+var import_immer2 = require("immer");
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
-var import_react11 = require("@emotion/react");
+var import_react14 = require("@emotion/react");
 var spaceBetweenCriteriaItems = "6rem";
-var criteriaItem = import_react11.css`
+var criteriaItem = import_react14.css`
   position: relative;
   padding: var(--spacing-md) var(--spacing-base);
   border: 1px solid var(--gray-300);
@@ -1185,35 +1352,35 @@ var criteriaItem = import_react11.css`
     }
   }
 `;
-var criteriaItemInner = import_react11.css`
+var criteriaItemInner = import_react14.css`
   display: flex;
   gap: var(--spacing-base);
   flex-grow: 1;
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
 `;
-var criteriaWrapper = import_react11.css`
+var criteriaWrapper = import_react14.css`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
 `;
-var criteriaOperandWrapper = import_react11.css`
+var criteriaOperandWrapper = import_react14.css`
   flex: 2;
   height: 52px;
   min-width: 200px;
 `;
-var criteriaOperatorWrapper = import_react11.css`
+var criteriaOperatorWrapper = import_react14.css`
   flex: 1;
   min-width: 80px;
 `;
-var expand = import_react11.css`
+var expand = import_react14.css`
   height: 100%;
   width: 100%;
 `;
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
 var PersonalizationCriteriaStatic = ({
   value,
   setValue,
@@ -1246,21 +1413,21 @@ var PersonalizationCriteriaStatic = ({
   };
   const update = (crit, index) => {
     setValue(
-      (0, import_immer2.default)(currentValue, (draft) => {
+      (0, import_immer2.produce)(currentValue, (draft) => {
         draft.crit[index] = crit;
       })
     );
   };
   const removeFromList = (index) => {
-    const newValue = (0, import_immer2.default)(currentValue, (draft) => {
+    const newValue = (0, import_immer2.produce)(currentValue, (draft) => {
       draft.crit.splice(index, 1);
     });
     const finalValue = newValue.crit.length === 0 ? null : newValue;
     setValue(finalValue);
     onRemoveCriteria == null ? void 0 : onRemoveCriteria(finalValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("fieldset", { className: "personalization-criteria", children: [
-    displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.Title, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("fieldset", { className: "personalization-criteria", "data-testid": "personalization-panel", children: [
+    displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(components.Title, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "legend",
       {
         css: {
@@ -1270,27 +1437,28 @@ var PersonalizationCriteriaStatic = ({
         children: "Personalize This"
       }
     ) : null,
-    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.CustomVariantName, {}) : null,
-    !currentValue.crit.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: currentValue.crit.map((currentCriteria, index) => {
+    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(components.CustomVariantName, {}) : null,
+    (components == null ? void 0 : components.ControlPercentage) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(components.ControlPercentage, {}) : null,
+    !currentValue.crit.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: currentValue.crit.map((currentCriteria, index) => {
       var _a2, _b, _c, _d;
       const critHasLhs = ((_a2 = currentCriteria.l) == null ? void 0 : _a2.length) > 0;
-      const critHasRhs = currentCriteria.op !== "+" && currentCriteria.op !== "-";
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      const critHasRhs = opHasRhs(currentCriteria.op);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
-            css: import_react12.css`
+            css: import_react15.css`
                     ${criteriaItemInner}/* grid-template-columns: minmax(0, 1fr) ${critHasRhs ? "minmax(0, 79px) minmax(0, 1fr)" : "minmax(0, 1fr)"} */
                   `,
             className: "criteriaItemInner",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperandWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-criteria",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     DimensionMenu,
                     {
                       errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
@@ -1307,13 +1475,13 @@ var PersonalizationCriteriaStatic = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperatorWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-operator",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     CriteriaOperatorMenu,
                     {
                       name: `op-${index}`,
@@ -1333,13 +1501,13 @@ var PersonalizationCriteriaStatic = ({
                   )
                 }
               ),
-              critHasRhs ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              critHasRhs ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperandWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-match-criteria",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     CriteriaMatchMenu,
                     {
                       errorMessage: (_c = errors.rhs) == null ? void 0 : _c[index],
@@ -1360,7 +1528,7 @@ var PersonalizationCriteriaStatic = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
@@ -1368,10 +1536,10 @@ var PersonalizationCriteriaStatic = ({
             title: `Delete Personalization`,
             css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
             "data-testid": "button-delete",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Icon, { icon: import_CgCloseO2.CgCloseO, iconColor: "red", size: "1.5rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Icon, { icon: import_CgCloseO2.CgCloseO, iconColor: "red", size: "1.5rem" })
           }
         ),
-        index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
             className: "criteria-group-operation",
@@ -1380,8 +1548,8 @@ var PersonalizationCriteriaStatic = ({
               top: "-4rem",
               transform: "translateX(calc(1.5rem - 50%))"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_design_system9.InputInlineSelect,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_design_system10.InputInlineSelect,
               {
                 "data-testid": "dropdown-button-combine",
                 disabled: index > 1,
@@ -1399,8 +1567,8 @@ var PersonalizationCriteriaStatic = ({
         ) : null
       ] }, index);
     }) }),
-    dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.NoDimensionsDefined, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_design_system9.AddListButton,
+    dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(components.NoDimensionsDefined, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_design_system10.AddListButton,
       {
         "data-testid": "button-add-criteria",
         className: "add-more",
@@ -1412,7 +1580,7 @@ var PersonalizationCriteriaStatic = ({
 };
 
 // src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 function convertErrorsToObj(errors) {
   const result = { crit: [] };
   errors.forEach((err) => {
@@ -1473,7 +1641,7 @@ var PersonalizationCriteria = ({
   ...staticProps
 }) => {
   var _a, _b;
-  const [validationError, setValidationError] = (0, import_react13.useState)(void 0);
+  const [validationError, setValidationError] = (0, import_react16.useState)(void 0);
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
   (0, import_react_use.useAsync)(async () => {
     if (value && dimensions) {
@@ -1482,15 +1650,15 @@ var PersonalizationCriteria = ({
     }
   }, [value, dimensions, validate]);
   if (error)
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { type: "danger", children: error });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system11.Callout, { type: "danger", children: error });
   if (loading || dimensions === null)
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.LoadingIndicator, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system11.LoadingIndicator, {});
   const handleSetValue = async (value2) => {
     const err = await validate(value2, dimensions);
     setValidationError(err);
     setValue(value2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     PersonalizationCriteriaStatic,
     {
       ...staticProps,
@@ -1502,10 +1670,10 @@ var PersonalizationCriteria = ({
       },
       dimensions,
       components: {
-        NoDimensionsDefined: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+        NoDimensionsDefined: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system11.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { children: [
           "You do not have any dimensions configured. Create your first",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "a",
             {
               href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
@@ -1524,26 +1692,26 @@ var PersonalizationCriteria = ({
 };
 
 // src/components/ProjectUIVersion/ProjectUIVersion.tsx
-var import_design_system11 = require("@uniformdev/design-system");
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_design_system12 = require("@uniformdev/design-system");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 function ProjectUIVersion({ children, versionMap, contextConfig }) {
   const { loading, result: data } = useContextData(contextConfig);
   if (loading)
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system11.LoadingIndicator, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.LoadingIndicator, {});
   if (data) {
     const Component = versionMap[data.project.ui_version];
     if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Component, {});
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 }
 
 // src/hooks/useValidateContextConfig.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/utils/validateContextConfig.ts
-var import_api3 = require("@uniformdev/context/api");
+var import_api4 = require("@uniformdev/context/api");
 var import_uuid = require("uuid");
 var validateContextConfig = async (contextConfig) => {
   if (!contextConfig) {
@@ -1558,7 +1726,7 @@ var validateContextConfig = async (contextConfig) => {
   if (!(0, import_uuid.validate)(contextConfig.apiKey) && !contextConfig.projectId) {
     return { valid: false, error: new Error("projectId is required when using a modern API key.") };
   }
-  const client = new import_api3.UncachedManifestClient({
+  const client = new import_api4.UncachedManifestClient({
     projectId: contextConfig.projectId,
     apiKey: contextConfig.apiKey,
     apiHost: contextConfig.apiHost
@@ -1576,12 +1744,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = (0, import_react14.useState)({
+  const [state, setState] = (0, import_react17.useState)({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1607,6 +1775,7 @@ var useValidateContextConfig = (contextConfig) => {
 __reExport(src_exports, require("@uniformdev/design-system"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AbTestSelector,
   ContextData,
   CriteriaMatchMenu,
   CriteriaOperatorMenu,
@@ -1617,6 +1786,7 @@ __reExport(src_exports, require("@uniformdev/design-system"), module.exports);
   PersonalizationCriteria,
   PersonalizationCriteriaStatic,
   ProjectUIVersion,
+  addAbTestLink,
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,