@uniformdev/context-ui 17.7.1-alpha.140 → 17.7.1-alpha.169

package/dist/index.js

@@ -1,4 +1,74 @@
-"use strict";var dt=Object.create;var X=Object.defineProperty;var ft=Object.getOwnPropertyDescriptor;var gt=Object.getOwnPropertyNames;var Ct=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var bt=(e,t)=>{for(var n in t)X(e,n,{get:t[n],enumerable:!0})},Y=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of gt(t))!ht.call(e,r)&&r!==n&&X(e,r,{get:()=>t[r],enumerable:!(a=ft(t,r))||a.enumerable});return e},V=(e,t,n)=>(Y(e,t,"default"),n&&Y(n,t,"default")),J=(e,t,n)=>(n=e!=null?dt(Ct(e)):{},Y(t||!e||!e.__esModule?X(n,"default",{value:e,enumerable:!0}):n,e)),vt=e=>Y(X({},"__esModule",{value:!0}),e);var M={};bt(M,{ContextData:()=>yt,CriteriaMatchMenu:()=>we,CriteriaOperatorMenu:()=>ve,DimensionMenu:()=>Re,DimensionValue:()=>De,EditLink:()=>Me,EnrichmentTag:()=>Rt,PersonalizationCriteria:()=>Tt,PersonalizationCriteriaStatic:()=>Be,ProjectUIVersion:()=>kt,addEnrichmentLink:()=>Ze,contextCriteriaMenuOperators:()=>be,convertErrorsToObj:()=>mt,isEnrichmentTagData:()=>St,isPersonalizationCriteriaData:()=>Bt,opHasRhs:()=>de,useContextConfig:()=>xt,useContextData:()=>_,useDimensions:()=>T,useDimensionsDataContext:()=>It,useManifest:()=>Dt,useValidateContextConfig:()=>Nt,validateContextConfig:()=>Te});module.exports=vt(M);var c=require("@emotion/react"),b=J(require("react"));var $e=require("@uniformdev/design-system");var ke=require("@emotion/react"),Ne=require("@emotion/react/jsx-runtime");function Q({op:e}){return(0,Ne.jsx)("div",{className:"operation-bubble",css:ke.css`
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ContextData: () => ContextData,
+  CriteriaMatchMenu: () => CriteriaMatchMenu,
+  CriteriaOperatorMenu: () => CriteriaOperatorMenu,
+  DimensionMenu: () => DimensionMenu,
+  DimensionValue: () => DimensionValue,
+  EditLink: () => EditLink,
+  EnrichmentTag: () => EnrichmentTag,
+  PersonalizationCriteria: () => PersonalizationCriteria,
+  PersonalizationCriteriaStatic: () => PersonalizationCriteriaStatic,
+  ProjectUIVersion: () => ProjectUIVersion,
+  addEnrichmentLink: () => addEnrichmentLink,
+  contextCriteriaMenuOperators: () => contextCriteriaMenuOperators,
+  convertErrorsToObj: () => convertErrorsToObj,
+  isEnrichmentTagData: () => isEnrichmentTagData,
+  isPersonalizationCriteriaData: () => isPersonalizationCriteriaData,
+  opHasRhs: () => opHasRhs,
+  useContextConfig: () => useContextConfig,
+  useContextData: () => useContextData,
+  useDimensions: () => useDimensions,
+  useDimensionsDataContext: () => useDimensionsDataContext,
+  useManifest: () => useManifest,
+  useValidateContextConfig: () => useValidateContextConfig,
+  validateContextConfig: () => validateContextConfig
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../scripts/emotion-jsx-shim.js
+var import_react = require("@emotion/react");
+var React = __toESM(require("react"));
+
+// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
+var import_design_system = require("@uniformdev/design-system");
+
+// src/components/CriteriaOperatorMenu/OperatorBubble.tsx
+var import_react2 = require("@emotion/react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function OperatorBubble({ op }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "operation-bubble",
+      css: import_react2.css`
         align-items: center;
         background: var(--gray-700);
         border-radius: var(--rounded-full);
@@ -8,12 +78,661 @@
         height: 30px;
         justify-content: center;
         font-size: var(--fs-base);
-      `,children:e})}var $=require("@emotion/react/jsx-runtime"),ze=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return(0,$.jsxs)("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?(0,$.jsx)(Q,{op:s}):(0,$.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,$.jsx)("div",{children:i!=null?i:s})]})};var he=require("@emotion/react/jsx-runtime"),Le=e=>{let{data:t,getStyles:n}=e;return(0,he.jsx)("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?(0,he.jsx)(Q,{op:t.label}):t.label})};var Ae=require("@emotion/react/jsx-runtime"),be=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function ve({onChange:e,value:t,...n}){var a,r;return(0,Ae.jsx)($e.InputComboBox,{...n,value:{label:(r=(a=be.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:be.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Le,Option:ze,...n.components}})}var Ge=require("@uniformdev/design-system"),U=require("react");var Z=require("@uniformdev/context/api"),ee=require("react");function _({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,ee.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,ee.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Z.CachedManifestClient({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof Z.ApiClientError?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var A=require("@uniformdev/context/api"),te=require("react");function Ue(e,t,n){return e.reduce((a,r)=>{let o=t(r);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=n?n(r):r,a},{})}function T({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,te.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,te.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new A.CachedDimensionClient({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:(0,A.computeDimensionDisplayName)(d)})),l={dimensions:i,dimIndex:Ue(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof A.ApiClientError?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var O=require("@emotion/react/jsx-runtime"),ne=(0,U.createContext)(null),yt=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=_(n),o=T(n);return r.error||r.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:r}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:o}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?(0,O.jsx)(e,{}):(0,O.jsx)(Ge.LoadingIndicator,{}):(0,O.jsx)(ne.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function xt(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Dt(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function It(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var Fe=require("@uniformdev/design-system"),je=require("react");var He=require("@uniformdev/design-system");function ye(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function oe(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function re(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(ye(a))}return t}var G=require("@emotion/react/jsx-runtime"),ie=e=>{var r;let{data:t,getStyles:n,className:a}=e;return(0,G.jsx)("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:(0,G.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[(0,G.jsx)(He.Icon,{icon:oe((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),(0,G.jsx)("span",{children:t.label})]})})};var We=require("@emotion/react"),qe=require("@emotion/react/jsx-runtime");function ae({message:e}){return e?(0,qe.jsx)("div",{css:We.css`
+      `,
+      children: op
+    }
+  );
+}
+
+// src/components/CriteriaOperatorMenu/CriteriaOperatorOption.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+var CriteriaOperatorOption = (props) => {
+  var _a, _b;
+  const { data, getStyles, isDisabled, innerRef, innerProps } = props;
+  const [name, description] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      css: {
+        ...getStyles("option", props),
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--spacing-sm)"
+      },
+      ref: innerRef,
+      "aria-disabled": isDisabled,
+      ...innerProps,
+      children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OperatorBubble, { op: name }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            css: {
+              width: "20px",
+              height: "20px"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: description != null ? description : name })
+      ]
+    }
+  );
+};
+
+// src/components/CriteriaOperatorMenu/CriteriaOperatorSingleValue.tsx
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var CriteriaOperatorSingleValue = (props) => {
+  const { data, getStyles } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      css: {
+        ...getStyles("singleValue", props),
+        width: "max-content"
+      },
+      children: data.label.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OperatorBubble, { op: data.label }) : data.label
+    }
+  );
+};
+
+// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+var contextCriteriaMenuOperators = [
+  {
+    name: "=",
+    description: "equals",
+    value: "="
+  },
+  {
+    name: "\u2260",
+    description: "not equal",
+    value: "!="
+  },
+  {
+    name: ">",
+    description: "is greater than",
+    value: ">"
+  },
+  {
+    name: "\u2265",
+    description: "is greater than or equal to",
+    value: ">="
+  },
+  {
+    name: "<",
+    description: "is less than",
+    value: "<"
+  },
+  {
+    name: "\u2264",
+    description: "is less than or equal to",
+    value: "<="
+  },
+  {
+    name: "has the strongest score",
+    value: "+"
+  },
+  {
+    name: "has the weakest score",
+    value: "-"
+  }
+];
+function CriteriaOperatorMenu({ onChange, value, ...props }) {
+  var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_design_system.InputComboBox,
+    {
+      ...props,
+      value: {
+        label: (_b = (_a = contextCriteriaMenuOperators.find((e) => e.value === value)) == null ? void 0 : _a.name) != null ? _b : value,
+        value
+      },
+      options: contextCriteriaMenuOperators.map((option) => ({
+        label: option.description ? `${option.name}:${option.description}` : option.name,
+        value: option.value
+      })),
+      styles: {
+        ...props.styles,
+        valueContainer: (provided, state) => {
+          var _a2, _b2;
+          return {
+            ...provided,
+            padding: "var(--spacing-sm)",
+            ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.valueContainer) == null ? void 0 : _b2.call(_a2, provided, state)
+          };
+        },
+        menu: (provided, state) => {
+          var _a2, _b2;
+          return {
+            ...provided,
+            width: "max-content",
+            ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.menu) == null ? void 0 : _b2.call(_a2, provided, state)
+          };
+        },
+        control: (provided, state) => {
+          var _a2, _b2;
+          return {
+            ...provided,
+            border: 0,
+            ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b2.call(_a2, provided, state)
+          };
+        },
+        indicatorSeparator: (provided, state) => {
+          var _a2, _b2;
+          return {
+            ...provided,
+            display: "none",
+            ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.indicatorSeparator) == null ? void 0 : _b2.call(_a2, provided, state)
+          };
+        }
+      },
+      onChange: (e) => {
+        if (e) {
+          onChange(e.value);
+        }
+      },
+      components: {
+        SingleValue: CriteriaOperatorSingleValue,
+        Option: CriteriaOperatorOption,
+        ...props.components
+      }
+    }
+  );
+}
+
+// src/components/DataContext/DataContext.tsx
+var import_design_system2 = require("@uniformdev/design-system");
+var import_react5 = require("react");
+
+// src/hooks/useContextData.ts
+var import_api = require("@uniformdev/context/api");
+var import_react3 = require("react");
+function useContextData({ apiHost, apiKey, projectId }) {
+  const [state, setState] = (0, import_react3.useState)({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new import_api.CachedManifestClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const result = await client.get({ preview: true });
+        setState({ notConfigured: false, loading: false, error: null, result });
+      } catch (e) {
+        let message;
+        if (e instanceof import_api.ApiClientError) {
+          if (e.statusCode === 403) {
+            message = `The API key ${apiKey} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`;
+          }
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    runEffect();
+  }, [apiHost, apiKey, projectId]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured
+  };
+}
+
+// src/hooks/useDimensions.ts
+var import_api2 = require("@uniformdev/context/api");
+var import_react4 = require("react");
+
+// src/utils/objectify.ts
+function objectify(array2, keySelector, valueSelector) {
+  return array2.reduce((prev, current) => {
+    const key = keySelector(current);
+    if (typeof key === "undefined" || key === null) {
+      throw new Error(`Objectify key selector returned undefined or null.`);
+    }
+    prev[keySelector(current)] = valueSelector ? valueSelector(current) : current;
+    return prev;
+  }, {});
+}
+
+// src/hooks/useDimensions.ts
+function useDimensions({ apiHost, apiKey, projectId }) {
+  const [state, setState] = (0, import_react4.useState)({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  (0, import_react4.useEffect)(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new import_api2.CachedDimensionClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const dimensions = (await client.get()).dimensions.map((dim) => ({
+          ...dim,
+          displayName: (0, import_api2.computeDimensionDisplayName)(dim)
+        }));
+        const result = {
+          dimensions,
+          dimIndex: objectify(
+            dimensions,
+            (k) => k.dim,
+            (v) => v
+          )
+        };
+        setState({ notConfigured: false, loading: false, error: null, result });
+      } catch (e) {
+        let message;
+        if (e instanceof import_api2.ApiClientError) {
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    runEffect();
+  }, [apiHost, apiKey, projectId]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured
+  };
+}
+
+// src/components/DataContext/DataContext.tsx
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+var ContextDataContext = (0, import_react5.createContext)(null);
+var ContextData = ({
+  loadingComponent: LoadingComponent,
+  errorComponent: ErrorComponent,
+  contextConfig,
+  children
+}) => {
+  const contextData = useContextData(contextConfig);
+  const dimensionsData = useDimensions(contextConfig);
+  if (contextData.error || contextData.notConfigured) {
+    if (ErrorComponent)
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorComponent, { contextConfig, result: contextData });
+    else
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: "ErrorComponent is not configured" });
+  }
+  if (dimensionsData.error || dimensionsData.notConfigured) {
+    if (ErrorComponent)
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorComponent, { contextConfig, result: dimensionsData });
+    else
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: "ErrorComponent is not configured" });
+  }
+  if (contextData.loading || dimensionsData.loading) {
+    if (LoadingComponent)
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingComponent, {});
+    else
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system2.LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ContextDataContext.Provider,
+    {
+      value: { manifest: contextData.result, dimensions: dimensionsData.result, contextConfig },
+      children
+    }
+  );
+};
+function useContextConfig() {
+  const context = (0, import_react5.useContext)(ContextDataContext);
+  if (!(context == null ? void 0 : context.contextConfig)) {
+    throw new Error("Not within DataContext! Configuration data is not exist.");
+  }
+  return context.contextConfig;
+}
+function useManifest() {
+  const context = (0, import_react5.useContext)(ContextDataContext);
+  if (!(context == null ? void 0 : context.manifest)) {
+    throw new Error("Not within DataContext! Manifest data is not exist.");
+  }
+  return context.manifest;
+}
+function useDimensionsDataContext() {
+  const context = (0, import_react5.useContext)(ContextDataContext);
+  if (!(context == null ? void 0 : context.dimensions)) {
+    throw new Error("Not within DataContext! Dimensions data is not exist.");
+  }
+  return context.dimensions;
+}
+
+// src/components/DimensionMenu/CriteriaMatchMenu.tsx
+var import_design_system5 = require("@uniformdev/design-system");
+var import_react7 = require("react");
+
+// src/components/DimensionMenu/DimensionGroupHeading.tsx
+var import_design_system3 = require("@uniformdev/design-system");
+
+// src/components/DimensionMenu/utils.ts
+function dimensionToMenuOption(dimension) {
+  return {
+    label: dimension.displayName,
+    value: dimension.dim,
+    isDisabled: false
+  };
+}
+function dimensionIcon(displayName) {
+  if (!displayName) {
+    return "unavailable";
+  }
+  const [type] = displayName.split(":");
+  switch (type.toLowerCase()) {
+    case "signal":
+      return "data";
+    case "intent":
+      return "assign";
+    case "audience":
+      return "boy";
+    default:
+      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;
+    }
+    result[result.length - 1].options.push(dimensionToMenuOption(dim));
+  }
+  return result;
+}
+
+// src/components/DimensionMenu/DimensionGroupHeading.tsx
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var DimensionGroupHeading = (props) => {
+  var _a;
+  const { data, getStyles, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      css: {
+        ...getStyles("groupHeading", props),
+        textTransform: "none",
+        fontSize: "var(--font-size-sm)"
+      },
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "small",
+        {
+          css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system3.Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: data.label })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/DimensionMenu/DimensionMenuErrorMessage.tsx
+var import_react6 = require("@emotion/react");
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+function DimensionMenuErrorMessage({ message }) {
+  if (!message)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      css: import_react6.css`
         color: var(--brand-primary-2);
         font-size: var(--fs-xs);
         position: absolute;
         bottom: calc((var(--spacing-base) * -1) + -2px);
-      `,children:e}):null}var xe=require("@emotion/react/jsx-runtime"),se=e=>{var u,p;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,h]=(p=(u=t.label)==null?void 0:u.split(":"))!=null?p:[];return(0,xe.jsx)("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:(0,xe.jsx)("div",{css:{color:"var(--gray-700)"},children:h!=null?h:t.label})})};var _e=require("@uniformdev/design-system");var k=require("@emotion/react/jsx-runtime");function De({displayName:e}){let[t,n]=e.split(":");return(0,k.jsxs)("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?(0,k.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?(0,k.jsx)(_e.Icon,{icon:oe(t),iconColor:"currentColor",size:16}):null,(0,k.jsx)("span",{"data-test-id":"dimension-name",children:t})]}):null,(0,k.jsx)("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}var Ie=require("@emotion/react/jsx-runtime"),le=e=>{let{data:t,getStyles:n}=e;return(0,Ie.jsx)("div",{css:n("singleValue",e),children:(0,Ie.jsx)(De,{displayName:t.label})})};var I=require("@emotion/react/jsx-runtime");function we({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,h;let[o,s]=(0,je.useState)(typeof t.r!="undefined"&&me(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(Fe.InputComboBox,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(h=t.rDim)!=null?h:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...re(n.dimensions)],styles:{...r.styles,valueContainer:(u,p)=>{var g,E;return{...u,padding:"var(--spacing-sm)",...(E=(g=r.styles)==null?void 0:g.valueContainer)==null?void 0:E.call(g,u,p)}},option:(u,p)=>{var g,E;return{fontSize:p.isDisabled?"0.8rem":void 0,...(E=(g=r.styles)==null?void 0:g.option)==null?void 0:E.call(g,u,p)}}},onChange:u=>{var p;u&&(e({...t,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0}),s(""))},onInputChange:(u,p)=>{let g=me(u);p.action==="input-change"||p.action==="set-value"?(s(u),(g||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!g&&!me(p.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:se,SingleValue:le,GroupHeading:ie},noOptionsMessage:({inputValue:u})=>me(u)?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["Score: ",u]}),(0,I.jsx)("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),(0,I.jsx)("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),(0,I.jsx)(ae,{message:a})]})}function me(e){return/^\d+$/.test(e.toString(10))}var Ke=require("@uniformdev/design-system");var N=require("@emotion/react/jsx-runtime");function Re({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(Ke.InputComboBox,{...r,value:t?ye(t):void 0,options:re(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:se,SingleValue:le,GroupHeading:ie,...r.components}}),(0,N.jsx)(ae,{message:a})]})}var Je=require("@uniformdev/design-system"),Qe=require("react-icons/cg");var Ye=require("@emotion/react"),Xe=Ye.css`
+      `,
+      children: message
+    }
+  );
+}
+
+// src/components/DimensionMenu/DimensionOption.tsx
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var DimensionOption = (props) => {
+  var _a, _b;
+  const { data, getStyles, cx, isDisabled, isFocused, isSelected, className, innerRef, innerProps } = props;
+  const [, value] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      css: getStyles("option", props),
+      className: cx(
+        {
+          option: true,
+          "option--is-disabled": isDisabled,
+          "option--is-focused": isFocused,
+          "option--is-selected": isSelected
+        },
+        className
+      ),
+      ref: innerRef,
+      "aria-disabled": isDisabled,
+      ...innerProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
+    }
+  );
+};
+
+// src/components/DimensionMenu/DimensionValue.tsx
+var import_design_system4 = require("@uniformdev/design-system");
+var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
+function DimensionValue({ displayName }) {
+  const [type, name] = displayName.split(":");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      css: {
+        whiteSpace: "normal",
+        overflow: "hidden"
+      },
+      children: [
+        name ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "small",
+          {
+            css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
+            children: [
+              type ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system4.Icon, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-test-id": "dimension-name", children: type })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: { color: "var(--gray-700)" }, "data-test-id": "dimension-value", children: name != null ? name : type })
+      ]
+    }
+  );
+}
+
+// src/components/DimensionMenu/DimensionSingleValue.tsx
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var DimensionSingleValue = (props) => {
+  const { data, getStyles } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DimensionValue, { displayName: data.label }) });
+};
+
+// src/components/DimensionMenu/CriteriaMatchMenu.tsx
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+function CriteriaMatchMenu({
+  onChange,
+  criteriaMatch,
+  dimensions,
+  errorMessage,
+  ...props
+}) {
+  var _a, _b;
+  const [inputValue, setInputValue] = (0, import_react7.useState)(
+    typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
+  );
+  const rDim = criteriaMatch.rDim;
+  const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_design_system5.InputComboBox,
+      {
+        ...props,
+        inputValue,
+        menuShouldScrollIntoView: true,
+        value: {
+          label: (_a = targetDim == null ? void 0 : targetDim.displayName) != null ? _a : rDim && !targetDim ? `${criteriaMatch.rDim} (unknown)` : "",
+          value: (_b = criteriaMatch.rDim) != null ? _b : criteriaMatch.r ? criteriaMatch.r.toString(10) : "",
+          isDisabled: false
+        },
+        options: [
+          {
+            label: "Enter a numeric score to match, or choose another dimension to match its score",
+            value: "",
+            isDisabled: true
+          },
+          ...groupDimensions(dimensions.dimensions)
+        ],
+        styles: {
+          ...props.styles,
+          valueContainer: (provided, state) => {
+            var _a2, _b2;
+            return {
+              ...provided,
+              padding: "var(--spacing-sm)",
+              ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.valueContainer) == null ? void 0 : _b2.call(_a2, provided, state)
+            };
+          },
+          option: (provided, state) => {
+            var _a2, _b2;
+            return {
+              fontSize: state.isDisabled ? "0.8rem" : void 0,
+              ...(_b2 = (_a2 = props.styles) == null ? void 0 : _a2.option) == null ? void 0 : _b2.call(_a2, provided, state)
+            };
+          }
+        },
+        onChange: (e) => {
+          var _a2;
+          if (e) {
+            onChange({ ...criteriaMatch, rDim: (_a2 = e.value) == null ? void 0 : _a2.toString(), r: void 0 });
+            setInputValue("");
+          }
+        },
+        onInputChange: (newValue, meta) => {
+          const isValueInt = isInt(newValue);
+          if (meta.action === "input-change" || meta.action === "set-value") {
+            setInputValue(newValue);
+            if (isValueInt || newValue === "") {
+              onChange({ ...criteriaMatch, r: newValue || void 0, rDim: void 0 });
+            }
+          } else if (!isValueInt && !isInt(meta.prevInputValue)) {
+            if (!newValue && criteriaMatch.r) {
+              setInputValue(criteriaMatch.r.toString());
+            } else {
+              setInputValue(newValue);
+            }
+          }
+        },
+        components: {
+          ...props.components,
+          Option: DimensionOption,
+          SingleValue: DimensionSingleValue,
+          GroupHeading: DimensionGroupHeading
+        },
+        noOptionsMessage: ({ inputValue: inputValue2 }) => {
+          if (isInt(inputValue2)) {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                "Score: ",
+                inputValue2
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
+            ] });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+              "No dimensions match your search \u201C",
+              inputValue2,
+              "\u201D"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: "If you want to match a literal score, enter a numeric value." })
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
+  ] });
+}
+function isInt(value) {
+  return /^\d+$/.test(value.toString(10));
+}
+
+// src/components/DimensionMenu/DimensionMenu.tsx
+var import_design_system6 = require("@uniformdev/design-system");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_design_system6.InputComboBox,
+      {
+        ...props,
+        value: value ? dimensionToMenuOption(value) : void 0,
+        options: groupDimensions(dimensions),
+        styles: {
+          ...props.styles,
+          valueContainer: (provided, state) => {
+            var _a, _b;
+            return {
+              ...provided,
+              padding: "var(--spacing-sm)",
+              ...(_b = (_a = props.styles) == null ? void 0 : _a.valueContainer) == null ? void 0 : _b.call(_a, provided, state)
+            };
+          }
+        },
+        onChange: (e) => {
+          if (e) {
+            onChange(dimensions.find((d) => d.dim === e.value));
+          }
+        },
+        components: {
+          Option: DimensionOption,
+          SingleValue: DimensionSingleValue,
+          GroupHeading: DimensionGroupHeading,
+          ...props.components
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DimensionMenuErrorMessage, { message: errorMessage })
+  ] });
+}
+
+// src/components/EditLink/EditLink.tsx
+var import_design_system7 = require("@uniformdev/design-system");
+var import_cg = require("react-icons/cg");
+
+// src/components/EditLink/EditLink.styles.ts
+var import_react8 = require("@emotion/react");
+var editLink = import_react8.css`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
@@ -24,7 +743,36 @@
   &:focus {
     text-decoration-line: underline;
   }
-`;var pe=require("@emotion/react/jsx-runtime"),Me=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>(0,pe.jsxs)("a",{css:Xe,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,(0,pe.jsx)(Je.Icon,{icon:Qe.CgChevronRight,iconColor:"currentColor",size:"1.5rem"})]});var ce=require("@emotion/react"),ue=require("@uniformdev/context"),x=require("@uniformdev/design-system"),Ee=J(require("immer")),z=require("react"),H=require("react-icons/cg");var m=require("@emotion/react/jsx-runtime"),Ze=ce.css`
+`;
+
+// src/components/EditLink/EditLink.tsx
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "a",
+    {
+      css: editLink,
+      title: `Edit ${name} component definition`,
+      rel: "noopener noreferrer",
+      target: "_blank",
+      href: linkTo,
+      children: [
+        linkText,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system7.Icon, { icon: import_cg.CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
+      ]
+    }
+  );
+};
+
+// src/components/EnrichmentTag/EnrichmentTag.tsx
+var import_react9 = require("@emotion/react");
+var import_context = require("@uniformdev/context");
+var import_design_system8 = require("@uniformdev/design-system");
+var import_immer = __toESM(require("immer"));
+var import_react10 = require("react");
+var import_cg2 = require("react-icons/cg");
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var addEnrichmentLink = import_react9.css`
   flex: 2;
   display: flex;
   width: 50%;
@@ -35,7 +783,189 @@
   &:focus {
     text-decoration-line: underline;
   }
-`,Rt=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=T(n),i=(0,z.useMemo)(()=>{if(o)return o.dimensions.filter(v=>v.category==="ENR")},[o]),l=(0,z.useMemo)(()=>{if(!e)return i;if(i)return i.filter(v=>!e.some(R=>(0,ue.getEnrichmentVectorKey)(R.cat,R.key)===v.dim))},[i,e]),[d,h]=(0,z.useState)(""),[u,p]=(0,z.useState)(50),[g,E]=(0,z.useState)(!1),C=i==null?void 0:i.find(v=>v.dim===d),y=()=>{let[v,R]=d.split("_");B([...e!=null?e:[],{cat:v,key:R,str:u}]),h(""),p(50),E(!1)},B=v=>{let R=[];o?R=v.filter(q=>{let K=o.dimIndex[(0,ue.getEnrichmentVectorKey)(q.cat,q.key)];return Boolean(K)}):R=v;let j=R.length===0?null:R;t(j)};return s?(0,m.jsx)(x.Callout,{type:"danger",children:s}):r||o===null?(0,m.jsx)(x.LoadingIndicator,{}):(0,m.jsxs)("fieldset",{className:"enrichment-tag",children:[a?(0,m.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:(0,m.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!g&&!e?(0,m.jsx)(x.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Click"," ",(0,m.jsx)("a",{onClick:()=>E(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):(0,m.jsxs)(m.Fragment,{children:[o&&(0,m.jsx)(Ot,{list:e!=null?e:[],setList:B,dimIndex:o.dimIndex}),g&&l&&l.length>0?(0,m.jsxs)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[(0,m.jsx)("div",{css:{flexGrow:1},children:(0,m.jsx)(x.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(v=>({label:v.displayName,value:v.dim}))],onChange:v=>h(v.currentTarget.value)})}),(0,m.jsx)(Vt,{score:u,setValue:p,cap:C?C.cap:100,css:{flexBasis:"9rem"}}),(0,m.jsx)(x.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,(0,m.jsxs)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!g&&l&&l.length>0&&e?(0,m.jsx)(x.AddListButton,{className:"add-more",buttonText:"Add More",onButtonClick:()=>E(!0)}):(0,m.jsx)("a",{css:Ze,title:"none",href:"#"}),(0,m.jsx)(Me,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):(0,m.jsx)(Mt,{contextConfig:n})]})},Mt=({contextConfig:e})=>(0,m.jsx)(x.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",(0,m.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),et=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),tt=ce.css`
+`;
+var EnrichmentTag = ({
+  value,
+  setValue,
+  contextConfig,
+  displayTitle = true
+}) => {
+  const { loading, result: dimensions, error } = useDimensions(contextConfig);
+  const allEnrichments = (0, import_react10.useMemo)(() => {
+    if (dimensions)
+      return dimensions.dimensions.filter((dimension) => dimension.category === "ENR");
+  }, [dimensions]);
+  const remainingEnrichments = (0, import_react10.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_react10.useState)("");
+  const [score, setScore] = (0, import_react10.useState)(50);
+  const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = (0, import_react10.useState)(false);
+  const selectedEnrichment = allEnrichments == null ? void 0 : allEnrichments.find((dimension) => dimension.dim === selectValue);
+  const addEnrichment = () => {
+    const [cat, key] = selectValue.split("_");
+    update([...value != null ? value : [], { cat, key, str: score }]);
+    setSelectValue("");
+    setScore(50);
+    setShowAddNewEnrichmentTagPanel(false);
+  };
+  const update = (newValue) => {
+    let validData = [];
+    if (dimensions) {
+      validData = newValue.filter((enrichment) => {
+        const dimData = dimensions.dimIndex[(0, import_context.getEnrichmentVectorKey)(enrichment.cat, enrichment.key)];
+        return Boolean(dimData);
+      });
+    } else {
+      validData = newValue;
+    }
+    const finalValue = validData.length === 0 ? null : validData;
+    setValue(finalValue);
+  };
+  if (error)
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Callout, { type: "danger", children: error });
+  if (loading || dimensions === null)
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.LoadingIndicator, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("fieldset", { className: "enrichment-tag", children: [
+    displayTitle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
+    !(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_design_system8.Callout,
+      {
+        title: "No enrichment tags assigned.",
+        type: "info",
+        css: { marginBlock: "var(--spacing-base)" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+          "Click",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "a",
+            {
+              onClick: () => setShowAddNewEnrichmentTagPanel(true),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              css: { textDecorationLine: "underline" },
+              children: "here"
+            }
+          ),
+          " ",
+          "to assign your first enrichment tag."
+        ] })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      dimensions && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
+      showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "div",
+        {
+          className: "add-enrichment-tag",
+          css: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "var(--spacing-lg)",
+            marginTop: "var(--spacing-md)",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_design_system8.InputSelect,
+              {
+                name: `enrichment-type`,
+                label: "Enrichment Tag",
+                showLabel: true,
+                value: selectValue,
+                options: [
+                  { label: "Select", value: "" },
+                  ...remainingEnrichments.map((enr) => ({
+                    label: enr.displayName,
+                    value: enr.dim
+                  }))
+                ],
+                onChange: (e) => setSelectValue(e.currentTarget.value)
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ScoreCounter,
+              {
+                score,
+                setValue: setScore,
+                cap: selectedEnrichment ? selectedEnrichment.cap : 100,
+                css: { flexBasis: "9rem" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_design_system8.Button,
+              {
+                buttonType: "tertiary",
+                size: "xl",
+                css: {
+                  marginBottom: "var(--spacing-xs)",
+                  height: "3.5rem",
+                  margin: 0,
+                  alignSelf: "flex-end"
+                },
+                onClick: addEnrichment,
+                disabled: !selectValue,
+                children: "Add"
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "div",
+        {
+          className: "enrichment-cta",
+          style: { paddingTop: "10px", display: "flex", justifyContent: "space-between" },
+          children: [
+            !showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_design_system8.AddListButton,
+              {
+                className: "add-more",
+                buttonText: "Add More",
+                onButtonClick: () => setShowAddNewEnrichmentTagPanel(true)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              EditLink,
+              {
+                name: "Enrichments",
+                linkText: "Manage Enrichments",
+                linkTo: `${contextConfig.apiHost}/projects/${encodeURIComponent(
+                  contextConfig.projectId
+                )}/personalization/enrichments`
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Callout, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+  "Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment",
+  " ",
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "a",
+    {
+      href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
+        contextConfig.projectId
+      )}/personalization/enrichments`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      css: { ":hover": { textDecorationLine: "underline" } },
+      children: "here"
+    }
+  ),
+  "."
+] }) });
+var getCappedValue = (value, maxCap = 100, minCap = 0) => {
+  return Math.max(Math.min(value, maxCap), minCap);
+};
+var scoreCounterMinusButtonStyles = import_react9.css`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -47,28 +977,198 @@
   background-color: var(--gray-100);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
-`,Et=ce.css`
-  ${tt}
+`;
+var scoreCounterPlusButtonStyles = import_react9.css`
+  ${scoreCounterMinusButtonStyles}
   left: auto;
   right: var(--spacing-sm);
-`,Vt=({score:e,setValue:t,cap:n=100,...a})=>{let r=o=>{let s=o==="increment"?e+10:e-10;s<0&&(s=0),s>n&&(s=n),t(s)};return(0,m.jsxs)("div",{css:{position:"relative"},...a,children:[(0,m.jsx)(x.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(et(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,m.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:tt,children:(0,m.jsx)(x.Icon,{icon:H.CgMathMinus,iconColor:"gray",size:"1.5rem"})}),(0,m.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:Et,children:(0,m.jsx)(x.Icon,{icon:H.CgMathPlus,iconColor:"gray",size:"1.5rem"})})]})},Ot=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t((0,Ee.default)(e,s=>{s.splice(o,1)}))},r=(o,s)=>{var l;let i=(l=n[`${e[o].cat}_${e[o].key}`])==null?void 0:l.cap;t((0,Ee.default)(e,d=>{d[o].str=et(Number(s)||0,i)}))};return(0,m.jsx)(m.Fragment,{children:e.map((o,s)=>{let i=n[(0,ue.getEnrichmentVectorKey)(o.cat,o.key)];if(!!i)return(0,m.jsxs)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",children:[(0,m.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`}),(0,m.jsx)("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"},children:(0,m.jsx)(x.Input,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),(0,m.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:(0,m.jsx)(x.Icon,{icon:H.CgCloseO,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};var F=require("@uniformdev/design-system"),st=require("react"),lt=require("react-use"),w=J(require("yup"));function St(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Bt(e){return e.crit!==void 0}function de(e){return e!=="+"&&e!=="-"}var it=require("@emotion/react"),S=require("@uniformdev/design-system"),Se=J(require("immer")),at=require("react-icons/cg");var L=require("@emotion/react"),Ve="6rem",nt=L.css`
+`;
+var ScoreCounter = ({
+  score,
+  setValue,
+  cap = 100,
+  ...otherProps
+}) => {
+  const handleCounter = (symbol) => {
+    let newScore = symbol === "increment" ? score + 10 : score - 10;
+    if (newScore < 0) {
+      newScore = 0;
+    }
+    if (newScore > cap) {
+      newScore = cap;
+    }
+    setValue(newScore);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { css: { position: "relative" }, ...otherProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_design_system8.Input,
+      {
+        label: "Strength",
+        id: "enrichment-score",
+        type: "number",
+        min: 0,
+        max: cap,
+        value: score,
+        onChange: (e) => setValue(getCappedValue(Number(e.currentTarget.value) || 0, cap)),
+        css: { textAlign: "center", boxSizing: "border-box" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Reduce enrichment count",
+        onClick: () => handleCounter("decrement"),
+        disabled: score === 0,
+        className: "scoreCounterButton",
+        css: scoreCounterMinusButtonStyles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_cg2.CgMathMinus, iconColor: "gray", size: "1.5rem" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Increase enrichment count",
+        onClick: () => handleCounter("increment"),
+        className: "scoreCounterButton",
+        css: scoreCounterPlusButtonStyles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_cg2.CgMathPlus, iconColor: "gray", size: "1.5rem" })
+      }
+    )
+  ] });
+};
+var SelectedEnrichments = ({ list, setList, dimIndex }) => {
+  const removeEnrichment = (index) => {
+    setList(
+      (0, import_immer.default)(list, (draft) => {
+        draft.splice(index, 1);
+      })
+    );
+  };
+  const updateEnrichmentScore = (index, value) => {
+    var _a;
+    const cap = (_a = dimIndex[`${list[index].cat}_${list[index].key}`]) == null ? void 0 : _a.cap;
+    setList(
+      (0, import_immer.default)(list, (draft) => {
+        draft[index].str = getCappedValue(Number(value) || 0, cap);
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: list.map((enrichment, index) => {
+    const dimData = dimIndex[(0, import_context.getEnrichmentVectorKey)(enrichment.cat, enrichment.key)];
+    if (!dimData)
+      return;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--spacing-base)",
+          backgroundColor: "var(--brand-secondary-2)",
+          boxShadow: "var(--shadow-base)",
+          borderRadius: "var(--rounded-base)",
+          paddingInline: "var(--spacing-base)",
+          marginBlock: "var(--spacing-base)"
+        },
+        className: "selected-enrichments",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              css: { fontWeight: "var(--fw-bold)", color: dimData ? void 0 : "var(--brand-secondary-5)" },
+              children: dimData ? dimData.displayName : `Enrichment '${enrichment.cat}_${enrichment.key}' is unknown`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "div",
+            {
+              css: {
+                marginLeft: "auto",
+                display: "flex",
+                alignItems: "center",
+                border: "0 solid var(--gray-400)",
+                borderLeftWidth: "1px",
+                borderRightWidth: "1px",
+                padding: "var(--spacing-sm) var(--spacing-base)",
+                flexBasis: "9rem"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_design_system8.Input,
+                {
+                  type: "text",
+                  min: 0,
+                  max: dimData.cap || 100,
+                  title: "score",
+                  value: enrichment.str,
+                  css: { textAlign: "center", width: "100px" },
+                  onChange: (e) => updateEnrichmentScore(index, e.currentTarget.value)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              type: "button",
+              title: `Delete enrichment`,
+              onClick: () => removeEnrichment(index),
+              css: { border: 0 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system8.Icon, { icon: import_cg2.CgCloseO, iconColor: "red", size: "1.5rem" })
+            }
+          )
+        ]
+      },
+      `${enrichment.cat}-${enrichment.key}`
+    );
+  }) });
+};
+
+// src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
+var import_design_system10 = require("@uniformdev/design-system");
+var import_react13 = require("react");
+var import_react_use = require("react-use");
+var yup = __toESM(require("yup"));
+
+// src/utils/utils.ts
+function isEnrichmentTagData(obj) {
+  return Array.isArray(obj) && obj.length > 0 && obj[0].cat !== void 0;
+}
+function isPersonalizationCriteriaData(obj) {
+  return obj.crit !== void 0;
+}
+function opHasRhs(op) {
+  return op !== "+" && op !== "-";
+}
+
+// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
+var import_react12 = require("@emotion/react");
+var import_design_system9 = require("@uniformdev/design-system");
+var import_immer2 = __toESM(require("immer"));
+var import_cg3 = require("react-icons/cg");
+
+// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
+var import_react11 = require("@emotion/react");
+var spaceBetweenCriteriaItems = "6rem";
+var criteriaItem = import_react11.css`
   position: relative;
   padding: var(--spacing-md) var(--spacing-base);
   border: 1px solid var(--gray-300);
   box-shadow: var(--shadow-base);
   background-color: white;
   border-radius: var(--rounded-base);
-  margin-top: ${Ve};
+  margin-top: ${spaceBetweenCriteriaItems};
   display: flex;
 
   &:before {
     content: '';
     display: block;
     width: 1px;
-    height: ${Ve};
+    height: ${spaceBetweenCriteriaItems};
     background-color: var(--gray-300);
     position: absolute;
-    top: -${Ve};
+    top: -${spaceBetweenCriteriaItems};
     left: var(--spacing-lg);
   }
 
@@ -78,27 +1178,449 @@
       display: none;
     }
   }
-`,ot=L.css`
+`;
+var criteriaItemInner = import_react11.css`
   display: flex;
   gap: var(--spacing-base);
   flex-grow: 1;
   flex-wrap: wrap;
   margin-right: var(--spacing-base);
-`,fe=L.css`
+`;
+var criteriaWrapper = import_react11.css`
   width: 100%;
   display: flex;
   align-items: stretch;
   position: relative;
-`,Oe=L.css`
+`;
+var criteriaOperandWrapper = import_react11.css`
   flex: 2;
   height: 52px;
   min-width: 200px;
-`,rt=L.css`
+`;
+var criteriaOperatorWrapper = import_react11.css`
   flex: 1;
   min-width: 80px;
-`,ge=L.css`
+`;
+var expand = import_react11.css`
   height: 100%;
   width: 100%;
-`;var f=require("@emotion/react/jsx-runtime"),Be=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let h=e||{crit:[]},u=C=>{t({...h,op:C==="&"?void 0:C})},p=()=>{let C={...h,crit:[...h.crit,{l:"",op:">",r:0}]};t(C),o==null||o(C)},g=(C,y)=>{t((0,Se.default)(h,B=>{B.crit[y]=C}))},E=C=>{let y=(0,Se.default)(h,v=>{v.crit.splice(C,1)}),B=y.crit.length===0?null:y;t(B),s==null||s(B)};return(0,f.jsxs)("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?(0,f.jsx)(l.Title,{}):(0,f.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?(0,f.jsx)(l.CustomVariantName,{}):null,h.crit.length?(0,f.jsx)("div",{children:h.crit.map((C,y)=>{var R,j,q,K;let B=((R=C.l)==null?void 0:R.length)>0,v=C.op!=="+"&&C.op!=="-";return(0,f.jsxs)("div",{css:nt,"data-test-id":"criteria-container",children:[(0,f.jsxs)("div",{css:it.css`
-                    ${ot}/* grid-template-columns: minmax(0, 1fr) ${v?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
-                  `,className:"criteriaItemInner",children:[(0,f.jsx)("div",{css:[fe,Oe],className:"criteria-wrapper","data-test-id":"select-criteria",children:(0,f.jsx)(Re,{errorMessage:(j=d.lhs)==null?void 0:j[y],css:ge,styles:{control:D=>({...D,height:"100%"})},dimensions:n.dimensions,onChange:D=>{g({...C,l:D.dim},y)},value:n.dimIndex[C.l],onMenuOpen:a,onMenuClose:r})}),(0,f.jsx)("div",{css:[fe,rt],className:"criteria-wrapper","data-test-id":"select-operator",children:(0,f.jsx)(ve,{name:`op-${y}`,css:ge,styles:{control:D=>({...D,height:"100%"})},value:C.op,onChange:D=>{g(D==="+"||D==="-"?{...C,op:D,r:void 0,rDim:void 0}:{...C,op:D},y)},onMenuOpen:a,onMenuClose:r})}),v?(0,f.jsx)("div",{css:[fe,Oe],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:(0,f.jsx)(we,{errorMessage:(q=d.rhs)==null?void 0:q[y],css:ge,styles:{control:D=>({...D,height:"100%"})},criteriaMatch:C,onChange:D=>{g(D,y)},isDisabled:!B,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),(0,f.jsx)("button",{type:"button",onClick:()=>E(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:(0,f.jsx)(S.Icon,{icon:at.CgCloseO,iconColor:"red",size:"1.5rem"})}),y>0?(0,f.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:(0,f.jsx)(S.InputInlineSelect,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(K=h.op)!=null?K:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:D=>{u(D.value)}})}):null]},y)})}):(0,f.jsx)(S.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)(S.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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?(0,f.jsx)(l.NoDimensionsDefined,{}):(0,f.jsx)(S.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)("p",{children:"You do not have any dimensions configured."})}):(0,f.jsx)(S.AddListButton,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:p})]})};var P=require("@emotion/react/jsx-runtime");function mt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function Pe(e,t){let n=w.object().shape({l:w.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:w.string().required(),r:w.mixed().nullable().when(["rDim","op"],{is:(a,r)=>de(r)&&!a,then:w.string().required("Choose a score or dimension")}),rDim:w.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>de(r)&&!a,then:w.string().required("Choose a score or dimension")})},["rDim","r"]);try{await w.object({crit:w.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return mt(a.inner)}}var Tt=({contextConfig:e,value:t,setValue:n,...a})=>{var h,u;let[r,o]=(0,st.useState)(void 0),{loading:s,result:i,error:l}=T(e);return(0,lt.useAsync)(async()=>{if(t&&i){let p=await Pe(t,i);o(p)}},[t,i,Pe]),l?(0,P.jsx)(F.Callout,{type:"danger",children:l}):s||i===null?(0,P.jsx)(F.LoadingIndicator,{}):(0,P.jsx)(Be,{...a,value:t,setValue:async p=>{let g=await Pe(p,i);o(g),n(p)},errors:{lhs:(h=r==null?void 0:r.crit)==null?void 0:h.map(p=>p==null?void 0:p.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(p=>p==null?void 0:p.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>(0,P.jsx)(F.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,P.jsxs)("p",{children:["You do not have any dimensions configured. Create your first"," ",(0,P.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};var pt=require("@uniformdev/design-system");var W=require("@emotion/react/jsx-runtime");function kt({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=_(n);if(a)return(0,W.jsx)(pt.LoadingIndicator,{});if(r){let o=t[r.project.ui_version];if(o)return(0,W.jsx)(o,{})}return(0,W.jsx)(W.Fragment,{children:e})}var Ce=require("react");var ut=require("@uniformdev/context/api"),ct=require("uuid"),Te=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!(0,ct.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new ut.UncachedManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(n){return{valid:!1,error:n}}};var Nt=e=>{let[t,n]=(0,Ce.useState)({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return(0,Ce.useEffect)(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Te({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};V(M,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,convertErrorsToObj,isEnrichmentTagData,isPersonalizationCriteriaData,opHasRhs,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
+`;
+
+// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var PersonalizationCriteriaStatic = ({
+  value,
+  setValue,
+  dimensions,
+  onMenuOpen,
+  onMenuClose,
+  onAddCriteria,
+  onRemoveCriteria,
+  displayTitle = true,
+  components,
+  errors = {}
+}) => {
+  const currentValue = value || {
+    crit: []
+  };
+  const setOp = (op) => {
+    const finalOp = op === "&" ? void 0 : op;
+    setValue({
+      ...currentValue,
+      op: finalOp
+    });
+  };
+  const addToList = () => {
+    const newValue = {
+      ...currentValue,
+      crit: [...currentValue.crit, { l: "", op: ">", r: 0 }]
+    };
+    setValue(newValue);
+    onAddCriteria == null ? void 0 : onAddCriteria(newValue);
+  };
+  const update = (crit, index) => {
+    setValue(
+      (0, import_immer2.default)(currentValue, (draft) => {
+        draft.crit[index] = crit;
+      })
+    );
+  };
+  const removeFromList = (index) => {
+    const newValue = (0, import_immer2.default)(currentValue, (draft) => {
+      draft.crit.splice(index, 1);
+    });
+    const finalValue = newValue.crit.length === 0 ? null : newValue;
+    setValue(finalValue);
+    onRemoveCriteria == null ? void 0 : onRemoveCriteria(finalValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("fieldset", { className: "personalization-criteria", children: [
+    displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.Title, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "legend",
+      {
+        css: {
+          fontSize: "var(--fs-md)",
+          fontWeight: "var(--fw-bold)"
+        },
+        children: "Personalize This"
+      }
+    ) : null,
+    (components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.CustomVariantName, {}) : null,
+    !currentValue.crit.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: currentValue.crit.map((currentCriteria, index) => {
+      var _a, _b, _c, _d;
+      const critHasLhs = ((_a = currentCriteria.l) == null ? void 0 : _a.length) > 0;
+      const critHasRhs = currentCriteria.op !== "+" && currentCriteria.op !== "-";
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { css: criteriaItem, "data-test-id": "criteria-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            css: import_react12.css`
+                    ${criteriaItemInner}/* grid-template-columns: minmax(0, 1fr) ${critHasRhs ? "minmax(0, 79px) minmax(0, 1fr)" : "minmax(0, 1fr)"} */
+                  `,
+            className: "criteriaItemInner",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  css: [criteriaWrapper, criteriaOperandWrapper],
+                  className: "criteria-wrapper",
+                  "data-test-id": "select-criteria",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
+                "div",
+                {
+                  css: [criteriaWrapper, criteriaOperatorWrapper],
+                  className: "criteria-wrapper",
+                  "data-test-id": "select-operator",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
+                "div",
+                {
+                  css: [criteriaWrapper, criteriaOperandWrapper],
+                  className: "criteria-wrapper",
+                  "data-test-id": "select-match-criteria",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeFromList(index),
+            title: `Delete Personalization`,
+            css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
+            "data-test-id": "button-delete",
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Icon, { icon: import_cg3.CgCloseO, iconColor: "red", size: "1.5rem" })
+          }
+        ),
+        index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            className: "criteria-group-operation",
+            css: {
+              position: "absolute",
+              top: "-4rem",
+              transform: "translateX(calc(1.5rem - 50%))"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_design_system9.InputInlineSelect,
+              {
+                "data-test-id": "dropdown-button-combine",
+                disabled: index > 1,
+                value: (_d = currentValue.op) != null ? _d : "&",
+                options: [
+                  { label: "AND", value: "&" },
+                  { label: "OR", value: "|" }
+                ],
+                onChange: (v) => {
+                  setOp(v.value);
+                }
+              }
+            )
+          }
+        ) : null
+      ] }, index);
+    }) }),
+    dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(components.NoDimensionsDefined, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system9.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_design_system9.AddListButton,
+      {
+        "data-test-id": "button-add-criteria",
+        className: "add-more",
+        buttonText: "Add Criteria",
+        onButtonClick: addToList
+      }
+    )
+  ] });
+};
+
+// src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+function convertErrorsToObj(errors) {
+  const result = { crit: [] };
+  errors.forEach((err) => {
+    var _a;
+    if (!err.path)
+      return;
+    const regexp = /\[(\d+)\]\.(\w+)/g;
+    const matches = (_a = [...err.path.matchAll(regexp)]) == null ? void 0 : _a[0];
+    if ((matches == null ? void 0 : matches.length) == 3) {
+      const index = Number(matches[1]);
+      const prop = matches[2];
+      if (result.crit.length > index) {
+        result.crit[index] = { ...result.crit[index], [prop]: err.message };
+      } else {
+        const variant = {};
+        variant[prop] = err.message;
+        result.crit.push(variant);
+      }
+    }
+  });
+  return result;
+}
+async function validate(value, contextData) {
+  const schema = yup.object().shape(
+    {
+      l: yup.string().required("Please select a dimension").oneOf(
+        contextData == null ? void 0 : contextData.dimensions.map((d) => d.dim),
+        "Select a criteria"
+      ),
+      op: yup.string().required(),
+      r: yup.mixed().nullable().when(["rDim", "op"], {
+        is: (rDim, op) => opHasRhs(op) && !rDim,
+        then: yup.string().required("Choose a score or dimension")
+      }),
+      rDim: yup.string().oneOf(
+        contextData == null ? void 0 : contextData.dimensions.map((d) => d.dim),
+        "Select a criteria"
+      ).when(["r", "op"], {
+        is: (r, op) => opHasRhs(op) && !r,
+        then: yup.string().required("Choose a score or dimension")
+      })
+    },
+    ["rDim", "r"]
+  );
+  try {
+    await yup.object({
+      crit: yup.array(schema)
+    }).nullable().validate(value, { abortEarly: false });
+  } catch (e) {
+    return convertErrorsToObj(e.inner);
+  }
+}
+var PersonalizationCriteria = ({
+  contextConfig,
+  value,
+  setValue,
+  ...staticProps
+}) => {
+  var _a, _b;
+  const [validationError, setValidationError] = (0, import_react13.useState)(void 0);
+  const { loading, result: dimensions, error } = useDimensions(contextConfig);
+  (0, import_react_use.useAsync)(async () => {
+    if (value && dimensions) {
+      const err = await validate(value, dimensions);
+      setValidationError(err);
+    }
+  }, [value, dimensions, validate]);
+  if (error)
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { type: "danger", children: error });
+  if (loading || dimensions === null)
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.LoadingIndicator, {});
+  const handleSetValue = async (value2) => {
+    const err = await validate(value2, dimensions);
+    setValidationError(err);
+    setValue(value2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    PersonalizationCriteriaStatic,
+    {
+      ...staticProps,
+      value,
+      setValue: handleSetValue,
+      errors: {
+        lhs: (_a = validationError == null ? void 0 : validationError.crit) == null ? void 0 : _a.map((err) => err == null ? void 0 : err.l),
+        rhs: (_b = validationError == null ? void 0 : validationError.crit) == null ? void 0 : _b.map((err) => err == null ? void 0 : err.rDim)
+      },
+      dimensions,
+      components: {
+        NoDimensionsDefined: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system10.Callout, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+          "You do not have any dimensions configured. Create your first",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "a",
+            {
+              href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
+                contextConfig.projectId
+              )}/personalization/signals`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              css: { ":hover": { textDecorationLine: "underline" } },
+              children: "Dimension"
+            }
+          )
+        ] }) })
+      }
+    }
+  );
+};
+
+// src/components/ProjectUIVersion/ProjectUIVersion.tsx
+var import_design_system11 = require("@uniformdev/design-system");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+function ProjectUIVersion({ children, versionMap, contextConfig }) {
+  const { loading, result: data } = useContextData(contextConfig);
+  if (loading)
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system11.LoadingIndicator, {});
+  if (data) {
+    const Component = versionMap[data.project.ui_version];
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, {});
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
+}
+
+// src/hooks/useValidateContextConfig.ts
+var import_react14 = require("react");
+
+// src/utils/validateContextConfig.ts
+var import_api3 = require("@uniformdev/context/api");
+var import_uuid = require("uuid");
+var validateContextConfig = async (contextConfig) => {
+  if (!contextConfig) {
+    return { valid: false, error: new Error("contextConfig was not defined.") };
+  }
+  if (!contextConfig.apiHost) {
+    return { valid: false, error: new Error("apiHost was not defined.") };
+  }
+  if (!contextConfig.apiKey) {
+    return { valid: false, error: new Error("apiKey was not defined.") };
+  }
+  if (!(0, import_uuid.validate)(contextConfig.apiKey) && !contextConfig.projectId) {
+    return { valid: false, error: new Error("projectId is required when using a modern API key.") };
+  }
+  const client = new import_api3.UncachedManifestClient({
+    projectId: contextConfig.projectId,
+    apiKey: contextConfig.apiKey,
+    apiHost: contextConfig.apiHost
+  });
+  try {
+    const result = await client.get({ preview: true });
+    return {
+      valid: true,
+      result
+    };
+  } catch (e) {
+    return { valid: false, error: e };
+  }
+};
+
+// src/hooks/useValidateContextConfig.ts
+var useValidateContextConfig = (contextConfig) => {
+  const [state, setState] = (0, import_react14.useState)({
+    validating: false,
+    error: void 0
+  });
+  const { apiKey, apiHost, projectId } = contextConfig || {};
+  (0, import_react14.useEffect)(() => {
+    if (!apiKey || !apiHost) {
+      return;
+    }
+    const runEffect = async () => {
+      setState({ validating: true, error: void 0 });
+      const { error, result } = await validateContextConfig({ apiHost, apiKey, projectId });
+      if (error) {
+        setState({ error, validating: false });
+      } else {
+        setState({ error: void 0, validating: false, result });
+      }
+    };
+    runEffect();
+  }, [apiHost, apiKey, projectId]);
+  return {
+    validating: state.validating,
+    error: state.error,
+    result: state.result
+  };
+};
+
+// src/index.ts
+__reExport(src_exports, require("@uniformdev/design-system"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextData,
+  CriteriaMatchMenu,
+  CriteriaOperatorMenu,
+  DimensionMenu,
+  DimensionValue,
+  EditLink,
+  EnrichmentTag,
+  PersonalizationCriteria,
+  PersonalizationCriteriaStatic,
+  ProjectUIVersion,
+  addEnrichmentLink,
+  contextCriteriaMenuOperators,
+  convertErrorsToObj,
+  isEnrichmentTagData,
+  isPersonalizationCriteriaData,
+  opHasRhs,
+  useContextConfig,
+  useContextData,
+  useDimensions,
+  useDimensionsDataContext,
+  useManifest,
+  useValidateContextConfig,
+  validateContextConfig
+});