@uniformdev/context-ui 20.7.1-alpha.12 → 20.7.1-alpha.121

package/dist/index.js

@@ -46,6 +46,8 @@ __export(src_exports, {
   addEnrichmentLink: () => addEnrichmentLink,
   contextCriteriaMenuOperators: () => contextCriteriaMenuOperators,
   convertErrorsToObj: () => convertErrorsToObj,
+  enrichmentCriteriaMenuOperators: () => enrichmentCriteriaMenuOperators,
+  getValidCriteriaOperatorsFor: () => getValidCriteriaOperatorsFor,
   isEnrichmentTagData: () => isEnrichmentTagData,
   isPersonalizationCriteriaData: () => isPersonalizationCriteriaData,
   opHasRhs: () => opHasRhs,
@@ -341,23 +343,43 @@ var contextCriteriaMenuOperators = [
   {
     name: "has the weakest score",
     value: "-"
-  },
+  }
+];
+var enrichmentCriteriaMenuOperators = [
+  ...contextCriteriaMenuOperators,
   {
     name: "has strongest category score",
     value: "^"
   }
 ];
-function CriteriaOperatorMenu({ onChange, value, ...props }) {
+var quirkCriteriaMenuOperators = [
+  {
+    name: "=",
+    description: "equals",
+    value: "="
+  },
+  {
+    name: "\u2260",
+    description: "not equal",
+    value: "!="
+  }
+];
+function getValidCriteriaOperatorsFor(rhsType) {
+  return rhsType === "QUIRK" ? quirkCriteriaMenuOperators : rhsType === "ENR" ? enrichmentCriteriaMenuOperators : contextCriteriaMenuOperators;
+}
+function CriteriaOperatorMenu({ onChange, value, rhsType, ...props }) {
   var _a, _b;
+  const operators = getValidCriteriaOperatorsFor(rhsType);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_design_system2.InputComboBox,
     {
       ...props,
+      isDisabled: props.disabled,
       value: {
-        label: (_b = (_a = contextCriteriaMenuOperators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
+        label: (_b = (_a = operators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
         value
       },
-      options: contextCriteriaMenuOperators.map((option) => ({
+      options: operators.map((option) => ({
         label: option.description ? `${option.name}:${option.description}` : option.name,
         value: option.value
       })),
@@ -589,24 +611,29 @@ function useDimensionsDataContext() {
 
 // src/components/DimensionMenu/CriteriaMatchMenu.tsx
 var import_design_system6 = require("@uniformdev/design-system");
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
 var import_design_system4 = require("@uniformdev/design-system");
 
 // src/components/DimensionMenu/utils.ts
+var import_react9 = require("react");
 function dimensionToMenuOption(dimension) {
+  if ("dim" in dimension) {
+    return {
+      label: dimension.displayName,
+      value: dimension.dim,
+      original: dimension
+    };
+  }
+  const quirk = dimension;
   return {
-    label: dimension.displayName,
-    value: dimension.dim,
-    isDisabled: false
+    label: `Quirk:${quirk.name}`,
+    value: quirk.id,
+    original: quirk
   };
 }
-function dimensionIcon(displayName) {
-  if (!displayName) {
-    return "unavailable";
-  }
-  const [type] = displayName.split(":");
+function dimensionIcon(type) {
   switch (type.toLowerCase()) {
     case "signal":
       return "data";
@@ -618,25 +645,42 @@ function dimensionIcon(displayName) {
       return "user-list";
   }
 }
-function groupDimensions(dimensions) {
-  const result = [];
-  let lastType = "";
-  for (const dim of dimensions) {
-    const [type] = dim.displayName.split(":");
-    if (lastType !== type) {
-      result.push({ label: type, options: [] });
-      lastType = type;
+function useGroupedDimensions(dimensions, quirks) {
+  return (0, import_react9.useMemo)(() => {
+    const result = [];
+    let lastType = "";
+    for (const dim of dimensions) {
+      const { type } = dimensionDisplayName(dim.displayName);
+      if (lastType !== type) {
+        result.push({ label: type != null ? type : "", options: [] });
+        lastType = type != null ? type : "";
+      }
+      result[result.length - 1].options.push(dimensionToMenuOption(dim));
+    }
+    if (quirks == null ? void 0 : quirks.length) {
+      result.push({
+        label: "Quirks",
+        options: quirks.map(dimensionToMenuOption)
+      });
     }
-    result[result.length - 1].options.push(dimensionToMenuOption(dim));
+    return result;
+  }, [dimensions, quirks]);
+}
+function dimensionDisplayName(displayName) {
+  if (!displayName) {
+    return {};
   }
-  return result;
+  const colonIndex = displayName.indexOf(":");
+  const type = colonIndex >= 0 ? displayName.substring(0, colonIndex) : void 0;
+  const name = colonIndex >= 0 ? displayName.substring(colonIndex + 1) : displayName;
+  return { type, name };
 }
 
 // src/components/DimensionMenu/DimensionGroupHeading.tsx
 var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var DimensionGroupHeading = (props) => {
-  var _a;
   const { data, getStyles, className } = props;
+  const { type } = dimensionDisplayName(data.label);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
@@ -651,7 +695,7 @@ var DimensionGroupHeading = (props) => {
         {
           css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system4.Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
+            type ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system4.Icon, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: data.label })
           ]
         }
@@ -661,14 +705,14 @@ var DimensionGroupHeading = (props) => {
 };
 
 // src/components/DimensionMenu/DimensionMenuErrorMessage.tsx
-var import_react9 = require("@emotion/react");
+var import_react10 = require("@emotion/react");
 var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 function DimensionMenuErrorMessage({ message }) {
   if (!message) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
-      css: import_react9.css`
+      css: import_react10.css`
         color: var(--brand-primary-2);
         font-size: var(--fs-xs);
         position: absolute;
@@ -682,9 +726,8 @@ function DimensionMenuErrorMessage({ message }) {
 // src/components/DimensionMenu/DimensionOption.tsx
 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 : [];
+  const { name } = dimensionDisplayName(data.label);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
@@ -701,38 +744,44 @@ var DimensionOption = (props) => {
       ref: innerRef,
       "aria-disabled": isDisabled,
       ...innerProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.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: name != null ? name : data.label })
     }
   );
 };
 
 // src/components/DimensionMenu/DimensionValue.tsx
+var import_react11 = require("@emotion/react");
 var import_design_system5 = require("@uniformdev/design-system");
 var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var styles = {
+  dimensionValueWrapper: import_react11.css`
+    white-space: normal;
+    overflow: hidden;
+  `,
+  dimensionName: import_react11.css`
+    color: var(--gray-500);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  `,
+  dimensionValue: import_react11.css`
+    color: var(--gray-700);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  `
+};
 function DimensionValue({ displayName }) {
-  const [type, name] = displayName.split(":");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "div",
-    {
-      css: {
-        whiteSpace: "normal",
-        overflow: "hidden"
-      },
-      children: [
-        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_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_runtime10.jsx)("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
-      ]
-    }
-  );
+  var _a;
+  const { type, name } = dimensionDisplayName(displayName);
+  const tooltip = (_a = name != null ? name : type) != null ? _a : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { css: styles.dimensionValueWrapper, children: [
+    type ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("small", { css: styles.dimensionName, children: [
+      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_runtime10.jsx)(import_design_system5.Tooltip, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { css: styles.dimensionValue, "data-testid": "dimension-value", children: name != null ? name : type }) })
+  ] });
 }
 
 // src/components/DimensionMenu/DimensionSingleValue.tsx
@@ -752,16 +801,27 @@ function CriteriaMatchMenu({
   ...props
 }) {
   var _a, _b;
-  const [inputValue, setInputValue] = (0, import_react10.useState)(
+  const [inputValue, setInputValue] = (0, import_react12.useState)(
     typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
   );
+  const currentInputValue = (0, import_react12.useRef)(inputValue);
+  currentInputValue.current = inputValue;
+  (0, import_react12.useEffect)(() => {
+    if (currentInputValue.current !== criteriaMatch.r && !criteriaMatch.rDim) {
+      setInputValue(
+        typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
+      );
+    }
+  }, [criteriaMatch.r, criteriaMatch.rDim]);
   const rDim = criteriaMatch.rDim;
   const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
+  const groupedDimensions = useGroupedDimensions(dimensions.dimensions, void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_design_system6.InputComboBox,
       {
         ...props,
+        isDisabled: props.disabled,
         inputValue,
         menuShouldScrollIntoView: true,
         value: {
@@ -775,7 +835,7 @@ function CriteriaMatchMenu({
             value: "",
             isDisabled: true
           },
-          ...groupDimensions(dimensions.dimensions)
+          ...groupedDimensions
         ],
         styles: {
           ...props.styles,
@@ -854,14 +914,25 @@ function isInt(value) {
 // src/components/DimensionMenu/DimensionMenu.tsx
 var import_design_system7 = require("@uniformdev/design-system");
 var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
-function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
+function DimensionMenu({
+  onChange,
+  value,
+  dimensions,
+  errorMessage,
+  quirks,
+  ...props
+}) {
+  const groupedDimensions = useGroupedDimensions(dimensions, quirks);
+  const valueAsMenuOption = value ? dimensionToMenuOption(value) : void 0;
   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,
-        options: groupDimensions(dimensions),
+        isDisabled: props.disabled,
+        value: valueAsMenuOption,
+        options: groupedDimensions,
+        getOptionValue: (option) => option.label,
         styles: {
           ...props.styles,
           valueContainer: (provided, state) => {
@@ -874,8 +945,10 @@ function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props })
           }
         },
         onChange: (e) => {
-          if (e) {
-            onChange(dimensions.find((d) => d.dim === e.value));
+          if (e == null ? void 0 : e.original) {
+            onChange(e.original);
+          } else {
+            onChange(void 0);
           }
         },
         components: {
@@ -895,8 +968,8 @@ var import_CgChevronRight = require("@react-icons/all-files/cg/CgChevronRight");
 var import_design_system8 = require("@uniformdev/design-system");
 
 // src/components/EditLink/EditLink.styles.ts
-var import_react11 = require("@emotion/react");
-var editLink = import_react11.css`
+var import_react13 = require("@emotion/react");
+var editLink = import_react13.css`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -929,16 +1002,16 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
 };
 
 // src/components/EnrichmentTag/EnrichmentTag.tsx
-var import_react12 = require("@emotion/react");
+var import_react14 = 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_system9 = require("@uniformdev/design-system");
 var import_immer = require("immer");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
-var addEnrichmentLink = import_react12.css`
+var addEnrichmentLink = import_react14.css`
   flex: 2;
   display: flex;
   width: 50%;
@@ -957,19 +1030,19 @@ var EnrichmentTag = ({
   displayTitle = true
 }) => {
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
-  const allEnrichments = (0, import_react13.useMemo)(() => {
+  const allEnrichments = (0, import_react15.useMemo)(() => {
     if (dimensions) return dimensions.dimensions.filter((dimension) => dimension.category === "ENR");
   }, [dimensions]);
-  const remainingEnrichments = (0, import_react13.useMemo)(() => {
+  const remainingEnrichments = (0, import_react15.useMemo)(() => {
     if (!value) return allEnrichments;
     if (allEnrichments)
       return allEnrichments.filter(
         (enr) => !value.some((val) => (0, import_context.getEnrichmentVectorKey)(val.cat, val.key) === enr.dim)
       );
   }, [allEnrichments, value]);
-  const [selectValue, setSelectValue] = (0, import_react13.useState)("");
-  const [score, setScore] = (0, import_react13.useState)(50);
-  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = (0, import_react13.useState)(false);
+  const [selectValue, setSelectValue] = (0, import_react15.useState)("");
+  const [score, setScore] = (0, import_react15.useState)(50);
+  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = (0, import_react15.useState)(false);
   const selectedEnrichment = allEnrichments == null ? void 0 : allEnrichments.find((dimension) => dimension.dim === selectValue);
   const addEnrichment = () => {
     const [cat, key] = selectValue.split("_");
@@ -1127,7 +1200,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_react12.css`
+var scoreCounterMinusButtonStyles = import_react14.css`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -1140,7 +1213,7 @@ var scoreCounterMinusButtonStyles = import_react12.css`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
 `;
-var scoreCounterPlusButtonStyles = import_react12.css`
+var scoreCounterPlusButtonStyles = import_react14.css`
   ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
@@ -1288,7 +1361,7 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
 
 // src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
 var import_design_system11 = require("@uniformdev/design-system");
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_react_use = require("react-use");
 var yup = __toESM(require("yup"));
 
@@ -1304,20 +1377,20 @@ function opHasRhs(op) {
 }
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-var import_react15 = require("@emotion/react");
+var import_react17 = require("@emotion/react");
 var import_CgCloseO2 = require("@react-icons/all-files/cg/CgCloseO");
 var import_design_system10 = require("@uniformdev/design-system");
 var import_immer2 = require("immer");
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
-var import_react14 = require("@emotion/react");
+var import_react16 = require("@emotion/react");
 var spaceBetweenCriteriaItems = "6rem";
-var criteriaItem = import_react14.css`
+var criteriaItem = import_react16.css`
   position: relative;
   padding: var(--spacing-md) var(--spacing-base);
   border: 1px solid var(--gray-300);
-  box-shadow: var(--shadow-base);
-  background-color: white;
+  box-shadow: var(--elevation-200);
+  background-color: var(--white);
   border-radius: var(--rounded-base);
   margin-top: ${spaceBetweenCriteriaItems};
   display: flex;
@@ -1334,35 +1407,37 @@ var criteriaItem = import_react14.css`
   }
 
   &:first-of-type {
-    margin-top: var(--spacing-md);
+    margin-top: 0;
     &:before {
       display: none;
     }
   }
 `;
-var criteriaItemInner = import_react14.css`
+var criteriaItemInner = import_react16.css`
   display: flex;
-  gap: var(--spacing-base);
+  row-gap: var(--spacing-base);
+  column-gap: var(--spacing-xs);
   flex-grow: 1;
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
 `;
-var criteriaWrapper = import_react14.css`
+var criteriaWrapper = import_react16.css`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
 `;
-var criteriaOperandWrapper = import_react14.css`
+var criteriaOperandWrapper = import_react16.css`
   flex: 2;
   height: 52px;
   min-width: 200px;
 `;
-var criteriaOperatorWrapper = import_react14.css`
+var criteriaOperatorWrapper = import_react16.css`
   flex: 1;
+  flex-wrap: nowrap;
   min-width: 80px;
 `;
-var expand = import_react14.css`
+var expand = import_react16.css`
   height: 100%;
   width: 100%;
 `;
@@ -1373,13 +1448,15 @@ var PersonalizationCriteriaStatic = ({
   value,
   setValue,
   dimensions,
+  quirks,
   onMenuOpen,
   onMenuClose,
   onAddCriteria,
   onRemoveCriteria,
   displayTitle = true,
   components,
-  errors = {}
+  errors = {},
+  readOnly
 }) => {
   var _a;
   const currentValue = { crit: [], ...value };
@@ -1422,148 +1499,207 @@ var PersonalizationCriteriaStatic = ({
           fontSize: "var(--fs-md)",
           fontWeight: "var(--fw-bold)"
         },
-        children: "Personalize This"
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Heading, { level: 5, withMarginBottom: false, children: "Personalization Variation" })
       }
     ) : null,
-    (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 = 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_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_runtime16.jsx)(
-                "div",
-                {
-                  css: [criteriaWrapper, criteriaOperandWrapper],
-                  className: "criteria-wrapper",
-                  "data-testid": "select-criteria",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    DimensionMenu,
-                    {
-                      errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
-                      css: expand,
-                      styles: { control: (base) => ({ ...base, height: "100%" }) },
-                      dimensions: dimensions.dimensions,
-                      onChange: (dim) => {
-                        update({ ...currentCriteria, l: dim.dim }, index);
-                      },
-                      value: dimensions.dimIndex[currentCriteria.l],
-                      onMenuOpen,
-                      onMenuClose
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                "div",
-                {
-                  css: [criteriaWrapper, criteriaOperatorWrapper],
-                  className: "criteria-wrapper",
-                  "data-testid": "select-operator",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    CriteriaOperatorMenu,
-                    {
-                      name: `op-${index}`,
-                      css: expand,
-                      styles: { control: (base) => ({ ...base, height: "100%" }) },
-                      value: currentCriteria.op,
-                      onChange: (op) => {
-                        if (op === "+" || op === "-") {
-                          update({ ...currentCriteria, op, r: void 0, rDim: void 0 }, index);
-                        } else {
-                          update({ ...currentCriteria, op }, index);
-                        }
-                      },
-                      onMenuOpen,
-                      onMenuClose
-                    }
-                  )
-                }
-              ),
-              critHasRhs ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                "div",
-                {
-                  css: [criteriaWrapper, criteriaOperandWrapper],
-                  className: "criteria-wrapper",
-                  "data-testid": "select-match-criteria",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    CriteriaMatchMenu,
-                    {
-                      errorMessage: (_c = errors.rhs) == null ? void 0 : _c[index],
-                      css: expand,
-                      styles: { control: (base) => ({ ...base, height: "100%" }) },
-                      criteriaMatch: currentCriteria,
-                      onChange: (match) => {
-                        update(match, index);
-                      },
-                      isDisabled: !critHasLhs,
-                      dimensions,
-                      onMenuOpen,
-                      onMenuClose
-                    }
-                  )
-                }
-              ) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => removeFromList(index),
-            title: `Delete Personalization`,
-            css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
-            "data-testid": "button-delete",
-            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_runtime16.jsx)(
-          "div",
-          {
-            className: "criteria-group-operation",
-            css: {
-              position: "absolute",
-              top: "-4rem",
-              transform: "translateX(calc(1.5rem - 50%))"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_design_system10.InputInlineSelect,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system10.VerticalRhythm, { children: [
+      (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, _e, _f, _g, _h;
+        const critHasLhs = ((_a2 = currentCriteria.l) == null ? void 0 : _a2.length) > 0;
+        const critHasRhs = opHasRhs(currentCriteria.op);
+        const selectedValueIsQuirk = "t" in currentCriteria && currentCriteria.t === "q";
+        const currentDimension = selectedValueIsQuirk ? void 0 : dimensions.dimIndex[currentCriteria.l];
+        const currentQuirk = selectedValueIsQuirk ? quirks == null ? void 0 : quirks.find((q) => q.id === currentCriteria.l) : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { css: criteriaItemInner, className: "criteriaItemInner", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
               {
-                "data-testid": "dropdown-button-combine",
-                disabled: index > 1,
-                value: (_d = currentValue.op) != null ? _d : "&",
-                options: [
-                  { label: "AND", value: "&" },
-                  { label: "OR", value: "|" }
-                ],
-                onChange: (v) => {
-                  setOp(v.value);
-                }
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-criteria",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  DimensionMenu,
+                  {
+                    errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    dimensions: dimensions.dimensions,
+                    quirks,
+                    onChange: (selection) => {
+                      if (!selection) {
+                        return;
+                      }
+                      if ("dim" in selection) {
+                        const validOperators = getValidCriteriaOperatorsFor(selection.category);
+                        const existingOpRemainsValid = !("t" in currentCriteria && currentCriteria.t === "q") && validOperators.some((op) => op.value === currentCriteria.op);
+                        const newCriteria = {
+                          ...currentCriteria,
+                          l: selection.dim,
+                          t: void 0,
+                          op: existingOpRemainsValid ? currentCriteria.op : ">",
+                          r: existingOpRemainsValid ? currentCriteria.r : 0,
+                          rDim: existingOpRemainsValid ? currentCriteria.rDim : void 0
+                        };
+                        update(newCriteria, index);
+                      } else {
+                        update({ ...currentCriteria, l: selection.id, t: "q", op: "=", r: "" }, index);
+                      }
+                    },
+                    value: currentDimension != null ? currentDimension : currentQuirk,
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
               }
-            )
-          }
-        ) : null
-      ] }, index);
-    }) }),
-    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",
-        buttonText: "Add Criteria",
-        onButtonClick: addToList
-      }
-    )
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperatorWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-operator",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  CriteriaOperatorMenu,
+                  {
+                    name: `op-${index}`,
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    value: currentCriteria.op,
+                    rhsType: currentQuirk ? "QUIRK" : currentDimension == null ? void 0 : currentDimension.category,
+                    onChange: (op) => {
+                      if (op === "+" || op === "-") {
+                        update({ ...currentCriteria, op, r: void 0, rDim: void 0 }, index);
+                      } else {
+                        update({ ...currentCriteria, op }, index);
+                      }
+                    },
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
+              }
+            ),
+            critHasRhs ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-match-criteria",
+                children: currentQuirk ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "div",
+                  {
+                    css: import_react17.css`
+                              width: 100%;
+                              // InputSelect wrapper is unstylable so need a descendant selector
+                              // to full-width it
+                              & > * {
+                                width: 100%;
+                              }
+                            `,
+                    children: currentQuirk.options ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_design_system10.InputSelect,
+                      {
+                        label: "quirk match value",
+                        showLabel: false,
+                        value: (_c = currentCriteria.r) != null ? _c : "",
+                        errorMessage: (_d = errors.rhs) == null ? void 0 : _d[index],
+                        onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
+                        options: [
+                          { label: "Select\u2026", value: "" },
+                          ...currentQuirk.options.map((o) => ({ label: o.name, value: o.value }))
+                        ],
+                        disabled: readOnly
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_design_system10.Input,
+                      {
+                        type: "text",
+                        label: "quirk match value",
+                        showLabel: false,
+                        value: (_e = currentCriteria.r) != null ? _e : "",
+                        errorMessage: (_f = errors.rhs) == null ? void 0 : _f[index],
+                        onChange: (e) => update({ ...currentCriteria, r: e.currentTarget.value }, index),
+                        placeholder: "Enter a value",
+                        disabled: readOnly
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  CriteriaMatchMenu,
+                  {
+                    errorMessage: (_g = errors.rhs) == null ? void 0 : _g[index],
+                    css: expand,
+                    styles: { control: (base) => ({ ...base, height: "100%" }) },
+                    criteriaMatch: currentCriteria,
+                    onChange: (match) => {
+                      update(match, index);
+                    },
+                    isDisabled: !critHasLhs,
+                    dimensions,
+                    onMenuOpen,
+                    onMenuClose,
+                    disabled: readOnly
+                  }
+                )
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeFromList(index),
+              title: `Delete Personalization`,
+              css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
+              "data-testid": "button-delete",
+              disabled: readOnly,
+              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_runtime16.jsx)(
+            "div",
+            {
+              className: "criteria-group-operation",
+              css: {
+                position: "absolute",
+                top: "-4rem",
+                transform: "translateX(calc(1.5rem - 50%))"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                import_design_system10.InputInlineSelect,
+                {
+                  "data-testid": "dropdown-button-combine",
+                  disabled: index > 1 || readOnly,
+                  value: (_h = currentValue.op) != null ? _h : "&",
+                  options: [
+                    { label: "AND", value: "&" },
+                    { label: "OR", value: "|" }
+                  ],
+                  onChange: (v) => {
+                    setOp(v.value);
+                  }
+                }
+              )
+            }
+          ) : null
+        ] }, index);
+      }) }),
+      dimensions.dimensions.length === 0 && !(quirks == null ? void 0 : quirks.length) ? (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",
+          buttonText: "Add Criteria",
+          onButtonClick: addToList,
+          disabled: readOnly
+        }
+      )
+    ] })
   ] });
 };
 
@@ -1628,7 +1764,7 @@ var PersonalizationCriteria = ({
   ...staticProps
 }) => {
   var _a, _b;
-  const [validationError, setValidationError] = (0, import_react16.useState)(void 0);
+  const [validationError, setValidationError] = (0, import_react18.useState)(void 0);
   const { loading, result: dimensions, error } = useDimensions(contextConfig);
   (0, import_react_use.useAsync)(async () => {
     if (value && dimensions) {
@@ -1692,7 +1828,7 @@ function ProjectUIVersion({ children, versionMap, contextConfig }) {
 }
 
 // src/hooks/useValidateContextConfig.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/utils/validateContextConfig.ts
 var import_api4 = require("@uniformdev/context/api");
@@ -1728,12 +1864,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = (0, import_react17.useState)({
+  const [state, setState] = (0, import_react19.useState)({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1774,6 +1910,8 @@ __reExport(src_exports, require("@uniformdev/design-system"), module.exports);
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,
+  enrichmentCriteriaMenuOperators,
+  getValidCriteriaOperatorsFor,
   isEnrichmentTagData,
   isPersonalizationCriteriaData,
   opHasRhs,