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

package/dist/index.esm.js

@@ -2,18 +2,188 @@
 import { jsx } from "@emotion/react";
 import * as React from "react";
 
+// src/components/AbTestSelector/AbTestSelector.tsx
+import { css } from "@emotion/react";
+import {
+  AddListButton,
+  Button,
+  Callout,
+  Heading,
+  Link,
+  LoadingIndicator,
+  ScrollableList,
+  ScrollableListItem
+} from "@uniformdev/design-system";
+import { useState as useState2 } from "react";
+
+// src/hooks/useABTests.ts
+import { ApiClientError, CachedTestClient } from "@uniformdev/context/api";
+import { useEffect, useState } from "react";
+function useABTests({ apiHost, apiKey, projectId }) {
+  const [reload, setReload] = useState(true);
+  const [state, setState] = useState({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  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 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 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
+import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
+var addAbTestLink = 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__ */ jsx2(LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
+    !result || result.length === 0 ? /* @__PURE__ */ jsx2(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ jsx2(ScrollableList, { children: result.map((abTest) => {
+        const { id, name } = abTest;
+        return /* @__PURE__ */ jsx2(
+          ScrollableListItem,
+          {
+            buttonText: name,
+            active: id === (value == null ? void 0 : value.id),
+            onClick: () => onSelect(abTest)
+          },
+          id
+        );
+      }) }),
+      /* @__PURE__ */ jsx2(
+        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] = useState2(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx2(LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ jsx2("fieldset", { className: "ab-test", children: /* @__PURE__ */ jsxs("div", { children: [
+    !showAbTests && /* @__PURE__ */ jsxs("div", { children: [
+      value && Object.keys(value).length > 0 && /* @__PURE__ */ jsx2(Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
+      /* @__PURE__ */ jsx2(Button, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
+    ] }),
+    showAbTests && /* @__PURE__ */ jsx2(
+      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__ */ jsx2(
+  Callout,
+  {
+    title: "No A/B tests found in your Uniform project.",
+    type: "caution",
+    css: { marginBlock: "var(--spacing-base)" },
+    children: /* @__PURE__ */ 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__ */ jsx2(
+        "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
 import { InputComboBox } from "@uniformdev/design-system";
 
 // src/components/CriteriaOperatorMenu/OperatorBubble.tsx
-import { css } from "@emotion/react";
-import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
+import { css as css2 } from "@emotion/react";
+import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
 function OperatorBubble({ op }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: "operation-bubble",
-      css: css`
+      css: css2`
         align-items: center;
         background: var(--gray-700);
         border-radius: var(--rounded-full);
@@ -30,12 +200,12 @@ function OperatorBubble({ op }) {
 }
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorOption.tsx
-import { jsx as jsx3, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "@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__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       css: {
@@ -48,7 +218,7 @@ var CriteriaOperatorOption = (props) => {
       "aria-disabled": isDisabled,
       ...innerProps,
       children: [
-        description ? /* @__PURE__ */ jsx3(OperatorBubble, { op: name }) : /* @__PURE__ */ jsx3(
+        description ? /* @__PURE__ */ jsx4(OperatorBubble, { op: name }) : /* @__PURE__ */ jsx4(
           "div",
           {
             css: {
@@ -57,30 +227,30 @@ var CriteriaOperatorOption = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx3("div", { children: description != null ? description : name })
+        /* @__PURE__ */ jsx4("div", { children: description != null ? description : name })
       ]
     }
   );
 };
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorSingleValue.tsx
-import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
 var CriteriaOperatorSingleValue = (props) => {
   const { data, getStyles } = props;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       css: {
         ...getStyles("singleValue", props),
         width: "max-content"
       },
-      children: data.label.length === 1 ? /* @__PURE__ */ jsx4(OperatorBubble, { op: data.label }) : data.label
+      children: data.label.length === 1 ? /* @__PURE__ */ jsx5(OperatorBubble, { op: data.label }) : data.label
     }
   );
 };
 
 // src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
-import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
 var contextCriteriaMenuOperators = [
   {
     name: "=",
@@ -113,17 +283,21 @@ 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__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     InputComboBox,
     {
       ...props,
@@ -185,20 +359,20 @@ function CriteriaOperatorMenu({ onChange, value, ...props }) {
 }
 
 // src/components/DataContext/DataContext.tsx
-import { LoadingIndicator } from "@uniformdev/design-system";
+import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import { createContext, useContext } from "react";
 
 // src/hooks/useContextData.ts
-import { ApiClientError, CachedManifestClient } from "@uniformdev/context/api";
-import { useEffect, useState } from "react";
+import { ApiClientError as ApiClientError2, CachedManifestClient } from "@uniformdev/context/api";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 function useContextData({ apiHost, apiKey, projectId }) {
-  const [state, setState] = useState({
+  const [state, setState] = useState3({
     loading: false,
     notConfigured: false,
     error: null,
     result: null
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (!projectId || !apiKey || !apiHost) {
       setState({ notConfigured: true, loading: false, error: null, result: null });
       return;
@@ -215,7 +389,7 @@ function useContextData({ apiHost, apiKey, projectId }) {
         setState({ notConfigured: false, loading: false, error: null, result });
       } catch (e) {
         let message;
-        if (e instanceof ApiClientError) {
+        if (e instanceof ApiClientError2) {
           if (e.statusCode === 403) {
             message = `The API key ${apiKey} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`;
           }
@@ -238,8 +412,8 @@ function useContextData({ apiHost, apiKey, projectId }) {
 }
 
 // src/hooks/useDimensions.ts
-import { ApiClientError as ApiClientError2, CachedDimensionClient, computeDimensionDisplayName } from "@uniformdev/context/api";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { ApiClientError as ApiClientError3, CachedDimensionClient, computeDimensionDisplayName } from "@uniformdev/context/api";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/utils/objectify.ts
 function objectify(array2, keySelector, valueSelector) {
@@ -255,13 +429,13 @@ function objectify(array2, keySelector, valueSelector) {
 
 // src/hooks/useDimensions.ts
 function useDimensions({ apiHost, apiKey, projectId }) {
-  const [state, setState] = useState2({
+  const [state, setState] = useState4({
     loading: false,
     notConfigured: false,
     error: null,
     result: null
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (!projectId || !apiKey || !apiHost) {
       setState({ notConfigured: true, loading: false, error: null, result: null });
       return;
@@ -289,7 +463,7 @@ function useDimensions({ apiHost, apiKey, projectId }) {
         setState({ notConfigured: false, loading: false, error: null, result });
       } catch (e) {
         let message;
-        if (e instanceof ApiClientError2) {
+        if (e instanceof ApiClientError3) {
           message = e.message;
         } else {
           message = e.toString();
@@ -309,7 +483,7 @@ function useDimensions({ apiHost, apiKey, projectId }) {
 }
 
 // src/components/DataContext/DataContext.tsx
-import { Fragment, jsx as jsx6 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var ContextDataContext = createContext(null);
 var ContextData = ({
   loadingComponent: LoadingComponent,
@@ -321,23 +495,23 @@ var ContextData = ({
   const dimensionsData = useDimensions(contextConfig);
   if (contextData.error || contextData.notConfigured) {
     if (ErrorComponent)
-      return /* @__PURE__ */ jsx6(ErrorComponent, { contextConfig, result: contextData });
+      return /* @__PURE__ */ jsx7(ErrorComponent, { contextConfig, result: contextData });
     else
-      return /* @__PURE__ */ jsx6(Fragment, { children: "ErrorComponent is not configured" });
+      return /* @__PURE__ */ jsx7(Fragment2, { children: "ErrorComponent is not configured" });
   }
   if (dimensionsData.error || dimensionsData.notConfigured) {
     if (ErrorComponent)
-      return /* @__PURE__ */ jsx6(ErrorComponent, { contextConfig, result: dimensionsData });
+      return /* @__PURE__ */ jsx7(ErrorComponent, { contextConfig, result: dimensionsData });
     else
-      return /* @__PURE__ */ jsx6(Fragment, { children: "ErrorComponent is not configured" });
+      return /* @__PURE__ */ jsx7(Fragment2, { children: "ErrorComponent is not configured" });
   }
   if (contextData.loading || dimensionsData.loading) {
     if (LoadingComponent)
-      return /* @__PURE__ */ jsx6(LoadingComponent, {});
+      return /* @__PURE__ */ jsx7(LoadingComponent, {});
     else
-      return /* @__PURE__ */ jsx6(LoadingIndicator, {});
+      return /* @__PURE__ */ jsx7(LoadingIndicator2, {});
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ContextDataContext.Provider,
     {
       value: { manifest: contextData.result, dimensions: dimensionsData.result, contextConfig },
@@ -369,7 +543,7 @@ function useDimensionsDataContext() {
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
 import { InputComboBox as InputComboBox3 } from "@uniformdev/design-system";
-import { useState as useState3 } from "react";
+import { useState as useState5 } from "react";
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
 import { Icon } from "@uniformdev/design-system";
@@ -413,11 +587,11 @@ function groupDimensions(dimensions) {
 }
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var DimensionGroupHeading = (props) => {
   var _a;
   const { data, getStyles, className } = props;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       css: {
@@ -426,13 +600,13 @@ var DimensionGroupHeading = (props) => {
         fontSize: "var(--font-size-sm)"
       },
       className,
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "small",
         {
           css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
           children: [
-            /* @__PURE__ */ jsx7(Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
-            /* @__PURE__ */ jsx7("span", { children: data.label })
+            /* @__PURE__ */ jsx8(Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
+            /* @__PURE__ */ jsx8("span", { children: data.label })
           ]
         }
       )
@@ -441,15 +615,15 @@ var DimensionGroupHeading = (props) => {
 };
 
 // src/components/DimensionMenu/DimensionMenuErrorMessage.tsx
-import { css as css2 } from "@emotion/react";
-import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
+import { css as css3 } from "@emotion/react";
+import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 function DimensionMenuErrorMessage({ message }) {
   if (!message)
     return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
-      css: css2`
+      css: css3`
         color: var(--brand-primary-2);
         font-size: var(--fs-xs);
         position: absolute;
@@ -461,12 +635,12 @@ function DimensionMenuErrorMessage({ message }) {
 }
 
 // src/components/DimensionMenu/DimensionOption.tsx
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10 } from "@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__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       css: getStyles("option", props),
@@ -482,17 +656,17 @@ var DimensionOption = (props) => {
       ref: innerRef,
       "aria-disabled": isDisabled,
       ...innerProps,
-      children: /* @__PURE__ */ jsx9("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
+      children: /* @__PURE__ */ jsx10("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
     }
   );
 };
 
 // src/components/DimensionMenu/DimensionValue.tsx
 import { Icon as Icon2 } from "@uniformdev/design-system";
-import { jsx as jsx10, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 function DimensionValue({ displayName }) {
   const [type, name] = displayName.split(":");
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       css: {
@@ -500,31 +674,31 @@ function DimensionValue({ displayName }) {
         overflow: "hidden"
       },
       children: [
-        name ? /* @__PURE__ */ jsxs3(
+        name ? /* @__PURE__ */ jsxs4(
           "small",
           {
             css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
             children: [
-              type ? /* @__PURE__ */ jsx10(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
-              /* @__PURE__ */ jsx10("span", { "data-testid": "dimension-name", children: type })
+              type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
+              /* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx10("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
+        /* @__PURE__ */ jsx11("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
       ]
     }
   );
 }
 
 // src/components/DimensionMenu/DimensionSingleValue.tsx
-import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
 var DimensionSingleValue = (props) => {
   const { data, getStyles } = props;
-  return /* @__PURE__ */ jsx11("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ jsx11(DimensionValue, { displayName: data.label }) });
+  return /* @__PURE__ */ jsx12("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ jsx12(DimensionValue, { displayName: data.label }) });
 };
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 function CriteriaMatchMenu({
   onChange,
   criteriaMatch,
@@ -533,13 +707,13 @@ function CriteriaMatchMenu({
   ...props
 }) {
   var _a, _b;
-  const [inputValue, setInputValue] = useState3(
+  const [inputValue, setInputValue] = useState5(
     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__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx13(
       InputComboBox3,
       {
         ...props,
@@ -606,26 +780,26 @@ function CriteriaMatchMenu({
         },
         noOptionsMessage: ({ inputValue: inputValue2 }) => {
           if (isInt(inputValue2)) {
-            return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsxs4("div", { children: [
+            return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              /* @__PURE__ */ jsxs5("div", { children: [
                 "Score: ",
                 inputValue2
               ] }),
-              /* @__PURE__ */ jsx12("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
+              /* @__PURE__ */ jsx13("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
             ] });
           }
-          return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsxs4("div", { children: [
+          return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsxs5("div", { children: [
               "No dimensions match your search \u201C",
               inputValue2,
               "\u201D"
             ] }),
-            /* @__PURE__ */ jsx12("small", { children: "If you want to match a literal score, enter a numeric value." })
+            /* @__PURE__ */ jsx13("small", { children: "If you want to match a literal score, enter a numeric value." })
           ] });
         }
       }
     ),
-    /* @__PURE__ */ jsx12(DimensionMenuErrorMessage, { message: errorMessage })
+    /* @__PURE__ */ jsx13(DimensionMenuErrorMessage, { message: errorMessage })
   ] });
 }
 function isInt(value) {
@@ -634,10 +808,10 @@ function isInt(value) {
 
 // src/components/DimensionMenu/DimensionMenu.tsx
 import { InputComboBox as InputComboBox4 } from "@uniformdev/design-system";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       InputComboBox4,
       {
         ...props,
@@ -667,7 +841,7 @@ function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props })
         }
       }
     ),
-    /* @__PURE__ */ jsx13(DimensionMenuErrorMessage, { message: errorMessage })
+    /* @__PURE__ */ jsx14(DimensionMenuErrorMessage, { message: errorMessage })
   ] });
 }
 
@@ -676,8 +850,8 @@ import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
 import { Icon as Icon3 } from "@uniformdev/design-system";
 
 // src/components/EditLink/EditLink.styles.ts
-import { css as css3 } from "@emotion/react";
-var editLink = css3`
+import { css as css4 } from "@emotion/react";
+var editLink = css4`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -691,9 +865,9 @@ var editLink = css3`
 `;
 
 // src/components/EditLink/EditLink.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "a",
     {
       css: editLink,
@@ -703,31 +877,31 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
       href: linkTo,
       children: [
         linkText,
-        /* @__PURE__ */ jsx14(Icon3, { icon: CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
+        /* @__PURE__ */ jsx15(Icon3, { icon: CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
       ]
     }
   );
 };
 
 // src/components/EnrichmentTag/EnrichmentTag.tsx
-import { css as css4 } from "@emotion/react";
+import { css as css5 } from "@emotion/react";
 import { CgCloseO } from "@react-icons/all-files/cg/CgCloseO";
 import { CgMathMinus } from "@react-icons/all-files/cg/CgMathMinus";
 import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
 import { getEnrichmentVectorKey } from "@uniformdev/context";
 import {
-  AddListButton,
-  Button,
-  Callout,
+  AddListButton as AddListButton2,
+  Button as Button2,
+  Callout as Callout2,
   Icon as Icon4,
   Input,
   InputSelect,
-  LoadingIndicator as LoadingIndicator2
+  LoadingIndicator as LoadingIndicator3
 } from "@uniformdev/design-system";
-import produce from "immer";
-import { useMemo, useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
-var addEnrichmentLink = css4`
+import { produce } from "immer";
+import { useMemo, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+var addEnrichmentLink = css5`
   flex: 2;
   display: flex;
   width: 50%;
@@ -758,9 +932,9 @@ var EnrichmentTag = ({
         (enr) => !value.some((val) => getEnrichmentVectorKey(val.cat, val.key) === enr.dim)
       );
   }, [allEnrichments, value]);
-  const [selectValue, setSelectValue] = useState4("");
-  const [score, setScore] = useState4(50);
-  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = useState4(false);
+  const [selectValue, setSelectValue] = useState6("");
+  const [score, setScore] = useState6(50);
+  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = useState6(false);
   const selectedEnrichment = allEnrichments == null ? void 0 : allEnrichments.find((dimension) => dimension.dim === selectValue);
   const addEnrichment = () => {
     const [cat, key] = selectValue.split("_");
@@ -783,21 +957,21 @@ var EnrichmentTag = ({
     setValue(finalValue);
   };
   if (error)
-    return /* @__PURE__ */ jsx15(Callout, { type: "danger", children: error });
+    return /* @__PURE__ */ jsx16(Callout2, { type: "danger", children: error });
   if (loading || dimensions === null)
-    return /* @__PURE__ */ jsx15(LoadingIndicator2, {});
-  return /* @__PURE__ */ jsxs7("fieldset", { className: "enrichment-tag", children: [
-    displayTitle ? /* @__PURE__ */ jsx15("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx15("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
-    !(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ jsx15(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ jsx15(
-      Callout,
+    return /* @__PURE__ */ jsx16(LoadingIndicator3, {});
+  return /* @__PURE__ */ jsxs8("fieldset", { className: "enrichment-tag", children: [
+    displayTitle ? /* @__PURE__ */ jsx16("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx16("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
+    !(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ jsx16(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ jsx16(
+      Callout2,
       {
         title: "No enrichment tags assigned.",
         type: "info",
         css: { marginBlock: "var(--spacing-base)" },
-        children: /* @__PURE__ */ jsxs7("p", { children: [
+        children: /* @__PURE__ */ jsxs8("p", { children: [
           "Click",
           " ",
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "a",
             {
               onClick: () => setShowAddNewEnrichmentTagPanel(true),
@@ -811,9 +985,9 @@ var EnrichmentTag = ({
           "to assign your first enrichment tag."
         ] })
       }
-    ) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      dimensions && /* @__PURE__ */ jsx15(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
-      showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ jsxs7(
+    ) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      dimensions && /* @__PURE__ */ jsx16(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
+      showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ jsxs8(
         "div",
         {
           className: "add-enrichment-tag",
@@ -825,7 +999,7 @@ var EnrichmentTag = ({
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx15("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ jsx16(
               InputSelect,
               {
                 name: `enrichment-type`,
@@ -842,7 +1016,7 @@ var EnrichmentTag = ({
                 onChange: (e) => setSelectValue(e.currentTarget.value)
               }
             ) }),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(
               ScoreCounter,
               {
                 score,
@@ -851,8 +1025,8 @@ var EnrichmentTag = ({
                 css: { flexBasis: "9rem" }
               }
             ),
-            /* @__PURE__ */ jsx15(
-              Button,
+            /* @__PURE__ */ jsx16(
+              Button2,
               {
                 buttonType: "tertiary",
                 size: "xl",
@@ -870,21 +1044,21 @@ var EnrichmentTag = ({
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         "div",
         {
           className: "enrichment-cta",
           style: { paddingTop: "10px", display: "flex", justifyContent: "space-between" },
           children: [
-            !showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ jsx15(
-              AddListButton,
+            !showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ jsx16(
+              AddListButton2,
               {
                 className: "add-more",
                 buttonText: "Add More",
                 onButtonClick: () => setShowAddNewEnrichmentTagPanel(true)
               }
-            ) : /* @__PURE__ */ jsx15("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
-            /* @__PURE__ */ jsx15(
+            ) : /* @__PURE__ */ jsx16("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
+            /* @__PURE__ */ jsx16(
               EditLink,
               {
                 name: "Enrichments",
@@ -900,10 +1074,10 @@ var EnrichmentTag = ({
     ] })
   ] });
 };
-var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx15(Callout, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs7("p", { children: [
+var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx16(Callout2, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs8("p", { children: [
   "Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment",
   " ",
-  /* @__PURE__ */ jsx15(
+  /* @__PURE__ */ jsx16(
     "a",
     {
       href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
@@ -920,7 +1094,7 @@ var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx15(Callout, {
 var getCappedValue = (value, maxCap = 100, minCap = 0) => {
   return Math.max(Math.min(value, maxCap), minCap);
 };
-var scoreCounterMinusButtonStyles = css4`
+var scoreCounterMinusButtonStyles = css5`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -933,7 +1107,7 @@ var scoreCounterMinusButtonStyles = css4`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
 `;
-var scoreCounterPlusButtonStyles = css4`
+var scoreCounterPlusButtonStyles = css5`
   ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
@@ -954,8 +1128,8 @@ var ScoreCounter = ({
     }
     setValue(newScore);
   };
-  return /* @__PURE__ */ jsxs7("div", { css: { position: "relative" }, ...otherProps, children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs8("div", { css: { position: "relative" }, ...otherProps, children: [
+    /* @__PURE__ */ jsx16(
       Input,
       {
         label: "Strength",
@@ -968,7 +1142,7 @@ var ScoreCounter = ({
         css: { textAlign: "center", boxSizing: "border-box" }
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -977,10 +1151,10 @@ var ScoreCounter = ({
         disabled: score === 0,
         className: "scoreCounterButton",
         css: scoreCounterMinusButtonStyles,
-        children: /* @__PURE__ */ jsx15(Icon4, { icon: CgMathMinus, iconColor: "gray", size: "1.5rem" })
+        children: /* @__PURE__ */ jsx16(Icon4, { icon: CgMathMinus, iconColor: "gray", size: "1.5rem" })
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -988,7 +1162,7 @@ var ScoreCounter = ({
         onClick: () => handleCounter("increment"),
         className: "scoreCounterButton",
         css: scoreCounterPlusButtonStyles,
-        children: /* @__PURE__ */ jsx15(Icon4, { icon: CgMathPlus, iconColor: "gray", size: "1.5rem" })
+        children: /* @__PURE__ */ jsx16(Icon4, { icon: CgMathPlus, iconColor: "gray", size: "1.5rem" })
       }
     )
   ] });
@@ -1010,11 +1184,11 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
       })
     );
   };
-  return /* @__PURE__ */ jsx15(Fragment4, { children: list.map((enrichment, index) => {
+  return /* @__PURE__ */ jsx16(Fragment5, { children: list.map((enrichment, index) => {
     const dimData = dimIndex[getEnrichmentVectorKey(enrichment.cat, enrichment.key)];
     if (!dimData)
       return;
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         css: {
@@ -1029,14 +1203,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
         },
         className: "selected-enrichments",
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "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__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "div",
             {
               css: {
@@ -1049,7 +1223,7 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
                 padding: "var(--spacing-sm) var(--spacing-base)",
                 flexBasis: "9rem"
               },
-              children: /* @__PURE__ */ jsx15(
+              children: /* @__PURE__ */ jsx16(
                 Input,
                 {
                   type: "text",
@@ -1063,14 +1237,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
               title: `Delete enrichment`,
               onClick: () => removeEnrichment(index),
               css: { border: 0 },
-              children: /* @__PURE__ */ jsx15(Icon4, { icon: CgCloseO, iconColor: "red", size: "1.5rem" })
+              children: /* @__PURE__ */ jsx16(Icon4, { icon: CgCloseO, iconColor: "red", size: "1.5rem" })
             }
           )
         ]
@@ -1081,8 +1255,8 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
 };
 
 // src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
-import { Callout as Callout3, LoadingIndicator as LoadingIndicator3 } from "@uniformdev/design-system";
-import { useState as useState5 } from "react";
+import { Callout as Callout4, LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
+import { useState as useState7 } from "react";
 import { useAsync } from "react-use";
 import * as yup from "yup";
 
@@ -1094,19 +1268,19 @@ function isPersonalizationCriteriaData(obj) {
   return obj.crit !== void 0;
 }
 function opHasRhs(op) {
-  return op !== "+" && op !== "-";
+  return op !== "+" && op !== "-" && op !== "^";
 }
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 import { CgCloseO as CgCloseO2 } from "@react-icons/all-files/cg/CgCloseO";
-import { AddListButton as AddListButton2, Callout as Callout2, Icon as Icon5, InputInlineSelect, Paragraph } from "@uniformdev/design-system";
-import produce2 from "immer";
+import { AddListButton as AddListButton3, Callout as Callout3, Icon as Icon5, InputInlineSelect, Paragraph } from "@uniformdev/design-system";
+import { produce as produce2 } from "immer";
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
-import { css as css5 } from "@emotion/react";
+import { css as css6 } from "@emotion/react";
 var spaceBetweenCriteriaItems = "6rem";
-var criteriaItem = css5`
+var criteriaItem = css6`
   position: relative;
   padding: var(--spacing-md) var(--spacing-base);
   border: 1px solid var(--gray-300);
@@ -1134,35 +1308,35 @@ var criteriaItem = css5`
     }
   }
 `;
-var criteriaItemInner = css5`
+var criteriaItemInner = css6`
   display: flex;
   gap: var(--spacing-base);
   flex-grow: 1;
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
 `;
-var criteriaWrapper = css5`
+var criteriaWrapper = css6`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
 `;
-var criteriaOperandWrapper = css5`
+var criteriaOperandWrapper = css6`
   flex: 2;
   height: 52px;
   min-width: 200px;
 `;
-var criteriaOperatorWrapper = css5`
+var criteriaOperatorWrapper = css6`
   flex: 1;
   min-width: 80px;
 `;
-var expand = css5`
+var expand = css6`
   height: 100%;
   width: 100%;
 `;
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var PersonalizationCriteriaStatic = ({
   value,
   setValue,
@@ -1208,8 +1382,8 @@ var PersonalizationCriteriaStatic = ({
     setValue(finalValue);
     onRemoveCriteria == null ? void 0 : onRemoveCriteria(finalValue);
   };
-  return /* @__PURE__ */ jsxs8("fieldset", { className: "personalization-criteria", children: [
-    displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ jsx16(components.Title, {}) : /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs9("fieldset", { className: "personalization-criteria", "data-testid": "personalization-panel", children: [
+    displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ jsx17(components.Title, {}) : /* @__PURE__ */ jsx17(
       "legend",
       {
         css: {
@@ -1219,27 +1393,28 @@ var PersonalizationCriteriaStatic = ({
         children: "Personalize This"
       }
     ) : null,
-    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ jsx16(components.CustomVariantName, {}) : null,
-    !currentValue.crit.length ? /* @__PURE__ */ jsx16(Callout2, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx16(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__ */ jsx16("div", { children: currentValue.crit.map((currentCriteria, index) => {
+    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ jsx17(components.CustomVariantName, {}) : null,
+    (components == null ? void 0 : components.ControlPercentage) ? /* @__PURE__ */ jsx17(components.ControlPercentage, {}) : null,
+    !currentValue.crit.length ? /* @__PURE__ */ jsx17(Callout3, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17(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__ */ jsx17("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__ */ jsxs8("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
-        /* @__PURE__ */ jsxs8(
+      const critHasRhs = opHasRhs(currentCriteria.op);
+      return /* @__PURE__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
+        /* @__PURE__ */ jsxs9(
           "div",
           {
-            css: css6`
+            css: css7`
                     ${criteriaItemInner}/* grid-template-columns: minmax(0, 1fr) ${critHasRhs ? "minmax(0, 79px) minmax(0, 1fr)" : "minmax(0, 1fr)"} */
                   `,
             className: "criteriaItemInner",
             children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperandWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-criteria",
-                  children: /* @__PURE__ */ jsx16(
+                  children: /* @__PURE__ */ jsx17(
                     DimensionMenu,
                     {
                       errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
@@ -1256,13 +1431,13 @@ var PersonalizationCriteriaStatic = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperatorWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-operator",
-                  children: /* @__PURE__ */ jsx16(
+                  children: /* @__PURE__ */ jsx17(
                     CriteriaOperatorMenu,
                     {
                       name: `op-${index}`,
@@ -1282,13 +1457,13 @@ var PersonalizationCriteriaStatic = ({
                   )
                 }
               ),
-              critHasRhs ? /* @__PURE__ */ jsx16(
+              critHasRhs ? /* @__PURE__ */ jsx17(
                 "div",
                 {
                   css: [criteriaWrapper, criteriaOperandWrapper],
                   className: "criteria-wrapper",
                   "data-testid": "select-match-criteria",
-                  children: /* @__PURE__ */ jsx16(
+                  children: /* @__PURE__ */ jsx17(
                     CriteriaMatchMenu,
                     {
                       errorMessage: (_c = errors.rhs) == null ? void 0 : _c[index],
@@ -1309,7 +1484,7 @@ var PersonalizationCriteriaStatic = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -1317,10 +1492,10 @@ var PersonalizationCriteriaStatic = ({
             title: `Delete Personalization`,
             css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
             "data-testid": "button-delete",
-            children: /* @__PURE__ */ jsx16(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
+            children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
           }
         ),
-        index > 0 ? /* @__PURE__ */ jsx16(
+        index > 0 ? /* @__PURE__ */ jsx17(
           "div",
           {
             className: "criteria-group-operation",
@@ -1329,7 +1504,7 @@ var PersonalizationCriteriaStatic = ({
               top: "-4rem",
               transform: "translateX(calc(1.5rem - 50%))"
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx17(
               InputInlineSelect,
               {
                 "data-testid": "dropdown-button-combine",
@@ -1348,8 +1523,8 @@ var PersonalizationCriteriaStatic = ({
         ) : null
       ] }, index);
     }) }),
-    dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ jsx16(components.NoDimensionsDefined, {}) : /* @__PURE__ */ jsx16(Callout2, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx16("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ jsx16(
-      AddListButton2,
+    dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ jsx17(components.NoDimensionsDefined, {}) : /* @__PURE__ */ jsx17(Callout3, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ jsx17(
+      AddListButton3,
       {
         "data-testid": "button-add-criteria",
         className: "add-more",
@@ -1361,7 +1536,7 @@ var PersonalizationCriteriaStatic = ({
 };
 
 // src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 function convertErrorsToObj(errors) {
   const result = { crit: [] };
   errors.forEach((err) => {
@@ -1422,7 +1597,7 @@ var PersonalizationCriteria = ({
   ...staticProps
 }) => {
   var _a, _b;
-  const [validationError, setValidationError] = useState5(void 0);
+  const [validationError, setValidationError] = useState7(void 0);
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
   useAsync(async () => {
     if (value && dimensions) {
@@ -1431,15 +1606,15 @@ var PersonalizationCriteria = ({
     }
   }, [value, dimensions, validate]);
   if (error)
-    return /* @__PURE__ */ jsx17(Callout3, { type: "danger", children: error });
+    return /* @__PURE__ */ jsx18(Callout4, { type: "danger", children: error });
   if (loading || dimensions === null)
-    return /* @__PURE__ */ jsx17(LoadingIndicator3, {});
+    return /* @__PURE__ */ jsx18(LoadingIndicator4, {});
   const handleSetValue = async (value2) => {
     const err = await validate(value2, dimensions);
     setValidationError(err);
     setValue(value2);
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     PersonalizationCriteriaStatic,
     {
       ...staticProps,
@@ -1451,10 +1626,10 @@ var PersonalizationCriteria = ({
       },
       dimensions,
       components: {
-        NoDimensionsDefined: () => /* @__PURE__ */ jsx17(Callout3, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs9("p", { children: [
+        NoDimensionsDefined: () => /* @__PURE__ */ jsx18(Callout4, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs10("p", { children: [
           "You do not have any dimensions configured. Create your first",
           " ",
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             "a",
             {
               href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
@@ -1473,23 +1648,23 @@ var PersonalizationCriteria = ({
 };
 
 // src/components/ProjectUIVersion/ProjectUIVersion.tsx
-import { LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
-import { Fragment as Fragment5, jsx as jsx18 } from "@emotion/react/jsx-runtime";
+import { LoadingIndicator as LoadingIndicator5 } from "@uniformdev/design-system";
+import { Fragment as Fragment6, jsx as jsx19 } from "@emotion/react/jsx-runtime";
 function ProjectUIVersion({ children, versionMap, contextConfig }) {
   const { loading, result: data } = useContextData(contextConfig);
   if (loading)
-    return /* @__PURE__ */ jsx18(LoadingIndicator4, {});
+    return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
   if (data) {
     const Component = versionMap[data.project.ui_version];
     if (Component) {
-      return /* @__PURE__ */ jsx18(Component, {});
+      return /* @__PURE__ */ jsx19(Component, {});
     }
   }
-  return /* @__PURE__ */ jsx18(Fragment5, { children });
+  return /* @__PURE__ */ jsx19(Fragment6, { children });
 }
 
 // src/hooks/useValidateContextConfig.ts
-import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 
 // src/utils/validateContextConfig.ts
 import { UncachedManifestClient } from "@uniformdev/context/api";
@@ -1525,12 +1700,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = useState6({
+  const [state, setState] = useState8({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  useEffect3(() => {
+  useEffect4(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1555,6 +1730,7 @@ var useValidateContextConfig = (contextConfig) => {
 // src/index.ts
 export * from "@uniformdev/design-system";
 export {
+  AbTestSelector,
   ContextData,
   CriteriaMatchMenu,
   CriteriaOperatorMenu,
@@ -1565,6 +1741,7 @@ export {
   PersonalizationCriteria,
   PersonalizationCriteriaStatic,
   ProjectUIVersion,
+  addAbTestLink,
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,