@uniformdev/context-ui 16.0.0 → 16.0.1-alpha.164

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
+import * as _emotion_react from '@emotion/react';
 import React, { ReactElement, ComponentType } from 'react';
 import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
 import { EnrichmentData, DimensionMatch, VariantMatchCriteria } from '@uniformdev/context';
@@ -24,10 +25,12 @@ declare type ResolvedDimensionDefinition = DimensionDefinition & {
     displayName: string;
 };
 
+declare const addEnrichmentLink: _emotion_react.SerializedStyles;
 interface EnrichmentTagProps {
     value: EnrichmentData[] | null | undefined;
     setValue: (value: EnrichmentData[] | null) => void;
     contextConfig: ContextConfig;
+    displayTitle?: boolean;
 }
 declare const EnrichmentTag: React.FC<EnrichmentTagProps>;
 
@@ -39,6 +42,9 @@ interface PersonalizationCriteriaProps {
     value: VariantMatchCriteria | null | undefined;
     setValue: (value: VariantMatchCriteria | null) => void;
     contextConfig: ContextConfig;
+    displayTitle?: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
 }
 declare const PersonalizationCriteria: React.FC<PersonalizationCriteriaProps>;
 
@@ -75,7 +81,7 @@ interface ContextDataProps {
     noIntentsComponent?: ComponentType<DataContextErrorProps>;
     contextConfig: ContextConfig;
 }
-declare const ContextData: React.FC<ContextDataProps>;
+declare const ContextData: React.FC<React.PropsWithChildren<ContextDataProps>>;
 declare function useContextConfig(): ContextConfig;
 declare function useManifest(): ManifestGetResponse;
 declare function useDimensionsDataContext(): DimensionsData;
