pollination-react-io 1.10.0 → 1.11.2

package/build/ComboFileSelector/ComboFileSelector.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { ComboFileSelectorProps } from './ComboFileSelector.types';
-import './ComboFileSelector.scss';
 export declare const ComboFileSelector: React.FC<ComboFileSelectorProps>;
 export default ComboFileSelector;

package/build/ConfigureLocalRun/ConfigureLocalRun.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { ConfigureLocalRunProps } from './ConfigureLocalRun.types';
-import './ConfigureLocalRun.scss';
 export declare const ConfigureLocalRun: React.FC<ConfigureLocalRunProps>;
 export default ConfigureLocalRun;

package/build/SelectLocalArtifactNative/SelectLocalArtifactNative.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SelectLocalArtifactNativeProps } from './SelectLocalArtifactNative.types';
+import './SelectLocalArtifactNative.scss';
+declare const SelectLocalArtifactNative: React.FC<SelectLocalArtifactNativeProps>;
+export default SelectLocalArtifactNative;

package/build/SelectLocalArtifactNative/SelectLocalArtifactNative.types.d.ts

@@ -0,0 +1,3 @@
+export interface SelectLocalArtifactNativeProps {
+    onChange?: (path: string) => void;
+}

package/build/atoms/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonGroupProps } from './ButtonGroup.types';
+import './ButtonGroup.scss';
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+export default ButtonGroup;

package/build/atoms/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+export interface ButtonGroupProps {
+    wrapperProps?: HTMLProps<HTMLDivElement>;
+    disabled?: boolean;
+}

package/build/atoms/SettingsButton/index.d.ts

@@ -1,6 +1,5 @@
 import React, { FC, ReactNode } from 'react';
 import { OptionGroup } from '../Dropdown/Dropdown';
