@uniformdev/context-devtools 15.0.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/esm/index.js +154 -1686
  2. package/dist/index.js +154 -1717
  3. package/package.json +13 -10
package/dist/index.js CHANGED
@@ -1,86 +1,4 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
-
29
- // src/index.ts
30
- var src_exports = {};
31
- __export(src_exports, {
32
- ContextDevTools: () => ContextDevTools,
33
- EmbeddedContextDevTools: () => EmbeddedContextDevTools,
34
- ToggleEmbeddedContextDevTools: () => ToggleEmbeddedContextDevTools
35
- });
36
-
37
- // ../../scripts/emotion-jsx-shim.js
38
- var import_react = require("@emotion/react");
39
- var React = __toESM(require("react"));
40
-
41
- // src/components/Navigation/Menu.tsx
42
- var import_react3 = require("@emotion/react");
43
-
44
- // src/lib/DevToolsSettingsContext.tsx
45
- var import_react2 = require("react");
46
- var DevToolsSettingsContext = (0, import_react2.createContext)({
47
- settings: {},
48
- saveSettings: () => null
49
- });
50
- var useDevToolsSettingsContext = () => (0, import_react2.useContext)(DevToolsSettingsContext);
51
- var DevToolsSettingsContextProvider = ({
52
- children,
53
- settings,
54
- saveSettings
55
- }) => {
56
- return /* @__PURE__ */ (0, import_react.jsx)(DevToolsSettingsContext.Provider, {
57
- value: {
58
- settings,
59
- saveSettings
60
- }
61
- }, children);
62
- };
63
-
64
- // src/components/Navigation/NavigationLink.tsx
65
- var NavigationLink = ({ route, children, className }) => {
66
- const { settings, saveSettings } = useDevToolsSettingsContext();
67
- return /* @__PURE__ */ (0, import_react.jsx)("a", {
68
- href: "",
69
- className,
70
- onClick: (e) => {
71
- e.preventDefault();
72
- saveSettings({ ...settings, route });
73
- }
74
- }, children);
75
- };
76
- var NavigationLink_default = NavigationLink;
77
-
78
- // src/components/Navigation/Menu.tsx
79
- var links = [
80
- {
81
- title: "Dimensions",
82
- href: "/dimensions",
83
- icon: `<svg
1
+ var Ft=Object.create;var W=Object.defineProperty;var Bt=Object.getOwnPropertyDescriptor;var Qt=Object.getOwnPropertyNames;var qt=Object.getPrototypeOf,Nt=Object.prototype.hasOwnProperty;var Zt=(t,r)=>{for(var n in r)W(t,n,{get:r[n],enumerable:!0})},Ee=(t,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of Qt(r))!Nt.call(t,i)&&i!==n&&W(t,i,{get:()=>r[i],enumerable:!(o=Bt(r,i))||o.enumerable});return t};var D=(t,r,n)=>(n=t!=null?Ft(qt(t)):{},Ee(r||!t||!t.__esModule?W(n,"default",{value:t,enumerable:!0}):n,t)),Ut=t=>Ee(W({},"__esModule",{value:!0}),t);var po={};Zt(po,{ContextDevTools:()=>Pe,EmbeddedContextDevTools:()=>Me,ToggleEmbeddedContextDevTools:()=>lo});module.exports=Ut(po);var e=require("@emotion/react"),b=D(require("react"));var x=require("@emotion/react");var Y=require("react"),ze=(0,Y.createContext)({settings:{},saveSettings:()=>null}),J=()=>(0,Y.useContext)(ze),Fe=({children:t,settings:r,saveSettings:n})=>(0,e.jsx)(ze.Provider,{value:{settings:r,saveSettings:n}},t);var _t=({route:t,children:r,className:n})=>{let{settings:o,saveSettings:i}=J();return(0,e.jsx)("a",{href:"",className:n,onClick:a=>{a.preventDefault(),i({...o,route:t})}},r)},B=_t;var Gt=[{title:"Dimensions",href:"/dimensions",icon:`<svg
84
2
  width="24"
85
3
  height="24"
86
4
  viewBox="0 0 24 24"
@@ -97,20 +15,10 @@ var links = [
97
15
  fill="currentColor"
98
16
  />
99
17
  </svg>
100
- `
101
- },
102
- {
103
- title: "What if?",
104
- href: "/overrides",
105
- icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ `},{title:"What if?",href:"/overrides",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
106
19
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5123 7.91666L14.5804 8.4343L13.9179 5.96175L11.3371 10.0021L11.3575 10.0143C11.1348 10.3854 10.8997 10.7125 10.6556 11.0003H18.7603L16.9135 9.15347L18.3277 7.73926L22.5703 11.9819L18.3276 16.2245L16.9134 14.8103L18.7235 13.0003H6.65606C6.89995 13.2879 7.13495 13.6148 7.35749 13.9857L7.33713 13.9979L9.9179 18.0382L10.5804 15.5657L12.5123 16.0833L10.9594 21.8789L5.16384 20.326L5.68147 18.3941L8.20425 19.0701C8.20425 19.0701 6.17064 16.0325 5.21659 14.398C4.70173 13.7544 4.17055 13.4257 3.70352 13.2461C3.10532 13.016 2.54358 13.0011 2.06154 13.0003H2V13.0002V11.0003V11.0002L2.02253 11.0002C2.05059 11.0002 2.07985 11.0002 2.11025 11.0003H6V10.9998C6.49549 10.9998 7.07968 10.9939 7.70352 10.7539C8.17055 10.5743 8.70173 10.2456 9.21659 9.60198C10.1706 7.96745 12.2043 4.92988 12.2043 4.92988L9.68147 5.60586L9.16384 3.67401L14.9594 2.12109L16.5123 7.91666Z" fill="white"/>
107
20
  </svg>
108
- `
109
- },
110
- {
111
- title: "Quirks",
112
- href: "/quirks",
113
- icon: `<svg
21
+ `},{title:"Quirks",href:"/quirks",icon:`<svg
114
22
  width="24"
115
23
  height="24"
116
24
  viewBox="0 0 24 24"
@@ -125,85 +33,31 @@ var links = [
125
33
  d="M12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5Z"
126
34
  fill="currentColor"
127
35
  />
128
- </svg>`
129
- },
130
- {
131
- title: "Settings",
132
- href: "/settings",
133
- icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
36
+ </svg>`},{title:"Settings",href:"/settings",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
134
37
  <path d="M19.1469 12.716C19.1986 12.2636 19.201 11.8069 19.1539 11.354L21.7429 9.474C21.8681 9.3822 21.9548 9.24723 21.9862 9.0952C22.0176 8.94316 21.9915 8.78489 21.9129 8.651L19.9939 5.399C19.9182 5.26986 19.7985 5.17231 19.6568 5.1242C19.515 5.07608 19.3606 5.08063 19.2219 5.137L16.3599 6.292C15.9237 5.9578 15.4502 5.67525 14.9489 5.45L14.5739 2.545C14.5547 2.39441 14.4813 2.25598 14.3673 2.15566C14.2534 2.05534 14.1068 1.99999 13.9549 2H10.0859C9.93402 1.99997 9.78728 2.05527 9.67317 2.15558C9.55906 2.25588 9.48539 2.39432 9.46595 2.545L9.09395 5.433C8.63957 5.63249 8.20723 5.87882 7.80395 6.168L5.00895 4.954C4.87173 4.89484 4.71787 4.88672 4.57519 4.9311C4.4325 4.97549 4.3104 5.06945 4.23095 5.196L2.22195 8.398C2.1396 8.52998 2.10934 8.68789 2.13707 8.84096C2.1648 8.99403 2.24854 9.1313 2.37195 9.226L4.86795 11.142C4.83172 11.4266 4.81302 11.7131 4.81195 12C4.81195 12.18 4.82095 12.362 4.83795 12.558L2.26495 14.375C2.13766 14.4647 2.04844 14.5987 2.01478 14.7508C1.98112 14.9028 2.00543 15.0619 2.08295 15.197L3.95695 18.474C4.11095 18.742 4.43695 18.857 4.72595 18.746L7.56095 17.644C8.00795 17.997 8.49195 18.294 9.00795 18.53L9.33795 21.396C9.37495 21.709 9.63795 21.946 9.95195 21.95L13.8169 22H13.8249C14.1349 22 14.3989 21.771 14.4439 21.463L14.8549 18.59C15.3703 18.3674 15.8579 18.0855 16.3079 17.75L19.1279 18.93C19.4129 19.05 19.7419 18.944 19.9029 18.679L21.8669 15.452C21.9477 15.319 21.976 15.1608 21.9464 15.0081C21.9168 14.8554 21.8315 14.7192 21.7069 14.626L19.1469 12.716ZM11.9999 15C10.3459 15 8.99995 13.655 8.99995 12C8.99995 10.346 10.3449 9 11.9999 9C13.6539 9 14.9999 10.345 14.9999 12C14.9999 13.654 13.6539 15 11.9999 15Z" fill="white"/>
135
38
  </svg>
136
- `
137
- }
138
- ];
139
- var Menu = ({ ...props }) => {
140
- const isActivePath = (href) => {
141
- var _a;
142
- const cssName = "active";
143
- if (!((_a = props.settings) == null ? void 0 : _a.route) && href === "/dimensions") {
144
- return cssName;
145
- }
146
- return props.settings.route === href ? cssName : "";
147
- };
148
- return /* @__PURE__ */ (0, import_react.jsx)("nav", {
149
- css: import_react3.css`
39
+ `}],$t=`<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
40
+ <g>
41
+ <path d="M84.55,116.66c2.49,0,4.53-1.99,4.53-4.41V88.08c1.55-13.03,7.27-9.16,14-5.13 c16.27,9.74,27.08-15.88,13.93-23.78c-10.32-6.2-14.79,4.46-22.35,3.36c-2.92-0.43-4.95-3.5-5.59-8.17V36.9 c0-2.43-2.04-4.41-4.53-4.41H63.73c-17.18-2.12-1.93-11.37-1.93-19.98C61.81,5.6,55.38,0,47.45,0c-7.92,0-15.19,5.6-15.19,12.51 c0,8.12,15.78,17.86-1.64,19.98H4.53C2.04,32.49,0,34.47,0,36.9v17.42c1.33,7.43,6.49,9.15,13.1,4.25 c2.23-1.66,5.99-3.59,8.71-3.59c7.09,0,12.85,6.25,12.85,13.96S28.91,84.6,21.81,84.6c-2.53,0-4.89-0.8-6.89-2.19 c0,0.59-12.4-10.85-14.92,3.15v26.71c0,2.43,2.04,4.41,4.53,4.41c13.97,0,27.92,0,41.88-0.01c0.55-2.55-1.24-5.47-2.92-8 c-13.22-19.93,38.21-21.92,24.99,0.62c-0.65,1.11-1.3,2.19-1.8,3.24c-0.63,1.31-1.05,2.91-0.96,4.14L84.55,116.66L84.55,116.66z"></path>
42
+ </g>
43
+ </svg>`,Be=({...t})=>{var o,i;let r=a=>{var p;let l="active";return!((p=t.settings)!=null&&p.route)&&a==="/dimensions"||t.settings.route===a?l:""},n=Boolean(typeof window!="undefined"&&((i=(o=window.chrome)==null?void 0:o.runtime)==null?void 0:i.id));return(0,e.jsx)("nav",{css:x.css`
150
44
  background: var(--brand-secondary-1);
151
45
  padding: var(--spacing-base);
152
46
  min-width: 200px;
153
- `
154
- }, /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
155
- css: import_react3.css`
47
+ display: flex;
48
+ flex-direction: column;
49
+ `},(0,e.jsx)("a",{css:x.css`
50
+ flex-grow: 0;
156
51
  display: inline-block;
157
52
  margin: 0 var(--spacing-base);
158
- `,
159
- route: "/settings"
160
- }, /* @__PURE__ */ (0, import_react.jsx)("svg", {
161
- css: { display: "block" },
162
- width: "120",
163
- height: "38",
164
- viewBox: "0 0 120 38",
165
- fill: "none",
166
- xmlns: "http://www.w3.org/2000/svg"
167
- }, /* @__PURE__ */ (0, import_react.jsx)("g", {
168
- clipPath: "url(#clip0_41_612)"
169
- }, /* @__PURE__ */ (0, import_react.jsx)("path", {
170
- d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
171
- fill: "#83C6E1"
172
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
173
- d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
174
- fill: "#438FD5"
175
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
176
- d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
177
- fill: "#F4220B"
178
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
179
- d: "M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",
180
- fill: "white"
181
- })), /* @__PURE__ */ (0, import_react.jsx)("defs", null, /* @__PURE__ */ (0, import_react.jsx)("clipPath", {
182
- id: "clip0_41_612"
183
- }, /* @__PURE__ */ (0, import_react.jsx)("rect", {
184
- width: "120",
185
- height: "38",
186
- fill: "white"
187
- }))))), /* @__PURE__ */ (0, import_react.jsx)("ul", {
188
- css: import_react3.css`
53
+ `,href:"https://uniform.dev/"},(0,e.jsx)("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("g",{clipPath:"url(#clip0_41_612)"},(0,e.jsx)("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),(0,e.jsx)("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),(0,e.jsx)("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),(0,e.jsx)("path",{d:"M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",fill:"white"})),(0,e.jsx)("defs",null,(0,e.jsx)("clipPath",{id:"clip0_41_612"},(0,e.jsx)("rect",{width:"120",height:"38",fill:"white"}))))),(0,e.jsx)("ul",{css:x.css`
189
54
  display: flex;
190
55
  flex-flow: column nowrap;
191
56
  padding: 0;
192
57
  margin: 0;
193
58
  list-style-type: none;
194
- height: calc(100% - var(--spacing-base) * 2.5);
195
- `
196
- }, links.map((item, index) => {
197
- var _a, _b, _c, _d;
198
- let overrideCount = 0;
199
- if (item.href === "/overrides" && Object.keys((_a = props.settings.scoreOverrides) != null ? _a : {}).length > 0) {
200
- overrideCount = Object.keys((_b = props.settings.scoreOverrides) != null ? _b : {}).length;
201
- }
202
- if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
203
- overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
204
- }
205
- return /* @__PURE__ */ (0, import_react.jsx)("li", {
206
- css: import_react3.css`
59
+ flex-grow: 1;
60
+ `},Gt.map((a,l)=>{var m,u,s,c;let p=0;return a.href==="/overrides"&&Object.keys((m=t.settings.scoreOverrides)!=null?m:{}).length>0&&(p=Object.keys((u=t.settings.scoreOverrides)!=null?u:{}).length),a.href==="/quirks"&&Object.keys((s=t.settings.quirkOverrides)!=null?s:{}).length>0&&(p=Object.keys((c=t.settings.quirkOverrides)!=null?c:{}).length),(0,e.jsx)("li",{css:x.css`
207
61
  padding: 0;
208
62
  margin: 0;
209
63
  list-style-type: none;
@@ -211,10 +65,7 @@ var Menu = ({ ...props }) => {
211
65
  &:last-of-type {
212
66
  margin-top: auto;
213
67
  }
214
- `,
215
- key: index
216
- }, /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
217
- css: import_react3.css`
68
+ `,key:l},(0,e.jsx)(B,{css:x.css`
218
69
  align-items: center;
219
70
  border-radius: var(--rounded-base);
220
71
  display: flex;
@@ -228,17 +79,10 @@ var Menu = ({ ...props }) => {
228
79
  &.active {
229
80
  background: var(--gray-700);
230
81
  }
231
- `,
232
- className: isActivePath(item.href),
233
- route: item.href
234
- }, /* @__PURE__ */ (0, import_react.jsx)("i", {
235
- css: import_react3.css`
82
+ `,className:r(a.href),route:a.href},(0,e.jsx)("i",{css:x.css`
236
83
  align-items: center;
237
84
  display: flex;
238
- `,
239
- dangerouslySetInnerHTML: { __html: item.icon }
240
- }), item.title, overrideCount ? /* @__PURE__ */ (0, import_react.jsx)("span", {
241
- css: import_react3.css`
85
+ `,dangerouslySetInnerHTML:{__html:a.icon}}),a.title,p?(0,e.jsx)("span",{css:x.css`
242
86
  font-size: var(--font-xxs);
243
87
  display: inline-block;
244
88
  width: 12px;
@@ -247,29 +91,29 @@ var Menu = ({ ...props }) => {
247
91
  background-color: var(--red-tooltip);
248
92
  text-align: center;
249
93
  line-height: 12px;
250
- `
251
- }, overrideCount) : null));
252
- })));
253
- };
254
-
255
- // src/components/StatusPages/NotFound.tsx
256
- var NotFound = () => {
257
- return /* @__PURE__ */ (0, import_react.jsx)("article", null, /* @__PURE__ */ (0, import_react.jsx)("h1", null, "Something when wrong"), /* @__PURE__ */ (0, import_react.jsx)("p", null, "We could not find the page you're looking for."));
258
- };
259
-
260
- // src/components/Personalization/Dimensions.tsx
261
- var React4 = __toESM(require("react"));
262
-
263
- // src/components/Accordion/Accordion.tsx
264
- var import_react4 = require("@emotion/react");
265
- var React2 = __toESM(require("react"));
266
- var willChange = (0, import_react4.css)({ willChange: "height" });
267
- var titleStyle = import_react4.css`
94
+ `},p):null))})),!n&&(0,e.jsx)("a",{target:"_blank",href:"https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",css:x.css`
95
+ align-items: center;
96
+ border-radius: var(--rounded-base);
97
+ display: flex;
98
+ font-size: var(--font-sm);
99
+ color: var(--white);
100
+ gap: var(--spacing-sm);
101
+ padding: var(--spacing-sm) var(--spacing-base);
102
+ text-decoration: none;
103
+ transition: background-color 0.25s ease-in-out;
104
+
105
+ &:hover,
106
+ &.active {
107
+ background: var(--gray-700);
108
+ }
109
+ `,rel:"noreferrer"},(0,e.jsx)("i",{css:x.css`
110
+ align-items: center;
111
+ display: flex;
112
+ `,dangerouslySetInnerHTML:{__html:$t}}),"Install Chrome Extension"))};var Qe=()=>(0,e.jsx)("article",null,(0,e.jsx)("h1",null,"Something when wrong"),(0,e.jsx)("p",null,"We could not find the page you're looking for."));var pe=D(require("react"));var H=require("@emotion/react"),X=D(require("react")),qe=(0,H.css)({willChange:"height"}),Kt=H.css`
268
113
  border-bottom: 2px solid var(--brand-secondary-1);
269
114
  font-size: var(--font-base);
270
115
  margin: 0;
271
- `;
272
- var btnStyle = import_react4.css`
116
+ `,Wt=H.css`
273
117
  align-items: center;
274
118
  border: none;
275
119
  background: none;
@@ -279,118 +123,13 @@ var btnStyle = import_react4.css`
279
123
  padding: var(--spacing-sm) 0;
280
124
  font-weight: var(--font-bold);
281
125
  justify-content: space-between;
282
- `;
283
- var iconStyle = import_react4.css`
126
+ `,Yt=H.css`
284
127
  align-self: center;
285
- `;
286
- var iconActiveStyle = import_react4.css`
128
+ `,Jt=H.css`
287
129
  transform: rotate(-180deg);
288
- `;
289
- var Accordion = ({ children }) => {
290
- return /* @__PURE__ */ (0, import_react.jsx)("div", {
291
- css: [willChange]
292
- }, children);
293
- };
294
- var AccordionItem = ({ title, children }) => {
295
- const [visibility, setVisibility] = React2.useState(false);
296
- const id = title.split(" ").join("-").toLocaleLowerCase();
297
- return /* @__PURE__ */ (0, import_react.jsx)(React2.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("h3", {
298
- css: titleStyle
299
- }, /* @__PURE__ */ (0, import_react.jsx)("button", {
300
- "aria-expanded": visibility,
301
- css: btnStyle,
302
- title,
303
- id,
304
- "aria-controls": `${id}-section`,
305
- onClick: () => setVisibility((prev) => !prev),
306
- type: "button"
307
- }, title, /* @__PURE__ */ (0, import_react.jsx)("i", {
308
- css: [iconStyle, visibility ? iconActiveStyle : void 0]
309
- }, /* @__PURE__ */ (0, import_react.jsx)("svg", {
310
- width: "24",
311
- height: "24",
312
- viewBox: "0 0 24 24",
313
- fill: "none",
314
- xmlns: "http://www.w3.org/2000/svg"
315
- }, /* @__PURE__ */ (0, import_react.jsx)("path", {
316
- d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
317
- fill: "currentColor"
318
- }))))), /* @__PURE__ */ (0, import_react.jsx)("div", {
319
- id: `${id}-section`,
320
- css: [
321
- willChange,
322
- import_react4.css`
130
+ `,j=({children:t})=>(0,e.jsx)("div",{css:[qe]},t),ee=({title:t,children:r})=>{let[n,o]=X.useState(!1),i=t.split(" ").join("-").toLocaleLowerCase();return(0,e.jsx)(X.Fragment,null,(0,e.jsx)("h3",{css:Kt},(0,e.jsx)("button",{"aria-expanded":n,css:Wt,title:t,id:i,"aria-controls":`${i}-section`,onClick:()=>o(a=>!a),type:"button"},t,(0,e.jsx)("i",{css:[Yt,n?Jt:void 0]},(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),(0,e.jsx)("div",{id:`${i}-section`,css:[qe,H.css`
323
131
  padding: var(--spacing-sm) 0;
324
- `
325
- ],
326
- role: "region",
327
- "aria-labelledby": id
328
- }, visibility ? children : null));
329
- };
330
-
331
- // src/components/Buttons/Button.tsx
332
- var import_react5 = require("@emotion/react");
333
- var React3 = __toESM(require("react"));
334
- var buttonStyle = import_react5.css`
335
- align-items: center;
336
- border: 1px solid transparent;
337
- cursor: pointer;
338
- display: inline-flex;
339
- padding: var(--spacing-sm) var(--spacing-base);
340
- transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
341
- font-size: var(--font-sm);
342
- &:hover {
343
- opacity: 0.8;
344
- }
345
- `;
346
- function buttonVariant(variant) {
347
- const white = import_react5.css`
348
- color: var(--white);
349
- `;
350
- const bold = import_react5.css`
351
- font-weight: var(--font-bold);
352
- `;
353
- switch (variant) {
354
- case "primary":
355
- return import_react5.css`
356
- background: var(--brand-secondary-1);
357
- ${white}
358
- ${bold}
359
- `;
360
- case "secondary":
361
- return import_react5.css`
362
- background: var(--brand-secondary-5);
363
- ${white}
364
- ${bold}
365
- `;
366
- case "unimportant":
367
- return import_react5.css`
368
- background: var(--brand-secondary-3);
369
- color: var(--brand-secondary-1);
370
- ${bold}
371
- `;
372
- case "ghost":
373
- return import_react5.css`
374
- background: transparent;
375
- color: var(--brand-secondary-5);
376
- &:hover {
377
- border: 1px solid var(--brand-secondary-5);
378
- }
379
- `;
380
- }
381
- }
382
- var Button = ({ buttonType = "primary", children, className, ...props }) => {
383
- return /* @__PURE__ */ (0, import_react.jsx)(React3.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("button", {
384
- type: "button",
385
- css: [buttonStyle, buttonVariant(buttonType)],
386
- className,
387
- ...props
388
- }, children));
389
- };
390
-
391
- // src/components/CallToAction/cta.styles.ts
392
- var import_react6 = require("@emotion/react");
393
- var cta = import_react6.css`
132
+ `],role:"region","aria-labelledby":i},n?r:null))};var M=require("@emotion/react"),te=M.css`
394
133
  background-color: var(--gray-100);
395
134
  padding: var(--spacing-base) var(--spacing-md);
396
135
  margin: var(--spacing-base) 0;
@@ -398,25 +137,21 @@ var cta = import_react6.css`
398
137
  &:first-of-type {
399
138
  margin: 0 0 var(--spacing-base);
400
139
  }
401
- `;
402
- var ctaWithIcon = import_react6.css`
140
+ `,Ne=M.css`
403
141
  background: var(--gray-100)
404
142
  url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 2C8.44771 2 8 2.44772 8 3V5C8 5.55228 8.44771 6 9 6C9.55229 6 10 5.55228 10 5V3C10 2.44772 9.55229 2 9 2ZM8 9H16V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V9ZM13 16.917C15.8377 16.441 18 13.973 18 11V7H6V11C6 13.973 8.16229 16.441 11 16.917V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V16.917ZM14 3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6C14.4477 6 14 5.55228 14 5V3Z' fill='%232ecdb4' /%3E%3C/svg%3E")
405
143
  no-repeat var(--spacing-sm) var(--spacing-base);
406
144
  padding: var(--spacing-base) var(--spacing-xl);
407
- `;
408
- var ctaTitle = import_react6.css`
145
+ `,oe=M.css`
409
146
  color: var(--brand-secondary-1);
410
147
  margin: 0;
411
148
  font-size: var(--font-base);
412
149
  font-weight: var(--font-bold);
413
- `;
414
- var ctaText = import_react6.css`
150
+ `,re=M.css`
415
151
  color: var(--brand-secondary-1);
416
152
  margin: var(--spacing-xs) 0 0;
417
153
  font-size: var(--font-sm);
418
- `;
419
- var ctaClose = import_react6.css`
154
+ `,Ze=M.css`
420
155
  align-items: center;
421
156
  border: none;
422
157
  background: transparent
@@ -436,132 +171,25 @@ var ctaClose = import_react6.css`
436
171
  &:hover {
437
172
  opacity: 0.6;
438
173
  }
439
- `;
440
- var ctaBtnGroup = import_react6.css`
174
+ `,ne=M.css`
441
175
  display: flex;
442
176
  margin: var(--spacing-sm) 0 0;
443
177
  gap: var(--spacing-base);
444
- `;
445
-
446
- // src/components/CallToAction/NoActiveDimensions.tsx
447
- var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
448
- return /* @__PURE__ */ (0, import_react.jsx)("div", {
449
- css: cta
450
- }, /* @__PURE__ */ (0, import_react.jsx)("h2", {
451
- css: ctaTitle
452
- }, title), /* @__PURE__ */ (0, import_react.jsx)("p", {
453
- css: ctaText
454
- }, text), children, buttonGroup ? /* @__PURE__ */ (0, import_react.jsx)("div", {
455
- css: ctaBtnGroup
456
- }, buttonGroup) : null);
457
- };
458
-
459
- // src/components/Inputs/input-switch.styles.ts
460
- var import_react7 = require("@emotion/react");
461
- var inputSwitch = import_react7.css`
462
- align-items: center;
463
- cursor: pointer;
464
- display: flex;
465
- gap: var(--spacing-xs);
466
- margin-top: var(--spacing-base);
467
- `;
468
- var inputSwitchLabel = import_react7.css`
469
- color: var(--gray-500);
470
- font-size: var(--font-sm);
471
- `;
472
- var inputSwitchControl = import_react7.css`
473
- background: var(--gray-600);
474
- `;
475
- var inputSwitchBtn = import_react7.css`
476
- display: block;
477
- background: var(--gray-400);
478
- border-radius: var(--rounded-full);
479
- position: relative;
480
- height: 16px;
481
- width: 32px;
482
- &:before {
483
- border-radius: var(--rounded-full);
484
- background: var(--white);
485
- content: '';
486
- display: block;
487
- width: 13px;
488
- height: 13px;
489
- position: absolute;
490
- top: 0;
491
- bottom: 0;
492
- margin: auto 0;
493
- transform: translateX(2px);
494
- transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
495
- }
496
- `;
497
- var inputSwitchCheckbox = import_react7.css`
498
- overflow: hidden;
499
- clip: rect(0, 0, 0, 0);
500
- height: 0;
501
- width: 0;
502
- text-indent: -9999px;
503
-
504
- &:checked ~ :before {
505
- transform: translateX(17px);
506
- }
507
-
508
- &:checked ~ span {
509
- background: var(--brand-secondary-5);
510
- }
511
- `;
512
-
513
- // src/components/Inputs/SwitchInput.tsx
514
- var SwitchInput = ({ label, ...props }) => {
515
- return /* @__PURE__ */ (0, import_react.jsx)("label", {
516
- css: inputSwitch
517
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
518
- css: inputSwitchLabel
519
- }, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
520
- type: "checkbox",
521
- css: inputSwitchCheckbox,
522
- ...props
523
- }), /* @__PURE__ */ (0, import_react.jsx)("span", {
524
- css: inputSwitchBtn
525
- }));
526
- };
527
- var FormikSwitchInput = ({ field, form, meta, ...rawProps }) => {
528
- const { label } = rawProps;
529
- return /* @__PURE__ */ (0, import_react.jsx)("label", {
530
- css: inputSwitch
531
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
532
- css: inputSwitchLabel
533
- }, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
534
- type: "checkbox",
535
- css: inputSwitchCheckbox,
536
- checked: field.value,
537
- ...field
538
- }), /* @__PURE__ */ (0, import_react.jsx)("span", {
539
- css: inputSwitchBtn
540
- }));
541
- };
542
-
543
- // src/components/Personalization/page.styles.ts
544
- var import_react8 = require("@emotion/react");
545
- var popIn = import_react8.keyframes`from {
178
+ `;var Q=({title:t,text:r,buttonGroup:n,children:o})=>(0,e.jsx)("div",{css:te},(0,e.jsx)("h2",{css:oe},t),(0,e.jsx)("p",{css:re},r),o,n?(0,e.jsx)("div",{css:ne},n):null);var k=require("@emotion/react"),Xt=k.keyframes`from {
546
179
  transform: scale(1);
547
180
  }
548
181
  to {
549
182
  transform: scale(1.2);
550
183
  }
551
- `;
552
- var styles = {
553
- page: import_react8.css`
184
+ `,h={page:k.css`
554
185
  color: var(--brand-secondary-1);
555
- `,
556
- text: import_react8.css`
186
+ `,text:k.css`
557
187
  margin: var(--spacing-sm) 0;
558
- `,
559
- reset: import_react8.css`
188
+ `,reset:k.css`
560
189
  margin: 0 var(--spacing-md);
561
190
  font-size: var(--font-sm);
562
191
  color: var(--gray-500);
563
- `,
564
- title: import_react8.css`
192
+ `,title:k.css`
565
193
  margin: 0 0 var(--spacing-sm);
566
194
  font-size: var(--font-md);
567
195
  & > small {
@@ -570,14 +198,12 @@ var styles = {
570
198
  font-weight: var(--font-regular);
571
199
  margin: var(--spacing-xxs) 0 0;
572
200
  }
573
- `,
574
- headingGroup: import_react8.css`
201
+ `,headingGroup:k.css`
575
202
  align-items: baseline;
576
203
  display: flex;
577
204
  justify-content: space-between;
578
205
  align-items: center;
579
- `,
580
- divider: import_react8.css`
206
+ `,divider:k.css`
581
207
  background: var(--gray-300);
582
208
  display: block;
583
209
  width: 1px;
@@ -585,117 +211,66 @@ var styles = {
585
211
  position: absolute;
586
212
  inset: 0 auto 0 0;
587
213
  margin: auto 0;
588
- `,
589
- submitButton: import_react8.css`
214
+ `,submitButton:k.css`
590
215
  position: absolute;
591
216
  right: var(--spacing-base);
592
217
  bottom: var(--spacing-base);
593
- animation: 0.5s 2 alternate ${popIn};
594
- `,
595
- cancelButton: import_react8.css`
218
+ animation: 0.5s 2 alternate ${Xt};
219
+ `,cancelButton:k.css`
596
220
  position: absolute;
597
221
  left: calc(200px + var(--spacing-base));
598
222
  bottom: var(--spacing-base);
599
223
  background: white;
600
224
  padding: var(--spacing-sm);
601
225
  border: 1px solid var(--gray-300);
602
- `,
603
- error: import_react8.css`
226
+ `,error:k.css`
604
227
  color: var(--brand-secondary-5);
605
228
  font-size: var(--font-sm);
606
- `
607
- };
608
-
609
- // src/components/Table/Table.tsx
610
- var import_react9 = require("@emotion/react");
611
- var Table = ({ children }) => {
612
- return /* @__PURE__ */ (0, import_react.jsx)("table", {
613
- css: import_react9.css`
229
+ `,quirks:k.css`
230
+ .uniform-input-select,
231
+ input {
232
+ padding: var(--spacing-sm);
233
+ }
234
+ `};var L=require("@emotion/react"),ie=({children:t})=>(0,e.jsx)("table",{css:L.css`
614
235
  border-collapse: collapse;
615
236
  display: table;
616
237
  width: 100%;
617
238
  font-size: var(--font-sm);
618
- `
619
- }, children);
620
- };
621
- var THead = ({ children }) => {
622
- return /* @__PURE__ */ (0, import_react.jsx)("thead", {
623
- css: import_react9.css`
239
+ `},t),Ue=({children:t})=>(0,e.jsx)("thead",{css:L.css`
624
240
  background: var(--gray-50);
625
241
  text-align: left;
626
242
  & tr {
627
243
  border-bottom: 1px solid var(--gray-200);
628
244
  }
629
- `
630
- }, children);
631
- };
632
- var TBody = ({ children }) => {
633
- return /* @__PURE__ */ (0, import_react.jsx)("tbody", null, children);
634
- };
635
- var TRow = ({ border, children }) => {
636
- return /* @__PURE__ */ (0, import_react.jsx)("tr", {
637
- css: border ? import_react9.css`
245
+ `},t),se=({children:t})=>(0,e.jsx)("tbody",null,t),U=({border:t,children:r})=>(0,e.jsx)("tr",{css:t?L.css`
638
246
  border-bottom: 1px solid var(--gray-200);
639
247
  &:where(:last-child) {
640
248
  border: none;
641
249
  }
642
- ` : void 0
643
- }, children);
644
- };
645
- var THeading = ({ children }) => {
646
- return /* @__PURE__ */ (0, import_react.jsx)("th", {
647
- css: import_react9.css`
250
+ `:void 0},r),ae=({children:t,width:r})=>(0,e.jsx)("th",{css:L.css`
648
251
  outline: none;
649
252
  padding: var(--spacing-sm);
650
- `
651
- }, children);
652
- };
653
- function colour(color) {
654
- switch (color) {
655
- case "light":
656
- return import_react9.css`
253
+ width: ${r!=null?r:"auto"};
254
+ `},t);function jt(t){switch(t){case"light":return L.css`
657
255
  color: var(--gray-400);
658
- `;
659
- case "dark":
660
- return import_react9.css`
256
+ `;case"dark":return L.css`
661
257
  color: var(--brand-secondary-1);
662
- `;
663
- }
664
- }
665
- function align(alignment) {
666
- return import_react9.css`
667
- text-align: ${alignment};
668
- `;
669
- }
670
- var TData = ({ alignment = "left", border, color = "dark", children }) => {
671
- return /* @__PURE__ */ (0, import_react.jsx)("td", {
672
- css: [
673
- import_react9.css`
258
+ `}}function eo(t){return L.css`
259
+ text-align: ${t};
260
+ `}var R=({alignment:t="left",border:r,color:n="dark",children:o})=>(0,e.jsx)("td",{css:[L.css`
674
261
  padding: var(--spacing-base);
675
262
  max-width: 180px;
676
263
  overflow-wrap: break-word;
677
264
  position: relative;
678
- `,
679
- colour(color),
680
- align(alignment),
681
- border ? import_react9.css`
265
+ `,jt(n),eo(t),r?L.css`
682
266
  border-left: 1px solid var(--gray-200);
683
- ` : void 0
684
- ]
685
- }, children);
686
- };
687
-
688
- // src/components/Table/table.styles.ts
689
- var import_react10 = require("@emotion/react");
690
- var scoreTd = import_react10.css`
267
+ `:void 0]},o);var ce=require("@emotion/react"),_e=ce.css`
691
268
  position: relative;
692
269
  display: inline-block;
693
270
  font-size: var(--font-base);
694
- `;
695
- var overriddenValue = import_react10.css`
271
+ `,Ge=ce.css`
696
272
  display: block;
697
- `;
698
- var isOverriddenTooltip = import_react10.css`
273
+ `,$e=ce.css`
699
274
  position: absolute;
700
275
  width: 6px;
701
276
  height: 6px;
@@ -703,227 +278,82 @@ var isOverriddenTooltip = import_react10.css`
703
278
  top: 9px;
704
279
  background: var(--red-tooltip);
705
280
  border-radius: 3px;
706
- `;
707
-
708
- // src/styles/icons.tsx
709
- var import_react11 = require("@emotion/react");
710
- var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
281
+ `;var We=require("@emotion/react"),to=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
711
282
  <path d="M4.2 7.2C4.53137 7.2 4.8 6.93137 4.8 6.6C4.8 6.26863 4.53137 6 4.2 6C3.86863 6 3.6 6.26863 3.6 6.6C3.6 6.93137 3.86863 7.2 4.2 7.2Z" fill="#828282"/>
712
283
  <path d="M8.4 6.6C8.4 6.93137 8.13137 7.2 7.8 7.2C7.46863 7.2 7.2 6.93137 7.2 6.6C7.2 6.26863 7.46863 6 7.8 6C8.13137 6 8.4 6.26863 8.4 6.6Z" fill="#828282"/>
713
284
  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 5.49824 10.723 5.01447 10.5802 4.55984C10.0795 4.69533 9.55274 4.76763 9.00913 4.76763C6.77526 4.76763 4.82652 3.54683 3.79366 1.73601C2.25282 2.53492 1.2 4.14451 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8Z" fill="#828282"/>
714
- </svg>`;
715
- var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
285
+ </svg>`,oo=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
716
286
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.59995 5.05775C4.9254 5.05775 5.99992 3.98325 5.99992 2.65778C5.99992 1.33232 4.9254 0.257812 3.59995 0.257812C2.27448 0.257812 1.19998 1.33232 1.19998 2.65778C1.19998 3.98325 2.27448 5.05775 3.59995 5.05775ZM3.59999 3.85777C4.26272 3.85777 4.79997 3.32052 4.79997 2.65778C4.79997 1.99505 4.26272 1.4578 3.59999 1.4578C2.93725 1.4578 2.4 1.99505 2.4 2.65778C2.4 3.32052 2.93725 3.85777 3.59999 3.85777Z" fill="#828282"/>
717
287
  <path d="M5.39993 6.8577C5.73131 6.8577 5.99993 7.12632 5.99993 7.45769V11.0576H7.19991V7.45769C7.19991 6.46356 6.39406 5.65771 5.39993 5.65771H1.79998C0.80588 5.65771 0 6.46356 0 7.45769V11.0576H1.19999V7.45769C1.19999 7.12632 1.46861 6.8577 1.79998 6.8577H5.39993Z" fill="#828282"/>
718
288
  <path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
719
289
  <path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
720
290
  <path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
721
- </svg>`;
722
- var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
291
+ </svg>`,Ke=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
723
292
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.113 3.12646C8.16729 3.12646 9.02195 3.98113 9.02195 5.03541C9.02195 5.86658 8.49075 6.57368 7.74932 6.83573V10.1259H6.47669V6.83573C5.73526 6.57368 5.20405 5.86658 5.20405 5.03541C5.20405 3.98113 6.05872 3.12646 7.113 3.12646ZM7.113 4.39909C7.46443 4.39909 7.74932 4.68398 7.74932 5.03541C7.74932 5.38684 7.46443 5.67172 7.113 5.67172C6.76158 5.67172 6.47669 5.38684 6.47669 5.03541C6.47669 4.68398 6.76158 4.39909 7.113 4.39909Z" fill="#828282"/>
724
293
  <path d="M3.96336 1.88578C3.15733 2.69183 2.65879 3.80537 2.65879 5.03535C2.65879 6.42093 3.29145 7.65875 4.28366 8.47569L5.1895 7.56984C4.42501 6.98876 3.93142 6.06969 3.93142 5.03535C3.93142 4.1568 4.28752 3.36142 4.86325 2.78567L3.96336 1.88578Z" fill="#828282"/>
725
294
  <path d="M9.36269 2.7856C9.93846 3.36136 10.2946 4.15676 10.2946 5.03535C10.2946 6.06973 9.80096 6.98882 9.03643 7.5699L9.94228 8.47575C10.9345 7.65881 11.5672 6.42096 11.5672 5.03535C11.5672 3.80533 11.0687 2.69177 10.2626 1.88571L9.36269 2.7856Z" fill="#828282"/>
726
295
  <path d="M0.113525 5.03534C0.113525 3.10251 0.896953 1.35266 2.16359 0.0860049L3.06347 0.985892C2.02714 2.02224 1.38616 3.45394 1.38616 5.03534C1.38616 6.61674 2.02714 8.04844 3.06347 9.08479L2.16358 9.98468C0.89695 8.71802 0.113525 6.96817 0.113525 5.03534Z" fill="#828282"/>
727
296
  <path d="M12.0624 9.98474C13.329 8.71809 14.1125 6.96821 14.1125 5.03534C14.1125 3.10248 13.329 1.3526 12.0624 0.0859375L11.1625 0.985824C12.1988 2.02218 12.8398 3.4539 12.8398 5.03534C12.8398 6.61678 12.1988 8.0485 11.1625 9.08486L12.0624 9.98474Z" fill="#828282"/>
728
- </svg>`;
729
- var Icon = ({ type }) => {
730
- let iconHtml = "";
731
- switch (type) {
732
- case "Audience":
733
- iconHtml = audienceIcon;
734
- break;
735
- case "Signal":
736
- iconHtml = signalIcon;
737
- break;
738
- case "Intent":
739
- iconHtml = signalIcon;
740
- break;
741
- case "Enrichment":
742
- iconHtml = enrichmentIcon;
743
- break;
744
- }
745
- return /* @__PURE__ */ (0, import_react.jsx)("i", {
746
- css: import_react11.css`
297
+ </svg>`,Ye=({type:t})=>{let r="";switch(t){case"Audience":r=to;break;case"Signal":r=Ke;break;case"Intent":r=Ke;break;case"Enrichment":r=oo;break}return(0,e.jsx)("i",{css:We.css`
747
298
  align-items: center;
748
299
  display: inline-block;
749
- `,
750
- dangerouslySetInnerHTML: { __html: iconHtml }
751
- });
752
- };
753
-
754
- // src/components/Table/DimensionsTable.tsx
755
- var DimensionsTable = ({
756
- dimensionIndex,
757
- dimensions,
758
- disableEditOverride,
759
- onClick,
760
- preemptiveOverrides
761
- }) => {
762
- var _a;
763
- const { settings } = useDevToolsSettingsContext();
764
- const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
765
- return /* @__PURE__ */ (0, import_react.jsx)(Table, null, /* @__PURE__ */ (0, import_react.jsx)(TBody, null, Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
766
- var _a2;
767
- const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
768
- name: key,
769
- dim: key,
770
- type: void 0,
771
- category: void 0
772
- };
773
- const override = overrides[dim];
774
- return /* @__PURE__ */ (0, import_react.jsx)(TRow, {
775
- key: dim
776
- }, /* @__PURE__ */ (0, import_react.jsx)(TData, null, override !== void 0 ? /* @__PURE__ */ (0, import_react.jsx)("s", {
777
- css: overriddenValue
778
- }, override.initial) : null, /* @__PURE__ */ (0, import_react.jsx)("b", {
779
- css: scoreTd
780
- }, value, override !== void 0 && /* @__PURE__ */ (0, import_react.jsx)("i", {
781
- css: isOverriddenTooltip
782
- }))), /* @__PURE__ */ (0, import_react.jsx)(TData, null, /* @__PURE__ */ (0, import_react.jsx)("div", {
783
- onClick: () => onClick == null ? void 0 : onClick(dim),
784
- css: onClick ? { cursor: "pointer" } : void 0
785
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
786
- css: styles.divider,
787
- role: "presentation"
788
- }), /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)(Icon, {
789
- type
790
- }), " ", type), /* @__PURE__ */ (0, import_react.jsx)("strong", null, category ? `${category}:` : "", " ", name))), /* @__PURE__ */ (0, import_react.jsx)(TData, {
791
- alignment: "right",
792
- color: "light"
793
- }, override !== void 0 && !disableEditOverride ? /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
794
- route: `/overrides/${dim}`
795
- }, "Edit override") : null));
796
- })));
797
- };
798
- var DimensionsTable_default = DimensionsTable;
799
-
800
- // src/components/Buttons/LinkButton.tsx
801
- var import_react12 = require("@emotion/react");
802
- var btnStyle2 = import_react12.css`
803
- background: none;
804
- border: none;
805
- color: var(--brand-secondary-3);
300
+ `,dangerouslySetInnerHTML:{__html:r}})};var ro=({dimensionIndex:t,dimensions:r,disableEditOverride:n,onClick:o,preemptiveOverrides:i})=>{var p;let{settings:a}=J(),l=(p=i!=null?i:a.scoreOverrides)!=null?p:{};return(0,e.jsx)(ie,null,(0,e.jsx)(se,null,Object.entries(r).sort(([m],[u])=>m.localeCompare(u)).map(([m,u])=>{var y;let{dim:s,name:c,type:d,category:f}=(y=t[m])!=null?y:{name:m,dim:m,type:void 0,category:void 0},v=l[s];return(0,e.jsx)(U,{key:s},(0,e.jsx)(R,null,v!==void 0?(0,e.jsx)("s",{css:Ge},v.initial):null,(0,e.jsx)("b",{css:_e},u,v!==void 0&&(0,e.jsx)("i",{css:$e}))),(0,e.jsx)(R,null,(0,e.jsx)("div",{onClick:()=>o==null?void 0:o(s),css:o?{cursor:"pointer"}:void 0},(0,e.jsx)("span",{css:h.divider,role:"presentation"}),(0,e.jsx)("div",null,(0,e.jsx)(Ye,{type:d})," ",d),(0,e.jsx)("strong",null,f?`${f}:`:""," ",c))),(0,e.jsx)(R,{alignment:"right",color:"light"},v!==void 0&&!n?(0,e.jsx)(B,{route:`/overrides/${s}`},"Edit override"):null))})))},A=ro;async function de({actions:t,saveSettings:r,scores:n,settings:o}){var p,m;let i=(p=o.scoreOverrides)!=null?p:{},a={...i},l=[];for(let u of Object.keys(i)){let s=i==null?void 0:i[u];delete a[u],l.push({type:"modscoreS",data:{dimension:u,delta:s.initial-((m=n[u])!=null?m:0)}})}await r({...o,scoreOverrides:a}),await t.rawUpdate(l)}async function Je({quirk:t,settings:r,saveSettings:n,actions:o}){var l;let i=(l=r.quirkOverrides)==null?void 0:l[t];if(!i)return;let a={...r.quirkOverrides};delete a[t],await n({...r,quirkOverrides:a}),await o.rawUpdate([{type:"setquirk",data:{key:t,value:i.initial}}])}var Te=require("@uniformdev/design-system");var ot=D(require("react"));var q=require("@emotion/react"),Xe=q.css`
301
+ position: relative;
302
+ display: inline-block;
303
+ margin-right: var(--spacing-sm);
304
+ transition: var(--duration) var(--timing);
305
+ vertical-align: middle;
306
+ user-select: none;
307
+ width: var(--spacing-xl);
308
+ `,je=q.css`
309
+ appearance: none;
310
+ border-radius: var(--rounded-full);
311
+ background-color: var(--white);
312
+ border: 2px solid var(--gray-400);
806
313
  cursor: pointer;
807
- padding: 0;
314
+ position: absolute;
315
+ display: block;
316
+ width: var(--spacing-md);
317
+ height: var(--spacing-md);
318
+ transition: transform var(--duration) var(--timing), background-color var(--duration) var(--timing),
319
+ background-image var(--duration) var(--timing);
320
+
321
+ &:focus {
322
+ outline: 3px solid var(--brand-primary-1);
323
+ outline-offset: 2px;
324
+ }
325
+
326
+ &:checked {
327
+ background-color: var(--brand-secondary-3);
328
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
329
+ background-position: center center;
330
+ border-color: var(--brand-secondary-3);
331
+ transform: translateX(var(--spacing-base));
332
+
333
+ &:hover,
334
+ &:focus {
335
+ border-color: var(--brand-primary-1);
336
+ background-color: var(--brand-primary-1);
337
+ }
338
+ }
339
+ `,et=q.css`
340
+ border-radius: var(--rounded-full);
341
+ background-color: var(--gray-300);
342
+ cursor: pointer;
343
+ display: block;
344
+ overflow: hidden;
345
+ width: var(--spacing-xl);
346
+ height: var(--spacing-md);
347
+ `,tt=q.css`
348
+ color: var(--brand-secondary-1);
808
349
  font-weight: var(--font-bold);
809
- margin-left: auto;
350
+ line-height: 1.25rem;
351
+ cursor: default;
352
+ `,le=q.css`
353
+ color: var(--gray-700);
810
354
  font-size: var(--font-sm);
811
- `;
812
- var LinkButton = ({ children, ...props }) => {
813
- return /* @__PURE__ */ (0, import_react.jsx)("button", {
814
- type: "button",
815
- css: btnStyle2,
816
- ...props
817
- }, children);
818
- };
819
-
820
- // src/lib/deleteOverride.ts
821
- async function deleteScoreOverrides({
822
- actions,
823
- saveSettings,
824
- scores,
825
- settings
826
- }) {
827
- var _a, _b;
828
- const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
829
- const newOverrides = { ...scoreOverrides };
830
- const commands = [];
831
- for (const dim of Object.keys(scoreOverrides)) {
832
- const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
833
- delete newOverrides[dim];
834
- commands.push({
835
- type: "modscoreS",
836
- data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
837
- });
838
- }
839
- await saveSettings({
840
- ...settings,
841
- scoreOverrides: newOverrides
842
- });
843
- await actions.rawUpdate(commands);
844
- }
845
- async function deleteQuirkOverride({
846
- quirk: dim,
847
- settings,
848
- saveSettings,
849
- actions
850
- }) {
851
- var _a;
852
- const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
853
- if (!override) {
854
- return;
855
- }
856
- const newOverrides = { ...settings.quirkOverrides };
857
- delete newOverrides[dim];
858
- await saveSettings({
859
- ...settings,
860
- quirkOverrides: newOverrides
861
- });
862
- await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
863
- }
864
-
865
- // src/components/Personalization/Dimensions.tsx
866
- var Dimensions = ({
867
- dimensionIndex: { index: dimensionIndex },
868
- state: { scores, data },
869
- actions,
870
- saveSettings,
871
- settings
872
- }) => {
873
- const remainingDimensions = React4.useMemo(() => {
874
- const newRemainingDimensions = {};
875
- Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
876
- newRemainingDimensions[dimensionIndex[key].dim] = 0;
877
- });
878
- return newRemainingDimensions;
879
- }, [scores, dimensionIndex]);
880
- const activeDims = Object.keys(scores).length;
881
- const totalDims = activeDims + Object.keys(remainingDimensions).length;
882
- const toggleControlGroup = () => {
883
- actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
884
- };
885
- return /* @__PURE__ */ (0, import_react.jsx)(React4.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
886
- css: styles.page
887
- }, /* @__PURE__ */ (0, import_react.jsx)("div", {
888
- css: styles.headingGroup
889
- }, /* @__PURE__ */ (0, import_react.jsx)("h2", {
890
- css: styles.title
891
- }, "Dimensions", /* @__PURE__ */ (0, import_react.jsx)("small", null, activeDims, " active of ", totalDims)), /* @__PURE__ */ (0, import_react.jsx)("div", {
892
- css: styles.reset
893
- }, /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
894
- onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget)
895
- }, "clear all dimensions")), /* @__PURE__ */ (0, import_react.jsx)(SwitchInput, {
896
- label: "Control Group",
897
- onChange: toggleControlGroup,
898
- checked: data.controlGroup
899
- })), activeDims > 0 ? /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
900
- dimensionIndex,
901
- dimensions: scores
902
- }) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
903
- title: data.controlGroup ? "In control group" : "No active dimensions",
904
- text: data.controlGroup ? "You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run." : "You do not have score in any dimensions yet.",
905
- buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
906
- buttonType: "secondary",
907
- onClick: toggleControlGroup
908
- }, "Exit control group") : null
909
- }), /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
910
- title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`
911
- }, /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
912
- dimensionIndex,
913
- dimensions: remainingDimensions
914
- })))));
915
- };
916
-
917
- // src/components/Personalization/Overrides.tsx
918
- var React5 = __toESM(require("react"));
919
-
920
- // src/components/CallToAction/AddButton.tsx
921
- var import_react13 = require("@emotion/react");
922
- function AddButton({
923
- onClick
924
- }) {
925
- return /* @__PURE__ */ (0, import_react.jsx)("button", {
926
- css: import_react13.css`
355
+ margin: var(--spacing-sm) 0;
356
+ `;var _=({label:t,infoText:r,toggleText:n,...o})=>{let i=()=>r&&n?o.checked?(0,e.jsx)("p",{css:le},n):(0,e.jsx)("p",{css:le},r):r?(0,e.jsx)("p",{css:le},r):null;return(0,e.jsx)(ot.Fragment,null,(0,e.jsx)("div",{css:Xe},(0,e.jsx)("input",{type:"checkbox",css:je,...o,className:o.className}),(0,e.jsx)("label",{htmlFor:o.id,css:et})),(0,e.jsx)("label",{htmlFor:o.id,css:tt},t),i())};var rt=({dimensionIndex:{index:t},state:{scores:r,data:n},actions:o,saveSettings:i,settings:a})=>{let l=pe.useMemo(()=>{let s={};return Object.keys(t).filter(c=>!r[c]).map(c=>{s[t[c].dim]=0}),s},[r,t]),p=Object.keys(r).length,m=p+Object.keys(l).length,u=()=>{o.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])};return(0,e.jsx)(pe.Fragment,null,(0,e.jsx)("article",{css:h.page},(0,e.jsx)("div",{css:h.headingGroup},(0,e.jsx)("h2",{css:h.title},"Dimensions",(0,e.jsx)("small",null,p," active of ",m)),(0,e.jsx)("div",{css:h.reset},(0,e.jsx)(Te.Button,{buttonType:"ghost",onClick:()=>de({actions:o,saveSettings:i,scores:r,settings:a}).then(o.forget)},"clear all dimensions")),(0,e.jsx)(_,{name:"controlGroup",label:"Control Group",onChange:u,checked:n.controlGroup})),p>0?(0,e.jsx)(A,{dimensionIndex:t,dimensions:r}):(0,e.jsx)(Q,{title:n.controlGroup?"In control group":"No active dimensions",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:n.controlGroup?(0,e.jsx)(Te.Button,{buttonType:"secondary",onClick:u},"Exit control group"):null}),(0,e.jsx)(j,null,(0,e.jsx)(ee,{title:`Inactive Dimensions (${Object.keys(l).length})`},(0,e.jsx)(A,{dimensionIndex:t,dimensions:l})))))};var it=D(require("react"));var nt=require("@emotion/react");function Se({onClick:t}){return(0,e.jsx)("button",{css:nt.css`
927
357
  width: 3.5rem;
928
358
  height: 3.5rem;
929
359
  display: flex;
@@ -936,98 +366,7 @@ function AddButton({
936
366
  svg {
937
367
  color: var(--red-button);
938
368
  }
939
- `,
940
- onClick,
941
- "aria-label": "Add new override",
942
- className: "text-secondary shadow-xl rounded-full flex items-center bg-secondary",
943
- "data-test-id": "add-new-overrides-button"
944
- }, /* @__PURE__ */ (0, import_react.jsx)("svg", {
945
- xmlns: "http://www.w3.org/2000/svg",
946
- width: "66",
947
- height: "66",
948
- viewBox: "0 0 66 66"
949
- }, /* @__PURE__ */ (0, import_react.jsx)("g", {
950
- fill: "none",
951
- fillRule: "evenodd"
952
- }, /* @__PURE__ */ (0, import_react.jsx)("circle", {
953
- cx: "33",
954
- cy: "33",
955
- r: "33",
956
- fill: "currentColor"
957
- }), /* @__PURE__ */ (0, import_react.jsx)("g", {
958
- fill: "#FFF",
959
- transform: "translate(19 19)"
960
- }, /* @__PURE__ */ (0, import_react.jsx)("rect", {
961
- width: "4",
962
- height: "28",
963
- x: "12",
964
- rx: "2"
965
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
966
- d: "M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,26 C16,27.1045695 15.1045695,28 14,28 C12.8954305,28 12,27.1045695 12,26 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z",
967
- transform: "rotate(90 14 14)"
968
- })))));
969
- }
970
-
971
- // src/components/Personalization/Overrides.tsx
972
- var Overrides = ({
973
- dimensionIndex: { index: dimensionIndex },
974
- state: { data, scores },
975
- actions,
976
- settings,
977
- saveSettings
978
- }) => {
979
- var _a;
980
- const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
981
- const totalOverrides = Object.keys(overrides).length;
982
- const addNewOverride = (e) => {
983
- e.preventDefault();
984
- return saveSettings({ ...settings, route: "/overrides/add" });
985
- };
986
- const toggleControlGroup = () => {
987
- actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
988
- };
989
- const scoresAffectedByOverrides = {};
990
- Object.entries(scores).map(([key, value]) => {
991
- if (overrides[key] !== void 0) {
992
- scoresAffectedByOverrides[key] = value;
993
- }
994
- });
995
- return /* @__PURE__ */ (0, import_react.jsx)(React5.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
996
- css: styles.page
997
- }, /* @__PURE__ */ (0, import_react.jsx)("div", {
998
- css: styles.headingGroup
999
- }, /* @__PURE__ */ (0, import_react.jsx)("h2", {
1000
- css: styles.title
1001
- }, "What if?"), /* @__PURE__ */ (0, import_react.jsx)("div", {
1002
- css: styles.reset
1003
- }, /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
1004
- onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores })
1005
- }, "delete all overrides")), /* @__PURE__ */ (0, import_react.jsx)(AddButton, {
1006
- onClick: addNewOverride
1007
- })), /* @__PURE__ */ (0, import_react.jsx)("p", null, "Override dimension scores to test personalization"), totalOverrides > 0 ? /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
1008
- dimensionIndex,
1009
- dimensions: scoresAffectedByOverrides,
1010
- onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
1011
- }) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
1012
- title: data.controlGroup ? "In control group" : "No overrides",
1013
- text: data.controlGroup ? "You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run." : "You do not have any dimension overrides yet.",
1014
- buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
1015
- buttonType: "secondary",
1016
- onClick: toggleControlGroup
1017
- }, "Exit control group") : null
1018
- })));
1019
- };
1020
-
1021
- // src/components/Personalization/AddOverride.tsx
1022
- var import_formik3 = require("formik");
1023
- var yup = __toESM(require("yup"));
1024
-
1025
- // src/components/Inputs/SelectInput.tsx
1026
- var import_formik = require("formik");
1027
-
1028
- // src/components/Inputs/inputs.styles.ts
1029
- var import_react14 = require("@emotion/react");
1030
- var textInput = import_react14.css`
369
+ `,onClick:t,"aria-label":"Add new override",className:"text-secondary shadow-xl rounded-full flex items-center bg-secondary","data-test-id":"add-new-overrides-button"},(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"66",height:"66",viewBox:"0 0 66 66"},(0,e.jsx)("g",{fill:"none",fillRule:"evenodd"},(0,e.jsx)("circle",{cx:"33",cy:"33",r:"33",fill:"currentColor"}),(0,e.jsx)("g",{fill:"#FFF",transform:"translate(19 19)"},(0,e.jsx)("rect",{width:"4",height:"28",x:"12",rx:"2"}),(0,e.jsx)("path",{d:"M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,26 C16,27.1045695 15.1045695,28 14,28 C12.8954305,28 12,27.1045695 12,26 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z",transform:"rotate(90 14 14)"})))))}var De=require("@uniformdev/design-system"),st=({dimensionIndex:{index:t},state:{data:r,scores:n},actions:o,settings:i,saveSettings:a})=>{var c;let l=(c=i.scoreOverrides)!=null?c:{},p=Object.keys(l).length,m=d=>(d.preventDefault(),a({...i,route:"/overrides/add"})),u=()=>{o.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])},s={};return Object.entries(n).map(([d,f])=>{l[d]!==void 0&&(s[d]=f)}),(0,e.jsx)(it.Fragment,null,(0,e.jsx)("article",{css:h.page},(0,e.jsx)("div",{css:h.headingGroup},(0,e.jsx)("h2",{css:h.title},"What if?"),(0,e.jsx)("div",{css:h.reset},(0,e.jsx)(De.Button,{buttonType:"ghost",onClick:()=>de({actions:o,settings:i,saveSettings:a,scores:n})},"delete all overrides")),(0,e.jsx)(Se,{onClick:m})),(0,e.jsx)("p",null,"Override dimension scores to test personalization"),p>0?(0,e.jsx)(A,{dimensionIndex:t,dimensions:s,onClick:d=>a({...i,route:`/overrides/${d}`})}):(0,e.jsx)(Q,{title:r.controlGroup?"In control group":"No overrides",text:r.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have any dimension overrides yet.",buttonGroup:r.controlGroup?(0,e.jsx)(De.Button,{buttonType:"secondary",onClick:u},"Exit control group"):null})))};var z=require("formik");var N=D(require("yup"));var V=require("@emotion/react"),at=V.css`
1031
370
  background: var(--white);
1032
371
  border: 1px solid var(--gray-500);
1033
372
  border-radius: var(--rounded-base);
@@ -1038,50 +377,26 @@ var textInput = import_react14.css`
1038
377
  cursor: not-allowed;
1039
378
  color: var(--gray-200);
1040
379
  }
1041
- `;
1042
- var selectInput = import_react14.css`
1043
- appearance: none;
1044
- background: var(--white)
1045
- url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iIzgyODI4MiIKICAvPgo8L3N2Zz4=')
1046
- no-repeat 98% 50%;
1047
- border: 1px solid var(--gray-500);
1048
- border-radius: var(--rounded-base);
1049
- color: var(--brand-secondary-1);
1050
- padding: var(--spacing-base);
1051
- &:disabled {
1052
- cursor: not-allowed;
1053
- color: var(--gray-200);
1054
- }
1055
- `;
1056
- var editableInput = import_react14.css`
1057
- padding: var(--spacing-sm);
1058
- max-width: 160px;
1059
- `;
1060
- var inputWrapper = import_react14.css`
380
+ `,er=V.css`
1061
381
  margin: var(--spacing-base) 0;
1062
- `;
1063
- var inputLabel = import_react14.css`
382
+ `,ct=V.css`
1064
383
  color: var(--brand-secondary-1);
1065
384
  display: flex;
1066
385
  flex-direction: column;
1067
386
  margin: 0 0 var(--spacing-sm);
1068
- `;
1069
- var inputText = import_react14.css`
387
+ `,dt=V.css`
1070
388
  color: var(--brand-secondary-1);
1071
389
  display: block;
1072
390
  flex: 1 100%;
1073
391
  font-weight: var(--font-bold);
1074
392
  margin: 0 0 var(--spacing-sm);
1075
- `;
1076
- var inputCaption = import_react14.css`
393
+ `,tr=V.css`
1077
394
  color: var(--gray-600);
1078
395
  font-size: var(--font-sm);
1079
- `;
1080
- var errorMsg = import_react14.css`
396
+ `,or=V.css`
1081
397
  color: var(--brand-secondary-5);
1082
398
  display: block;
1083
- `;
1084
- var rangeInput = import_react14.css`
399
+ `,lt=V.css`
1085
400
  flex-direction: row;
1086
401
  flex-wrap: wrap;
1087
402
 
@@ -1149,679 +464,18 @@ var rangeInput = import_react14.css`
1149
464
  flex: 1 0 20%;
1150
465
  padding: 10px;
1151
466
  }
1152
- `;
1153
-
1154
- // src/components/Inputs/SelectInput.tsx
1155
- var SelectInput = ({ field, form, meta, ...rawProps }) => {
1156
- const { label, options, caption, ...passThroughProps } = rawProps;
1157
- return /* @__PURE__ */ (0, import_react.jsx)("div", {
1158
- css: inputWrapper
1159
- }, /* @__PURE__ */ (0, import_react.jsx)("label", {
1160
- css: inputLabel
1161
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
1162
- css: inputText
1163
- }, label), /* @__PURE__ */ (0, import_react.jsx)("select", {
1164
- ...field,
1165
- ...passThroughProps,
1166
- css: selectInput
1167
- }, options.map((o, index) => /* @__PURE__ */ (0, import_react.jsx)("option", {
1168
- value: o.value,
1169
- key: index
1170
- }, o.text)))), caption ? /* @__PURE__ */ (0, import_react.jsx)("span", {
1171
- css: inputCaption
1172
- }, caption) : null, /* @__PURE__ */ (0, import_react.jsx)(import_formik.ErrorMessage, {
1173
- component: "div",
1174
- css: errorMsg,
1175
- name: field.name
1176
- }));
1177
- };
1178
-
1179
- // src/components/Inputs/DependableSelectBox.tsx
1180
- var import_formik2 = require("formik");
1181
-
1182
- // src/components/Inputs/SliderInput.tsx
1183
- var SliderInput = ({ field, form, meta, ...rawProps }) => {
1184
- var _a, _b;
1185
- const { label, caption, min = 0, max = 100, step } = rawProps;
1186
- return /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)("label", {
1187
- css: [inputLabel, rangeInput]
1188
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
1189
- css: inputText
1190
- }, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
1191
- type: "range",
1192
- min,
1193
- max,
1194
- step,
1195
- ...field,
1196
- value: (_a = field.value) != null ? _a : 0
1197
- }), /* @__PURE__ */ (0, import_react.jsx)("span", {
1198
- className: "value-display"
1199
- }, (_b = field.value) != null ? _b : 0)), /* @__PURE__ */ (0, import_react.jsx)("p", {
1200
- css: inputCaption
1201
- }, caption));
1202
- };
1203
- var SliderInput_default = SliderInput;
1204
-
1205
- // src/components/Inputs/DependableSelectBox.tsx
1206
- var DependableSelectBox = ({
1207
- name,
1208
- label,
1209
- dimensionToOverride,
1210
- isSubmitting
1211
- }) => {
1212
- const rangeProps = {
1213
- max: 100,
1214
- step: 20
1215
- };
1216
- if (dimensionToOverride) {
1217
- rangeProps.max = dimensionToOverride.cap;
1218
- rangeProps.step = dimensionToOverride.str;
1219
- }
1220
- return /* @__PURE__ */ (0, import_react.jsx)(import_formik2.Field, {
1221
- component: SliderInput_default,
1222
- label,
1223
- caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`,
1224
- id: name,
1225
- name,
1226
- disabled: isSubmitting,
1227
- ...rangeProps
1228
- });
1229
- };
1230
- var DependableSelectBox_default = DependableSelectBox;
1231
-
1232
- // src/components/Form/Fieldset.tsx
1233
- var import_react15 = require("@emotion/react");
1234
- var Fieldset = ({ children, ...props }) => {
1235
- return /* @__PURE__ */ (0, import_react.jsx)("fieldset", {
1236
- css: import_react15.css`
467
+ `;var me=require("@uniformdev/design-system"),pt=({field:t,form:r,meta:n,...o})=>{var u,s;let{label:i,caption:a,min:l=0,max:p=100,step:m}=o;return(0,e.jsx)("div",null,(0,e.jsx)("label",{css:[ct,lt]},(0,e.jsx)("span",{css:dt},i),(0,e.jsx)("input",{type:"range",min:l,max:p,step:m,...t,value:(u=t.value)!=null?u:0}),(0,e.jsx)("span",{className:"value-display"},(s=t.value)!=null?s:0)),a?(0,e.jsx)(me.Caption,null,a):null,r.touched[t.name]&&r.errors[t.name]?(0,e.jsx)(me.ErrorMessage,{message:r.errors[t.name]}):null)};var mt=require("@emotion/react"),E=({children:t,...r})=>(0,e.jsx)("fieldset",{css:mt.css`
1237
468
  border: none;
1238
469
  padding: 0;
1239
- `,
1240
- ...props
1241
- }, children);
1242
- };
1243
-
1244
- // src/components/Form/Legend.tsx
1245
- var import_react16 = require("@emotion/react");
1246
- var Legend = ({ children }) => {
1247
- return /* @__PURE__ */ (0, import_react.jsx)("legend", {
1248
- css: import_react16.css`
470
+ & legend {
471
+ margin-bottom: var(--spacing-base);
472
+ }
473
+ `,...r},t);var ut=require("@emotion/react"),G=({children:t})=>(0,e.jsx)("legend",{css:ut.css`
1249
474
  font-size: var(--font-md);
1250
475
  font-weight: var(--font-bold);
1251
476
  border-bottom: 1px solid var(--gray-400);
1252
477
  width: 100%;
1253
- `
1254
- }, children);
1255
- };
1256
-
1257
- // src/lib/computeOverrideEffects.ts
1258
- var import_context = require("@uniformdev/context");
1259
- function computeOverrideEffects({ manifest, visitor, override }) {
1260
- const contextCopy = new import_context.Context({
1261
- manifest,
1262
- transitionStore: new CopyTransitionDataStore({ initialData: visitor })
1263
- });
1264
- const currentScores = { ...contextCopy.scores };
1265
- contextCopy.storage.updateData([override]);
1266
- const newScores = { ...contextCopy.scores };
1267
- const changes = { ...newScores };
1268
- Object.entries(changes).forEach(([key, value]) => {
1269
- const oldScore = currentScores[key];
1270
- if (oldScore === value) {
1271
- delete changes[key];
1272
- }
1273
- });
1274
- return changes;
1275
- }
1276
- var CopyTransitionDataStore = class extends import_context.TransitionDataStore {
1277
- async handleDelete() {
1278
- }
1279
- async handleUpdateData() {
1280
- }
1281
- };
1282
-
1283
- // src/lib/applyOverrides.ts
1284
- function applyScoreOverrides({
1285
- scores,
1286
- scoreOverrides
1287
- }) {
1288
- const commands = [];
1289
- if (!scoreOverrides)
1290
- return [];
1291
- Object.entries(scoreOverrides).forEach(([dim, override]) => {
1292
- var _a;
1293
- const score = (_a = scores[dim]) != null ? _a : 0;
1294
- if (score === override.override) {
1295
- return;
1296
- }
1297
- const delta = override.override - score;
1298
- commands.push({
1299
- type: "modscoreS",
1300
- data: { dimension: dim, delta }
1301
- });
1302
- });
1303
- return commands;
1304
- }
1305
- function applyQuirkOverrides({
1306
- quirks,
1307
- quirkOverrides
1308
- }) {
1309
- const quirkVector = {};
1310
- if (!quirkOverrides)
1311
- return void 0;
1312
- Object.entries(quirkOverrides).forEach(([quirk, override]) => {
1313
- const quirkValue = quirks[quirk];
1314
- if (quirkValue === override.override) {
1315
- return;
1316
- }
1317
- quirkVector[quirk] = override.override;
1318
- });
1319
- return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
1320
- }
1321
-
1322
- // src/components/Personalization/AddOverride.tsx
1323
- var overrideSettingsSchema = yup.object({
1324
- dimension: yup.string(),
1325
- score: yup.number()
1326
- });
1327
- var AddOverride = ({
1328
- settings,
1329
- saveSettings,
1330
- state,
1331
- actions,
1332
- dimensionIndex: { index }
1333
- }) => {
1334
- var _a, _b;
1335
- const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
1336
- const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
1337
- if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
1338
- return /* @__PURE__ */ (0, import_react.jsx)("p", null, "Error, manifest is broken or there is no signal to override.");
1339
- }
1340
- const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
1341
- const type = value.type ? `${value.type}: ` : "";
1342
- const category = value.category ? `${value.category} - ` : "";
1343
- const text = `${type}${category}${value.name}`;
1344
- return {
1345
- value: key,
1346
- text
1347
- };
1348
- });
1349
- overridableDimensions.unshift({
1350
- value: "_none",
1351
- text: "Choose dimension to override"
1352
- });
1353
- return /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Formik, {
1354
- initialValues: {
1355
- dimension: overriddenDimension,
1356
- score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
1357
- },
1358
- validationSchema: overrideSettingsSchema,
1359
- enableReinitialize: true,
1360
- onSubmit: async (values) => {
1361
- var _a2, _b2, _c, _d, _e, _f;
1362
- const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
1363
- const cappedOverrideScore = Math.min(values.score, cap);
1364
- const newSettings = {
1365
- ...settings,
1366
- scoreOverrides: {
1367
- ...settings.scoreOverrides,
1368
- [values.dimension]: {
1369
- initial: (_f = (_e = (_d = (_c = settings.scoreOverrides) == null ? void 0 : _c[values.dimension]) == null ? void 0 : _d.initial) != null ? _e : state.scores[values.dimension]) != null ? _f : 0,
1370
- override: cappedOverrideScore
1371
- }
1372
- },
1373
- route: "/overrides"
1374
- };
1375
- await saveSettings(newSettings);
1376
- const applyCommands = applyScoreOverrides({
1377
- scores: state.scores,
1378
- scoreOverrides: newSettings.scoreOverrides
1379
- });
1380
- actions.rawUpdate(applyCommands);
1381
- }
1382
- }, ({ dirty, isValid, isSubmitting, values }) => {
1383
- var _a2;
1384
- const overrideEffects = computeOverrideEffects({
1385
- manifest: state.manifest,
1386
- visitor: state.data,
1387
- override: {
1388
- type: "modscore",
1389
- data: {
1390
- dimension: values.dimension,
1391
- delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
1392
- }
1393
- }
1394
- });
1395
- const preemptiveOverrides = Object.entries(state.scores).reduce((acc, [key, value]) => {
1396
- acc[key] = {
1397
- initial: value,
1398
- override: value
1399
- };
1400
- return acc;
1401
- }, {});
1402
- const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
1403
- return /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Form, {
1404
- css: styles.page
1405
- }, /* @__PURE__ */ (0, import_react.jsx)("h1", {
1406
- css: styles.title
1407
- }, "Override Dimension"), /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Field, {
1408
- component: SelectInput,
1409
- label: "Dimension",
1410
- id: "dimension",
1411
- name: "dimension",
1412
- options: overridableDimensions,
1413
- disabled: isSubmitting
1414
- }), /* @__PURE__ */ (0, import_react.jsx)("p", {
1415
- css: styles.text
1416
- }, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")), values.dimension ? /* @__PURE__ */ (0, import_react.jsx)(DependableSelectBox_default, {
1417
- name: "score",
1418
- label: "Score",
1419
- dimensionToOverride: index[values.dimension],
1420
- isSubmitting
1421
- }) : null, /* @__PURE__ */ (0, import_react.jsx)(Fieldset, {
1422
- disabled: isSubmitting,
1423
- css: { marginBottom: "2rem" }
1424
- }, hasScoreEffects ? /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
1425
- title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`
1426
- }, /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
1427
- preemptiveOverrides,
1428
- dimensionIndex: index,
1429
- dimensions: overrideEffects,
1430
- disableEditOverride: true
1431
- }))) : null, dirty ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
1432
- type: "submit",
1433
- css: styles.submitButton,
1434
- disabled: !isValid
1435
- }, "Save") : null, /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
1436
- route: "/overrides",
1437
- css: styles.cancelButton
1438
- }, "Cancel")));
1439
- });
1440
- };
1441
-
1442
- // src/components/Personalization/Quirks.tsx
1443
- var import_react18 = require("react");
1444
-
1445
- // src/components/Inputs/EditableText.tsx
1446
- var import_react17 = require("react");
1447
- var EditableText = ({ name, value, submit }) => {
1448
- const [inputValue, setInputValue] = (0, import_react17.useState)(value != null ? value : "");
1449
- (0, import_react17.useEffect)(() => {
1450
- setInputValue(value != null ? value : "");
1451
- }, [value]);
1452
- const onChange = (e) => {
1453
- setInputValue(e.target.value);
1454
- };
1455
- return /* @__PURE__ */ (0, import_react.jsx)("div", {
1456
- css: { display: "flex", gap: "var(--spacing-sm)" }
1457
- }, /* @__PURE__ */ (0, import_react.jsx)("input", {
1458
- type: "text",
1459
- css: [textInput, editableInput],
1460
- name,
1461
- value: inputValue,
1462
- onChange
1463
- }), /* @__PURE__ */ (0, import_react.jsx)(Button, {
1464
- buttonType: "primary",
1465
- onClick: () => submit(name, inputValue != null ? inputValue : "")
1466
- }, "Save"));
1467
- };
1468
- var EditableText_default = EditableText;
1469
-
1470
- // src/components/Inputs/EditableSelectBox.tsx
1471
- var EditableSelectBox = ({ name, value, submit, options }) => {
1472
- const onChange = (e) => submit(e.target.name, e.target.value);
1473
- return /* @__PURE__ */ (0, import_react.jsx)("select", {
1474
- name,
1475
- defaultValue: value,
1476
- onChange,
1477
- css: [selectInput, editableInput]
1478
- }, /* @__PURE__ */ (0, import_react.jsx)("option", {
1479
- key: "_none",
1480
- value: "_none"
1481
- }, "None"), (options != null ? options : []).map((option) => /* @__PURE__ */ (0, import_react.jsx)("option", {
1482
- key: option.value,
1483
- value: option.value
1484
- }, option.name)));
1485
- };
1486
- var EditableSelectBox_default = EditableSelectBox;
1487
-
1488
- // src/components/Personalization/Quirks.tsx
1489
- var Quirks = ({ ...props }) => {
1490
- const {
1491
- state: {
1492
- data: { quirks }
1493
- },
1494
- quirksIndex: { index: quirksIndex },
1495
- settings,
1496
- saveSettings,
1497
- actions
1498
- } = props;
1499
- const [editable, setEditable] = (0, import_react18.useState)("");
1500
- let editableQuirkMetaData;
1501
- if (editable) {
1502
- editableQuirkMetaData = quirksIndex[editable];
1503
- }
1504
- const submitOverride = async (name, value) => {
1505
- var _a, _b, _c;
1506
- setEditable("");
1507
- const newSettings = {
1508
- ...settings,
1509
- quirkOverrides: {
1510
- ...settings.quirkOverrides,
1511
- [name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
1512
- }
1513
- };
1514
- await saveSettings(newSettings);
1515
- const quirkOverrides = applyQuirkOverrides({
1516
- quirks,
1517
- quirkOverrides: newSettings.quirkOverrides
1518
- });
1519
- actions.update({ quirks: quirkOverrides });
1520
- };
1521
- return /* @__PURE__ */ (0, import_react.jsx)(React.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
1522
- css: styles.page
1523
- }, /* @__PURE__ */ (0, import_react.jsx)("h1", {
1524
- css: styles.title
1525
- }, "Quirks"), /* @__PURE__ */ (0, import_react.jsx)("p", {
1526
- css: styles.text
1527
- }, "Keys defined in Uniform and their current, programmatically defined values for this visit."), Object.keys(quirksIndex).length ? /* @__PURE__ */ (0, import_react.jsx)(Table, null, /* @__PURE__ */ (0, import_react.jsx)(THead, null, /* @__PURE__ */ (0, import_react.jsx)(TRow, null, /* @__PURE__ */ (0, import_react.jsx)(THeading, null, "Key"), /* @__PURE__ */ (0, import_react.jsx)(THeading, null, "Value"), /* @__PURE__ */ (0, import_react.jsx)(TData, null, ""))), /* @__PURE__ */ (0, import_react.jsx)(TBody, null, Object.values(quirksIndex).map(({ name, value, id }) => {
1528
- var _a, _b, _c;
1529
- const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
1530
- return /* @__PURE__ */ (0, import_react.jsx)(TRow, {
1531
- key: id,
1532
- border: "bottom"
1533
- }, /* @__PURE__ */ (0, import_react.jsx)(TData, null, /* @__PURE__ */ (0, import_react.jsx)("strong", null, name)), /* @__PURE__ */ (0, import_react.jsx)(TData, null, editable !== id ? /* @__PURE__ */ (0, import_react.jsx)("div", {
1534
- onClick: () => {
1535
- setEditable(id);
1536
- }
1537
- }, initialValue ? /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)("s", null, initialValue)) : null, value) : null, editable === id && editableQuirkMetaData && /* @__PURE__ */ (0, import_react.jsx)(React.Fragment, null, editableQuirkMetaData.options ? /* @__PURE__ */ (0, import_react.jsx)(EditableSelectBox_default, {
1538
- name: id,
1539
- value,
1540
- submit: submitOverride,
1541
- options: editableQuirkMetaData.options
1542
- }) : /* @__PURE__ */ (0, import_react.jsx)(EditableText_default, {
1543
- name: id,
1544
- value,
1545
- submit: submitOverride
1546
- }))), /* @__PURE__ */ (0, import_react.jsx)(TData, null, editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
1547
- onClick: () => {
1548
- deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
1549
- }
1550
- }, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Clear Override")) : /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
1551
- onClick: () => {
1552
- setEditable(id);
1553
- }
1554
- }, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Override"))));
1555
- }))) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
1556
- title: "No quirks configured",
1557
- text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
1558
- })));
1559
- };
1560
-
1561
- // src/components/Personalization/Settings.tsx
1562
- var import_formik5 = require("formik");
1563
-
1564
- // src/components/Inputs/InputText.tsx
1565
- var import_formik4 = require("formik");
1566
- var InputText = ({ field, form, meta, ...rawProps }) => {
1567
- const { label, caption, ...passThroughProps } = rawProps;
1568
- return /* @__PURE__ */ (0, import_react.jsx)("div", {
1569
- css: inputWrapper
1570
- }, /* @__PURE__ */ (0, import_react.jsx)("label", {
1571
- css: inputLabel
1572
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
1573
- css: inputText
1574
- }, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
1575
- type: "text",
1576
- css: textInput,
1577
- ...field,
1578
- ...passThroughProps
1579
- })), caption ? /* @__PURE__ */ (0, import_react.jsx)("span", {
1580
- css: inputCaption
1581
- }, caption) : null, /* @__PURE__ */ (0, import_react.jsx)(import_formik4.ErrorMessage, {
1582
- component: "div",
1583
- css: errorMsg,
1584
- name: field.name
1585
- }));
1586
- };
1587
-
1588
- // src/components/Personalization/Settings.tsx
1589
- var yup2 = __toESM(require("yup"));
1590
- var editableSettingsSchema = yup2.object({
1591
- apiKey: yup2.string().matches(/^uf.+$/, "API keys start with `uf`, double check your API key"),
1592
- apiHost: yup2.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/, "API host must be a Uniform domain."),
1593
- logging: yup2.boolean(),
1594
- projectId: yup2.string().uuid(),
1595
- consentMode: yup2.boolean()
1596
- });
1597
- var Settings = ({
1598
- settings,
1599
- saveSettings,
1600
- actions,
1601
- state: { data },
1602
- dimensionIndex: { error, loading }
1603
- }) => {
1604
- var _a, _b, _c;
1605
- return /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Formik, {
1606
- initialValues: {
1607
- apiHost: (_a = settings.apiHost) != null ? _a : "",
1608
- apiKey: (_b = settings.apiKey) != null ? _b : "",
1609
- projectId: (_c = settings.projectId) != null ? _c : "",
1610
- consentMode: !!data.consent,
1611
- logging: settings.logLevel !== "none" && Boolean(settings.logLevel)
1612
- },
1613
- validationSchema: editableSettingsSchema,
1614
- enableReinitialize: true,
1615
- onSubmit: (values) => {
1616
- saveSettings({
1617
- ...settings,
1618
- apiHost: values.apiHost,
1619
- apiKey: values.apiKey,
1620
- projectId: values.projectId,
1621
- logLevel: values.logging ? "debug" : "none",
1622
- consentMode: values.consentMode
1623
- });
1624
- actions.rawUpdate([{ type: "consent", data: values.consentMode }]);
1625
- }
1626
- }, ({ dirty, isValid, isSubmitting }) => /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Form, {
1627
- css: styles.page
1628
- }, /* @__PURE__ */ (0, import_react.jsx)("h1", {
1629
- css: styles.title
1630
- }, "Settings"), /* @__PURE__ */ (0, import_react.jsx)(Fieldset, {
1631
- disabled: isSubmitting
1632
- }, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Data Connection"), !loading && error ? /* @__PURE__ */ (0, import_react.jsx)("p", {
1633
- css: styles.error
1634
- }, "Unable to fetch data from Uniform", /* @__PURE__ */ (0, import_react.jsx)("br", null), /* @__PURE__ */ (0, import_react.jsx)("em", null, error.message)) : null, /* @__PURE__ */ (0, import_react.jsx)("p", {
1635
- css: styles.text
1636
- }, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
1637
- component: InputText,
1638
- label: "Uniform API key",
1639
- caption: "Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",
1640
- id: "api-key",
1641
- name: "apiKey",
1642
- autoComplete: "off"
1643
- }), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
1644
- component: InputText,
1645
- label: "Uniform Project ID",
1646
- caption: "Available to copy after generating an API key",
1647
- id: "project-id",
1648
- name: "projectId",
1649
- autoComplete: "off"
1650
- }), /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
1651
- title: "Advanced"
1652
- }, /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
1653
- component: InputText,
1654
- label: "Alternative API Host",
1655
- caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option.",
1656
- id: "api-host",
1657
- name: "apiHost",
1658
- autoComplete: "off"
1659
- }))), /* @__PURE__ */ (0, import_react.jsx)(Fieldset, null, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Storage Consent"), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
1660
- component: FormikSwitchInput,
1661
- label: "Store visitor data",
1662
- id: "consent-mode",
1663
- name: "consentMode"
1664
- }), /* @__PURE__ */ (0, import_react.jsx)("p", null, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Turning on consents to storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh."))), /* @__PURE__ */ (0, import_react.jsx)(Fieldset, null, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Logging"), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
1665
- component: FormikSwitchInput,
1666
- label: "Write Uniform Context diagnostic logs to browser console",
1667
- id: "logging",
1668
- name: "logging"
1669
- })), dirty ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
1670
- type: "submit",
1671
- css: styles.submitButton,
1672
- disabled: !isValid
1673
- }, "Save") : null)));
1674
- };
1675
-
1676
- // src/components/CallToAction/ConnectApiKey.tsx
1677
- var ConnectApiKey = ({ settings, saveSettings }) => {
1678
- const handleRedirect = () => {
1679
- saveSettings({ ...settings, route: "/settings" });
1680
- };
1681
- const dismissPrompt = () => {
1682
- saveSettings({ ...settings, ignoreApiKeyPrompt: true });
1683
- };
1684
- const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
1685
- return !settings.ignoreApiKeyPrompt && missingApiKey ? /* @__PURE__ */ (0, import_react.jsx)("div", {
1686
- css: [cta, ctaWithIcon]
1687
- }, /* @__PURE__ */ (0, import_react.jsx)("h2", {
1688
- css: ctaTitle
1689
- }, "Connect this site"), /* @__PURE__ */ (0, import_react.jsx)("p", {
1690
- css: ctaText
1691
- }, "Add a Uniform API key to get better data."), /* @__PURE__ */ (0, import_react.jsx)("div", {
1692
- css: ctaBtnGroup
1693
- }, /* @__PURE__ */ (0, import_react.jsx)(Button, {
1694
- buttonType: "secondary",
1695
- onClick: handleRedirect
1696
- }, "Connect this site"), /* @__PURE__ */ (0, import_react.jsx)(Button, {
1697
- buttonType: "ghost",
1698
- onClick: dismissPrompt
1699
- }, "Skip for now")), /* @__PURE__ */ (0, import_react.jsx)("button", {
1700
- type: "button",
1701
- css: ctaClose,
1702
- title: "close",
1703
- onClick: dismissPrompt
1704
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
1705
- hidden: true
1706
- }, "Close"))) : null;
1707
- };
1708
-
1709
- // src/hooks/useDimensionIndex.ts
1710
- var import_api = require("@uniformdev/context/api");
1711
- var import_react_use = require("react-use");
1712
- var React6 = __toESM(require("react"));
1713
- function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
1714
- const { loading, error, value } = (0, import_react_use.useAsync)(async () => {
1715
- if (!apiKey || !projectId) {
1716
- return manifestData;
1717
- }
1718
- const client = new import_api.DimensionClient({
1719
- projectId,
1720
- apiKey,
1721
- apiHost: apiHost ? apiHost : void 0
1722
- });
1723
- const dimensions = (await client.get()).dimensions;
1724
- const result = {};
1725
- dimensions.map((dimension) => {
1726
- var _a, _b, _c, _d;
1727
- result[dimension.dim] = {
1728
- ...(0, import_api.computeDimensionDefinitionDisplayData)(dimension),
1729
- cap: dimension.cap,
1730
- str: 10
1731
- };
1732
- if (result[dimension.dim].type === "Enrichment") {
1733
- const enrId = dimension.dim.split("_")[0];
1734
- result[dimension.dim].cap = (_d = (_c = (_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.enr) == null ? void 0 : _b[enrId]) == null ? void 0 : _c.cap) != null ? _d : 100;
1735
- }
1736
- });
1737
- return result;
1738
- }, [apiHost, apiKey, projectId]);
1739
- const manifestData = React6.useMemo(() => {
1740
- var _a, _b, _c, _d;
1741
- const data = {};
1742
- if (!manifest) {
1743
- return data;
1744
- }
1745
- Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
1746
- const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
1747
- if (dim) {
1748
- data[dimensionId] = { ...dimension, ...dim };
1749
- }
1750
- });
1751
- Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
1752
- var _a2;
1753
- const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
1754
- const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
1755
- if (dim) {
1756
- data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
1757
- }
1758
- });
1759
- if (value) {
1760
- Object.entries(value).map(([dimensionId, dimension]) => {
1761
- data[dimensionId] = {
1762
- ...data[dimensionId],
1763
- ...dimension
1764
- };
1765
- });
1766
- }
1767
- return data;
1768
- }, [manifest, value]);
1769
- return {
1770
- loading,
1771
- error,
1772
- index: manifestData
1773
- };
1774
- }
1775
-
1776
- // src/hooks/useQuirkIndex.ts
1777
- var import_react19 = require("react");
1778
- var import_api2 = require("@uniformdev/context/api");
1779
- var import_react_use2 = require("react-use");
1780
- function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
1781
- const { loading, error, value } = (0, import_react_use2.useAsync)(async () => {
1782
- if (!apiKey || !projectId) {
1783
- return {};
1784
- }
1785
- const client = new import_api2.QuirkClient({
1786
- projectId,
1787
- apiKey,
1788
- apiHost: apiHost ? apiHost : void 0
1789
- });
1790
- const quirksResponse = await client.get();
1791
- const quirksIndexData = {};
1792
- quirksResponse.quirks.map((quirkData) => {
1793
- quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
1794
- });
1795
- return quirksIndexData;
1796
- }, [apiHost, apiKey, projectId]);
1797
- const contextStateQuirkData = (0, import_react19.useMemo)(() => {
1798
- const data = {};
1799
- Object.entries(quirksData).map(([quirkId, queryrValue]) => data[quirkId] = {
1800
- value: queryrValue,
1801
- id: quirkId,
1802
- name: quirkId
1803
- });
1804
- if (value) {
1805
- Object.entries(value).map(([quirkId, quirkValue]) => data[quirkId] = {
1806
- ...quirkValue,
1807
- value: quirksData[quirkId]
1808
- });
1809
- }
1810
- return data;
1811
- }, [quirksData, value]);
1812
- return {
1813
- loading,
1814
- error,
1815
- index: contextStateQuirkData
1816
- };
1817
- }
1818
-
1819
- // src/components/ContextDevTools.tsx
1820
- var import_react21 = require("@emotion/react");
1821
-
1822
- // src/styles/Theme.tsx
1823
- function Theme() {
1824
- return /* @__PURE__ */ (0, import_react.jsx)("style", null, `
478
+ `},t);var ue=require("@uniformdev/context");function gt({manifest:t,visitor:r,override:n}){let o=new ue.Context({manifest:t,transitionStore:new xe({initialData:r})}),i={...o.scores};o.storage.updateData([n]);let l={...{...o.scores}};return Object.entries(l).forEach(([p,m])=>{i[p]===m&&delete l[p]}),l}var xe=class extends ue.TransitionDataStore{async handleDelete(){}async handleUpdateData(){}};function $({scores:t,scoreOverrides:r}){let n=[];return r?(Object.entries(r).forEach(([o,i])=>{var p;let a=(p=t[o])!=null?p:0;if(a===i.override)return;let l=i.override-a;n.push({type:"modscoreS",data:{dimension:o,delta:l}})}),n):[]}function ge({quirks:t,quirkOverrides:r}){let n={};if(!!r)return Object.entries(r).forEach(([o,i])=>{t[o]!==i.override&&(n[o]=i.override)}),Object.keys(n).length>0?n:void 0}var vt=require("@uniformdev/design-system");var Le=t=>({field:r,form:n,meta:o,...i})=>(0,e.jsx)(t,{...i,...r,errorMessage:n.errors[r.name]});var fe=require("@uniformdev/design-system"),ve=Le(fe.Input),ft=Le(fe.InputSelect);var no=N.object({dimension:N.string(),score:N.number()}),Oe=({settings:t,saveSettings:r,state:n,actions:o,dimensionIndex:{index:i}})=>{var m,u;let a=t.route?[...t.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],l=a[0]?a[0][1]:"";if(!((m=n.manifest.project.pz)!=null&&m.sig))return(0,e.jsx)("p",null,"Error, manifest is broken or there is no signal to override.");let p=Object.entries(i).filter(([,s])=>s.type!=="Audience"&&s.type!=="Intent").map(([s,c])=>{let d=c.type?`${c.type}: `:"",f=c.category?`${c.category} - `:"",v=`${d}${f}${c.name}`;return{value:s,label:v}});return p.unshift({value:"",label:"Choose dimension to override"}),(0,e.jsx)(z.Formik,{initialValues:{dimension:l,score:(u=n.scores[l])!=null?u:0},validate:s=>{let c={};return(s.score===n.scores[s.dimension]||s.score===0&&!n.scores[l])&&(c.score="You have to modify current score value"),c},validationSchema:no,enableReinitialize:!0,validateOnChange:!1,validateOnBlur:!1,onSubmit:async s=>{var y,C,w,S,Z,Ae;let c=(C=(y=i[s.dimension])==null?void 0:y.cap)!=null?C:0,d=Math.min(s.score,c),f={...t,scoreOverrides:{...t.scoreOverrides,[s.dimension]:{initial:(Ae=(Z=(S=(w=t.scoreOverrides)==null?void 0:w[s.dimension])==null?void 0:S.initial)!=null?Z:n.scores[s.dimension])!=null?Ae:0,override:d}},route:"/overrides"};await r(f);let v=$({scores:n.scores,scoreOverrides:f.scoreOverrides});o.rawUpdate(v)}},({isSubmitting:s,values:c})=>{var C;let d=gt({manifest:n.manifest,visitor:n.data,override:{type:"modscore",data:{dimension:c.dimension,delta:c.score-((C=n.scores[c.dimension])!=null?C:0)}}}),f=Object.entries(n.scores).reduce((w,[S,Z])=>(w[S]={initial:Z,override:Z},w),{}),v={max:100,step:50};i[c.dimension]&&(v.max=i[c.dimension].cap,v.step=i[c.dimension].str);let y=c.score&&Object.keys(d).length>0;return(0,e.jsx)(z.Form,{css:h.page},(0,e.jsx)("h1",{css:h.title},"Override Dimension"),(0,e.jsx)(z.Field,{component:ft,label:"Dimension",id:"dimension",name:"dimension",options:p,disabled:s}),(0,e.jsx)("p",{css:h.text},(0,e.jsx)("small",null,"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")),c.dimension?(0,e.jsx)(z.Field,{component:pt,name:"score",label:"Score",disabled:s,caption:`Range: 0 - ${v.max} in increments of ${v.step}`}):null,(0,e.jsx)(E,{disabled:s,css:{marginBottom:"2rem"}},y?(0,e.jsx)(j,null,(0,e.jsx)(ee,{title:`Impacted Dimensions (${Object.keys(d).length})`},(0,e.jsx)(A,{preemptiveOverrides:f,dimensionIndex:i,dimensions:d,disableEditOverride:!0}))):null,(0,e.jsx)(vt.Button,{type:"submit",css:h.submitButton,disabled:s},"Save"),(0,e.jsx)(B,{route:"/overrides",css:h.cancelButton},"Cancel")))})};var bt=require("react");var he=require("react"),be=require("@uniformdev/design-system");var io=({name:t,value:r,submit:n})=>{let[o,i]=(0,he.useState)(r!=null?r:"");return(0,he.useEffect)(()=>{i(r!=null?r:"")},[r]),(0,e.jsx)("div",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(be.Input,{type:"text",css:[at],name:t,value:o,onChange:p=>{i(p.target.value)}}),(0,e.jsx)(be.Button,{buttonType:"primary",disabled:o===r,size:"sm",onClick:()=>n(t,o!=null?o:"")},"Save"))},ht=io;var K=require("@uniformdev/design-system"),yt=({...t})=>{let{state:{data:{quirks:r}},quirksIndex:{index:n},settings:o,saveSettings:i,actions:a}=t,[l,p]=(0,bt.useState)(""),m;l&&(m=n[l]);let u=async(s,c)=>{var v,y,C;p("");let d={...o,quirkOverrides:{...o.quirkOverrides,[s]:{initial:(C=(y=(v=o.quirkOverrides)==null?void 0:v[s])==null?void 0:y.initial)!=null?C:r[s],override:c}}};await i(d);let f=ge({quirks:r,quirkOverrides:d.quirkOverrides});await a.update({quirks:f})};return(0,e.jsx)(b.Fragment,null,(0,e.jsx)("article",{css:[h.page,h.quirks]},(0,e.jsx)("h1",{css:h.title},"Quirks"),(0,e.jsx)("p",{css:h.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(n).length?(0,e.jsx)(ie,null,(0,e.jsx)(Ue,null,(0,e.jsx)(U,null,(0,e.jsx)(ae,{width:"30%"},"Key"),(0,e.jsx)(ae,{width:"50%"},"Value"),(0,e.jsx)(ae,{width:"20%"},""))),(0,e.jsx)(se,null,Object.values(n).map(({name:s,value:c,id:d})=>{var y,C,w;let f=(C=(y=o.quirkOverrides)==null?void 0:y[s])==null?void 0:C.initial,v=[];return m&&m.options&&(v=m.options.map(S=>({value:S.value,label:S.name}))),(0,e.jsx)(U,{key:d,border:"bottom"},(0,e.jsx)(R,null,(0,e.jsx)("strong",null,s)),(0,e.jsx)(R,null,l!==d?(0,e.jsx)("div",{onClick:()=>{p(d)}},f?(0,e.jsx)("div",null,(0,e.jsx)("s",null,f)):null,c):null,l===d&&m&&(0,e.jsx)(b.Fragment,null,m.options?(0,e.jsx)(K.InputSelect,{showLabel:!1,label:`Change ${s}`,defaultOption:`Change ${s}`,name:d,onChange:S=>u(S.target.name,S.target.value),options:v}):(0,e.jsx)(ht,{name:d,value:c,submit:u}))),(0,e.jsx)(R,null,l?null:(w=o.quirkOverrides)!=null&&w[d]?(0,e.jsx)(K.Button,{buttonType:"ghost",onClick:()=>{Je({quirk:d,settings:o,saveSettings:i,actions:a})}},(0,e.jsx)("small",null,"Clear Override")):(0,e.jsx)(K.Button,{buttonType:"ghost",onClick:()=>{p(d)}},(0,e.jsx)("small",null,"Override"))))}))):(0,e.jsx)(Q,{title:"No quirks configured",text:"There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."})))};var Ct=require("@uniformdev/design-system");var wt=({settings:t,saveSettings:r,actions:n,state:{data:o}})=>(0,e.jsx)("article",{css:[h.page,{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}]},(0,e.jsx)("h1",{css:h.title},"Settings"),(0,e.jsx)(E,null,(0,e.jsx)(G,null,"Data Connection"),(0,e.jsx)(Ct.Button,{buttonType:"tertiary",onClick:()=>{r({...t,route:"/connect"})}},"Manage Connection to Uniform")),(0,e.jsx)(E,null,(0,e.jsx)(G,null,"Storage Consent"),(0,e.jsx)(_,{label:"Store visitor data",id:"consent-mode",name:"consentMode",checked:o.consent,onChange:i=>{n.rawUpdate([{type:"consent",data:i.currentTarget.checked}]),r({...t,consentMode:i.currentTarget.checked})}}),(0,e.jsx)("p",null,(0,e.jsx)("small",null,"Enabling storage consent allows storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh."))),(0,e.jsx)(E,null,(0,e.jsx)(G,null,"Logging"),(0,e.jsx)(_,{label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging",checked:t.logLevel!=="none",onChange:i=>r({...t,logLevel:i.currentTarget.checked?"debug":"none"})})));var Ie=require("@uniformdev/design-system");var Re=({settings:t,saveSettings:r})=>{let n=()=>{r({...t,route:"/connect"})},o=()=>{r({...t,ignoreApiKeyPrompt:!0})},i=t.route==="/connect",a=!(t!=null&&t.apiKey);return!t.ignoreApiKeyPrompt&&a&&!i?(0,e.jsx)("div",{css:[te,Ne]},(0,e.jsx)("h2",{css:oe},"Connect to a Uniform Project"),(0,e.jsx)("p",{css:re},"This allows reading human-readable labels for the dimensions."),(0,e.jsx)("div",{css:ne},(0,e.jsx)(Ie.Button,{buttonType:"secondary",onClick:n},"Connect this site"),(0,e.jsx)(Ie.Button,{buttonType:"ghost",onClick:o},"Skip for now")),(0,e.jsx)("button",{type:"button",css:Ze,title:"close",onClick:o},(0,e.jsx)("span",{hidden:!0},"Close"))):null};var F=require("@uniformdev/context/api"),kt=require("react-use"),Tt=D(require("react"));function St({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=(0,kt.useAsync)(async()=>{if(!r||!n)return p;let u=(await new F.DimensionClient({projectId:n,apiKey:r,apiHost:t||void 0}).get()).dimensions,s={};return u.map(c=>{var d,f,v,y;if(s[c.dim]={...(0,F.computeDimensionDefinitionDisplayData)(c),cap:c.cap,str:10},s[c.dim].type==="Enrichment"){let C=c.dim.split("_")[0];s[c.dim].cap=(y=(v=(f=(d=o==null?void 0:o.project.pz)==null?void 0:d.enr)==null?void 0:f[C])==null?void 0:v.cap)!=null?y:100}}),s},[t,r,n]),p=Tt.useMemo(()=>{var u,s,c,d;let m={};return o&&(Object.entries((s=(u=o==null?void 0:o.project.pz)==null?void 0:u.sig)!=null?s:{}).map(([f,v])=>{let y=(0,F.computeDimensionDisplayData)(f,o);y&&(m[f]={...v,...y})}),Object.entries((d=(c=o==null?void 0:o.project.pz)==null?void 0:c.enr)!=null?d:{}).map(([f,v])=>{var w;let y=(0,F.computeDimensionDisplayData)(f,o),C={cap:(w=v.cap)!=null?w:100,str:10};y&&(m[f]={...y,cap:C.cap,str:C.str})}),l&&Object.entries(l).map(([f,v])=>{m[f]={...m[f],...v}})),m},[o,l]);return{loading:i,error:a,index:p}}var Dt=require("react"),xt=require("@uniformdev/context/api"),Lt=require("react-use");function Ot({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=(0,Lt.useAsync)(async()=>{if(!r||!n)return{};let u=await new xt.QuirkClient({projectId:n,apiKey:r,apiHost:t||void 0}).get(),s={};return u.quirks.map(c=>{s[c.id]={...c,value:o[c.id]}}),s},[t,r,n]),p=(0,Dt.useMemo)(()=>{let m={};return Object.entries(o).map(([u,s])=>m[u]={value:s,id:u,name:u}),l&&Object.entries(l).map(([u,s])=>m[u]={...s,value:o[u]}),m},[o,l]);return{loading:i,error:a,index:p}}var Ve=require("@emotion/react");function ye(){return(0,e.jsx)("style",null,`
1825
479
  :root {
1826
480
  --brand-primary-1: #438fd5; /* bright blue */
1827
481
  --brand-primary-2: #f4220b; /* red */
@@ -2186,29 +840,7 @@ Add the correct display in Chrome and Safari.
2186
840
 
2187
841
  summary {
2188
842
  display: list-item;
2189
- }`);
2190
- }
2191
-
2192
- // src/components/StatusPages/AdditionalDataLoading.tsx
2193
- var import_react20 = require("react");
2194
- var import_react_use3 = require("react-use");
2195
- var AdditionalDataLoading = () => {
2196
- const [viz, setViz] = (0, import_react20.useState)(false);
2197
- const mounted = (0, import_react_use3.useMountedState)();
2198
- (0, import_react20.useEffect)(() => {
2199
- setTimeout(() => {
2200
- if (mounted()) {
2201
- setViz(true);
2202
- }
2203
- }, 1e3);
2204
- }, [mounted]);
2205
- return viz ? /* @__PURE__ */ (0, import_react.jsx)("article", {
2206
- css: styles.page
2207
- }, /* @__PURE__ */ (0, import_react.jsx)("h1", null, "Loading..."), /* @__PURE__ */ (0, import_react.jsx)("p", null, "Connecting to Uniform API for complete data.")) : null;
2208
- };
2209
-
2210
- // src/components/ContextDevTools.tsx
2211
- var mainLayoutStyle = import_react21.css`
843
+ }`)}var Ce=require("react"),It=require("react-use");var Rt=()=>{let[t,r]=(0,Ce.useState)(!1),n=(0,It.useMountedState)();return(0,Ce.useEffect)(()=>{setTimeout(()=>{n()&&r(!0)},1e3)},[n]),t?(0,e.jsx)("article",{css:h.page},(0,e.jsx)("h1",null,"Loading..."),(0,e.jsx)("p",null,"Connecting to Uniform API for complete data.")):null};var Vt=require("@uniformdev/context"),we=require("@uniformdev/context/api"),P=require("formik"),T=D(require("react")),O=require("@uniformdev/design-system");function Pt(t){let[r,n]=T.useState(t.currentData?"c":"qc"),[o,i]=T.useState(void 0),[a,l]=T.useState(void 0),p=T.useCallback(async s=>{let c=new we.ManifestClient(s);i(void 0);try{let d=await c.get({preview:!0});return l({manifest:d,target:s}),d}catch(d){if(d instanceof we.ApiClientError){d.statusCode===403?i("API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."):i(d.errorMessage);return}if("message"in d){d.message==="Failed to fetch"?i("A network error occurred. Ensure the API host is valid."):i(d.message);return}i(JSON.stringify(d,null,2));return}},[]);T.useEffect(()=>{!t.currentData||p(t.currentData)},[p,t.currentData]);let m=async s=>{await p(s)&&(n("c"),await t.onConnect(s))},u=()=>{confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")&&(n("qc"),l(void 0),i(void 0),t.onConnect(null))};return(0,e.jsx)("div",null,o?(0,e.jsx)(O.ErrorMessage,{message:o}):null,r==="qc"||r==="mc"?(0,e.jsx)(so,{...t,state:r,setState:n,onConnect:m}):(0,e.jsx)("div",null,a?(0,e.jsx)(T.Fragment,null,(0,e.jsx)("p",null,"Connected to"," ",(0,e.jsx)("a",{href:`${a==null?void 0:a.target.apiHost}/projects/${a==null?void 0:a.target.projectId}`,target:"_blank",rel:"noopener noreferrer",css:{textDecoration:"underline"}},(0,e.jsx)("strong",null,a==null?void 0:a.manifest.project.name))," ",(0,e.jsx)("small",null,"(",a==null?void 0:a.manifest.project.id,")")),(0,e.jsx)(O.Button,{buttonType:"secondary",type:"button",onClick:u},"Disconnect")):null))}function so({setState:t,state:r,currentData:n,onConnect:o}){var i,a,l;return(0,e.jsx)("div",null,(0,e.jsx)(P.Formik,{initialValues:{apiHost:(i=n==null?void 0:n.apiHost)!=null?i:"https://uniform.dev",apiKey:(a=n==null?void 0:n.apiKey)!=null?a:"",projectId:(l=n==null?void 0:n.projectId)!=null?l:"",qc:""},onSubmit:o},({setFieldValue:p,setFieldError:m,errors:{qc:u},isSubmitting:s})=>(0,e.jsx)(P.Form,null,(0,e.jsx)("fieldset",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}},r==="qc"?(0,e.jsx)(T.Fragment,null,(0,e.jsx)("div",null,(0,e.jsx)(O.Input,{placeholder:"Paste Quick Connect Code Here",caption:"Copy the Quick Connect code after creating an API key in Uniform.",errorMessage:u,onChange:c=>{try{let d=(0,Vt.parseQuickConnect)(c.currentTarget.value);p("apiHost",d.apiHost),p("apiKey",d.apiKey),p("projectId",d.projectId)}catch(d){m("qc",d.message)}}})),(0,e.jsx)("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(O.Button,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),(0,e.jsx)(O.Button,{type:"button",buttonType:"ghost",onClick:()=>t("mc"),disabled:s},"Connect Manually"))):(0,e.jsx)(T.Fragment,null,(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ve,label:"API Key",name:"apiKey",caption:"Generate an API key in your Uniform team settings."})),(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ve,label:"Project ID",name:"projectId",caption:"Available to copy after generating an API key"})),(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ve,label:"API Host",name:"apiHost",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option."})),(0,e.jsx)("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(O.Button,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),(0,e.jsx)(O.Button,{type:"button",buttonType:"ghost",onClick:()=>t("qc"),disabled:s},"Use Quick Connect")))))))}var Ht=({settings:t,saveSettings:r})=>{let n=t.apiKey&&t.projectId?{apiKey:t.apiKey,projectId:t.projectId,apiHost:t.apiHost}:void 0;return(0,e.jsx)("article",{css:h.page},(0,e.jsx)("h1",{css:h.title},"Connect to a Uniform Project"),(0,e.jsx)("p",{css:h.text},(0,e.jsx)("small",null,"Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this.")),(0,e.jsx)(Pt,{onConnect:async o=>{o?await r({...t,apiKey:o.apiKey,projectId:o.projectId,apiHost:o.apiHost}):await r({...t,apiKey:void 0,projectId:void 0,apiHost:void 0})},currentData:n}))};var ao=Ve.css`
2212
844
  background: var(--white);
2213
845
  padding: var(--spacing-base);
2214
846
  overflow-y: auto;
@@ -2237,59 +869,7 @@ var mainLayoutStyle = import_react21.css`
2237
869
  &::-webkit-scrollbar-thumb:hover {
2238
870
  background: var(--gray-500);
2239
871
  }
2240
- `;
2241
- function ContextDevTools(props) {
2242
- const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
2243
- const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
2244
- const routeProps = {
2245
- ...props,
2246
- dimensionIndex,
2247
- quirksIndex
2248
- };
2249
- const component = () => {
2250
- var _a;
2251
- if (dimensionIndex.loading || quirksIndex.loading) {
2252
- return /* @__PURE__ */ (0, import_react.jsx)(AdditionalDataLoading, null);
2253
- }
2254
- if (props.settings.route) {
2255
- if (props.settings.route.match(/overrides\/\w+/)) {
2256
- return /* @__PURE__ */ (0, import_react.jsx)(AddOverride, {
2257
- ...routeProps
2258
- });
2259
- }
2260
- }
2261
- switch ((_a = props.settings) == null ? void 0 : _a.route) {
2262
- case void 0:
2263
- case "/":
2264
- case "/dimensions":
2265
- return /* @__PURE__ */ (0, import_react.jsx)(Dimensions, {
2266
- ...routeProps
2267
- });
2268
- case "/overrides":
2269
- return /* @__PURE__ */ (0, import_react.jsx)(Overrides, {
2270
- ...routeProps
2271
- });
2272
- case "/overrides/add":
2273
- return /* @__PURE__ */ (0, import_react.jsx)(AddOverride, {
2274
- ...routeProps
2275
- });
2276
- case "/quirks":
2277
- return /* @__PURE__ */ (0, import_react.jsx)(Quirks, {
2278
- ...routeProps
2279
- });
2280
- case "/settings":
2281
- return /* @__PURE__ */ (0, import_react.jsx)(Settings, {
2282
- ...routeProps
2283
- });
2284
- default:
2285
- return /* @__PURE__ */ (0, import_react.jsx)(NotFound, null);
2286
- }
2287
- };
2288
- return /* @__PURE__ */ (0, import_react.jsx)(DevToolsSettingsContextProvider, {
2289
- settings: props.settings,
2290
- saveSettings: props.saveSettings
2291
- }, /* @__PURE__ */ (0, import_react.jsx)(Theme, null), /* @__PURE__ */ (0, import_react.jsx)("div", {
2292
- css: import_react21.css`
872
+ `;function Pe(t){let r=St(t.settings,t.state.manifest),n=Ot(t.settings,t.state.data.quirks),o={...t,dimensionIndex:r,quirksIndex:n},i=()=>{var a;if(r.loading||n.loading)return(0,e.jsx)(Rt,null);if(t.settings.route&&t.settings.route.match(/overrides\/\w+/))return(0,e.jsx)(Oe,{...o});switch((a=t.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return(0,e.jsx)(rt,{...o});case"/overrides":return(0,e.jsx)(st,{...o});case"/overrides/add":return(0,e.jsx)(Oe,{...o});case"/quirks":return(0,e.jsx)(yt,{...o});case"/settings":return(0,e.jsx)(wt,{...o});case"/connect":return(0,e.jsx)(Ht,{...o});default:return(0,e.jsx)(Qe,null)}};return(0,e.jsx)(Fe,{settings:t.settings,saveSettings:t.saveSettings},(0,e.jsx)(ye,null),(0,e.jsx)("div",{css:Ve.css`
2293
873
  display: grid;
2294
874
  grid-template-columns: 200px auto;
2295
875
  font-weight: var(--font-regular);
@@ -2298,105 +878,7 @@ function ContextDevTools(props) {
2298
878
  line-height: var(--base-line-height);
2299
879
  height: var(--min-height);
2300
880
  min-width: var(--site-width);
2301
- `
2302
- }, /* @__PURE__ */ (0, import_react.jsx)(Menu, {
2303
- ...props
2304
- }), /* @__PURE__ */ (0, import_react.jsx)("main", {
2305
- css: mainLayoutStyle
2306
- }, /* @__PURE__ */ (0, import_react.jsx)(ConnectApiKey, {
2307
- ...props
2308
- }), component())));
2309
- }
2310
-
2311
- // src/components/EmbeddedContextDevTools.tsx
2312
- var import_context2 = require("@uniformdev/context");
2313
- var React7 = __toESM(require("react"));
2314
- function EmbeddedContextDevTools({ context, initialSettings }) {
2315
- const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
2316
- const contextInstance = contextValue != null ? contextValue : new import_context2.Context({ manifest: { project: {} } });
2317
- const [state, setState] = React7.useState({
2318
- data: contextInstance.storage.data,
2319
- manifest: contextInstance.manifest.data,
2320
- scores: contextInstance.scores,
2321
- personalizations: [],
2322
- tests: []
2323
- });
2324
- const [settings, setSettings] = React7.useState(initialSettings != null ? initialSettings : {});
2325
- React7.useEffect(() => {
2326
- var _a;
2327
- const drain = (0, import_context2.createDebugConsoleLogDrain)((_a = settings.logLevel) != null ? _a : "none");
2328
- contextInstance.events.on("log", drain);
2329
- return () => {
2330
- contextInstance.events.off("log", drain);
2331
- };
2332
- }, [settings, contextInstance]);
2333
- React7.useEffect(() => {
2334
- const onContextDataUpdated = () => {
2335
- const quirkOverrides = applyQuirkOverrides({
2336
- quirks: contextInstance.storage.data.quirks,
2337
- quirkOverrides: settings.quirkOverrides
2338
- });
2339
- if (quirkOverrides) {
2340
- console.log("Applying overridden quirks:", quirkOverrides);
2341
- contextInstance.update({ quirks: quirkOverrides });
2342
- }
2343
- const overrideCommands = applyScoreOverrides({
2344
- scores: contextInstance.scores,
2345
- scoreOverrides: settings.scoreOverrides
2346
- });
2347
- if (overrideCommands.length) {
2348
- console.log("Applying overridden scores:", overrideCommands);
2349
- contextInstance.storage.updateData(overrideCommands);
2350
- }
2351
- setState((old) => ({
2352
- ...old,
2353
- scores: contextInstance.scores,
2354
- data: contextInstance.storage.data,
2355
- manifest: contextInstance.manifest.data
2356
- }));
2357
- };
2358
- const onPersonalizationResult = (e) => {
2359
- if (!e.changed)
2360
- return;
2361
- setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
2362
- };
2363
- const onTestResult = (e) => {
2364
- if (!e.variantAssigned)
2365
- return;
2366
- setState((old) => ({ ...old, tests: [...old.tests, e] }));
2367
- };
2368
- contextInstance.events.on("personalizationResult", onPersonalizationResult);
2369
- contextInstance.events.on("testResult", onTestResult);
2370
- contextInstance.storage.events.on("*", onContextDataUpdated);
2371
- return () => {
2372
- contextInstance.storage.events.off("*", onContextDataUpdated);
2373
- contextInstance.events.off("personalizationResult", onPersonalizationResult);
2374
- contextInstance.events.off("testResult", onTestResult);
2375
- };
2376
- }, [contextInstance, settings]);
2377
- const actions = React7.useMemo(() => {
2378
- const actions2 = {
2379
- update: (up) => contextInstance.update(up),
2380
- forget: () => contextInstance.forget(false),
2381
- rawUpdate: (commands) => contextInstance.storage.updateData(commands)
2382
- };
2383
- return actions2;
2384
- }, [contextInstance]);
2385
- return contextValue ? /* @__PURE__ */ (0, import_react.jsx)(ContextDevTools, {
2386
- state,
2387
- actions,
2388
- settings,
2389
- saveSettings: setSettings
2390
- }) : /* @__PURE__ */ (0, import_react.jsx)("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
2391
- }
2392
-
2393
- // src/components/ToggleEmbeddedContextDevTools.tsx
2394
- var import_react23 = require("@emotion/react");
2395
- var React8 = __toESM(require("react"));
2396
-
2397
- // src/components/Buttons/EmbedToggleButton.tsx
2398
- var import_react22 = require("@emotion/react");
2399
- var btnStyle3 = import_react22.css`
881
+ `},(0,e.jsx)(Be,{...t}),(0,e.jsx)("main",{css:ao},(0,e.jsx)(Re,{...t}),i())))}var ke=require("@uniformdev/context"),I=D(require("react"));var He="embeddedUniformDevToolsSettings";function Me({context:t,initialSettings:r}){let n=t!=null?t:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new ke.Context({manifest:{project:{}}}),[i,a]=I.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[l,p]=I.useState(r!=null?r:{});I.useEffect(()=>{var c;let s=(0,ke.createDebugConsoleLogDrain)((c=l.logLevel)!=null?c:"none");return o.events.on("log",s),()=>{o.events.off("log",s)}},[l,o]),I.useEffect(()=>{let s=()=>{let f=window.localStorage.getItem(He)||"{}",v=JSON.parse(f),y=ge({quirks:o.storage.data.quirks,quirkOverrides:v.quirkOverrides});y&&(console.log("Applying overridden quirks:",y),o.update({quirks:y}));let C=$({scores:o.scores,scoreOverrides:v.scoreOverrides});C.length&&(console.log("Applying overridden scores:",C),o.storage.updateData(C)),a(w=>({...w,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},c=f=>{!f.changed||a(v=>({...v,personalizations:[...v.personalizations,f]}))},d=f=>{!f.variantAssigned||a(v=>({...v,tests:[...v.tests,f]}))};return o.events.on("personalizationResult",c),o.events.on("testResult",d),o.storage.events.on("*",s),()=>{o.storage.events.off("*",s),o.events.off("personalizationResult",c),o.events.off("testResult",d)}},[o]),I.useEffect(()=>{if(window.localStorage){let s=window.localStorage.getItem(He);if(s)try{let c=JSON.parse(s),d={...r,...c};p(d);let f=$({scores:i.scores,scoreOverrides:d.scoreOverrides});m.rawUpdate(f)}catch(c){window.localStorage.removeItem(He),console.error("Failed to parse settings from localStorage: ",c.message)}}},[]);let{actions:m,saveSettings:u}=I.useMemo(()=>({actions:{update:d=>o.update(d),forget:()=>o.forget(!1),rawUpdate:d=>o.storage.updateData(d)},saveSettings:async d=>{p(d),window.localStorage&&window.localStorage.setItem("embeddedUniformDevToolsSettings",JSON.stringify(d))}}),[o]);return n?(0,e.jsx)(Pe,{state:i,actions:m,settings:l,saveSettings:u}):(0,e.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}var Et=require("@emotion/react"),zt=D(require("react"));var Mt=require("@emotion/react"),co=Mt.css`
2400
882
  align-items: center;
2401
883
  border-radius: var(--rounded-full);
2402
884
  background: var(--brand-secondary-5);
@@ -2422,56 +904,11 @@ var btnStyle3 = import_react22.css`
2422
904
  max-width: 100%;
2423
905
  height: auto;
2424
906
  }
2425
- `;
2426
- var EmbedToggleButton = ({ ...props }) => {
2427
- return /* @__PURE__ */ (0, import_react.jsx)("button", {
2428
- type: "button",
2429
- css: btnStyle3,
2430
- ...props
2431
- }, /* @__PURE__ */ (0, import_react.jsx)("span", {
2432
- hidden: true
2433
- }, "Uniform devtools"), /* @__PURE__ */ (0, import_react.jsx)("svg", {
2434
- width: "24",
2435
- height: "24",
2436
- viewBox: "0 0 24 24",
2437
- fill: "none",
2438
- xmlns: "http://www.w3.org/2000/svg"
2439
- }, /* @__PURE__ */ (0, import_react.jsx)("path", {
2440
- d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
2441
- fill: "currentColor"
2442
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
2443
- d: "M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",
2444
- fill: "currentColor"
2445
- }), /* @__PURE__ */ (0, import_react.jsx)("path", {
2446
- d: "M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",
2447
- fill: "currentColor"
2448
- })));
2449
- };
2450
-
2451
- // src/components/ToggleEmbeddedContextDevTools.tsx
2452
- function ToggleEmbeddedContextDevTools(props) {
2453
- var _a;
2454
- const [devtoolsOpen, setDevtoolsOpen] = React8.useState(false);
2455
- const contextValue = (_a = props.context) != null ? _a : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
2456
- return contextValue ? /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)(Theme, null), /* @__PURE__ */ (0, import_react.jsx)(EmbedToggleButton, {
2457
- onClick: () => setDevtoolsOpen((prev) => !prev)
2458
- }), devtoolsOpen ? /* @__PURE__ */ (0, import_react.jsx)("div", {
2459
- css: import_react23.css`
907
+ `,At=({...t})=>(0,e.jsx)("button",{type:"button",css:co,...t},(0,e.jsx)("span",{hidden:!0},"Uniform devtools"),(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),(0,e.jsx)("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),(0,e.jsx)("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function lo(t){var i;let[r,n]=zt.useState(!1);return((i=t.context)!=null?i:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?(0,e.jsx)("div",null,(0,e.jsx)(ye,null),(0,e.jsx)(At,{onClick:()=>n(a=>!a)}),r?(0,e.jsx)("div",{css:Et.css`
2460
908
  box-shadow: var(--shadow-base);
2461
909
  position: fixed;
2462
910
  bottom: 82px;
2463
911
  right: var(--spacing-base);
2464
912
  z-index: var(--z-10);
2465
913
  max-width: var(--site-width);
2466
- `
2467
- }, /* @__PURE__ */ (0, import_react.jsx)(EmbeddedContextDevTools, {
2468
- ...props
2469
- })) : null) : /* @__PURE__ */ (0, import_react.jsx)("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
2470
- }
2471
- module.exports = __toCommonJS(src_exports);
2472
- // Annotate the CommonJS export names for ESM import in node:
2473
- 0 && (module.exports = {
2474
- ContextDevTools,
2475
- EmbeddedContextDevTools,
2476
- ToggleEmbeddedContextDevTools
2477
- });
914
+ `},(0,e.jsx)(Me,{...t})):null):(0,e.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}0&&(module.exports={ContextDevTools,EmbeddedContextDevTools,ToggleEmbeddedContextDevTools});