pollination-react-io 1.9.2 → 1.11.1

package/build/index.js

@@ -21680,7 +21680,11 @@ function checkRuby() {
 function sendMessageDotNet(message) {
     if (!checkDotNet())
         return undefined;
-    var json = JSON.stringify(message);
+    // const json = JSON.stringify(message)
+    var json = message;
+    if (typeof message.data !== 'string') {
+        json.data = JSON.stringify(message.data);
+    }
     try {
         window.parent.chrome.webview.postMessage(json);
     }
@@ -21884,7 +21888,7 @@ var useCreateStudy = function (accountName, projectName, client) {
                             }); })];
                     case 1:
                         job = _b.sent();
-                        response = sendMessageDotNet({ action: 'CreateStudy', data: job, uniqueId: key });
+                        response = sendMessageDotNet({ action: 'AddStudy', data: job, uniqueId: key });
                         return [2 /*return*/, response];
                 }
             });
@@ -23762,7 +23766,7 @@ var useGetHbjson = function () {
     var _a = React.useState(undefined), hbjson = _a[0], setHbjson = _a[1];
     var hbjsonRef = React.useRef(undefined);
     var setReturnValue = React.useCallback(function (res, force) {
-        var bytes = new TextEncoder().encode(res.Geometry);
+        var bytes = new TextEncoder().encode(res.data);
         if (hbjsonRef.current) {
             if (force || !lodash_isequal(bytes, hbjsonRef.current)) {
                 setHbjson(new Blob([bytes], {
@@ -23778,36 +23782,31 @@ var useGetHbjson = function () {
         hbjsonRef.current = bytes;
     }, []);
     React.useEffect(function () {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        window.parent.readHBJSON = function (hbjson) {
-            if (typeof hbjson !== 'string')
-                throw new Error('readHBJSON did not receive a valid string object from Revit.');
-            var res = {
-                Geometry: hbjson,
-                Identifier: null,
-            };
-            setReturnValue(res, false);
+        window.parent.readHBJSON = function (message) {
+            if (typeof message.data !== 'string')
+                throw new Error('readHBJSON did not receive a valid string object.');
+            setReturnValue(message, false);
         };
-    }, [host, setReturnValue]);
+        // @ts-ignore
+        return function () { return window.parent.readHbjson = undefined; };
+    }, [setReturnValue]);
     var dotNetGetHbjson = React.useCallback(function (key, selection, force) {
         if (key === void 0) { key = 'use-get-hbjson'; }
         if (selection === void 0) { selection = false; }
         if (force === void 0) { force = false; }
         if (!checkDotNet())
             return;
-        var res = {
-            Geometry: null,
-            Identifier: null,
-        };
-        res = window.parent.chrome.webview
-            .hostObjects.sync.hbjson.PassPollinationModel(key, selection);
-        setReturnValue(res, force);
+        var res = window.parent.chrome.webview
+            .hostObjects.sync.hbjson.Get(key, selection);
+        if (res) {
+            setReturnValue(res, force);
+        }
     }, [setReturnValue]);
     var revitGetHbjson = React.useCallback(function () {
         if (!checkDotNet())
             return;
-        window.parent.chrome.webview.hostObjects.sync.hbjson.PassHBJSON();
+        window.parent.chrome.webview.hostObjects.sync.hbjson.Get();
     }, []);
     var getHbjson = React.useMemo(function () {
         switch (host) {
@@ -23832,8 +23831,9 @@ var useGetGeometry = function () {
     var host = getHost();
     var _a = React.useState(undefined), geometry = _a[0], setGeometry = _a[1];
     var geometryRef = React.useRef(undefined);
-    var setReturnVal = React.useCallback(function (data, force) {
-        var bytes = new TextEncoder().encode(data.Geometry);
+    var setReturnVal = React.useCallback(function (_a, force) {
+        var data = _a.data;
+        var bytes = new TextEncoder().encode(data);
         if (!force && geometryRef.current) {
             if (!lodash_isequal(bytes, geometryRef.current)) {
                 setGeometry(new Blob([bytes], {
@@ -23849,18 +23849,15 @@ var useGetGeometry = function () {
         geometryRef.current = bytes;
     }, []);
     React.useEffect(function () {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        window.parent.readGeometry = function (geometry, identifier) {
-            if (typeof geometry !== 'string'
-                || typeof identifier !== 'string')
-                throw new Error('readGeometry did not receive a valid string object from Sketchup.');
-            var res = {
-                Geometry: geometry,
-                Identifier: identifier,
-            };
-            setReturnVal(res, false);
+        window.parent.readGeometry = function (message) {
+            if (typeof message.data !== 'string'
+                || typeof message.identifier !== 'string')
+                throw new Error('readGeometry did not receive a valid string object.');
+            setReturnVal(message, false);
         };
+        // @ts-ignore
+        return function () { return window.parent.readGeometry = undefined; };
     }, [host, setReturnVal]);
     var dotNetGetGeometry = React.useCallback(function (key, selection, force) {
         if (key === void 0) { key = 'use-get-geometry'; }
@@ -23869,10 +23866,10 @@ var useGetGeometry = function () {
         if (!checkDotNet())
             return;
         var res = {
-            Geometry: null,
-            Identifier: null,
+            data: null,
+            identifier: null,
         };
-        res = window.parent.chrome.webview.hostObjects.sync.geometry.PassJsonGeometry(key, selection);
+        res = window.parent.chrome.webview.hostObjects.sync.geometry.Get(key, selection);
         if (res) {
             setReturnVal(res, force);
         }
@@ -23899,32 +23896,13 @@ var useGetGeometry = function () {
 var useSendHbjson = function () {
     var host = getHost();
     var _a = React.useState({}), state = _a[0], setState = _a[1];
-    React.useCallback(function (action, message) {
-        if (!checkRuby())
-            return;
-        var response = sendMessageRuby(__assign$3({ action: action }, message));
-        setState(function (state) { return (__assign$3(__assign$3({}, state), { response: response })); });
-        return response;
-    }, []);
-    var dotNetSendHbjson = React.useCallback(function (action, message) {
+    var sendHbjson = React.useCallback(function (action, message) {
         if (!checkDotNet())
             return;
         var response = sendMessageDotNet(__assign$3({ action: action }, message));
         setState(function (state) { return (__assign$3(__assign$3({}, state), { response: response })); });
         return response;
     }, []);
-    var sendHbjson = React.useMemo(function () {
-        switch (host) {
-            case 'sketchup':
-                return dotNetSendHbjson;
-            case 'rhino':
-                return dotNetSendHbjson;
-            case 'revit':
-                return dotNetSendHbjson;
-            default:
-                return undefined;
-        }
-    }, [dotNetSendHbjson, host]);
     return ({
         host: host,
         state: state,
@@ -23932,44 +23910,36 @@ var useSendHbjson = function () {
     });
 };
 
-var useSendGeometry = function () {
+var useSendMessage = function () {
     var host = getHost();
-    var _a = React.useState({}), state = _a[0], setState = _a[1];
-    var dotNetSendGeometry = React.useCallback(function (action, message) {
-        if (!checkDotNet())
-            return;
+    var _a = React.useState(), state = _a[0], setState = _a[1];
+    var sendMessage = React.useCallback(function (action, message) {
         var response = sendMessageDotNet(__assign$3({ action: action }, message));
         setState(function (state) { return (__assign$3(__assign$3({}, state), { response: response })); });
         return response;
     }, []);
-    var sendGeometry = React.useMemo(function () {
-        switch (host) {
-            case 'sketchup':
-                return dotNetSendGeometry;
-            case 'rhino':
-                return dotNetSendGeometry;
-            case 'revit':
-                return dotNetSendGeometry;
-            default:
-                return undefined;
-        }
-    }, [dotNetSendGeometry, host]);
     return ({
         host: host,
         state: state,
-        sendGeometry: sendGeometry,
+        sendMessage: sendMessage,
     });
 };
 
-var useRunCommand = function () {
+var useRunCommand = function (defaultKey) {
     var host = getHost();
+    var sendMessage = useSendMessage().sendMessage;
+    var _a = React.useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _a[0], setKey = _a[1];
+    React.useEffect(function () {
+        setKey(defaultKey);
+    }, [defaultKey]);
     var rhinoRunCommand = React.useCallback(function (commandString, commandOptions) {
         var msgObject = {
-            action: 'RunCommand',
-            commandString: commandString,
+            data: commandString,
+            options: commandOptions,
+            uniqueId: key
         };
-        sendMessageDotNet(msgObject);
-    }, []);
+        sendMessage('AddCommand', msgObject);
+    }, [key, sendMessage]);
     var runCommand = React.useMemo(function () {
         switch (host) {
             case 'rhino':
@@ -23985,38 +23955,26 @@ var useRunCommand = function () {
 };
 
 var useManageSettings = function () {
-    var host = getHost();
-    var rhinoSendSettings = React.useCallback(function (settings) {
-        if (!checkDotNet())
-            return;
-        var message = {
-            action: 'SetModelSettings',
-            data: settings,
-        };
-        return sendMessageDotNet(message);
-    }, []);
-    var rhinoGetSettings = React.useCallback(function () {
-        if (!checkDotNet())
-            return;
-        var settings = window.parent.chrome.webview.hostObjects.sync.settings.GetModelSettings();
-        return settings;
-    }, []);
-    var sendSettings = React.useMemo(function () {
-        switch (host) {
-            case 'rhino':
-                return rhinoSendSettings;
-            default:
-                return undefined;
+    var _a = useSendMessage(), host = _a.host, sendMessage = _a.sendMessage;
+    var sendSettings = React.useCallback(function (settings) {
+        return sendMessage('SetModelSettings', { data: settings });
+    }, [sendMessage]);
+    var getSettings = React.useCallback(function () {
+        // if (!checkDotNet()) return
+        var settings;
+        try {
+            settings = window.parent.chrome.webview.hostObjects.sync.settings.GetModelSettings();
         }
-    }, [host, rhinoSendSettings]);
-    var getSettings = React.useMemo(function () {
-        switch (host) {
-            case 'rhino':
-                return rhinoGetSettings;
-            default:
-                return undefined;
+        catch (_a) {
+            try {
+                settings = window.parent.chrome.webview.hostObjects.sync.settings.Get();
+            }
+            catch (_b) {
+                throw new Error('Neither window.parent.chrome.webview.hostObjects.sync.settings.GetModelSettings() nor .Get() are available on this platform.');
+            }
         }
-    }, [host, rhinoGetSettings]);
+        return settings;
+    }, []);
     return ({
         host: host,
         sendSettings: sendSettings,
@@ -30345,8 +30303,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = "/*\n * Container style\n */\n.ps {\n  overflow: hidden !important;\n  overflow-anchor: none;\n  -ms-overflow-style: none;\n  touch-action: auto;\n  -ms-touch-action: auto;\n}\n\n/*\n * Scrollbar rail styles\n */\n.ps__rail-x {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  height: 15px;\n  /* there must be 'bottom' or 'top' for ps__rail-x */\n  bottom: 0px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__rail-y {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  width: 15px;\n  /* there must be 'right' or 'left' for ps__rail-y */\n  right: 0;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n  display: block;\n  background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n  opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n  background-color: #eee;\n  opacity: 0.9;\n}\n\n/*\n * Scrollbar thumb styles\n */\n.ps__thumb-x {\n  background-color: #aaa;\n  border-radius: 6px;\n  transition: background-color .2s linear, height .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, height .2s ease-in-out;\n  height: 6px;\n  /* there must be 'bottom' for ps__thumb-x */\n  bottom: 2px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__thumb-y {\n  background-color: #aaa;\n  border-radius: 6px;\n  transition: background-color .2s linear, width .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, width .2s ease-in-out;\n  width: 6px;\n  /* there must be 'right' for ps__thumb-y */\n  right: 2px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n  background-color: #999;\n  height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n  background-color: #999;\n  width: 11px;\n}\n\n/* MS supports */\n@supports (-ms-overflow-style: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n.scrollbar-container {\n  position: relative;\n  height: 100%; }";
-styleInject(css_248z$d);
+var css_248z$b = "/*\n * Container style\n */\n.ps {\n  overflow: hidden !important;\n  overflow-anchor: none;\n  -ms-overflow-style: none;\n  touch-action: auto;\n  -ms-touch-action: auto;\n}\n\n/*\n * Scrollbar rail styles\n */\n.ps__rail-x {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  height: 15px;\n  /* there must be 'bottom' or 'top' for ps__rail-x */\n  bottom: 0px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__rail-y {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  width: 15px;\n  /* there must be 'right' or 'left' for ps__rail-y */\n  right: 0;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n  display: block;\n  background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n  opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n  background-color: #eee;\n  opacity: 0.9;\n}\n\n/*\n * Scrollbar thumb styles\n */\n.ps__thumb-x {\n  background-color: #aaa;\n  border-radius: 6px;\n  transition: background-color .2s linear, height .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, height .2s ease-in-out;\n  height: 6px;\n  /* there must be 'bottom' for ps__thumb-x */\n  bottom: 2px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__thumb-y {\n  background-color: #aaa;\n  border-radius: 6px;\n  transition: background-color .2s linear, width .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, width .2s ease-in-out;\n  width: 6px;\n  /* there must be 'right' for ps__thumb-y */\n  right: 2px;\n  /* please don't change 'position' */\n  position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n  background-color: #999;\n  height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n  background-color: #999;\n  width: 11px;\n}\n\n/* MS supports */\n@supports (-ms-overflow-style: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n.scrollbar-container {\n  position: relative;\n  height: 100%; }";
+styleInject(css_248z$b);
 
 const e$3="horizontal",n$4=["horizontal","vertical"];const Separator=/*#__PURE__*/React__namespace.forwardRef(((n,a)=>{const{decorative:p,orientation:l=e$3,...c}=n,s=i$4(l)?l:e$3,u=p?{role:"none"}:{"aria-orientation":"vertical"===s?s:void 0,role:"separator"};return React__namespace.createElement(Primitive.div,_extends$A({"data-orientation":s},u,c,{ref:a}))}));function i$4(r){return n$4.includes(r)}Separator.propTypes={orientation(r,o,t){const n=r[o],a=String(n);return n&&!i$4(n)?new Error(function(r,o){return `Invalid prop \`orientation\` of value \`${r}\` supplied to \`${o}\`, expected one of:\n  - horizontal\n  - vertical\n\nDefaulting to \`${e$3}\`.`}(a,t)):null}};const Root$5=Separator;
 
@@ -31910,8 +31868,16 @@ function toNumber(value) {
 
 var lodash_debounce = debounce;
 
-var css_248z$c = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-combobox {\n  width: 100%;\n}\n\n.poll-combobox-content {\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: white;\n  border: 1px solid var(--slate5);\n  border-radius: 0px 0px 4px 4px;\n  gap: 2px;\n  box-sizing: border-box;\n  transition: max-height 0.5s ease-in-out;\n}\n\n.poll-combobox-item {\n  display: inline-block;\n  border-radius: 2px;\n  padding: 2px 8px;\n  transition: background-color 0.15s linear, color 0.15s linear;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.poll-select-item[data-state=checked] {\n  background-color: var(--primary2);\n  color: white;\n}\n\n.poll-select-item:focus-visible {\n  background-color: var(--primary0);\n  outline: solid 1px var(--primary);\n  color: unset;\n  outline-color: var(--primary);\n}\n\n.poll-select-item:hover {\n  background-color: var(--primary0);\n  cursor: pointer;\n  color: unset;\n}\n\n.poll-separator {\n  background-color: var(--slate5);\n  height: 1px;\n  width: 100%;\n  margin: 4px 0;\n}\n\n.poll-combo-header-container {\n  transition: opacity 0.5s ease-in-out;\n}\n\n.poll-combo-footer-container {\n  transition: opacity 0.5s ease-in-out;\n}\n\n.poll-combo-group {\n  width: fit-content;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.poll-combo-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.poll-combo-group-disabled:hover {\n  box-shadow: none;\n}\n\n.poll-combo-group input {\n  width: 100%;\n}\n\n.poll-combo-group input::placeholder {\n  color: var(--slate1);\n}\n\n.poll-combo-group-disabled input::placeholder {\n  color: var(--slate10);\n}\n\n.poll-combo-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.poll-combo-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.poll-combo-group i,\n.poll-combo-group svg {\n  border-radius: inherit;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.poll-combo-group button,\n.poll-combo-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n}\n\n.poll-combo-group button:first-child,\n.poll-combo-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n\n.poll-combo-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left-color: #096dd9;\n}\n\n.poll-combo-group button:not(:last-child),\n.poll-combo-group input:not(:last-child) {\n  border-right: none;\n}\n\n.poll-combo-group button:focus-visible,\n.poll-combo-group input:focus-visible {\n  outline: none;\n}\n\n.poll-combo-group button:focus,\n.poll-combo-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.poll-combo-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.poll-combo-group button:hover,\n.poll-combo-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.poll-combo-group-disabled:hover button:hover,\n.poll-combo-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}";
-styleInject(css_248z$c);
+var css_248z$a = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-combobox {\n  width: 100%;\n}\n\n.poll-combobox-content {\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: white;\n  border: 1px solid var(--slate5);\n  border-radius: 0px 0px 4px 4px;\n  gap: 2px;\n  box-sizing: border-box;\n  transition: max-height 0.5s ease-in-out;\n}\n\n.poll-combobox-item {\n  display: inline-block;\n  border-radius: 2px;\n  padding: 2px 8px;\n  transition: background-color 0.15s linear, color 0.15s linear;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.poll-select-item[data-state=checked] {\n  background-color: var(--primary2);\n  color: white;\n}\n\n.poll-select-item:focus-visible {\n  background-color: var(--primary0);\n  outline: solid 1px var(--primary);\n  color: unset;\n  outline-color: var(--primary);\n}\n\n.poll-select-item:hover {\n  background-color: var(--primary0);\n  cursor: pointer;\n  color: unset;\n}\n\n.poll-separator {\n  background-color: var(--slate5);\n  height: 1px;\n  width: 100%;\n  margin: 4px 0;\n}\n\n.poll-combo-header-container {\n  transition: opacity 0.5s ease-in-out;\n}\n\n.poll-combo-footer-container {\n  transition: opacity 0.5s ease-in-out;\n}";
+styleInject(css_248z$a);
+
+var css_248z$9 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.btn-group {\n  width: fit-content;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group-disabled input::placeholder {\n  color: var(--slate9);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: #096dd9;\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 14px 14px #096dd9;\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
+styleInject(css_248z$9);
+
+var ButtonGroup = function (_a) {
+    var _b = _a.wrapperProps, wrapperProps = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, children = _a.children;
+    return (React__default["default"].createElement("div", __assign$3({ className: "btn-group ".concat(disabled && 'btn-group-disabled') }, wrapperProps), children));
+};
 
 var ICON_SIZE$1 = 18;
 var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
@@ -31956,7 +31922,7 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
         closeMenu();
     }, [closeMenu, selectedItem, setSelected]);
     return (React__default["default"].createElement("div", { "data-testid": "ComboBoxSelect", className: "poll-combobox" },
-        React__default["default"].createElement("div", __assign$3({}, getComboboxProps(), { style: __assign$3(__assign$3({}, inputStyle), { position: 'relative', width: '100%' }), className: "poll-combo-group ".concat(disabled && 'poll-combo-group-disabled') }),
+        React__default["default"].createElement(ButtonGroup, { wrapperProps: __assign$3(__assign$3({}, getComboboxProps()), { style: __assign$3(__assign$3({}, inputStyle), { position: 'relative', width: '100%' }) }), disabled: disabled },
             React__default["default"].createElement("input", __assign$3({}, getInputProps(__assign$3(__assign$3({ placeholder: 'Search for something...' }, inputProps), { onFocus: function () {
                     openMenu();
                 } })), { spellCheck: false, disabled: disabled, style: {
@@ -32878,8 +32844,8 @@ const x$1=["Enter"," "],b$1=["ArrowUp","PageDown","End"],R$1=["ArrowDown","PageU
 
 const[s$1,i$1]=createContextScope("DropdownMenu",[S$1]);const l$1=S$1(),[m$1,w$1]=s$1("DropdownMenu");const DropdownMenu=e=>{const{__scopeDropdownMenu:n,children:r,open:p,defaultOpen:d,onOpenChange:a}=e,s=M$1("DropdownMenu",n),i=l$1(n),[w=!1,D]=useControllableState({prop:p,defaultProp:d,onChange:a}),g=React__namespace.useCallback((()=>D((e=>!e))),[D]);return s.isInsideContent?/*#__PURE__*/React__namespace.createElement(m$1,{scope:n,isRootMenu:!1,open:w,onOpenChange:D,onOpenToggle:g},/*#__PURE__*/React__namespace.createElement(Sub,_extends$A({},i,{open:w,onOpenChange:D}),r)):/*#__PURE__*/React__namespace.createElement(f$2,_extends$A({},e,{open:w,onOpenChange:D,onOpenToggle:g}),r)};const f$2=n=>{const{__scopeDropdownMenu:r,children:t,dir:p,open:d,onOpenChange:a,onOpenToggle:s,modal:i=!0}=n,w=l$1(r),f=React__namespace.useRef(null);return React__namespace.createElement(m$1,{scope:r,isRootMenu:!0,triggerId:useId(),triggerRef:f,contentId:useId(),open:d,onOpenChange:a,onOpenToggle:s,modal:i},/*#__PURE__*/React__namespace.createElement(Root$1,_extends$A({},w,{open:d,onOpenChange:a,dir:p,modal:i}),t))};const DropdownMenuTrigger=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:t,disabled:p=!1,...s}=e,i=w$1("DropdownMenuTrigger",t),m=l$1(t);return i.isRootMenu?/*#__PURE__*/React__namespace.createElement(Anchor,_extends$A({asChild:!0},m),/*#__PURE__*/React__namespace.createElement(Primitive.button,_extends$A({type:"button",id:i.triggerId,"aria-haspopup":"menu","aria-expanded":!!i.open||void 0,"aria-controls":i.open?i.contentId:void 0,"data-state":i.open?"open":"closed","data-disabled":p?"":void 0,disabled:p},s,{ref:composeRefs(n,i.triggerRef),onPointerDown:composeEventHandlers$1(e.onPointerDown,(e=>{p||0!==e.button||!1!==e.ctrlKey||(i.open||e.preventDefault(),i.onOpenToggle());})),onKeyDown:composeEventHandlers$1(e.onKeyDown,(e=>{p||(["Enter"," "].includes(e.key)&&i.onOpenToggle(),"ArrowDown"===e.key&&i.onOpenChange(!0),[" ","ArrowDown"].includes(e.key)&&e.preventDefault());}))}))):null}));const[D$1,M$1]=s$1("DropdownMenuContent",{isInsideContent:!1});const DropdownMenuContent=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=w$1("DropdownMenuContent",r),d=l$1(r),a={...t,style:{...e.style,"--radix-dropdown-menu-content-transform-origin":"var(--radix-popper-transform-origin)"}};return React__namespace.createElement(D$1,{scope:r,isInsideContent:!0},p.isRootMenu?/*#__PURE__*/React__namespace.createElement(g$1,_extends$A({__scopeDropdownMenu:r},a,{ref:n})):/*#__PURE__*/React__namespace.createElement(Content$1,_extends$A({},d,a,{ref:n})))}));const g$1=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,portalled:t=!0,...p}=e,d=w$1("DropdownMenuContent",r),s=l$1(r),i=React__namespace.useRef(!1);return d.isRootMenu?/*#__PURE__*/React__namespace.createElement(Content$1,_extends$A({id:d.contentId,"aria-labelledby":d.triggerId},s,p,{ref:n,portalled:t,onCloseAutoFocus:composeEventHandlers$1(e.onCloseAutoFocus,(e=>{var o;i.current||null===(o=d.triggerRef.current)||void 0===o||o.focus(),i.current=!1,e.preventDefault();})),onInteractOutside:composeEventHandlers$1(e.onInteractOutside,(e=>{const o=e.detail.originalEvent,n=0===o.button&&!0===o.ctrlKey,r=2===o.button||n;d.modal&&!r||(i.current=!0);}))})):null}));const DropdownMenuGroup=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(Group$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuLabel=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(Label$2,_extends$A({},p,t,{ref:n}))}));const DropdownMenuItem=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(Item$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuCheckboxItem=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(CheckboxItem$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuRadioGroup=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(RadioGroup$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuRadioItem=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(RadioItem$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuItemIndicator=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(ItemIndicator$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuArrow=/*#__PURE__*/React__namespace.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React__namespace.createElement(Arrow$1,_extends$A({},p,t,{ref:n}))}));const Root=DropdownMenu;const Trigger=DropdownMenuTrigger;const Content=DropdownMenuContent;const Group=DropdownMenuGroup;const Label$1=DropdownMenuLabel;const Item=DropdownMenuItem;const CheckboxItem=DropdownMenuCheckboxItem;const RadioGroup=DropdownMenuRadioGroup;const RadioItem=DropdownMenuRadioItem;const ItemIndicator=DropdownMenuItemIndicator;const Arrow=DropdownMenuArrow;
 
-var css_248z$b = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-select-content {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n  background-color: white;\n  border: 1px solid var(--slate8);\n  border-radius: 4px;\n  padding: 6px 4px;\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;\n  gap: 2px;\n}\n\n.poll-select-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  border-radius: 2px;\n  padding: 2px 8px 2px 30px;\n  transition: background-color 0.15s linear, color 0.15s linear;\n}\n\n.poll-select-item[data-state=checked] {\n  background-color: var(--primary2);\n  color: white;\n}\n\n.poll-select-item:focus-visible {\n  background-color: var(--primary0);\n  outline: solid 1px var(--primary);\n  color: unset;\n  outline-color: var(--primary);\n}\n\n.poll-select-item:hover {\n  background-color: var(--primary0);\n  cursor: pointer;\n  color: unset;\n}\n\n.poll-separator {\n  background-color: #d0d7de;\n  height: 1px;\n  width: 100%;\n  margin: 4px 0;\n}";
-styleInject(css_248z$b);
+var css_248z$8 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-select-content {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n  background-color: white;\n  border: 1px solid var(--slate8);\n  border-radius: 4px;\n  padding: 6px 4px;\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;\n  gap: 2px;\n}\n\n.poll-select-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  border-radius: 2px;\n  padding: 2px 8px 2px 30px;\n  transition: background-color 0.15s linear, color 0.15s linear;\n}\n\n.poll-select-item[data-state=checked] {\n  background-color: var(--primary2);\n  color: white;\n}\n\n.poll-select-item:focus-visible {\n  background-color: var(--primary0);\n  outline: solid 1px var(--primary);\n  color: unset;\n  outline-color: var(--primary);\n}\n\n.poll-select-item:hover {\n  background-color: var(--primary0);\n  cursor: pointer;\n  color: unset;\n}\n\n.poll-separator {\n  background-color: #d0d7de;\n  height: 1px;\n  width: 100%;\n  margin: 4px 0;\n}";
+styleInject(css_248z$8);
 
 var Dropdown = function (_a) {
     var optionGroups = _a.optionGroups, trigger = _a.trigger, open = _a.open, contentProps = _a.contentProps, itemProps = _a.itemProps, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
@@ -34551,8 +34517,8 @@ function reducer(state, action) {
 
 function noop() {}
 
-var css_248z$a = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-drop-zone {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #E8F6FF;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 16px;\n  cursor: pointer;\n  border: 1px solid #E8F6FF;\n  user-select: none;\n}\n\n.poll-drop-zone-disabled {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #E8F6FF;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 16px;\n  border: 1px solid #E8F6FF;\n  user-select: none;\n}\n\n.poll-drop-zone:hover,\n.poll-drop-zone:active,\n.poll-drop-zone:focus {\n  border-color: #FCDE5D;\n}\n\n.poll-drop-zone:hover .poll-file-input-button,\n.poll-drop-zone:active .poll-file-input-button {\n  background-color: #FCDE5D;\n  color: black;\n  border-color: #FCDE5D;\n}\n\n.poll-file-input-button {\n  z-index: 10;\n  display: flex;\n  max-width: 260px;\n  background-color: var(--primary);\n  border: 1px solid var(--primary);\n  color: white;\n  padding: 8px 16px;\n  float: left;\n  align-items: center;\n  gap: 8px;\n  border-radius: 4px;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n}\n\n.poll-file-input-button-disabled {\n  content: \"Disabled\";\n  background-color: var(--slate3);\n  color: var(--slate11);\n  cursor: default;\n  border-color: var(--slate11);\n}";
-styleInject(css_248z$a);
+var css_248z$7 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-drop-zone {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #E8F6FF;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 16px;\n  cursor: pointer;\n  border: 1px solid #E8F6FF;\n  user-select: none;\n}\n\n.poll-drop-zone-disabled {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #E8F6FF;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 16px;\n  border: 1px solid #E8F6FF;\n  user-select: none;\n}\n\n.poll-drop-zone:hover,\n.poll-drop-zone:active,\n.poll-drop-zone:focus {\n  border-color: #FCDE5D;\n}\n\n.poll-drop-zone:hover .poll-file-input-button,\n.poll-drop-zone:active .poll-file-input-button {\n  background-color: #FCDE5D;\n  color: black;\n  border-color: #FCDE5D;\n}\n\n.poll-file-input-button {\n  z-index: 10;\n  display: flex;\n  max-width: 260px;\n  background-color: var(--primary);\n  border: 1px solid var(--primary);\n  color: white;\n  padding: 8px 16px;\n  float: left;\n  align-items: center;\n  gap: 8px;\n  border-radius: 4px;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n}\n\n.poll-file-input-button-disabled {\n  content: \"Disabled\";\n  background-color: var(--slate3);\n  color: var(--slate11);\n  cursor: default;\n  border-color: var(--slate11);\n}";
+styleInject(css_248z$7);
 
 var FileInput = function (_a) {
     var disabled = _a.disabled, onChange = _a.onChange, _b = _a.accept, accept = _b === void 0 ? ['.hbjson'] : _b, inputProps = _a.inputProps;
@@ -35702,8 +35668,8 @@ const $f99a8c78507165f7$export$5fb54c671a65c88 = /*#__PURE__*/ React.forwardRef(
 const $f99a8c78507165f7$export$6d08773d2e66f8f2 = $f99a8c78507165f7$export$9f866c100ef519e4;
 const $f99a8c78507165f7$export$adb584737d712b70 = $f99a8c78507165f7$export$5fb54c671a65c88;
 
-var css_248z$9 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-radio {\n  background-color: white;\n  width: 18px;\n  height: 18px;\n  border-radius: 100%;\n  box-shadow: 0 1px 2px black;\n  border: none;\n  cursor: pointer;\n  border-width: 1px;\n  outline-width: 1px;\n}\n\n.poll-radio:hover {\n  background-color: var(--primary1);\n}\n\n.poll-radio:focus {\n  box-shadow: 0 0 0 2px var(--primary);\n}\n\n.poll-radio:focus-visible {\n  outline: none;\n}\n\n.poll-radio-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.poll-radio-indicator:after {\n  content: '\"\"';\n  color: rgba(0, 0, 0, 0);\n  display: block;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: var(--primary);\n}";
-styleInject(css_248z$9);
+var css_248z$6 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-radio {\n  background-color: white;\n  width: 18px;\n  height: 18px;\n  border-radius: 100%;\n  box-shadow: 0 1px 2px black;\n  border: none;\n  cursor: pointer;\n  border-width: 1px;\n  outline-width: 1px;\n}\n\n.poll-radio:hover {\n  background-color: var(--primary1);\n}\n\n.poll-radio:focus {\n  box-shadow: 0 0 0 2px var(--primary);\n}\n\n.poll-radio:focus-visible {\n  outline: none;\n}\n\n.poll-radio-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.poll-radio-indicator:after {\n  content: '\"\"';\n  color: rgba(0, 0, 0, 0);\n  display: block;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: var(--primary);\n}";
+styleInject(css_248z$6);
 
 var RadioList = function (_a) {
     var items = _a.items, name = _a.name, defaultValue = _a.defaultValue, onChange = _a.onChange;
@@ -35745,7 +35711,6 @@ var Label = function (_a) {
                 display: 'flex',
                 justifyContent: 'flex-start',
                 width: '100%',
-                backgroundColor: 'white',
             } },
             React__default["default"].createElement("label", { htmlFor: name !== null && name !== void 0 ? name : (typeof label === 'string' ? slugify(label, { lower: true }) : 'undefined'), style: __assign$3({ background: 'var(--background)', borderRadius: 4, width: 'fit-content', zIndex: 100, fontSize: '0.8rem', color: disabled ? 'var(--slate11)' : 'var(--primary)', fill: disabled ? 'var(--slate11)' : 'var(--primary)', padding: '0px 4px', marginBottom: 0, backgroundColor: 'inherit' }, style) }, label)),
         children));
@@ -35771,8 +35736,8 @@ var Logo = function (_a) {
             } })));
 };
 
-var css_248z$8 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.number-input {\n  width: 100%;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n  border: 1px solid var(--primary);\n}\n\n.number-input:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.number-input-disabled {\n  border-color: grey;\n}\n\n.number-input-disabled input,\n.number-input-disabled button {\n  cursor: default !important;\n}\n\n.number-input-disabled:hover {\n  box-shadow: none;\n}\n\n.number-input input {\n  width: 100%;\n  color: var(--slate12);\n}\n\n.number-input input::placeholder {\n  color: var(--slate10);\n}\n\n.number-input i svg {\n  fill: inherit;\n}\n\n.number-input button,\n.number-input input {\n  display: flex;\n  padding: 9px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  line-height: 1.5rem;\n}\n\n.number-input button:first-child,\n.number-input input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n\n.number-input button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left-color: #096dd9;\n}\n\n.number-input button:not(:last-child),\n.number-input input:not(:last-child) {\n  border-right: none;\n}\n\n.number-input button:focus-visible,\n.number-input input:focus-visible {\n  outline: none;\n}\n\n.number-input button:focus,\n.number-input input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.number-input:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}";
-styleInject(css_248z$8);
+var css_248z$5 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.number-input {\n  width: 100%;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n  border: 1px solid var(--primary);\n}\n\n.number-input:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.number-input-disabled {\n  border-color: grey;\n}\n\n.number-input-disabled input,\n.number-input-disabled button {\n  cursor: default !important;\n}\n\n.number-input-disabled:hover {\n  box-shadow: none;\n}\n\n.number-input input {\n  width: 100%;\n  color: var(--slate12);\n}\n\n.number-input input::placeholder {\n  color: var(--slate10);\n}\n\n.number-input i svg {\n  fill: inherit;\n}\n\n.number-input button,\n.number-input input {\n  display: flex;\n  padding: 9px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  line-height: 1.5rem;\n}\n\n.number-input button:first-child,\n.number-input input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n\n.number-input button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left-color: #096dd9;\n}\n\n.number-input button:not(:last-child),\n.number-input input:not(:last-child) {\n  border-right: none;\n}\n\n.number-input button:focus-visible,\n.number-input input:focus-visible {\n  outline: none;\n}\n\n.number-input button:focus,\n.number-input input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.number-input:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}";
+styleInject(css_248z$5);
 
 var NumberInput = function (_a) {
     var _b = _a.inputProps, inputProps = _b === void 0 ? { defaultValue: 0 } : _b, _c = _a.icon, icon = _c === void 0 ? React__default["default"].createElement(Hash$1, null) : _c, style = _a.style, reset = _a.reset;
@@ -35803,13 +35768,10 @@ var NumberInput = function (_a) {
                 React__default["default"].createElement(ArrowClockwise$1, { style: { fill: 'var(--primary)' } }))));
 };
 
-var css_248z$7 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.btn-group {\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: #096dd9;\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 14px 14px #096dd9;\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
-styleInject(css_248z$7);
-
 var SettingsButton = function (_a) {
     var onClick = _a.onClick, label = _a.label, options = _a.options, asButtons = _a.asButtons, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.triggerIcon, triggerIcon = _c === void 0 ? React__default["default"].createElement(CaretDownFill$1, null) : _c, helpText = _a.helpText, _d = _a.icon, icon = _d === void 0 ? React__default["default"].createElement(Logo, null) : _d;
     return (React__default["default"].createElement(ConditionalWrapper, { condition: typeof helpText !== 'undefined' || disabled, wrapper: function (children) { return React__default["default"].createElement(InputDescription, { helpText: disabled ? 'Enabled in Pollination CAD plugins.' : helpText }, children); } },
-        React__default["default"].createElement("div", { className: "btn-group ".concat(disabled && 'btn-group-disabled') },
+        React__default["default"].createElement(ButtonGroup, { disabled: disabled },
             React__default["default"].createElement("button", { type: 'button', onClick: onClick, disabled: disabled, style: {
                     flex: 1,
                 } },
@@ -35832,8 +35794,8 @@ var SettingsButton = function (_a) {
                             }, disabled: disabled })))));
 };
 
-var css_248z$6 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.text-input {\n  width: 100%;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n  border: 1px solid var(--primary);\n}\n\n.text-input:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.text-input-disabled:hover {\n  box-shadow: none;\n}\n\n.text-input input {\n  width: 100%;\n  color: var(--slate12);\n}\n\n.text-input input::placeholder {\n  color: var(--slate10);\n}\n\n.text-input i svg {\n  fill: var(--primary);\n}\n\n.text-input button,\n.text-input input {\n  display: flex;\n  padding: 9px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  line-height: 1.5rem;\n}\n\n.text-input button:first-child,\n.text-input input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n\n.text-input button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left-color: #096dd9;\n}\n\n.text-input button:not(:last-child),\n.text-input input:not(:last-child) {\n  border-right: none;\n}\n\n.text-input button:focus-visible,\n.text-input input:focus-visible {\n  outline: none;\n}\n\n.text-input button:focus,\n.text-input input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.text-input:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}";
-styleInject(css_248z$6);
+var css_248z$4 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.text-input {\n  width: 100%;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n  border: 1px solid var(--primary);\n}\n\n.text-input:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.text-input-disabled:hover {\n  box-shadow: none;\n}\n\n.text-input input {\n  width: 100%;\n  color: var(--slate12);\n}\n\n.text-input input::placeholder {\n  color: var(--slate10);\n}\n\n.text-input i svg {\n  fill: var(--primary);\n}\n\n.text-input button,\n.text-input input {\n  display: flex;\n  padding: 9px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  line-height: 1.5rem;\n}\n\n.text-input button:first-child,\n.text-input input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n\n.text-input button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-left-color: #096dd9;\n}\n\n.text-input button:not(:last-child),\n.text-input input:not(:last-child) {\n  border-right: none;\n}\n\n.text-input button:focus-visible,\n.text-input input:focus-visible {\n  outline: none;\n}\n\n.text-input button:focus,\n.text-input input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.text-input:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}";
+styleInject(css_248z$4);
 
 var TextInput = function (_a) {
     var _b = _a.inputProps, inputProps = _b === void 0 ? { placeholder: 'Input some text...' } : _b, _c = _a.icon, icon = _c === void 0 ? React__default["default"].createElement(CursorText$1, null) : _c, style = _a.style, reset = _a.reset;
@@ -35862,8 +35824,8 @@ var TextInput = function (_a) {
                 React__default["default"].createElement(ArrowClockwise$1, { style: { fill: 'var(--primary)' } }))));
 };
 
-var css_248z$5 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.tooltip-content {\n  border-radius: 4px;\n  padding: 6px 10px;\n  background-color: white;\n  font-size: 0.85rem;\n  font-weight: 500;\n  border: 1px solid var(--slate8);\n  box-shadow: hsla(206deg, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206deg, 22%, 7%, 0.2) 0px 10px 20px -15px;\n}";
-styleInject(css_248z$5);
+var css_248z$3 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.tooltip-content {\n  border-radius: 4px;\n  padding: 6px 10px;\n  background-color: white;\n  font-size: 0.85rem;\n  font-weight: 500;\n  border: 1px solid var(--slate8);\n  box-shadow: hsla(206deg, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206deg, 22%, 7%, 0.2) 0px 10px 20px -15px;\n}";
+styleInject(css_248z$3);
 
 var AuthUser = function (config) {
     var authUser = useAPIClient(config).authUser;
@@ -39449,11 +39411,11 @@ const $409067139f391064$export$be92b6f5f03c0fe9 = $409067139f391064$export$6eb0f
 const $409067139f391064$export$41fb9f06171c75f4 = $409067139f391064$export$c135dce7b15bbbdc;
 const $409067139f391064$export$7c6e2c02157bb7d2 = $409067139f391064$export$aadde00976f34151;
 
-var css_248z$4 = "@keyframes open {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes close {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n.collapse-content {\n  overflow: hidden;\n  font-size: inherit;\n  color: inherit;\n}\n\n.collapse-content[data-state=open] {\n  animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n  animation: close 300ms ease-out;\n}";
-styleInject(css_248z$4);
+var css_248z$2 = "@keyframes open {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes close {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n.collapse-content {\n  overflow: hidden;\n  font-size: inherit;\n  color: inherit;\n}\n\n.collapse-content[data-state=open] {\n  animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n  animation: close 300ms ease-out;\n}";
+styleInject(css_248z$2);
 
-var css_248z$3 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-button {\n  z-index: 10;\n  display: flex;\n  justify-content: center;\n  background-color: var(--primary);\n  border: 1px solid var(--primary);\n  color: white;\n  padding: 8px 16px;\n  float: left;\n  align-items: center;\n  gap: 8px;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, color 0.25s;\n  text-overflow: ellipsis;\n  max-width: 200px;\n  overflow: hidden;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.poll-button:active {\n  box-shadow: inset 0px 0px 9px 4px #096dd9;\n}\n\n.poll-button:disabled {\n  background-color: var(--slate3);\n  color: var(--slate11);\n  cursor: default;\n  border-color: var(--slate11);\n  cursor: default;\n  box-shadow: none;\n}";
-styleInject(css_248z$3);
+var css_248z$1 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.poll-button {\n  z-index: 10;\n  display: flex;\n  justify-content: center;\n  background-color: var(--primary);\n  border: 1px solid var(--primary);\n  color: white;\n  padding: 8px 16px;\n  float: left;\n  align-items: center;\n  gap: 8px;\n  border-radius: 4px;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, color 0.25s;\n  text-overflow: ellipsis;\n  max-width: 200px;\n  overflow: hidden;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.poll-button:active {\n  box-shadow: inset 0px 0px 9px 4px #096dd9;\n}\n\n.poll-button:disabled {\n  background-color: var(--slate3);\n  color: var(--slate11);\n  cursor: default;\n  border-color: var(--slate11);\n  cursor: default;\n  box-shadow: none;\n}";
+styleInject(css_248z$1);
 
 var ICON_SIZE = 18;
 var Button = function (_a) {
@@ -40025,9 +39987,6 @@ var SelectLocalArtifacts = function (_a) {
             } }, "Showing ".concat((_b = artifacts.folders.length) !== null && _b !== void 0 ? _b : 0, " folder").concat(artifacts.folders.length === 1 ? '' : 's', ", and ").concat((_c = artifacts.files.length) !== null && _c !== void 0 ? _c : 0, " file").concat(artifacts.files.length === 1 ? '' : 's', "."))), maxHeight: 340, stateReducer: stateReducer }));
 };
 
-var css_248z$2 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.btn-group {\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: #096dd9;\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 14px 14px #096dd9;\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
-styleInject(css_248z$2);
-
 var ComboFileSelector = function (_a) {
     var projectOwner = _a.projectOwner, projectName = _a.projectName, defaultOption = _a.defaultOption, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, client = _a.client, inputProps = _a.inputProps;
     var host = getHost();
@@ -40040,9 +39999,7 @@ var ComboFileSelector = function (_a) {
             flexDirection: 'column',
             gap: 8
         } },
-        React__default["default"].createElement("div", { className: 'btn-group', style: {
-                width: 'fit-content'
-            } },
+        React__default["default"].createElement(ButtonGroup, null,
             React__default["default"].createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('get_cloud'); }, style: {
                     display: 'flex',
                     boxShadow: !disabled && option === 'get_cloud' ? 'inset 0px 0px 9px 4px #096dd9' : undefined
@@ -40127,12 +40084,12 @@ var RecipeInputsForm = function (_a) {
         }, {}),
         resolver: Oe(schema),
         mode: 'all'
-    }), control = _e.control, register = _e.register, handleSubmit = _e.handleSubmit, reset = _e.reset, resetField = _e.resetField; _e.setValue; var _f = _e.formState, errors = _f.errors, isValid = _f.isValid, isSubmitSuccessful = _f.isSubmitSuccessful;
-    React.useEffect(function () {
-        if (isSubmitSuccessful) {
-            reset();
-        }
-    }, [isSubmitSuccessful, reset]);
+    }), control = _e.control, register = _e.register, handleSubmit = _e.handleSubmit; _e.reset; var resetField = _e.resetField; _e.setValue; var _f = _e.formState, errors = _f.errors, isValid = _f.isValid; _f.isSubmitSuccessful;
+    // useEffect(() => {
+    //   if(isSubmitSuccessful) {
+    //     reset()
+    //   }
+    // }, [isSubmitSuccessful, reset])
     var _onSubmit = function (_data) {
         var data = __assign$3({}, _data);
         // TODO: fix isTouched for controlled fields https://github.com/react-hook-form/react-hook-form/discussions/6824
@@ -40280,54 +40237,9 @@ var RecipeInputsForm = function (_a) {
                     }, loading: loading }, "Create Study")))));
 };
 
-var css_248z$1 = ".react-tabs {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.react-tabs__tab-list {\n  border-bottom: 1px solid #aaa;\n  margin: 0 0 10px;\n  padding: 0;\n}\n\n.react-tabs__tab {\n  display: inline-block;\n  border: 1px solid transparent;\n  border-bottom: none;\n  bottom: -1px;\n  position: relative;\n  list-style: none;\n  padding: 6px 12px;\n  cursor: pointer;\n}\n\n.react-tabs__tab--selected {\n  background: #fff;\n  border-color: #aaa;\n  color: black;\n  border-radius: 5px 5px 0 0;\n}\n\n.react-tabs__tab--disabled {\n  color: GrayText;\n  cursor: default;\n}\n\n.react-tabs__tab:focus {\n  outline: none;\n}\n\n.react-tabs__tab:focus:after {\n  content: '';\n  position: absolute;\n  height: 5px;\n  left: -4px;\n  right: -4px;\n  bottom: -5px;\n  background: #fff;\n}\n\n.react-tabs__tab-panel {\n  display: none;\n}\n\n.react-tabs__tab-panel--selected {\n  display: block;\n}\n";
-styleInject(css_248z$1);
-
-var css_248z = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n.btn-group {\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: #096dd9;\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 14px 14px #096dd9;\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
+var css_248z = ".react-tabs {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.react-tabs__tab-list {\n  border-bottom: 1px solid #aaa;\n  margin: 0 0 10px;\n  padding: 0;\n}\n\n.react-tabs__tab {\n  display: inline-block;\n  border: 1px solid transparent;\n  border-bottom: none;\n  bottom: -1px;\n  position: relative;\n  list-style: none;\n  padding: 6px 12px;\n  cursor: pointer;\n}\n\n.react-tabs__tab--selected {\n  background: #fff;\n  border-color: #aaa;\n  color: black;\n  border-radius: 5px 5px 0 0;\n}\n\n.react-tabs__tab--disabled {\n  color: GrayText;\n  cursor: default;\n}\n\n.react-tabs__tab:focus {\n  outline: none;\n}\n\n.react-tabs__tab:focus:after {\n  content: '';\n  position: absolute;\n  height: 5px;\n  left: -4px;\n  right: -4px;\n  bottom: -5px;\n  background: #fff;\n}\n\n.react-tabs__tab-panel {\n  display: none;\n}\n\n.react-tabs__tab-panel--selected {\n  display: block;\n}\n";
 styleInject(css_248z);
 
-var ConfigureLocalRun = function (_a) {
-    var _b = _a.defaultOption, defaultOption = _b === void 0 ? 'cloud' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
-    var _d = React.useState(defaultOption), option = _d[0], setOption = _d[1];
-    React.useEffect(function () {
-        setOption(defaultOption);
-    }, [defaultOption]);
-    return (React__default["default"].createElement("div", { className: disabled && 'btn-group-disabled', style: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'end'
-        } },
-        React__default["default"].createElement("div", { className: 'btn-group', style: {
-                width: 'fit-content'
-            } },
-            React__default["default"].createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('cloud'); }, style: {
-                    display: 'flex',
-                    boxShadow: !disabled && option === 'cloud' ? 'inset 0px 0px 9px 4px #096dd9' : undefined
-                } },
-                React__default["default"].createElement(CloudPlus$1, null),
-                "Cloud"),
-            React__default["default"].createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('local'); }, style: {
-                    display: 'flex',
-                    boxShadow: !disabled && option === 'local' ? 'inset 0px 0px 9px 4px #096dd9' : undefined
-                } },
-                React__default["default"].createElement(Laptop$1, null),
-                "Local")),
-        React__default["default"].createElement("div", { style: {
-                minWidth: 160,
-                maxWidth: 280,
-                flex: 1,
-            } },
-            React__default["default"].createElement(Label, { label: "Number of CPUs", disabled: option !== 'local', style: {
-                    backgroundColor: 'white'
-                } },
-                React__default["default"].createElement(NumberInput, { icon: React__default["default"].createElement(Cpu$1, null), inputProps: {
-                        min: 0,
-                        step: 1,
-                        max: 100,
-                        disabled: option !== 'local'
-                    } })))));
-};
-
 var initialState = {
     name: undefined,
     description: undefined,
@@ -40339,7 +40251,6 @@ var defaultStyle = {
     display: 'flex',
     flexDirection: 'column',
     gap: 18,
-    // backgroundColor: '#FFFAEE'
 };
 var CreateStudy = function (_a) {
     var _b;
@@ -40358,7 +40269,7 @@ var CreateStudy = function (_a) {
     // @ts-ignore
     var projectOwner = !state || !state.account ? undefined : ((_b = state.account.username) !== null && _b !== void 0 ? _b : state.account.account_name);
     var projectSlug = !state || !state.project ? undefined : state.project.slug.split('/')[1];
-    var _e = useCreateStudy(projectOwner, projectSlug, client), host = _e.host, createStudy = _e.createStudy;
+    var _e = useCreateStudy(projectOwner, projectSlug, client); _e.host; var createStudy = _e.createStudy;
     React.useEffect(function () {
         if (!state.recipe)
             return;
@@ -40422,17 +40333,60 @@ var CreateStudy = function (_a) {
                         React__default["default"].createElement(SelectRecipe, { authUser: authUser, client: client, projectOwner: projectOwner, projectName: state.project ? state === null || state === void 0 ? void 0 : state.project.name : undefined, setSelRecipe: setSelRecipe })))),
             state.recipe &&
                 React__default["default"].createElement(TabPanel, { style: {
-                        padding: '8px 8px'
+                        padding: 8
                     } },
                     React__default["default"].createElement("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 24
                         } },
-                        host !== 'web' && React__default["default"].createElement(ConfigureLocalRun, null),
                         React__default["default"].createElement(RecipeInputsForm, { recipe: state.recipe, onSubmit: function (data) { return createStudy({ name: state === null || state === void 0 ? void 0 : state.name, source: state === null || state === void 0 ? void 0 : state.recipe.source, description: state === null || state === void 0 ? void 0 : state.description }, data); }, disabled: !state.name || !state.account || !state.project || !state.recipe, projectName: projectSlug, projectOwner: projectOwner, client: client }))))));
 };
 
+var ConfigureLocalRun = function (_a) {
+    var _b = _a.defaultOption, defaultOption = _b === void 0 ? 'cloud' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    var _d = React.useState(defaultOption), option = _d[0], setOption = _d[1];
+    React.useEffect(function () {
+        setOption(defaultOption);
+    }, [defaultOption]);
+    return (React__default["default"].createElement("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'end'
+        } },
+        React__default["default"].createElement(ButtonGroup, { wrapperProps: {
+                style: {
+                    width: 'fit-content'
+                }
+            } },
+            React__default["default"].createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('cloud'); }, style: {
+                    display: 'flex',
+                    boxShadow: !disabled && option === 'cloud' ? 'inset 0px 0px 9px 4px #096dd9' : undefined
+                } },
+                React__default["default"].createElement(CloudPlus$1, null),
+                "Cloud"),
+            React__default["default"].createElement("button", { type: 'button', disabled: disabled, onClick: function () { return setOption('local'); }, style: {
+                    display: 'flex',
+                    boxShadow: !disabled && option === 'local' ? 'inset 0px 0px 9px 4px #096dd9' : undefined
+                } },
+                React__default["default"].createElement(Laptop$1, null),
+                "Local")),
+        React__default["default"].createElement("div", { style: {
+                minWidth: 160,
+                maxWidth: 280,
+                flex: 1,
+            } },
+            React__default["default"].createElement(Label, { label: "Number of CPUs", disabled: option !== 'local', style: {
+                    backgroundColor: 'white'
+                } },
+                React__default["default"].createElement(NumberInput, { icon: React__default["default"].createElement(Cpu$1, null), inputProps: {
+                        min: 0,
+                        step: 1,
+                        max: 100,
+                        disabled: option !== 'local'
+                    } })))));
+};
+
 // Generated with util/create-component.js
 var GetModelActions;
 (function (GetModelActions) {
@@ -40713,22 +40667,22 @@ var Action$2;
 var getAction$2 = function (key) {
     switch (key) {
         case 'add':
-            return 'BakeGeometry';
+            return 'AddGeometry';
         case 'delete':
-            return 'ClearGeometry';
+            return 'DeleteGeometry';
         case 'preview':
-            return 'DrawGeometry';
+            return 'PreviewGeometry';
         case 'clear':
-            return 'DisableDraw';
+            return 'ClearGeometry';
         case 'subscribe-preview':
-            return 'CombinedRendering';
+            return 'SubscribePreviewGeometry';
     }
 };
 var SendGeometry = function (_a) {
     var geometry = _a.geometry, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Geometry' : _b;
     var _c = React.useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action$2.preview), selOpt = _c[0], setSelOpt = _c[1];
     var _d = React.useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
-    var sendGeometry = useSendGeometry().sendGeometry;
+    var sendMessage = useSendMessage().sendMessage;
     React.useEffect(function () {
         setSelOpt(defaultAction);
     }, [defaultAction]);
@@ -40736,9 +40690,9 @@ var SendGeometry = function (_a) {
         setKey(defaultKey);
     }, [defaultKey]);
     React.useEffect(function () {
-        if (!sendGeometry || selOpt !== 'subscribe-preview')
+        if (!sendMessage || selOpt !== 'subscribe-preview')
             return;
-        sendGeometry('CombinedRendering', {
+        sendMessage('SubscribePreviewGeometry', {
             data: geometry,
             uniqueId: key,
             options: {
@@ -40747,7 +40701,7 @@ var SendGeometry = function (_a) {
             },
         });
         return function () {
-            sendGeometry('DisableDraw', {
+            sendMessage('ClearGeometry', {
                 data: geometry,
                 uniqueId: key,
                 options: {
@@ -40756,11 +40710,11 @@ var SendGeometry = function (_a) {
                 },
             });
         };
-    }, [selOpt, geometry, sendGeometry, key]);
-    return (React__default["default"].createElement(SettingsButton, { disabled: !sendGeometry, onClick: function () {
-            if (!sendGeometry)
+    }, [selOpt, geometry, key, sendMessage]);
+    return (React__default["default"].createElement(SettingsButton, { disabled: !sendMessage, onClick: function () {
+            if (!sendMessage)
                 return;
-            sendGeometry(getAction$2(selOpt), {
+            sendMessage(getAction$2(selOpt), {
                 data: geometry,
                 uniqueId: key,
                 options: {
@@ -40779,7 +40733,7 @@ var SendGeometry = function (_a) {
                         label: 'Preview',
                         checked: selOpt === Action$2.preview,
                         icon: React__default["default"].createElement(Eyeglasses$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.preview ? undefined : Action$2.preview); });
                         },
@@ -40790,7 +40744,7 @@ var SendGeometry = function (_a) {
                         label: 'Add',
                         checked: selOpt === Action$2.add,
                         icon: React__default["default"].createElement(Building$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.add ? undefined : Action$2.add); });
                         },
@@ -40801,7 +40755,7 @@ var SendGeometry = function (_a) {
                         label: 'Delete',
                         checked: selOpt === Action$2.delete,
                         icon: React__default["default"].createElement(Trash$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.delete ? undefined : Action$2.delete); });
                         },
@@ -40812,7 +40766,7 @@ var SendGeometry = function (_a) {
                         label: 'Clear',
                         checked: selOpt === Action$2.clear,
                         icon: React__default["default"].createElement(Recycle$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.clear ? undefined : Action$2.clear); });
                         },
@@ -40823,7 +40777,7 @@ var SendGeometry = function (_a) {
                         label: 'Subscribe Preview',
                         checked: selOpt === Action$2.subscribePreview,
                         icon: React__default["default"].createElement(ArrowRepeat$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.subscribePreview ? undefined : Action$2.subscribePreview); });
                         },
@@ -40848,13 +40802,13 @@ var Action$1;
 var getAction$1 = function (key) {
     switch (key) {
         case 'add':
-            return 'BakePollinationModel';
+            return 'AddHBJSON';
         case 'preview':
-            return 'DrawPollinationModel';
+            return 'PreviewHBJSON';
         case 'clear':
-            return 'DisableDrawPollinationModel';
+            return 'ClearHBJSON';
         case 'subscribe-preview':
-            return 'CombinedRenderingPollinationModel';
+            return 'SubscribePreviewHBJSON';
     }
 };
 var SendModel = function (_a) {
@@ -40871,7 +40825,7 @@ var SendModel = function (_a) {
     React.useEffect(function () {
         if (!sendHbjson || selOpt !== Action$1.subscribePreview)
             return;
-        sendHbjson('CombinedRenderingPollinationModel', {
+        sendHbjson('SubscribePreviewHBJSON', {
             data: hbjson,
             uniqueId: key,
             options: {
@@ -40880,7 +40834,7 @@ var SendModel = function (_a) {
             },
         });
         return function () {
-            sendHbjson('DisableDrawPollinationModel', {
+            sendHbjson('ClearHBJSON', {
                 data: hbjson,
                 uniqueId: key,
                 options: {
@@ -40974,18 +40928,18 @@ var getAction = function (key) {
         case 'delete':
             return 'DeleteResults';
         case 'preview':
-            return 'DrawResults';
+            return 'PreviewResults';
         case 'clear':
             return 'ClearResults';
         case 'subscribe-preview':
-            return 'SubscribeDrawResults';
+            return 'SubscribePreviewResults';
     }
 };
 var SendResults = function (_a) {
     var results = _a.results, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Results' : _b;
     var _c = React.useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action.preview), selOpt = _c[0], setSelOpt = _c[1];
     var _d = React.useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
-    var sendGeometry = useSendGeometry().sendGeometry;
+    var sendMessage = useSendMessage().sendMessage;
     React.useEffect(function () {
         setSelOpt(defaultAction);
     }, [defaultAction]);
@@ -40993,9 +40947,9 @@ var SendResults = function (_a) {
         setKey(defaultKey);
     }, [defaultKey]);
     React.useEffect(function () {
-        if (!sendGeometry || selOpt !== Action.subscribePreview)
+        if (!sendMessage || selOpt !== Action.subscribePreview)
             return;
-        sendGeometry('SubscribeDrawResults', {
+        sendMessage('SubscribePreviewResults', {
             data: results,
             uniqueId: key,
             options: {
@@ -41004,7 +40958,7 @@ var SendResults = function (_a) {
             },
         });
         return function () {
-            sendGeometry('ClearResults', {
+            sendMessage('ClearResults', {
                 data: results,
                 uniqueId: key,
                 options: {
@@ -41013,11 +40967,11 @@ var SendResults = function (_a) {
                 },
             });
         };
-    }, [key, results, selOpt, sendGeometry]);
-    return (React__default["default"].createElement(SettingsButton, { disabled: !sendGeometry, onClick: function () {
-            if (!sendGeometry)
+    }, [key, results, selOpt, sendMessage]);
+    return (React__default["default"].createElement(SettingsButton, { disabled: !sendMessage, onClick: function () {
+            if (!sendMessage)
                 return;
-            sendGeometry(getAction(selOpt), {
+            sendMessage(getAction(selOpt), {
                 data: results,
                 uniqueId: key,
                 options: {
@@ -41036,7 +40990,7 @@ var SendResults = function (_a) {
                         label: 'Preview',
                         checked: selOpt === Action.preview,
                         icon: React__default["default"].createElement(Eyeglasses$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.preview ? undefined : Action.preview); });
                         },
@@ -41047,7 +41001,7 @@ var SendResults = function (_a) {
                         label: 'Add',
                         checked: selOpt === Action.add,
                         icon: React__default["default"].createElement(Building$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.add ? undefined : Action.add); });
                         },
@@ -41058,7 +41012,7 @@ var SendResults = function (_a) {
                         label: 'Delete',
                         checked: selOpt === Action.delete,
                         icon: React__default["default"].createElement(Trash$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.delete ? undefined : Action.delete); });
                         },
@@ -41069,7 +41023,7 @@ var SendResults = function (_a) {
                         label: 'Clear',
                         checked: selOpt === Action.clear,
                         icon: React__default["default"].createElement(Recycle$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.clear ? undefined : Action.clear); });
                         },
@@ -41080,7 +41034,7 @@ var SendResults = function (_a) {
                         label: 'Subscribe Preview',
                         checked: selOpt === Action.subscribePreview,
                         icon: React__default["default"].createElement(ArrowRepeat$1, { size: 16 }),
-                        disabled: !sendGeometry,
+                        disabled: !sendMessage,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.subscribePreview ? undefined : Action.subscribePreview); });
                         },
@@ -41123,6 +41077,6 @@ exports.useGetHbjson = useGetHbjson;
 exports.useHbjsontoVTK = useHbjsontoVTK;
 exports.useManageSettings = useManageSettings;
 exports.useRunCommand = useRunCommand;
-exports.useSendGeometry = useSendGeometry;
 exports.useSendHbjson = useSendHbjson;
+exports.useSendMessage = useSendMessage;
 //# sourceMappingURL=index.js.map