@uniformdev/context-ui 20.35.0 → 20.35.1-alpha.58

package/dist/index.mjs

@@ -320,6 +320,7 @@ function CriteriaOperatorMenu({ onChange, value, rhsType, ...props }) {
     InputComboBox,
     {
       ...props,
+      isDisabled: props.disabled,
       value: {
         label: (_b = (_a = operators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
         value
@@ -695,32 +696,38 @@ var DimensionOption = (props) => {
 };
 
 // src/components/DimensionMenu/DimensionValue.tsx
-import { Icon as Icon2 } from "@uniformdev/design-system";
+import { css as css4 } from "@emotion/react";
+import { Icon as Icon2, Tooltip } from "@uniformdev/design-system";
 import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var styles = {
+  dimensionValueWrapper: css4`
+    white-space: normal;
+    overflow: hidden;
+  `,
+  dimensionName: css4`
+    color: var(--gray-500);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  `,
+  dimensionValue: css4`
+    color: var(--gray-700);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  `
+};
 function DimensionValue({ displayName }) {
+  var _a;
   const { type, name } = dimensionDisplayName(displayName);
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      css: {
-        whiteSpace: "normal",
-        overflow: "hidden"
-      },
-      children: [
-        type ? /* @__PURE__ */ jsxs4(
-          "small",
-          {
-            css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
-            children: [
-              type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
-              /* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsx11("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
-      ]
-    }
-  );
+  const tooltip = (_a = name != null ? name : type) != null ? _a : "";
+  return /* @__PURE__ */ jsxs4("div", { css: styles.dimensionValueWrapper, children: [
+    type ? /* @__PURE__ */ jsxs4("small", { css: styles.dimensionName, children: [
+      type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
+      /* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
+    ] }) : null,
+    /* @__PURE__ */ jsx11(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx11("div", { css: styles.dimensionValue, "data-testid": "dimension-value", children: name != null ? name : type }) })
+  ] });
 }
 
 // src/components/DimensionMenu/DimensionSingleValue.tsx
@@ -760,6 +767,7 @@ function CriteriaMatchMenu({
       InputComboBox3,
       {
         ...props,
+        isDisabled: props.disabled,
         inputValue,
         menuShouldScrollIntoView: true,
         value: {
@@ -867,6 +875,7 @@ function DimensionMenu({
       InputComboBox4,
       {
         ...props,
+        isDisabled: props.disabled,
         value: valueAsMenuOption,
         options: groupedDimensions,
         getOptionValue: (option) => option.label,
@@ -905,8 +914,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 css4 } from "@emotion/react";
-var editLink = css4`
+import { css as css5 } from "@emotion/react";
+var editLink = css5`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -939,7 +948,7 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
 };
 
 // src/components/EnrichmentTag/EnrichmentTag.tsx
-import { css as css5 } from "@emotion/react";
+import { css as css6 } 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";
@@ -956,7 +965,7 @@ import {
 import { produce } from "immer";
 import { useMemo as useMemo2, useState as useState6 } from "react";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var addEnrichmentLink = css5`
+var addEnrichmentLink = css6`
   flex: 2;
   display: flex;
   width: 50%;
@@ -1145,7 +1154,7 @@ var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx16(Callout2, {
 var getCappedValue = (value, maxCap = 100, minCap = 0) => {
   return Math.max(Math.min(value, maxCap), minCap);
 };
-var scoreCounterMinusButtonStyles = css5`
+var scoreCounterMinusButtonStyles = css6`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -1158,7 +1167,7 @@ var scoreCounterMinusButtonStyles = css5`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
 `;
-var scoreCounterPlusButtonStyles = css5`
+var scoreCounterPlusButtonStyles = css6`
   ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
@@ -1322,7 +1331,7 @@ function opHasRhs(op) {
 }
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
-import { css as css7 } from "@emotion/react";
+import { css as css8 } from "@emotion/react";
 import { CgCloseO as CgCloseO2 } from "@react-icons/all-files/cg/CgCloseO";
 import {
   AddListButton as AddListButton3,
@@ -1332,19 +1341,20 @@ import {
   Input as Input2,
   InputInlineSelect,
   InputSelect as InputSelect2,
-  Paragraph
+  Paragraph,
+  VerticalRhythm
 } from "@uniformdev/design-system";
 import { produce as produce2 } from "immer";
 
 // src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 var spaceBetweenCriteriaItems = "6rem";
-var criteriaItem = css6`
+var criteriaItem = css7`
   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;
@@ -1361,13 +1371,13 @@ var criteriaItem = css6`
   }
 
   &:first-of-type {
-    margin-top: var(--spacing-md);
+    margin-top: 0;
     &:before {
       display: none;
     }
   }
 `;
-var criteriaItemInner = css6`
+var criteriaItemInner = css7`
   display: flex;
   row-gap: var(--spacing-base);
   column-gap: var(--spacing-xs);
@@ -1375,23 +1385,23 @@ var criteriaItemInner = css6`
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
 `;
-var criteriaWrapper = css6`
+var criteriaWrapper = css7`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
 `;
-var criteriaOperandWrapper = css6`
+var criteriaOperandWrapper = css7`
   flex: 2;
   height: 52px;
   min-width: 200px;
 `;
-var criteriaOperatorWrapper = css6`
+var criteriaOperatorWrapper = css7`
   flex: 1;
   flex-wrap: nowrap;
   min-width: 80px;
 `;
-var expand = css6`
+var expand = css7`
   height: 100%;
   width: 100%;
 `;
@@ -1409,7 +1419,8 @@ var PersonalizationCriteriaStatic = ({
   onRemoveCriteria,
   displayTitle = true,
   components,
-  errors = {}
+  errors = {},
+  readOnly
 }) => {
   var _a;
   const currentValue = { crit: [], ...value };
@@ -1455,195 +1466,204 @@ var PersonalizationCriteriaStatic = ({
         children: /* @__PURE__ */ jsx17(Heading2, { level: 5, withMarginBottom: false, children: "Personalization Variation" })
       }
     ) : null,
-    (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, _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__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
-        /* @__PURE__ */ jsxs9("div", { css: criteriaItemInner, className: "criteriaItemInner", children: [
+    /* @__PURE__ */ jsxs9(VerticalRhythm, { children: [
+      (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, _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__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
+          /* @__PURE__ */ jsxs9("div", { css: criteriaItemInner, className: "criteriaItemInner", children: [
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-criteria",
+                children: /* @__PURE__ */ jsx17(
+                  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
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperatorWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-operator",
+                children: /* @__PURE__ */ jsx17(
+                  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__ */ jsx17(
+              "div",
+              {
+                css: [criteriaWrapper, criteriaOperandWrapper],
+                className: "criteria-wrapper",
+                "data-testid": "select-match-criteria",
+                children: currentQuirk ? /* @__PURE__ */ jsx17(
+                  "div",
+                  {
+                    css: css8`
+                              width: 100%;
+                              // InputSelect wrapper is unstylable so need a descendant selector
+                              // to full-width it
+                              & > * {
+                                width: 100%;
+                              }
+                            `,
+                    children: currentQuirk.options ? /* @__PURE__ */ jsx17(
+                      InputSelect2,
+                      {
+                        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__ */ jsx17(
+                      Input2,
+                      {
+                        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__ */ jsx17(
+                  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__ */ jsx17(
-            "div",
+            "button",
             {
-              css: [criteriaWrapper, criteriaOperandWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-criteria",
-              children: /* @__PURE__ */ jsx17(
-                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
-                }
-              )
+              type: "button",
+              onClick: () => removeFromList(index),
+              title: `Delete Personalization`,
+              css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
+              "data-testid": "button-delete",
+              disabled: readOnly,
+              children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
             }
           ),
-          /* @__PURE__ */ jsx17(
+          index > 0 ? /* @__PURE__ */ jsx17(
             "div",
             {
-              css: [criteriaWrapper, criteriaOperatorWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-operator",
+              className: "criteria-group-operation",
+              css: {
+                position: "absolute",
+                top: "-4rem",
+                transform: "translateX(calc(1.5rem - 50%))"
+              },
               children: /* @__PURE__ */ jsx17(
-                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
-                }
-              )
-            }
-          ),
-          critHasRhs ? /* @__PURE__ */ jsx17(
-            "div",
-            {
-              css: [criteriaWrapper, criteriaOperandWrapper],
-              className: "criteria-wrapper",
-              "data-testid": "select-match-criteria",
-              children: currentQuirk ? /* @__PURE__ */ jsx17(
-                "div",
-                {
-                  css: css7`
-                            width: 100%;
-                            // InputSelect wrapper is unstylable so need a descendant selector
-                            // to full-width it
-                            & > * {
-                              width: 100%;
-                            }
-                          `,
-                  children: currentQuirk.options ? /* @__PURE__ */ jsx17(
-                    InputSelect2,
-                    {
-                      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 }))
-                      ]
-                    }
-                  ) : /* @__PURE__ */ jsx17(
-                    Input2,
-                    {
-                      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"
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx17(
-                CriteriaMatchMenu,
+                InputInlineSelect,
                 {
-                  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
+                  "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
-        ] }),
-        /* @__PURE__ */ jsx17(
-          "button",
-          {
-            type: "button",
-            onClick: () => removeFromList(index),
-            title: `Delete Personalization`,
-            css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
-            "data-testid": "button-delete",
-            children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
-          }
-        ),
-        index > 0 ? /* @__PURE__ */ jsx17(
-          "div",
-          {
-            className: "criteria-group-operation",
-            css: {
-              position: "absolute",
-              top: "-4rem",
-              transform: "translateX(calc(1.5rem - 50%))"
-            },
-            children: /* @__PURE__ */ jsx17(
-              InputInlineSelect,
-              {
-                "data-testid": "dropdown-button-combine",
-                disabled: index > 1,
-                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__ */ 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",
-        buttonText: "Add Criteria",
-        onButtonClick: addToList
-      }
-    )
+        ] }, index);
+      }) }),
+      dimensions.dimensions.length === 0 && !(quirks == null ? void 0 : quirks.length) ? (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",
+          buttonText: "Add Criteria",
+          onButtonClick: addToList,
+          disabled: readOnly
+        }
+      )
+    ] })
   ] });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/context-ui",
-  "version": "20.35.0",
+  "version": "20.35.1-alpha.58+f229d40de4",
   "description": "React-based functionality and components for Uniform Context",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -29,8 +29,8 @@
   "dependencies": {
     "@emotion/react": "11.13.5",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
-    "@uniformdev/context": "20.35.0",
-    "@uniformdev/design-system": "20.35.0",
+    "@uniformdev/context": "20.35.1-alpha.58+f229d40de4",
+    "@uniformdev/design-system": "20.35.1-alpha.58+f229d40de4",
     "immer": "10.1.1",
     "react-beautiful-dnd": "13.1.1",
     "react-select": "5.10.0",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f228361828ef49a596ca3841e5b79768c64418cf"
+  "gitHead": "f229d40de49a1a7e2bba9d2e0a36d4aae6251c81"
 }