-import './SettingsButton.scss';
 export interface SettingsButtonProps {
     onClick: () => void;
     label: string | ReactNode;
@@ -12,3 +11,4 @@ export interface SettingsButtonProps {
     icon?: ReactNode;
 }
 export declare const SettingsButton: FC<SettingsButtonProps>;
+export default SettingsButton;

package/build/hooks/types.d.ts

@@ -1,7 +1,7 @@
 export declare type GeometryAction = 'AddGeometry' | 'PreviewGeometry' | 'DeleteGeometry' | 'ClearGeometry' | 'SubscribePreviewGeometry';
 export declare type ModelAction = 'AddHBJSON' | 'PreviewHBJSON' | 'DeleteHBJSON' | 'ClearHBJSON' | 'SubscribePreviewHBJSON';
-export declare type SettingsAction = 'AddSettings' | 'PreviewSettings' | 'DeleteSettings' | 'ClearSettings' | 'SubscribePreviewSettings';
-export declare type CommandAction = 'AddCommand' | 'PreviewCommand' | 'DeleteCommand' | 'ClearCommand' | 'SubscribePreviewCommand';
+export declare type SettingsAction = 'AddSettings';
+export declare type CommandAction = 'AddCommand';
 export declare type ResultsAction = 'AddResults' | 'PreviewResults' | 'DeleteResults' | 'ClearResults' | 'SubscribePreviewResults';
 export declare type StudyAction = 'AddStudy' | 'PreviewStudy' | 'DeleteStudy' | 'ClearStudy' | 'SubscribePreviewStudy';
 export declare type Action = GeometryAction | ModelAction | ResultsAction | StudyAction | CommandAction | SettingsAction;

package/build/hooks/useManageSettings.d.ts

@@ -2,5 +2,5 @@ import type { SettingsOptions } from '.';
 export declare const useManageSettings: () => {
     host: "web" | "rhino" | "revit" | "sketchup";
     sendSettings: (settings: SettingsOptions) => import("./types").PanelMessageIn;
-    getSettings: () => any;
+    getSettings: (key?: string) => any;
 };

package/build/index.esm.js

@@ -23928,38 +23928,27 @@ var useRunCommand = function (defaultKey) {
 };
 
 var useManageSettings = function () {
-    var host = getHost();
-    var rhinoSendSettings = useCallback(function (settings) {
-        if (!checkDotNet())
-            return;
-        var message = {
-            action: 'SetModelSettings',
-            data: settings,
-        };
-        return sendMessageDotNet(message);
-    }, []);
-    var rhinoGetSettings = useCallback(function () {
-        if (!checkDotNet())
-            return;
-        var settings = window.parent.chrome.webview.hostObjects.sync.settings.GetModelSettings();
-        return settings;
-    }, []);
-    var sendSettings = useMemo(function () {
-        switch (host) {
-            case 'rhino':
-                return rhinoSendSettings;
-            default:
-                return undefined;
+    var _a = useSendMessage(), host = _a.host, sendMessage = _a.sendMessage;
+    var sendSettings = useCallback(function (settings) {
+        return sendMessage('AddSettings', { data: settings });
+    }, [sendMessage]);
+    var getSettings = useCallback(function (key) {
+        // if (!checkDotNet()) return
+        if (key === void 0) { key = performance.now().toString(); }
+        var settings;
+        try {
+            settings = window.parent.chrome.webview.hostObjects.sync.settings.GetModelSettings();
         }
-    }, [host, rhinoSendSettings]);
-    var getSettings = useMemo(function () {
-        switch (host) {
-            case 'rhino':
-                return rhinoGetSettings;
-            default:
-                return undefined;
+        catch (_a) {
+            try {
+                settings = window.parent.chrome.webview.hostObjects.sync.settings.Get(key).data;
+            }
+            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,
@@ -30288,8 +30277,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.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.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;
 
@@ -31853,8 +31842,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.createElement("div", __assign$3({ className: "btn-group ".concat(disabled && 'btn-group-disabled') }, wrapperProps), children));
+};
 
 var ICON_SIZE$1 = 18;
 var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
@@ -31899,7 +31896,7 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
         closeMenu();
     }, [closeMenu, selectedItem, setSelected]);
     return (React__default.createElement("div", { "data-testid": "ComboBoxSelect", className: "poll-combobox" },
-        React__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.createElement(ButtonGroup, { wrapperProps: __assign$3(__assign$3({}, getComboboxProps()), { style: __assign$3(__assign$3({}, inputStyle), { position: 'relative', width: '100%' }) }), disabled: disabled },
             React__default.createElement("input", __assign$3({}, getInputProps(__assign$3(__assign$3({ placeholder: 'Search for something...' }, inputProps), { onFocus: function () {
                     openMenu();
                 } })), { spellCheck: false, disabled: disabled, style: {
@@ -32821,8 +32818,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.useCallback((()=>D((e=>!e))),[D]);return s.isInsideContent?/*#__PURE__*/React.createElement(m$1,{scope:n,isRootMenu:!1,open:w,onOpenChange:D,onOpenToggle:g},/*#__PURE__*/React.createElement(Sub,_extends$A({},i,{open:w,onOpenChange:D}),r)):/*#__PURE__*/React.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.useRef(null);return React.createElement(m$1,{scope:r,isRootMenu:!0,triggerId:useId(),triggerRef:f,contentId:useId(),open:d,onOpenChange:a,onOpenToggle:s,modal:i},/*#__PURE__*/React.createElement(Root$1,_extends$A({},w,{open:d,onOpenChange:a,dir:p,modal:i}),t))};const DropdownMenuTrigger=/*#__PURE__*/React.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.createElement(Anchor,_extends$A({asChild:!0},m),/*#__PURE__*/React.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.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.createElement(D$1,{scope:r,isInsideContent:!0},p.isRootMenu?/*#__PURE__*/React.createElement(g$1,_extends$A({__scopeDropdownMenu:r},a,{ref:n})):/*#__PURE__*/React.createElement(Content$1,_extends$A({},d,a,{ref:n})))}));const g$1=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,portalled:t=!0,...p}=e,d=w$1("DropdownMenuContent",r),s=l$1(r),i=React.useRef(!1);return d.isRootMenu?/*#__PURE__*/React.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.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(Group$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuLabel=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(Label$2,_extends$A({},p,t,{ref:n}))}));const DropdownMenuItem=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(Item$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuCheckboxItem=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(CheckboxItem$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuRadioGroup=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(RadioGroup$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuRadioItem=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(RadioItem$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuItemIndicator=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.createElement(ItemIndicator$1,_extends$A({},p,t,{ref:n}))}));const DropdownMenuArrow=/*#__PURE__*/React.forwardRef(((e,n)=>{const{__scopeDropdownMenu:r,...t}=e,p=l$1(r);return React.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;
@@ -34494,8 +34491,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;
@@ -35645,8 +35642,8 @@ const $f99a8c78507165f7$export$5fb54c671a65c88 = /*#__PURE__*/ forwardRef((props
 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;
@@ -35688,7 +35685,6 @@ var Label = function (_a) {
                 display: 'flex',
                 justifyContent: 'flex-start',
                 width: '100%',
-                backgroundColor: 'white',
             } },
             React__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));
@@ -35714,8 +35710,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.createElement(Hash$1, null) : _c, style = _a.style, reset = _a.reset;
@@ -35746,13 +35742,10 @@ var NumberInput = function (_a) {
                 React__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.createElement(CaretDownFill$1, null) : _c, helpText = _a.helpText, _d = _a.icon, icon = _d === void 0 ? React__default.createElement(Logo, null) : _d;
     return (React__default.createElement(ConditionalWrapper, { condition: typeof helpText !== 'undefined' || disabled, wrapper: function (children) { return React__default.createElement(InputDescription, { helpText: disabled ? 'Enabled in Pollination CAD plugins.' : helpText }, children); } },
-        React__default.createElement("div", { className: "btn-group ".concat(disabled && 'btn-group-disabled') },
+        React__default.createElement(ButtonGroup, { disabled: disabled },
             React__default.createElement("button", { type: 'button', onClick: onClick, disabled: disabled, style: {
                     flex: 1,
                 } },
@@ -35775,8 +35768,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.createElement(CursorText$1, null) : _c, style = _a.style, reset = _a.reset;
@@ -35805,8 +35798,8 @@ var TextInput = function (_a) {
                 React__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;
@@ -39392,11 +39385,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) {
@@ -39968,9 +39961,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();
@@ -39983,9 +39973,7 @@ var ComboFileSelector = function (_a) {
             flexDirection: 'column',
             gap: 8
         } },
-        React__default.createElement("div", { className: 'btn-group', style: {
-                width: 'fit-content'
-            } },
+        React__default.createElement(ButtonGroup, null,
             React__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
@@ -40070,12 +40058,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;
-    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
@@ -40223,54 +40211,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 = useState(defaultOption), option = _d[0], setOption = _d[1];
-    useEffect(function () {
-        setOption(defaultOption);
-    }, [defaultOption]);
-    return (React__default.createElement("div", { className: disabled && 'btn-group-disabled', style: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'end'
-        } },
-        React__default.createElement("div", { className: 'btn-group', style: {
-                width: 'fit-content'
-            } },
-            React__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.createElement(CloudPlus$1, null),
-                "Cloud"),
-            React__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.createElement(Laptop$1, null),
-                "Local")),
-        React__default.createElement("div", { style: {
-                minWidth: 160,
-                maxWidth: 280,
-                flex: 1,
-            } },
-            React__default.createElement(Label, { label: "Number of CPUs", disabled: option !== 'local', style: {
-                    backgroundColor: 'white'
-                } },
-                React__default.createElement(NumberInput, { icon: React__default.createElement(Cpu$1, null), inputProps: {
-                        min: 0,
-                        step: 1,
-                        max: 100,
-                        disabled: option !== 'local'
-                    } })))));
-};
-
 var initialState = {
     name: undefined,
     description: undefined,
@@ -40282,7 +40225,6 @@ var defaultStyle = {
     display: 'flex',
     flexDirection: 'column',
     gap: 18,
-    // backgroundColor: '#FFFAEE'
 };
 var CreateStudy = function (_a) {
     var _b;
@@ -40301,7 +40243,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;
     useEffect(function () {
         if (!state.recipe)
             return;
@@ -40372,10 +40314,53 @@ var CreateStudy = function (_a) {
                             flexDirection: 'column',
                             gap: 24
                         } },
-                        host !== 'web' && React__default.createElement(ConfigureLocalRun, null),
                         React__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 = useState(defaultOption), option = _d[0], setOption = _d[1];
+    useEffect(function () {
+        setOption(defaultOption);
+    }, [defaultOption]);
+    return (React__default.createElement("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'end'
+        } },
+        React__default.createElement(ButtonGroup, { wrapperProps: {
+                style: {
+                    width: 'fit-content'
+                }
+            } },
+            React__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.createElement(CloudPlus$1, null),
+                "Cloud"),
+            React__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.createElement(Laptop$1, null),
+                "Local")),
+        React__default.createElement("div", { style: {
+                minWidth: 160,
+                maxWidth: 280,
+                flex: 1,
+            } },
+            React__default.createElement(Label, { label: "Number of CPUs", disabled: option !== 'local', style: {
+                    backgroundColor: 'white'
+                } },
+                React__default.createElement(NumberInput, { icon: React__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) {