@@ -96,4 +102,4 @@ declare const useValidateContextConfig: (contextConfig?: ContextConfig | undefin
 declare function isEnrichmentTagData(obj: any): obj is EnrichmentData[];
 declare function isPersonalizationCriteriaData(obj: any): obj is VariantMatchCriteria;
 
-export { ContextConfig, ContextData, ContextDataProps, DataContextErrorProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, equality, isEnrichmentTagData, isPersonalizationCriteriaData, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
+export { ContextConfig, ContextData, ContextDataProps, DataContextErrorProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, equality, isEnrichmentTagData, isPersonalizationCriteriaData, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };

package/dist/index.esm.js

@@ -1,13 +1,26 @@
-import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}from"@uniformdev/design-system";import{CgChevronRight as j}from"react-icons/cg";import{css as J}from"@emotion/react";var S=J`
+import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as oe}from"@uniformdev/design-system";import{CgChevronRight as ie}from"react-icons/cg";import{css as ne}from"@emotion/react";var U=ne`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
   color: var(--brand-secondary-3);
   &:hover,
   &:focus {
     text-decoration-line: underline;
   }
-`;var P=({linkTo:t,name:n,linkText:o=`Edit ${n} Component`})=>e("a",{css:S,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},o,e(Z,{icon:j,iconColor:"currentColor",size:"1.5rem"}));import A,{useMemo as L,useState as $}from"react";import{useEffect as ee,useState as te}from"react";import{DimensionClient as ne,computeDimensionDisplayName as re,ApiClientError as oe}from"@uniformdev/context/api";function V(t,n,o){return t.reduce((s,r)=>{let a=n(r);if(typeof a=="undefined"||a===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(r)]=o?o(r):r,s},{})}function D({apiHost:t,apiKey:n,projectId:o}){let[s,r]=te({loading:!1,notConfigured:!1,error:null,result:null});return ee(()=>{if(!o||!n||!t){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let l=(await new ne({projectId:o,apiKey:n,apiHost:t}).get()).dimensions.map(u=>({...u,displayName:re(u)})),f={dimensions:l,dimIndex:V(l,u=>u.dim,u=>u)};r({notConfigured:!1,loading:!1,error:null,result:f})}catch(i){let l;i instanceof oe?l=i.message:l=i.toString(),r({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[t,n,o]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as B}from"@uniformdev/context";import{Input as N,Button as ie,InputSelect as ae,Callout as z,Icon as I,LoadingIndicator as se}from"@uniformdev/design-system";import{CgMathPlus as le,CgMathMinus as ue,CgCloseO as ce}from"react-icons/cg";import U from"immer";import{css as G}from"@emotion/react";var tt=({value:t,setValue:n,contextConfig:o})=>{let{loading:s,result:r,error:a}=D(o),i=L(()=>{if(r)return r.dimensions.filter(m=>m.category==="ENR")},[r]),l=L(()=>{if(!t)return i;if(i)return i.filter(m=>!t.some(b=>B(b.cat,b.key)===m.dim))},[i,t]),[f,u]=$(""),[p,c]=$(50),d=()=>{let[m,b]=f.split("_");h([...t!=null?t:[],{cat:m,key:b,str:p}]),u(""),c(50)},h=m=>{let b=m.length===0?null:m;n(b)};return a?e(z,{type:"danger"},a):s||r===null?e(se,null):e("fieldset",{css:{marginBlock:"var(--spacing-base)"}},e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags"),e(P,{name:"Enrichments",linkText:"Edit Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`})),i!=null&&i.length?e(A.Fragment,null,r&&e(fe,{list:t!=null?t:[],setList:h,dimIndex:r.dimIndex}),l&&l.length>0?e("div",{css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",alignItems:"flex-end"}},e("div",{css:{flexGrow:1}},e(ae,{name:"enrichment-type",label:"Add Tag",showLabel:!0,value:f,options:[{label:"Select",value:""},...l.map(m=>({label:m.displayName,value:m.dim}))],onChange:m=>u(m.currentTarget.value)})),e(me,{score:p,setValue:c,css:{flexBasis:"9rem"}}),e(ie,{buttonType:"secondary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0},onClick:d,disabled:!f},"Add")):null):e(z,{title:"Enrichments",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any Enrichments configured. Create your first"," ",e("a",{href:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Enrichment"))))},H=G`
+`;var A=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:U,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(oe,{icon:ie,iconColor:"currentColor",size:"1.5rem"}));import G,{useMemo as O,useState as N}from"react";import{useEffect as ae,useState as se}from"react";import{DimensionClient as le,computeDimensionDisplayName as ce,ApiClientError as ue}from"@uniformdev/context/api";function B(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function R({apiHost:t,apiKey:n,projectId:r}){let[s,a]=se({loading:!1,notConfigured:!1,error:null,result:null});return ae(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new le({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:ce(c)})),d={dimensions:i,dimIndex:B(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof ue?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as H}from"@uniformdev/context";import{Input as _,Button as de,InputSelect as me,Callout as P,Icon as x,LoadingIndicator as pe}from"@uniformdev/design-system";import{CgMathPlus as q,CgMathMinus as fe,CgCloseO as ge}from"react-icons/cg";import W from"immer";import{css as V}from"@emotion/react";var Ce=V`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`,lt=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=R(r),i=O(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=O(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(b=>H(b.cat,b.key)===f.dim))},[i,t]),[c,E]=N(""),[u,g]=N(50),[D,m]=N(!1),p=i==null?void 0:i.find(f=>f.dim===c),w=()=>{let[f,b]=c.split("_");k([...t!=null?t:[],{cat:f,key:b,str:u}]),E(""),g(50),m(!1)},k=f=>{let b=f.length===0?null:f;n(b)};return l?e(P,{type:"danger"},l):a||o===null?e(pe,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!D&&!t?e(P,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(G.Fragment,null,o&&e(ye,{list:t!=null?t:[],setList:k,dimIndex:o.dimIndex}),D&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(me,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>E(f.currentTarget.value)})),e(be,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(de,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:w,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!D&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(x,{icon:q,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:Ce,title:"none",href:"#"}),e(A,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(ve,{contextConfig:r}))},ve=({contextConfig:t})=>e(P,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),F=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),K=V`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -19,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}fr
   background-color: var(--gray-100);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
-`,de=G`
-  ${H}
+`,he=V`
+  ${K}
   left: auto;
   right: var(--spacing-sm);
-`,me=({score:t,setValue:n,...o})=>{let s=r=>{t!==0&&n(r==="increment"?t+10:t-10)};return e("div",{css:{position:"relative"},...o},e(N,{label:"Strength",id:"enrichment-score",type:"text",min:0,value:t||"",onChange:r=>n(Number(r.currentTarget.value)),css:{textAlign:"center",width:"auto"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("decrement"),disabled:t===0,css:H},e(I,{icon:ue,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("increment"),css:de},e(I,{icon:le,iconColor:"gray",size:"1.5rem"})))},fe=({list:t,setList:n,dimIndex:o})=>{let s=a=>{n(U(t,i=>{i.splice(a,1)}))},r=(a,i)=>{n(U(t,l=>{l[a].str=Number(i)}))};return e(A.Fragment,null,t.map((a,i)=>{let l=o[B(a.cat,a.key)];return e("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)"},key:`${a.cat}-${a.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:l?void 0:"var(--brand-secondary-5)"}},l?l.displayName:`Enrichment '${a.cat}_${a.key}' is unknown`),e("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:"7rem"}},e(N,{type:"text",min:0,title:"score",value:a.str||50,css:{textAlign:"center",width:"auto"},onChange:f=>r(i,f.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(i),css:{border:0}},e(I,{icon:ce,iconColor:"red",size:"1.5rem"})))}))};import{useState as ge}from"react";import{LoadingIndicator as Ce,Callout as T,InputSelect as q,InputComboBox as ve,InputInlineSelect as he,Icon as F}from"@uniformdev/design-system";import K from"immer";import{CgCloseO as be,CgMathPlus as ye}from"react-icons/cg";import{css as O}from"@emotion/react";var k="6rem",W=O`
+`,be=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(_,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(F(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:K},e(x,{icon:fe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:he},e(x,{icon:q,iconColor:"gray",size:"1.5rem"})))},ye=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(W(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(W(t,c=>{c[o].str=F(Number(l)||0,i)}))};return e(G.Fragment,null,t.map((o,l)=>{let i=r[H(o.cat,o.key)];return e("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",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("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"}},e(_,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(x,{icon:ge,iconColor:"red",size:"1.5rem"})))}))};import{useState as we}from"react";import{LoadingIndicator as Ee,Callout as $,InputSelect as Q,InputComboBox as ke,InputInlineSelect as Re,Icon as Z}from"@uniformdev/design-system";import j from"immer";import{CgCloseO as xe,CgMathPlus as Ie}from"react-icons/cg";import{css as X}from"@emotion/react";var L="6rem",Y=X`
   position: relative;
   padding: var(--spacing-base);
   border: 1px solid var(--gray-300);
   box-shadow: var(--shadow-base);
   background-color: white;
   border-radius: var(--rounded-base);
-  margin-top: ${k};
+  margin-top: ${L};
   display: flex;
   &:before {
     content: '';
     display: block;
     width: 1px;
-    height: ${k};
+    height: ${L};
     background-color: var(--gray-300);
     position: absolute;
-    top: -${k};
+    top: -${L};
     left: var(--spacing-lg);
   }
   &:first-of-type {
@@ -48,10 +61,9 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}fr
       display: none;
     }
   }
-`,_=O`
+`,J=X`
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--spacing-base);
   flex-grow: 1;
   margin-right: var(--spacing-base);
-`;var De=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],ct=({value:t,setValue:n,contextConfig:o})=>{let{loading:s,result:r,error:a}=D(o),i=t||{crit:[]},l=c=>{n({...i,op:c==="&"?void 0:c})},f=()=>{n({...i,crit:[...i.crit,{l:"",op:">",r:50}]})},u=(c,d)=>{n(K(i,h=>{h.crit[d]=c}))},p=c=>{let d=K(i,m=>{m.crit.splice(c,1)}),h=d.crit.length===0?null:d;n(h)};return a?e(T,{type:"danger"},a):s||r===null?e(Ce,null):e("fieldset",{css:{marginBlock:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"),i.crit.length?i.crit.map((c,d)=>{var m,b;let h=((m=c.l)==null?void 0:m.length)>0;return e("div",{css:W,key:d},e("div",{css:_},e(q,{name:`lhs-${d}`,label:"Match Dimension",showLabel:!1,value:c.l,options:[{label:"Select",value:""},...r.dimensions.map(v=>({label:v.displayName,value:v.dim}))],onChange:v=>{u({...c,l:v.target.value},d)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(q,{css:{width:"100%"},name:`op-${d}`,label:"Operator",showLabel:!1,value:c.op,options:De.map(v=>({label:v.name,value:v.value})),onChange:v=>{let x=v.target.value;u(x==="+"||x==="-"?{...c,op:x,r:void 0,rDim:void 0}:{...c,op:v.target.value},d)},disabled:!h})),c.op==="+"||c.op==="-"?null:e(Ee,{critHasLhs:h,currentCriteria:c,dimensions:r,update:u,index:d})),e("button",{type:"button",onClick:()=>p(d),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(F,{icon:be,iconColor:"red",size:"1.5rem"})),d>0?e("div",{css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(he,{disabled:d>1,value:(b=i.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:v=>{l(v.value)}})):null)}):e(T,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'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.')),r.dimensions.length===0?e(T,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",onClick:f,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(F,{icon:ye,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Ee({update:t,currentCriteria:n,index:o,dimensions:s,critHasLhs:r}){var l,f;let[a,i]=ge(n.r&&E(n.r)!==null?n.r.toString(10):"");return e(ve,{name:`rhs-${o}`,inputValue:a,value:{label:n.rDim?(f=(l=s.dimIndex[n.rDim])==null?void 0:l.displayName)!=null?f:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:p})=>({...u,background:p?"transparent":void 0,fontSize:p?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var p;u&&t({...n,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0},o)},onInputChange:(u,p)=>{let c=E(u);p.action==="input-change"||p.action==="set-value"?(i(u),(c||u==="")&&t({...n,r:u,rDim:void 0},o)):!c&&!E(p.prevInputValue)&&i(u)},isDisabled:!r,noOptionsMessage:({inputValue:u})=>E(u)?`${u}`:"No options match"})}function E(t){return/^\d+$/.test(t.toString(10))}import ke from"react";import{useEffect as Re,useState as we}from"react";import{ManifestClient as xe,ApiClientError as Ie}from"@uniformdev/context/api";function R({apiHost:t,apiKey:n,projectId:o}){let[s,r]=we({loading:!1,notConfigured:!1,error:null,result:null});return Re(()=>{if(!o||!n||!t){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let l=await new xe({projectId:o,apiKey:n,apiHost:t}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:l})}catch(i){let l;i instanceof Ie?(i.statusCode===403&&(l=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),l=i.message):l=i.toString(),r({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[t,n,o]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as Te}from"@uniformdev/design-system";function yt({children:t,versionMap:n,contextConfig:o}){let{loading:s,result:r}=R(o);if(s)return e(Te,null);if(r){let a=n[r.project.ui_version];if(a)return e(a,null)}return e(ke.Fragment,null,t)}import Y,{createContext as Me,useContext as M}from"react";import{LoadingIndicator as Se}from"@uniformdev/design-system";var w=Me(null),Mt=({loadingComponent:t,errorComponent:n,contextConfig:o,children:s})=>{let r=R(o),a=D(o);return r.error||r.notConfigured?n?e(n,{contextConfig:o,result:r}):e(Y.Fragment,null,"ErrorComponent is not configured"):a.error||a.notConfigured?n?e(n,{contextConfig:o,result:a}):e(Y.Fragment,null,"ErrorComponent is not configured"):r.loading||a.loading?t?e(t,null):e(Se,null):e(w.Provider,{value:{manifest:r.result,dimensions:a.result,contextConfig:o}},s)};function St(){let t=M(w);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Pt(){let t=M(w);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Vt(){let t=M(w);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Pe}from"uuid";import{ManifestClient as Ve}from"@uniformdev/context/api";var X=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Pe(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Ve({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let o=await n.get({preview:!0});return{valid:!0,result:o}}catch(o){return{valid:!1,error:o}}};import{useEffect as Le,useState as $e}from"react";var Gt=t=>{let[n,o]=$e({validating:!1,error:void 0}),{apiKey:s,apiHost:r,projectId:a}=t||{};return Le(()=>{if(!s||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:l,result:f}=await X({apiHost:r,apiKey:s,projectId:a});o(l?{error:l,validating:!1}:{error:void 0,validating:!1,result:f})})()},[r,s,a]),{validating:n.validating,error:n.error,result:n.result}};function Ot(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Wt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{Mt as ContextData,P as EditLink,tt as EnrichmentTag,ct as PersonalizationCriteria,yt as ProjectUIVersion,De as equality,Ot as isEnrichmentTagData,Wt as isPersonalizationCriteriaData,St as useContextConfig,R as useContextData,D as useDimensions,Vt as useDimensionsDataContext,Pt as useManifest,Gt as useValidateContextConfig,X as validateContextConfig};
+`;var Me=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],vt=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=R(r),c=t||{crit:[]},E=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(j(c,w=>{w.crit[p]=m}))},D=m=>{let p=j(c,k=>{k.crit.splice(m,1)}),w=p.crit.length===0?null:p;n(w)};return d?e($,{type:"danger"},d):l||i===null?e(Ee,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,b;let w=((f=m.l)==null?void 0:f.length)>0,k=m.op!=="+"&&m.op!=="-";return e("div",{css:Y,key:p},e("div",{css:J,style:{gridTemplateColumns:`repeat(${k?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Q,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(h=>({label:h.displayName,value:h.dim}))],onChange:h=>{g({...m,l:h.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Q,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Me.map(h=>({label:h.name,value:h.value})),onChange:h=>{let S=h.target.value;g(S==="+"||S==="-"?{...m,op:S,r:void 0,rDim:void 0}:{...m,op:h.target.value},p)},disabled:!w})),k?e(Te,{critHasLhs:w,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>D(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(Z,{icon:xe,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Re,{disabled:p>1,value:(b=c.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{E(h.value)}})):null)}):e($,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'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.')),i.dimensions.length===0?e($,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(Z,{icon:Ie,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Te({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,E;let[i,d]=we(n.r&&I(n.r)!==null?n.r.toString(10):"");return e(ke,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(E=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?E:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let D=I(u);g.action==="input-change"||g.action==="set-value"?(d(u),(D||u==="")&&t({...n,r:u,rDim:void 0},r)):!D&&!I(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>I(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function I(t){return/^\d+$/.test(t.toString(10))}import Le from"react";import{useEffect as Se,useState as Ne}from"react";import{ManifestClient as Pe,ApiClientError as Ve}from"@uniformdev/context/api";function M({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Ne({loading:!1,notConfigured:!1,error:null,result:null});return Se(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Pe({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Ve?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as $e}from"@uniformdev/design-system";function It({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=M(r);if(s)return e($e,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e(Le.Fragment,null,t)}import ee,{createContext as ze,useContext as z}from"react";import{LoadingIndicator as Ue}from"@uniformdev/design-system";var T=ze(null),zt=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=M(r),o=R(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(ee.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(ee.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(Ue,null):e(T.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function Ut(){let t=z(T);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function At(){let t=z(T);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Bt(){let t=z(T);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Ae}from"uuid";import{ManifestClient as Be}from"@uniformdev/context/api";var te=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ae(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Be({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as Oe,useState as We}from"react";var Kt=t=>{let[n,r]=We({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return Oe(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await te({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Yt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Jt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{zt as ContextData,A as EditLink,lt as EnrichmentTag,vt as PersonalizationCriteria,It as ProjectUIVersion,Ce as addEnrichmentLink,Me as equality,Yt as isEnrichmentTagData,Jt as isPersonalizationCriteriaData,Ut as useContextConfig,M as useContextData,R as useDimensions,Bt as useDimensionsDataContext,At as useManifest,Kt as useValidateContextConfig,te as validateContextConfig};

package/dist/index.js

@@ -1,13 +1,26 @@
-var ce=Object.create;var V=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ge=(e,n)=>{for(var r in n)V(e,r,{get:n[r],enumerable:!0})},P=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of me(n))!pe.call(e,o)&&o!==r&&V(e,o,{get:()=>n[o],enumerable:!(s=de(n,o))||s.enumerable});return e},y=(e,n,r)=>(P(e,n,"default"),r&&P(r,n,"default")),k=(e,n,r)=>(r=e!=null?ce(fe(e)):{},P(n||!e||!e.__esModule?V(r,"default",{value:e,enumerable:!0}):r,e)),Ce=e=>P(V({},"__esModule",{value:!0}),e);var h={};ge(h,{ContextData:()=>Ie,EditLink:()=>H,EnrichmentTag:()=>he,PersonalizationCriteria:()=>Re,ProjectUIVersion:()=>xe,equality:()=>oe,isEnrichmentTagData:()=>Pe,isPersonalizationCriteriaData:()=>Ve,useContextConfig:()=>ke,useContextData:()=>S,useDimensions:()=>I,useDimensionsDataContext:()=>Me,useManifest:()=>Te,useValidateContextConfig:()=>Se,validateContextConfig:()=>Y});module.exports=Ce(h);var t=require("@emotion/react"),R=k(require("react"));var Q=require("@uniformdev/design-system"),Z=require("react-icons/cg");var X=require("@emotion/react"),J=X.css`
+var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var De=(e,n)=>{for(var r in n)z(e,r,{get:n[r],enumerable:!0})},$=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of he(n))!ye.call(e,i)&&i!==r&&z(e,i,{get:()=>n[i],enumerable:!(s=ve(n,i))||s.enumerable});return e},D=(e,n,r)=>($(e,n,"default"),r&&$(r,n,"default")),P=(e,n,r)=>(r=e!=null?Ce(be(e)):{},$(n||!e||!e.__esModule?z(r,"default",{value:e,enumerable:!0}):r,e)),we=e=>$(z({},"__esModule",{value:!0}),e);var b={};De(b,{ContextData:()=>Ve,EditLink:()=>F,EnrichmentTag:()=>ke,PersonalizationCriteria:()=>Se,ProjectUIVersion:()=>Pe,addEnrichmentLink:()=>oe,equality:()=>ue,isEnrichmentTagData:()=>Ae,isPersonalizationCriteriaData:()=>Be,useContextConfig:()=>Le,useContextData:()=>L,useDimensions:()=>S,useDimensionsDataContext:()=>ze,useManifest:()=>$e,useValidateContextConfig:()=>Ue,validateContextConfig:()=>Z});module.exports=we(b);var t=require("@emotion/react"),k=P(require("react"));var te=require("@uniformdev/design-system"),ne=require("react-icons/cg");var j=require("@emotion/react"),ee=j.css`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
   color: var(--brand-secondary-3);
   &:hover,
   &:focus {
     text-decoration-line: underline;
   }
-`;var H=({linkTo:e,name:n,linkText:r=`Edit ${n} Component`})=>(0,t.jsx)("a",{css:J,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:e},r,(0,t.jsx)(Q.Icon,{icon:Z.CgChevronRight,iconColor:"currentColor",size:"1.5rem"}));var w=k(require("react"));var L=require("react"),T=require("@uniformdev/context/api");function j(e,n,r){return e.reduce((s,o)=>{let a=n(o);if(typeof a=="undefined"||a===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(o)]=r?r(o):o,s},{})}function I({apiHost:e,apiKey:n,projectId:r}){let[s,o]=(0,L.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,L.useEffect)(()=>{if(!r||!n||!e){o({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{o({notConfigured:!1,loading:!0,error:null,result:null});try{let l=(await new T.DimensionClient({projectId:r,apiKey:n,apiHost:e}).get()).dimensions.map(u=>({...u,displayName:(0,T.computeDimensionDisplayName)(u)})),g={dimensions:l,dimIndex:j(l,u=>u.dim,u=>u)};o({notConfigured:!1,loading:!1,error:null,result:g})}catch(i){let l;i instanceof T.ApiClientError?l=i.message:l=i.toString(),o({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var W=require("@uniformdev/context"),f=require("@uniformdev/design-system"),M=require("react-icons/cg"),O=k(require("immer")),_=require("@emotion/react"),he=({value:e,setValue:n,contextConfig:r})=>{let{loading:s,result:o,error:a}=I(r),i=(0,w.useMemo)(()=>{if(o)return o.dimensions.filter(m=>m.category==="ENR")},[o]),l=(0,w.useMemo)(()=>{if(!e)return i;if(i)return i.filter(m=>!e.some(E=>(0,W.getEnrichmentVectorKey)(E.cat,E.key)===m.dim))},[i,e]),[g,u]=(0,w.useState)(""),[C,c]=(0,w.useState)(50),d=()=>{let[m,E]=g.split("_");D([...e!=null?e:[],{cat:m,key:E,str:C}]),u(""),c(50)},D=m=>{let E=m.length===0?null:m;n(E)};return a?(0,t.jsx)(f.Callout,{type:"danger"},a):s||o===null?(0,t.jsx)(f.LoadingIndicator,null):(0,t.jsx)("fieldset",{css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags"),(0,t.jsx)(H,{name:"Enrichments",linkText:"Edit Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`})),i!=null&&i.length?(0,t.jsx)(w.default.Fragment,null,o&&(0,t.jsx)(De,{list:e!=null?e:[],setList:D,dimIndex:o.dimIndex}),l&&l.length>0?(0,t.jsx)("div",{css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",alignItems:"flex-end"}},(0,t.jsx)("div",{css:{flexGrow:1}},(0,t.jsx)(f.InputSelect,{name:"enrichment-type",label:"Add Tag",showLabel:!0,value:g,options:[{label:"Select",value:""},...l.map(m=>({label:m.displayName,value:m.dim}))],onChange:m=>u(m.currentTarget.value)})),(0,t.jsx)(ye,{score:C,setValue:c,css:{flexBasis:"9rem"}}),(0,t.jsx)(f.Button,{buttonType:"secondary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0},onClick:d,disabled:!g},"Add")):null):(0,t.jsx)(f.Callout,{title:"Enrichments",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"You do not have any Enrichments configured. Create your first"," ",(0,t.jsx)("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Enrichment"))))},ee=_.css`
+`;var F=({linkTo:e,name:n,linkText:r=`Edit ${n} Component`})=>(0,t.jsx)("a",{css:ee,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:e},r,(0,t.jsx)(te.Icon,{icon:ne.CgChevronRight,iconColor:"currentColor",size:"1.5rem"}));var w=P(require("react"));var U=require("react"),V=require("@uniformdev/context/api");function re(e,n,r){return e.reduce((s,i)=>{let o=n(i);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(i)]=r?r(i):i,s},{})}function S({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,U.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,U.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=(await new V.DimensionClient({projectId:r,apiKey:n,apiHost:e}).get()).dimensions.map(c=>({...c,displayName:(0,V.computeDimensionDisplayName)(c)})),d={dimensions:a,dimIndex:re(a,c=>c.dim,c=>c)};i({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let a;l instanceof V.ApiClientError?a=l.message:a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var X=require("@uniformdev/context"),g=require("@uniformdev/design-system"),N=require("react-icons/cg"),K=P(require("immer")),A=require("@emotion/react"),oe=A.css`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`,ke=({value:e,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:i,result:o,error:l}=S(r),a=(0,w.useMemo)(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=(0,w.useMemo)(()=>{if(!e)return a;if(a)return a.filter(f=>!e.some(E=>(0,X.getEnrichmentVectorKey)(E.cat,E.key)===f.dim))},[a,e]),[c,M]=(0,w.useState)(""),[u,C]=(0,w.useState)(50),[x,m]=(0,w.useState)(!1),p=a==null?void 0:a.find(f=>f.dim===c),I=()=>{let[f,E]=c.split("_");T([...e!=null?e:[],{cat:f,key:E,str:u}]),M(""),C(50),m(!1)},T=f=>{let E=f.length===0?null:f;n(E)};return l?(0,t.jsx)(g.Callout,{type:"danger"},l):i||o===null?(0,t.jsx)(g.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"enrichment-tag"},s?(0,t.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,a!=null&&a.length?!x&&!e?(0,t.jsx)(g.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Click"," ",(0,t.jsx)("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):(0,t.jsx)(w.default.Fragment,null,o&&(0,t.jsx)(Me,{list:e!=null?e:[],setList:T,dimIndex:o.dimIndex}),x&&d&&d.length>0?(0,t.jsx)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},(0,t.jsx)("div",{css:{flexGrow:1}},(0,t.jsx)(g.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>M(f.currentTarget.value)})),(0,t.jsx)(Ie,{score:u,setValue:C,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),(0,t.jsx)(g.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:I,disabled:!c},"Add")):null,(0,t.jsx)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!x&&d&&d.length>0&&e?(0,t.jsx)("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(g.Icon,{icon:N.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add More"):(0,t.jsx)("a",{css:oe,title:"none",href:"#"}),(0,t.jsx)(F,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):(0,t.jsx)(Re,{contextConfig:r}))},Re=({contextConfig:e})=>(0,t.jsx)(g.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",(0,t.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),ie=(e,n=100,r=0)=>Math.max(Math.min(e,n),r),ae=A.css`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -19,27 +32,27 @@ var ce=Object.create;var V=Object.defineProperty;var de=Object.getOwnPropertyDes
   background-color: var(--gray-100);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
-`,be=_.css`
-  ${ee}
+`,xe=A.css`
+  ${ae}
   left: auto;
   right: var(--spacing-sm);
-`,ye=({score:e,setValue:n,...r})=>{let s=o=>{e!==0&&n(o==="increment"?e+10:e-10)};return(0,t.jsx)("div",{css:{position:"relative"},...r},(0,t.jsx)(f.Input,{label:"Strength",id:"enrichment-score",type:"text",min:0,value:e||"",onChange:o=>n(Number(o.currentTarget.value)),css:{textAlign:"center",width:"auto"}}),(0,t.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("decrement"),disabled:e===0,css:ee},(0,t.jsx)(f.Icon,{icon:M.CgMathMinus,iconColor:"gray",size:"1.5rem"})),(0,t.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("increment"),css:be},(0,t.jsx)(f.Icon,{icon:M.CgMathPlus,iconColor:"gray",size:"1.5rem"})))},De=({list:e,setList:n,dimIndex:r})=>{let s=a=>{n((0,O.default)(e,i=>{i.splice(a,1)}))},o=(a,i)=>{n((0,O.default)(e,l=>{l[a].str=Number(i)}))};return(0,t.jsx)(w.default.Fragment,null,e.map((a,i)=>{let l=r[(0,W.getEnrichmentVectorKey)(a.cat,a.key)];return(0,t.jsx)("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)"},key:`${a.cat}-${a.key}`},(0,t.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:l?void 0:"var(--brand-secondary-5)"}},l?l.displayName:`Enrichment '${a.cat}_${a.key}' is unknown`),(0,t.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:"7rem"}},(0,t.jsx)(f.Input,{type:"text",min:0,title:"score",value:a.str||50,css:{textAlign:"center",width:"auto"},onChange:g=>o(i,g.currentTarget.value)})),(0,t.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>s(i),css:{border:0}},(0,t.jsx)(f.Icon,{icon:M.CgCloseO,iconColor:"red",size:"1.5rem"})))}))};var re=require("react");var p=require("@uniformdev/design-system"),K=k(require("immer")),z=require("react-icons/cg");var F=require("@emotion/react"),q="6rem",te=F.css`
+`,Ie=({score:e,setValue:n,cap:r=100,...s})=>{let i=o=>{let l=o==="increment"?e+10:e-10;l<0&&(l=0),l>r&&(l=r),n(l)};return(0,t.jsx)("div",{css:{position:"relative"},...s},(0,t.jsx)(g.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:e,onChange:o=>n(ie(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,t.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>i("decrement"),disabled:e===0,className:"scoreCounterButton",css:ae},(0,t.jsx)(g.Icon,{icon:N.CgMathMinus,iconColor:"gray",size:"1.5rem"})),(0,t.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>i("increment"),className:"scoreCounterButton",css:xe},(0,t.jsx)(g.Icon,{icon:N.CgMathPlus,iconColor:"gray",size:"1.5rem"})))},Me=({list:e,setList:n,dimIndex:r})=>{let s=o=>{n((0,K.default)(e,l=>{l.splice(o,1)}))},i=(o,l)=>{var d;let a=(d=r[`${e[o].cat}_${e[o].key}`])==null?void 0:d.cap;n((0,K.default)(e,c=>{c[o].str=ie(Number(l)||0,a)}))};return(0,t.jsx)(w.default.Fragment,null,e.map((o,l)=>{let a=r[(0,X.getEnrichmentVectorKey)(o.cat,o.key)];return(0,t.jsx)("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",key:`${o.cat}-${o.key}`},(0,t.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:a?void 0:"var(--brand-secondary-5)"}},a?a.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),(0,t.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"}},(0,t.jsx)(g.Input,{type:"text",min:0,max:a.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>i(l,d.currentTarget.value)})),(0,t.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},(0,t.jsx)(g.Icon,{icon:N.CgCloseO,iconColor:"red",size:"1.5rem"})))}))};var ce=require("react");var v=require("@uniformdev/design-system"),Q=P(require("immer")),O=require("react-icons/cg");var J=require("@emotion/react"),Y="6rem",se=J.css`
   position: relative;
   padding: var(--spacing-base);
   border: 1px solid var(--gray-300);
   box-shadow: var(--shadow-base);
   background-color: white;
   border-radius: var(--rounded-base);
-  margin-top: ${q};
+  margin-top: ${Y};
   display: flex;
   &:before {
     content: '';
     display: block;
     width: 1px;
-    height: ${q};
+    height: ${Y};
     background-color: var(--gray-300);
     position: absolute;
-    top: -${q};
+    top: -${Y};
     left: var(--spacing-lg);
   }
   &:first-of-type {
@@ -48,10 +61,9 @@ var ce=Object.create;var V=Object.defineProperty;var de=Object.getOwnPropertyDes
       display: none;
     }
   }
-`,ne=F.css`
+`,le=J.css`
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--spacing-base);
   flex-grow: 1;
   margin-right: var(--spacing-base);
-`;var oe=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Re=({value:e,setValue:n,contextConfig:r})=>{let{loading:s,result:o,error:a}=I(r),i=e||{crit:[]},l=c=>{n({...i,op:c==="&"?void 0:c})},g=()=>{n({...i,crit:[...i.crit,{l:"",op:">",r:50}]})},u=(c,d)=>{n((0,K.default)(i,D=>{D.crit[d]=c}))},C=c=>{let d=(0,K.default)(i,m=>{m.crit.splice(c,1)}),D=d.crit.length===0?null:d;n(D)};return a?(0,t.jsx)(p.Callout,{type:"danger"},a):s||o===null?(0,t.jsx)(p.LoadingIndicator,null):(0,t.jsx)("fieldset",{css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"),i.crit.length?i.crit.map((c,d)=>{var m,E;let D=((m=c.l)==null?void 0:m.length)>0;return(0,t.jsx)("div",{css:te,key:d},(0,t.jsx)("div",{css:ne},(0,t.jsx)(p.InputSelect,{name:`lhs-${d}`,label:"Match Dimension",showLabel:!1,value:c.l,options:[{label:"Select",value:""},...o.dimensions.map(b=>({label:b.displayName,value:b.dim}))],onChange:b=>{u({...c,l:b.target.value},d)}}),(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)"}},(0,t.jsx)("span",{css:{color:"var(--gray-700)"}},"score"),(0,t.jsx)(p.InputSelect,{css:{width:"100%"},name:`op-${d}`,label:"Operator",showLabel:!1,value:c.op,options:oe.map(b=>({label:b.name,value:b.value})),onChange:b=>{let G=b.target.value;u(G==="+"||G==="-"?{...c,op:G,r:void 0,rDim:void 0}:{...c,op:b.target.value},d)},disabled:!D})),c.op==="+"||c.op==="-"?null:(0,t.jsx)(we,{critHasLhs:D,currentCriteria:c,dimensions:o,update:u,index:d})),(0,t.jsx)("button",{type:"button",onClick:()=>C(d),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)(p.Icon,{icon:z.CgCloseO,iconColor:"red",size:"1.5rem"})),d>0?(0,t.jsx)("div",{css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},(0,t.jsx)(p.InputInlineSelect,{disabled:d>1,value:(E=i.op)!=null?E:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:b=>{l(b.value)}})):null)}):(0,t.jsx)(p.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,'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.')),o.dimensions.length===0?(0,t.jsx)(p.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"You do not have any dimensions configured. Create your first"," ",(0,t.jsx)("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):(0,t.jsx)("button",{type:"button",onClick:g,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(p.Icon,{icon:z.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function we({update:e,currentCriteria:n,index:r,dimensions:s,critHasLhs:o}){var l,g;let[a,i]=(0,re.useState)(n.r&&$(n.r)!==null?n.r.toString(10):"");return(0,t.jsx)(p.InputComboBox,{name:`rhs-${r}`,inputValue:a,value:{label:n.rDim?(g=(l=s.dimIndex[n.rDim])==null?void 0:l.displayName)!=null?g:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:C})=>({...u,background:C?"transparent":void 0,fontSize:C?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var C;u&&e({...n,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0},r)},onInputChange:(u,C)=>{let c=$(u);C.action==="input-change"||C.action==="set-value"?(i(u),(c||u==="")&&e({...n,r:u,rDim:void 0},r)):!c&&!$(C.prevInputValue)&&i(u)},isDisabled:!o,noOptionsMessage:({inputValue:u})=>$(u)?`${u}`:"No options match"})}function $(e){return/^\d+$/.test(e.toString(10))}var ie=k(require("react"));var U=require("react"),A=require("@uniformdev/context/api");function S({apiHost:e,apiKey:n,projectId:r}){let[s,o]=(0,U.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,U.useEffect)(()=>{if(!r||!n||!e){o({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{o({notConfigured:!1,loading:!0,error:null,result:null});try{let l=await new A.ManifestClient({projectId:r,apiKey:n,apiHost:e}).get({preview:!0});o({notConfigured:!1,loading:!1,error:null,result:l})}catch(i){let l;i instanceof A.ApiClientError?(i.statusCode===403&&(l=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),l=i.message):l=i.toString(),o({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var ae=require("@uniformdev/design-system");function xe({children:e,versionMap:n,contextConfig:r}){let{loading:s,result:o}=S(r);if(s)return(0,t.jsx)(ae.LoadingIndicator,null);if(o){let a=n[o.project.ui_version];if(a)return(0,t.jsx)(a,null)}return(0,t.jsx)(ie.default.Fragment,null,e)}var x=k(require("react"));var se=require("@uniformdev/design-system"),B=(0,x.createContext)(null),Ie=({loadingComponent:e,errorComponent:n,contextConfig:r,children:s})=>{let o=S(r),a=I(r);return o.error||o.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:o}):(0,t.jsx)(x.default.Fragment,null,"ErrorComponent is not configured"):a.error||a.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:a}):(0,t.jsx)(x.default.Fragment,null,"ErrorComponent is not configured"):o.loading||a.loading?e?(0,t.jsx)(e,null):(0,t.jsx)(se.LoadingIndicator,null):(0,t.jsx)(B.Provider,{value:{manifest:o.result,dimensions:a.result,contextConfig:r}},s)};function ke(){let e=(0,x.useContext)(B);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Te(){let e=(0,x.useContext)(B);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Me(){let e=(0,x.useContext)(B);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var le=require("uuid"),ue=require("@uniformdev/context/api"),Y=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,le.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new ue.ManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};var N=require("react");var Se=e=>{let[n,r]=(0,N.useState)({validating:!1,error:void 0}),{apiKey:s,apiHost:o,projectId:a}=e||{};return(0,N.useEffect)(()=>{if(!s||!o)return;(async()=>{r({validating:!0,error:void 0});let{error:l,result:g}=await Y({apiHost:o,apiKey:s,projectId:a});r(l?{error:l,validating:!1}:{error:void 0,validating:!1,result:g})})()},[o,s,a]),{validating:n.validating,error:n.error,result:n.result}};function Pe(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Ve(e){return e.crit!==void 0}y(h,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,EditLink,EnrichmentTag,PersonalizationCriteria,ProjectUIVersion,equality,isEnrichmentTagData,isPersonalizationCriteriaData,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
+`;var ue=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Se=({value:e,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:i,displayTitle:o=!0})=>{let{loading:l,result:a,error:d}=S(r),c=e||{crit:[]},M=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},C=(m,p)=>{n((0,Q.default)(c,I=>{I.crit[p]=m}))},x=m=>{let p=(0,Q.default)(c,T=>{T.crit.splice(m,1)}),I=p.crit.length===0?null:p;n(I)};return d?(0,t.jsx)(v.Callout,{type:"danger"},d):l||a===null?(0,t.jsx)(v.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"personalization-criteria"},o?(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,E;let I=((f=m.l)==null?void 0:f.length)>0,T=m.op!=="+"&&m.op!=="-";return(0,t.jsx)("div",{css:se,key:p},(0,t.jsx)("div",{css:le,style:{gridTemplateColumns:`repeat(${T?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},(0,t.jsx)(v.InputSelect,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...a.dimensions.map(y=>({label:y.displayName,value:y.dim}))],onChange:y=>{C({...m,l:y.target.value},p)}}),(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},(0,t.jsx)("span",{css:{color:"var(--gray-700)"}},"score"),(0,t.jsx)(v.InputSelect,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:ue.map(y=>({label:y.name,value:y.value})),onChange:y=>{let q=y.target.value;C(q==="+"||q==="-"?{...m,op:q,r:void 0,rDim:void 0}:{...m,op:y.target.value},p)},disabled:!I})),T?(0,t.jsx)(Ne,{critHasLhs:I,currentCriteria:m,dimensions:a,update:C,index:p,onMenuOpen:s,onMenuClose:i}):null),(0,t.jsx)("button",{type:"button",onClick:()=>x(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)(v.Icon,{icon:O.CgCloseO,iconColor:"red",size:"1.5rem"})),p>0?(0,t.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},(0,t.jsx)(v.InputInlineSelect,{disabled:p>1,value:(E=c.op)!=null?E:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:y=>{M(y.value)}})):null)}):(0,t.jsx)(v.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,'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.')),a.dimensions.length===0?(0,t.jsx)(v.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"You do not have any dimensions configured. Create your first"," ",(0,t.jsx)("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):(0,t.jsx)("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(v.Icon,{icon:O.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Ne({update:e,currentCriteria:n,index:r,dimensions:s,critHasLhs:i,onMenuOpen:o,onMenuClose:l}){var c,M;let[a,d]=(0,ce.useState)(n.r&&B(n.r)!==null?n.r.toString(10):"");return(0,t.jsx)(v.InputComboBox,{name:`rhs-${r}`,className:"input-combobox",inputValue:a,value:{label:n.rDim?(M=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?M:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:C})=>({...u,background:C?"transparent":void 0,fontSize:C?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var C;u&&e({...n,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0},r)},onInputChange:(u,C)=>{let x=B(u);C.action==="input-change"||C.action==="set-value"?(d(u),(x||u==="")&&e({...n,r:u,rDim:void 0},r)):!x&&!B(C.prevInputValue)&&d(u)},isDisabled:!i,noOptionsMessage:({inputValue:u})=>B(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function B(e){return/^\d+$/.test(e.toString(10))}var de=P(require("react"));var W=require("react"),G=require("@uniformdev/context/api");function L({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,W.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,W.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=await new G.ManifestClient({projectId:r,apiKey:n,apiHost:e}).get({preview:!0});i({notConfigured:!1,loading:!1,error:null,result:a})}catch(l){let a;l instanceof G.ApiClientError?(l.statusCode===403&&(a=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),a=l.message):a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var me=require("@uniformdev/design-system");function Pe({children:e,versionMap:n,contextConfig:r}){let{loading:s,result:i}=L(r);if(s)return(0,t.jsx)(me.LoadingIndicator,null);if(i){let o=n[i.project.ui_version];if(o)return(0,t.jsx)(o,null)}return(0,t.jsx)(de.default.Fragment,null,e)}var R=P(require("react"));var pe=require("@uniformdev/design-system"),H=(0,R.createContext)(null),Ve=({loadingComponent:e,errorComponent:n,contextConfig:r,children:s})=>{let i=L(r),o=S(r);return i.error||i.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:i}):(0,t.jsx)(R.default.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:o}):(0,t.jsx)(R.default.Fragment,null,"ErrorComponent is not configured"):i.loading||o.loading?e?(0,t.jsx)(e,null):(0,t.jsx)(pe.LoadingIndicator,null):(0,t.jsx)(H.Provider,{value:{manifest:i.result,dimensions:o.result,contextConfig:r}},s)};function Le(){let e=(0,R.useContext)(H);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function $e(){let e=(0,R.useContext)(H);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function ze(){let e=(0,R.useContext)(H);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var fe=require("uuid"),ge=require("@uniformdev/context/api"),Z=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,fe.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new ge.ManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};var _=require("react");var Ue=e=>{let[n,r]=(0,_.useState)({validating:!1,error:void 0}),{apiKey:s,apiHost:i,projectId:o}=e||{};return(0,_.useEffect)(()=>{if(!s||!i)return;(async()=>{r({validating:!0,error:void 0});let{error:a,result:d}=await Z({apiHost:i,apiKey:s,projectId:o});r(a?{error:a,validating:!1}:{error:void 0,validating:!1,result:d})})()},[i,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Ae(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Be(e){return e.crit!==void 0}D(b,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,EditLink,EnrichmentTag,PersonalizationCriteria,ProjectUIVersion,addEnrichmentLink,equality,isEnrichmentTagData,isPersonalizationCriteriaData,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});

package/dist/index.mjs

@@ -1,13 +1,26 @@
-import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}from"@uniformdev/design-system";import{CgChevronRight as j}from"react-icons/cg";import{css as J}from"@emotion/react";var S=J`
+import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as oe}from"@uniformdev/design-system";import{CgChevronRight as ie}from"react-icons/cg";import{css as ne}from"@emotion/react";var U=ne`
   display: flex;
   align-items: center;
   font-weight: var(--fw-bold);
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
   color: var(--brand-secondary-3);
   &:hover,
   &:focus {
     text-decoration-line: underline;
   }
-`;var P=({linkTo:t,name:n,linkText:o=`Edit ${n} Component`})=>e("a",{css:S,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},o,e(Z,{icon:j,iconColor:"currentColor",size:"1.5rem"}));import A,{useMemo as L,useState as $}from"react";import{useEffect as ee,useState as te}from"react";import{DimensionClient as ne,computeDimensionDisplayName as re,ApiClientError as oe}from"@uniformdev/context/api";function V(t,n,o){return t.reduce((s,r)=>{let a=n(r);if(typeof a=="undefined"||a===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(r)]=o?o(r):r,s},{})}function D({apiHost:t,apiKey:n,projectId:o}){let[s,r]=te({loading:!1,notConfigured:!1,error:null,result:null});return ee(()=>{if(!o||!n||!t){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let l=(await new ne({projectId:o,apiKey:n,apiHost:t}).get()).dimensions.map(u=>({...u,displayName:re(u)})),f={dimensions:l,dimIndex:V(l,u=>u.dim,u=>u)};r({notConfigured:!1,loading:!1,error:null,result:f})}catch(i){let l;i instanceof oe?l=i.message:l=i.toString(),r({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[t,n,o]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as B}from"@uniformdev/context";import{Input as N,Button as ie,InputSelect as ae,Callout as z,Icon as I,LoadingIndicator as se}from"@uniformdev/design-system";import{CgMathPlus as le,CgMathMinus as ue,CgCloseO as ce}from"react-icons/cg";import U from"immer";import{css as G}from"@emotion/react";var tt=({value:t,setValue:n,contextConfig:o})=>{let{loading:s,result:r,error:a}=D(o),i=L(()=>{if(r)return r.dimensions.filter(m=>m.category==="ENR")},[r]),l=L(()=>{if(!t)return i;if(i)return i.filter(m=>!t.some(b=>B(b.cat,b.key)===m.dim))},[i,t]),[f,u]=$(""),[p,c]=$(50),d=()=>{let[m,b]=f.split("_");h([...t!=null?t:[],{cat:m,key:b,str:p}]),u(""),c(50)},h=m=>{let b=m.length===0?null:m;n(b)};return a?e(z,{type:"danger"},a):s||r===null?e(se,null):e("fieldset",{css:{marginBlock:"var(--spacing-base)"}},e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags"),e(P,{name:"Enrichments",linkText:"Edit Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`})),i!=null&&i.length?e(A.Fragment,null,r&&e(fe,{list:t!=null?t:[],setList:h,dimIndex:r.dimIndex}),l&&l.length>0?e("div",{css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",alignItems:"flex-end"}},e("div",{css:{flexGrow:1}},e(ae,{name:"enrichment-type",label:"Add Tag",showLabel:!0,value:f,options:[{label:"Select",value:""},...l.map(m=>({label:m.displayName,value:m.dim}))],onChange:m=>u(m.currentTarget.value)})),e(me,{score:p,setValue:c,css:{flexBasis:"9rem"}}),e(ie,{buttonType:"secondary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0},onClick:d,disabled:!f},"Add")):null):e(z,{title:"Enrichments",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any Enrichments configured. Create your first"," ",e("a",{href:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Enrichment"))))},H=G`
+`;var A=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:U,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(oe,{icon:ie,iconColor:"currentColor",size:"1.5rem"}));import G,{useMemo as O,useState as N}from"react";import{useEffect as ae,useState as se}from"react";import{DimensionClient as le,computeDimensionDisplayName as ce,ApiClientError as ue}from"@uniformdev/context/api";function B(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function R({apiHost:t,apiKey:n,projectId:r}){let[s,a]=se({loading:!1,notConfigured:!1,error:null,result:null});return ae(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new le({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:ce(c)})),d={dimensions:i,dimIndex:B(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof ue?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as H}from"@uniformdev/context";import{Input as _,Button as de,InputSelect as me,Callout as P,Icon as x,LoadingIndicator as pe}from"@uniformdev/design-system";import{CgMathPlus as q,CgMathMinus as fe,CgCloseO as ge}from"react-icons/cg";import W from"immer";import{css as V}from"@emotion/react";var Ce=V`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`,lt=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=R(r),i=O(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=O(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(b=>H(b.cat,b.key)===f.dim))},[i,t]),[c,E]=N(""),[u,g]=N(50),[D,m]=N(!1),p=i==null?void 0:i.find(f=>f.dim===c),w=()=>{let[f,b]=c.split("_");k([...t!=null?t:[],{cat:f,key:b,str:u}]),E(""),g(50),m(!1)},k=f=>{let b=f.length===0?null:f;n(b)};return l?e(P,{type:"danger"},l):a||o===null?e(pe,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!D&&!t?e(P,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(G.Fragment,null,o&&e(ye,{list:t!=null?t:[],setList:k,dimIndex:o.dimIndex}),D&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(me,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>E(f.currentTarget.value)})),e(be,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(de,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:w,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!D&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(x,{icon:q,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:Ce,title:"none",href:"#"}),e(A,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(ve,{contextConfig:r}))},ve=({contextConfig:t})=>e(P,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),F=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),K=V`
   position: absolute;
   bottom: 0.875rem;
   left: var(--spacing-sm);
@@ -19,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}fr
   background-color: var(--gray-100);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-full);
-`,de=G`
-  ${H}
+`,he=V`
+  ${K}
   left: auto;
   right: var(--spacing-sm);
-`,me=({score:t,setValue:n,...o})=>{let s=r=>{t!==0&&n(r==="increment"?t+10:t-10)};return e("div",{css:{position:"relative"},...o},e(N,{label:"Strength",id:"enrichment-score",type:"text",min:0,value:t||"",onChange:r=>n(Number(r.currentTarget.value)),css:{textAlign:"center",width:"auto"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("decrement"),disabled:t===0,css:H},e(I,{icon:ue,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>s("increment"),css:de},e(I,{icon:le,iconColor:"gray",size:"1.5rem"})))},fe=({list:t,setList:n,dimIndex:o})=>{let s=a=>{n(U(t,i=>{i.splice(a,1)}))},r=(a,i)=>{n(U(t,l=>{l[a].str=Number(i)}))};return e(A.Fragment,null,t.map((a,i)=>{let l=o[B(a.cat,a.key)];return e("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)"},key:`${a.cat}-${a.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:l?void 0:"var(--brand-secondary-5)"}},l?l.displayName:`Enrichment '${a.cat}_${a.key}' is unknown`),e("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:"7rem"}},e(N,{type:"text",min:0,title:"score",value:a.str||50,css:{textAlign:"center",width:"auto"},onChange:f=>r(i,f.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(i),css:{border:0}},e(I,{icon:ce,iconColor:"red",size:"1.5rem"})))}))};import{useState as ge}from"react";import{LoadingIndicator as Ce,Callout as T,InputSelect as q,InputComboBox as ve,InputInlineSelect as he,Icon as F}from"@uniformdev/design-system";import K from"immer";import{CgCloseO as be,CgMathPlus as ye}from"react-icons/cg";import{css as O}from"@emotion/react";var k="6rem",W=O`
+`,be=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(_,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(F(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:K},e(x,{icon:fe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:he},e(x,{icon:q,iconColor:"gray",size:"1.5rem"})))},ye=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(W(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(W(t,c=>{c[o].str=F(Number(l)||0,i)}))};return e(G.Fragment,null,t.map((o,l)=>{let i=r[H(o.cat,o.key)];return e("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",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("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"}},e(_,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(x,{icon:ge,iconColor:"red",size:"1.5rem"})))}))};import{useState as we}from"react";import{LoadingIndicator as Ee,Callout as $,InputSelect as Q,InputComboBox as ke,InputInlineSelect as Re,Icon as Z}from"@uniformdev/design-system";import j from"immer";import{CgCloseO as xe,CgMathPlus as Ie}from"react-icons/cg";import{css as X}from"@emotion/react";var L="6rem",Y=X`
   position: relative;
   padding: var(--spacing-base);
   border: 1px solid var(--gray-300);
   box-shadow: var(--shadow-base);
   background-color: white;
   border-radius: var(--rounded-base);
-  margin-top: ${k};
+  margin-top: ${L};
   display: flex;
   &:before {
     content: '';
     display: block;
     width: 1px;
-    height: ${k};
+    height: ${L};
     background-color: var(--gray-300);
     position: absolute;
-    top: -${k};
+    top: -${L};
     left: var(--spacing-lg);
   }
   &:first-of-type {
@@ -48,10 +61,9 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as Z}fr
       display: none;
     }
   }
-`,_=O`
+`,J=X`
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--spacing-base);
   flex-grow: 1;
   margin-right: var(--spacing-base);
-`;var De=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],ct=({value:t,setValue:n,contextConfig:o})=>{let{loading:s,result:r,error:a}=D(o),i=t||{crit:[]},l=c=>{n({...i,op:c==="&"?void 0:c})},f=()=>{n({...i,crit:[...i.crit,{l:"",op:">",r:50}]})},u=(c,d)=>{n(K(i,h=>{h.crit[d]=c}))},p=c=>{let d=K(i,m=>{m.crit.splice(c,1)}),h=d.crit.length===0?null:d;n(h)};return a?e(T,{type:"danger"},a):s||r===null?e(Ce,null):e("fieldset",{css:{marginBlock:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"),i.crit.length?i.crit.map((c,d)=>{var m,b;let h=((m=c.l)==null?void 0:m.length)>0;return e("div",{css:W,key:d},e("div",{css:_},e(q,{name:`lhs-${d}`,label:"Match Dimension",showLabel:!1,value:c.l,options:[{label:"Select",value:""},...r.dimensions.map(v=>({label:v.displayName,value:v.dim}))],onChange:v=>{u({...c,l:v.target.value},d)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(q,{css:{width:"100%"},name:`op-${d}`,label:"Operator",showLabel:!1,value:c.op,options:De.map(v=>({label:v.name,value:v.value})),onChange:v=>{let x=v.target.value;u(x==="+"||x==="-"?{...c,op:x,r:void 0,rDim:void 0}:{...c,op:v.target.value},d)},disabled:!h})),c.op==="+"||c.op==="-"?null:e(Ee,{critHasLhs:h,currentCriteria:c,dimensions:r,update:u,index:d})),e("button",{type:"button",onClick:()=>p(d),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(F,{icon:be,iconColor:"red",size:"1.5rem"})),d>0?e("div",{css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(he,{disabled:d>1,value:(b=i.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:v=>{l(v.value)}})):null)}):e(T,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'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.')),r.dimensions.length===0?e(T,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",onClick:f,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(F,{icon:ye,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Ee({update:t,currentCriteria:n,index:o,dimensions:s,critHasLhs:r}){var l,f;let[a,i]=ge(n.r&&E(n.r)!==null?n.r.toString(10):"");return e(ve,{name:`rhs-${o}`,inputValue:a,value:{label:n.rDim?(f=(l=s.dimIndex[n.rDim])==null?void 0:l.displayName)!=null?f:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:p})=>({...u,background:p?"transparent":void 0,fontSize:p?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var p;u&&t({...n,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0},o)},onInputChange:(u,p)=>{let c=E(u);p.action==="input-change"||p.action==="set-value"?(i(u),(c||u==="")&&t({...n,r:u,rDim:void 0},o)):!c&&!E(p.prevInputValue)&&i(u)},isDisabled:!r,noOptionsMessage:({inputValue:u})=>E(u)?`${u}`:"No options match"})}function E(t){return/^\d+$/.test(t.toString(10))}import ke from"react";import{useEffect as Re,useState as we}from"react";import{ManifestClient as xe,ApiClientError as Ie}from"@uniformdev/context/api";function R({apiHost:t,apiKey:n,projectId:o}){let[s,r]=we({loading:!1,notConfigured:!1,error:null,result:null});return Re(()=>{if(!o||!n||!t){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let l=await new xe({projectId:o,apiKey:n,apiHost:t}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:l})}catch(i){let l;i instanceof Ie?(i.statusCode===403&&(l=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),l=i.message):l=i.toString(),r({notConfigured:!1,loading:!1,error:l,result:null});return}})()},[t,n,o]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as Te}from"@uniformdev/design-system";function yt({children:t,versionMap:n,contextConfig:o}){let{loading:s,result:r}=R(o);if(s)return e(Te,null);if(r){let a=n[r.project.ui_version];if(a)return e(a,null)}return e(ke.Fragment,null,t)}import Y,{createContext as Me,useContext as M}from"react";import{LoadingIndicator as Se}from"@uniformdev/design-system";var w=Me(null),Mt=({loadingComponent:t,errorComponent:n,contextConfig:o,children:s})=>{let r=R(o),a=D(o);return r.error||r.notConfigured?n?e(n,{contextConfig:o,result:r}):e(Y.Fragment,null,"ErrorComponent is not configured"):a.error||a.notConfigured?n?e(n,{contextConfig:o,result:a}):e(Y.Fragment,null,"ErrorComponent is not configured"):r.loading||a.loading?t?e(t,null):e(Se,null):e(w.Provider,{value:{manifest:r.result,dimensions:a.result,contextConfig:o}},s)};function St(){let t=M(w);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Pt(){let t=M(w);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Vt(){let t=M(w);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Pe}from"uuid";import{ManifestClient as Ve}from"@uniformdev/context/api";var X=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Pe(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Ve({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let o=await n.get({preview:!0});return{valid:!0,result:o}}catch(o){return{valid:!1,error:o}}};import{useEffect as Le,useState as $e}from"react";var Gt=t=>{let[n,o]=$e({validating:!1,error:void 0}),{apiKey:s,apiHost:r,projectId:a}=t||{};return Le(()=>{if(!s||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:l,result:f}=await X({apiHost:r,apiKey:s,projectId:a});o(l?{error:l,validating:!1}:{error:void 0,validating:!1,result:f})})()},[r,s,a]),{validating:n.validating,error:n.error,result:n.result}};function Ot(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Wt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{Mt as ContextData,P as EditLink,tt as EnrichmentTag,ct as PersonalizationCriteria,yt as ProjectUIVersion,De as equality,Ot as isEnrichmentTagData,Wt as isPersonalizationCriteriaData,St as useContextConfig,R as useContextData,D as useDimensions,Vt as useDimensionsDataContext,Pt as useManifest,Gt as useValidateContextConfig,X as validateContextConfig};
+`;var Me=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],vt=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=R(r),c=t||{crit:[]},E=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(j(c,w=>{w.crit[p]=m}))},D=m=>{let p=j(c,k=>{k.crit.splice(m,1)}),w=p.crit.length===0?null:p;n(w)};return d?e($,{type:"danger"},d):l||i===null?e(Ee,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,b;let w=((f=m.l)==null?void 0:f.length)>0,k=m.op!=="+"&&m.op!=="-";return e("div",{css:Y,key:p},e("div",{css:J,style:{gridTemplateColumns:`repeat(${k?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Q,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(h=>({label:h.displayName,value:h.dim}))],onChange:h=>{g({...m,l:h.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Q,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Me.map(h=>({label:h.name,value:h.value})),onChange:h=>{let S=h.target.value;g(S==="+"||S==="-"?{...m,op:S,r:void 0,rDim:void 0}:{...m,op:h.target.value},p)},disabled:!w})),k?e(Te,{critHasLhs:w,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>D(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(Z,{icon:xe,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Re,{disabled:p>1,value:(b=c.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{E(h.value)}})):null)}):e($,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'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.')),i.dimensions.length===0?e($,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(Z,{icon:Ie,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Te({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,E;let[i,d]=we(n.r&&I(n.r)!==null?n.r.toString(10):"");return e(ke,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(E=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?E:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let D=I(u);g.action==="input-change"||g.action==="set-value"?(d(u),(D||u==="")&&t({...n,r:u,rDim:void 0},r)):!D&&!I(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>I(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function I(t){return/^\d+$/.test(t.toString(10))}import Le from"react";import{useEffect as Se,useState as Ne}from"react";import{ManifestClient as Pe,ApiClientError as Ve}from"@uniformdev/context/api";function M({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Ne({loading:!1,notConfigured:!1,error:null,result:null});return Se(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Pe({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Ve?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as $e}from"@uniformdev/design-system";function It({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=M(r);if(s)return e($e,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e(Le.Fragment,null,t)}import ee,{createContext as ze,useContext as z}from"react";import{LoadingIndicator as Ue}from"@uniformdev/design-system";var T=ze(null),zt=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=M(r),o=R(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(ee.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(ee.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(Ue,null):e(T.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function Ut(){let t=z(T);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function At(){let t=z(T);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Bt(){let t=z(T);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Ae}from"uuid";import{ManifestClient as Be}from"@uniformdev/context/api";var te=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ae(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Be({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as Oe,useState as We}from"react";var Kt=t=>{let[n,r]=We({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return Oe(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await te({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Yt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Jt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{zt as ContextData,A as EditLink,lt as EnrichmentTag,vt as PersonalizationCriteria,It as ProjectUIVersion,Ce as addEnrichmentLink,Me as equality,Yt as isEnrichmentTagData,Jt as isPersonalizationCriteriaData,Ut as useContextConfig,M as useContextData,R as useDimensions,Bt as useDimensionsDataContext,At as useManifest,Kt as useValidateContextConfig,te as validateContextConfig};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/context-ui",
-  "version": "16.0.0",
+  "version": "16.0.1-alpha.164+c3b15fc3f",
   "description": "React-based functionality and components for Uniform Context",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -35,13 +35,13 @@
   },
   "dependencies": {
     "@emotion/react": "11.9.0",
-    "@uniformdev/context": "^16.0.0",
-    "@uniformdev/design-system": "^16.0.0",
-    "immer": "9.0.12",
+    "@uniformdev/context": "^16.0.1-alpha.164+c3b15fc3f",
+    "@uniformdev/design-system": "^16.0.1-alpha.164+c3b15fc3f",
+    "immer": "9.0.14",
     "react-beautiful-dnd": "13.1.0",
     "react-icons": "^4.3.1",
-    "react-select": "5.3.0",
-    "react-use": "17.3.2",
+    "react-select": "5.3.2",
+    "react-use": "17.4.0",
     "reakit": "1.3.11",
     "timeago.js": "4.0.2",
     "uuid": "8.3.2"
@@ -51,25 +51,25 @@
     "react-dom": ">=16.8"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
+    "@babel/core": "7.18.0",
+    "@babel/preset-env": "7.18.0",
+    "@babel/preset-react": "7.17.12",
     "@emotion/babel-preset-css-prop": "11.2.0",
-    "@storybook/addon-controls": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-controls": "6.5.3",
+    "@storybook/addon-essentials": "6.5.3",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.0-alpha.64",
-    "@storybook/manager-webpack5": "6.5.0-alpha.64",
-    "@storybook/react": "6.4.22",
-    "@types/react": "17.0.44",
+    "@storybook/builder-webpack5": "6.5.3",
+    "@storybook/manager-webpack5": "6.5.3",
+    "@storybook/react": "6.5.3",
+    "@types/react": "18.0.9",
     "@types/react-beautiful-dnd": "13.1.2",
     "@types/uuid": "8.3.4",
-    "autoprefixer": "10.4.4",
-    "postcss": "8.4.12",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
     "postcss-import": "14.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "webpack": "5.72.0"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "webpack": "5.72.1"
   },
   "files": [
     "/dist"
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "72f1d98e96004c4ebf4bea49bf27aa4ecc036e33"
+  "gitHead": "c3b15fc3f3101dd990d7adfe84cb7e0bad77899d"
 }