pollination-react-io 1.6.1 → 1.7.0

package/build/index.js

@@ -21576,7 +21576,6 @@ var useAPIClient = function (config) {
     React.useEffect(function () {
         if (!config)
             return;
-        client.current = new APIClient(__assign$3({ basePath: basePath }, config));
         setLoading(true);
         client.current.user.getMe()
             .then(function (_a) {
@@ -21592,6 +21591,275 @@ var useAPIClient = function (config) {
     };
 };
 
+function checkDotNet() {
+    try {
+        if (typeof window.parent.chrome === 'undefined') {
+            console.error('[POLLINATION-DEBUG]: chrome not found.');
+            return false;
+        }
+    }
+    catch (_a) {
+        console.error('[POLLINATION-DEBUG]: chrome not found.');
+        return false;
+    }
+    try {
+        if (typeof window.parent.chrome.webview === 'undefined') {
+            console.error('[POLLINATION-DEBUG]: webview not found.');
+            return false;
+        }
+    }
+    catch (_b) {
+        console.error('[POLLINATION-DEBUG]: webview not found.');
+        return false;
+    }
+    return true;
+}
+function checkRuby() {
+    try {
+        if (typeof window.sketchup === 'undefined') {
+            console.error('[POLLINATION-DEBUG]: sketchup not found.');
+            return false;
+        }
+    }
+    catch (_a) {
+        console.error('[POLLINATION-DEBUG]: sketchup not found.');
+        return false;
+    }
+    return true;
+}
+function sendMessageDotNet(message) {
+    if (!checkDotNet())
+        return undefined;
+    var json = JSON.stringify(message);
+    try {
+        window.parent.chrome.webview.postMessage(json);
+    }
+    catch (_a) {
+        throw new Error('Failed to post message to dotNet.');
+    }
+    return message;
+}
+function sendMessageRuby(message) {
+    if (!checkRuby())
+        return undefined;
+    console.error('[POLLINATION-DEBUG]: sendMesssageRuby not yet implemented');
+    return message;
+}
+// not sure if this will work from Streamlit?
+function getHost(key, defaultValue) {
+    if (key === void 0) { key = '__host__'; }
+    if (defaultValue === void 0) { defaultValue = 'web'; }
+    // getting stored value
+    var retrieved = localStorage.getItem(key);
+    if (!retrieved)
+        return defaultValue;
+    return typeof retrieved === 'string' ? retrieved.toLowerCase() : JSON.parse(retrieved).toLowerCase();
+}
+
+var useArtifacts = function (owner, name, client) {
+    var listArtifacts = React.useCallback(function (path) {
+        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+            return;
+        // let key: string[] | undefined = undefined
+        // if (path) {
+        //   key = [path]
+        // }
+        return client.artifacts.listArtifacts({
+            owner: owner,
+            name: name,
+            page: 1,
+            perPage: 50,
+            path: path
+        }).then(function (r) { return r.data; });
+    }, [client.artifacts, owner, name]);
+    var downloadArtifact = React.useCallback(function (path) {
+        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+            return;
+        return client.artifacts.downloadArtifact({
+            owner: owner,
+            name: name,
+            path: path
+        }).then(function (r) { return r.data; });
+    }, [client.artifacts, owner, name]);
+    var deleteArtifact = React.useCallback(function (path) { return __awaiter$1(void 0, void 0, void 0, function () {
+        var key;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+                        return [2 /*return*/];
+                    key = undefined;
+                    if (path) {
+                        key = [path];
+                    }
+                    return [4 /*yield*/, client.artifacts.deleteArtifact({
+                            owner: owner,
+                            name: name,
+                            path: key
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [client.artifacts, owner, name]);
+    var uploadArtifact = React.useCallback(function (folderRoot, file) { return __awaiter$1(void 0, void 0, void 0, function () {
+        var filePath, rootKey, uploadKey, result, _a, url, fields, payload;
+        return __generator$1(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
+                        return [2 /*return*/];
+                    filePath = file.path || file.name;
+                    if (!filePath) {
+                        return [2 /*return*/];
+                    }
+                    // folder file paths start with "/" which
+                    // must be removed before merging string with rootkey
+                    if (filePath.startsWith('/')) {
+                        filePath = filePath.slice(1);
+                    }
+                    rootKey = folderRoot ? folderRoot.key : '';
+                    uploadKey = filePath;
+                    if (rootKey.endsWith('/')) {
+                        uploadKey = "".concat(rootKey).concat(filePath);
+                    }
+                    else if (rootKey !== '') {
+                        uploadKey = "".concat(rootKey, "/").concat(filePath);
+                    }
+                    return [4 /*yield*/, client.artifacts.createArtifact({
+                            owner: owner,
+                            name: name,
+                            keyRequest: { key: uploadKey }
+                        })];
+                case 1:
+                    result = _b.sent();
+                    _a = result.data, url = _a.url, fields = _a.fields;
+                    payload = new FormData();
+                    Object.keys(fields).forEach(function (key) { return payload.append(key, fields[key]); });
+                    payload.append('file', file);
+                    return [4 /*yield*/, fetch(url, {
+                            method: 'POST',
+                            mode: 'no-cors',
+                            body: payload,
+                        })];
+                case 2:
+                    _b.sent();
+                    return [2 /*return*/, result.data];
+            }
+        });
+    }); }, [client.artifacts, owner, name]);
+    return {
+        listArtifacts: listArtifacts,
+        deleteArtifact: deleteArtifact,
+        downloadArtifact: downloadArtifact,
+        uploadArtifact: uploadArtifact
+    };
+};
+
+var useCreateStudy = function (accountName, projectName, client) {
+    var host = getHost();
+    var uploadArtifact = useArtifacts(accountName, projectName, client).uploadArtifact;
+    var processEntry = React.useCallback(function (_a) {
+        var name = _a[0], value = _a[1];
+        return new Promise(function (resolve, reject) {
+            if (!(value instanceof File)) {
+                resolve({
+                    name: name,
+                    type: 'JobArgument',
+                    value: value
+                });
+            }
+            else {
+                resolve(uploadArtifact(undefined, value).then(function (data) { return ({
+                    name: name,
+                    type: 'JobPathArgument',
+                    source: {
+                        type: 'ProjectFolder',
+                        path: value.name
+                    }
+                }); }));
+            }
+        });
+    }, [uploadArtifact]);
+    var webCreateJob = React.useCallback(function (_a, data) {
+        var name = _a.name, source = _a.source, description = _a.description;
+        if (!client)
+            return;
+        if (!name || !source || !data)
+            return;
+        if (!uploadArtifact)
+            return;
+        return Promise.all(Object.entries(data).map(function (d) { return processEntry(d); }))
+            .then(function (jobArguments) {
+            var job = {
+                type: 'Job',
+                api_version: 'v1beta1',
+                name: name,
+                description: description,
+                source: source,
+                arguments: [jobArguments]
+            };
+            client.jobs.createJob({
+                owner: accountName,
+                name: projectName,
+                // @ts-ignore
+                job: job
+            })
+                .then(function (res) {
+                window.open("https://app.pollination.cloud/".concat(accountName, "/projects/").concat(projectName, "/studies/").concat(res.data.id), '_newtab');
+            })
+                .catch(function (err) {
+                var data = err.response.data;
+                throw new Error(data.detail);
+            });
+        });
+    }, [accountName, client, processEntry, projectName, uploadArtifact]);
+    var rhinoCreateJob = React.useCallback(function (_a, data, key) {
+        var name = _a.name, source = _a.source, description = _a.description;
+        if (key === void 0) { key = performance.now().toString(); }
+        return __awaiter$1(void 0, void 0, void 0, function () {
+            var job, response;
+            return __generator$1(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!checkDotNet || !client || !uploadArtifact)
+                            return [2 /*return*/];
+                        if (!name || !source || !data)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, Promise.all(Object.entries(data).map(function (d) { return processEntry(d); }))
+                                .then(function (jobArguments) { return ({
+                                type: 'Job',
+                                api_version: 'v1beta1',
+                                name: name,
+                                description: description,
+                                source: source,
+                                arguments: [jobArguments]
+                            }); })];
+                    case 1:
+                        job = _b.sent();
+                        response = sendMessageDotNet({ action: 'CreateStudy', data: job, uniqueId: key });
+                        return [2 /*return*/, response];
+                }
+            });
+        });
+    }, [client, processEntry, uploadArtifact]);
+    var createJob = React.useMemo(function () {
+        switch (host) {
+            case 'web':
+                return webCreateJob;
+            case 'rhino':
+                return rhinoCreateJob;
+            default:
+                return undefined;
+        }
+    }, [host, rhinoCreateJob, webCreateJob]);
+    return {
+        host: host,
+        createStudy: createJob
+    };
+};
+
 /**
  * Lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -23443,71 +23711,6 @@ function stubFalse() {
 module.exports = isEqual;
 });
 
-function checkDotNet() {
-    try {
-        if (typeof window.parent.chrome === 'undefined') {
-            console.error('[POLLINATION-DEBUG]: chrome not found.');
-            return false;
-        }
-    }
-    catch (_a) {
-        console.error('[POLLINATION-DEBUG]: chrome not found.');
-        return false;
-    }
-    try {
-        if (typeof window.parent.chrome.webview === 'undefined') {
-            console.error('[POLLINATION-DEBUG]: webview not found.');
-            return false;
-        }
-    }
-    catch (_b) {
-        console.error('[POLLINATION-DEBUG]: webview not found.');
-        return false;
-    }
-    return true;
-}
-function checkRuby() {
-    try {
-        if (typeof window.sketchup === 'undefined') {
-            console.error('[POLLINATION-DEBUG]: sketchup not found.');
-            return false;
-        }
-    }
-    catch (_a) {
-        console.error('[POLLINATION-DEBUG]: sketchup not found.');
-        return false;
-    }
-    return true;
-}
-function sendMessageDotNet(message) {
-    if (!checkDotNet())
-        return undefined;
-    var json = JSON.stringify(message);
-    try {
-        window.parent.chrome.webview.postMessage(json);
-    }
-    catch (_a) {
-        throw new Error('Failed to post message to dotNet.');
-    }
-    return message;
-}
-function sendMessageRuby(message) {
-    if (!checkRuby())
-        return undefined;
-    console.error('[POLLINATION-DEBUG]: sendMesssageRuby not yet implemented');
-    return message;
-}
-// not sure if this will work from Streamlit?
-function getHost(key, defaultValue) {
-    if (key === void 0) { key = '__host__'; }
-    if (defaultValue === void 0) { defaultValue = 'web'; }
-    // getting stored value
-    var retrieved = localStorage.getItem(key);
-    if (!retrieved)
-        return defaultValue;
-    return typeof retrieved === 'string' ? retrieved.toLowerCase() : JSON.parse(retrieved).toLowerCase();
-}
-
 var useGetHbjson = function () {
     var host = getHost();
     var _a = React.useState(undefined), hbjson = _a[0], setHbjson = _a[1];
@@ -23824,107 +24027,6 @@ var useHbjsontoVTK = function () {
     };
 };
 
-var useArtifacts = function (owner, name, client) {
-    var listArtifacts = React.useCallback(function (path) {
-        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
-            return;
-        var key = undefined;
-        if (path) {
-            key = [path];
-        }
-        return client.artifacts.listArtifacts({
-            owner: owner,
-            name: name,
-            page: 1,
-            perPage: 50,
-            path: key
-        }).then(function (r) { return r.data; });
-    }, [client.artifacts, owner, name]);
-    var downloadArtifact = React.useCallback(function (path) {
-        if (!(client === null || client === void 0 ? void 0 : client.artifacts))
-            return;
-        return client.artifacts.downloadArtifact({
-            owner: owner,
-            name: name,
-            path: path
-        }).then(function (r) { return r.data; });
-    }, [client.artifacts, owner, name]);
-    var deleteArtifact = React.useCallback(function (path) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var key;
-        return __generator$1(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
-                        return [2 /*return*/];
-                    key = undefined;
-                    if (path) {
-                        key = [path];
-                    }
-                    return [4 /*yield*/, client.artifacts.deleteArtifact({
-                            owner: owner,
-                            name: name,
-                            path: key
-                        })];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [client.artifacts, owner, name]);
-    var uploadArtifact = React.useCallback(function (folderRoot, file) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var filePath, rootKey, uploadKey, result, _a, url, fields, payload;
-        return __generator$1(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!(client === null || client === void 0 ? void 0 : client.artifacts))
-                        return [2 /*return*/];
-                    filePath = file.path || file.name;
-                    if (!filePath) {
-                        return [2 /*return*/];
-                    }
-                    // folder file paths start with "/" which
-                    // must be removed before merging string with rootkey
-                    if (filePath.startsWith('/')) {
-                        filePath = filePath.slice(1);
-                    }
-                    rootKey = folderRoot ? folderRoot.key : '';
-                    uploadKey = filePath;
-                    if (rootKey.endsWith('/')) {
-                        uploadKey = "".concat(rootKey).concat(filePath);
-                    }
-                    else if (rootKey !== '') {
-                        uploadKey = "".concat(rootKey, "/").concat(filePath);
-                    }
-                    return [4 /*yield*/, client.artifacts.createArtifact({
-                            owner: owner,
-                            name: name,
-                            keyRequest: { key: uploadKey }
-                        })];
-                case 1:
-                    result = _b.sent();
-                    _a = result.data, url = _a.url, fields = _a.fields;
-                    payload = new FormData();
-                    Object.keys(fields).forEach(function (key) { return payload.append(key, fields[key]); });
-                    payload.append('file', file);
-                    return [4 /*yield*/, fetch(url, {
-                            method: 'POST',
-                            mode: 'no-cors',
-                            body: payload,
-                        })];
-                case 2:
-                    _b.sent();
-                    return [2 /*return*/, result.data];
-            }
-        });
-    }); }, [client.artifacts, owner, name]);
-    return {
-        listArtifacts: listArtifacts,
-        deleteArtifact: deleteArtifact,
-        downloadArtifact: downloadArtifact,
-        uploadArtifact: uploadArtifact
-    };
-};
-
 function composeRefs(...o){return e=>o.forEach((o=>function(o,e){"function"==typeof o?o(e):null!=o&&(o.current=e);}(o,e)))}function useComposedRefs(...e){return React__namespace.useCallback(composeRefs(...e),e)}
 
 function _extends$f() {
@@ -31206,13 +31308,16 @@ function toNumber(value) {
 
 var lodash_debounce = debounce;
 
-var css_248z$9 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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* {\n  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, helvetica, \"helvetica neue\", ubuntu, roboto, noto, \"segoe ui\", arial, sans-serif;\n  color: var(--slate12);\n  margin: 0;\n  font-size: 17px;\n}\n\nh1 {\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 2.25rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n}\n\nh5 {\n  font-size: 1rem;\n}\n\nh6 {\n  font-size: 0.875rem;\n}\n\nlabel {\n  font-size: 1rem;\n  color: var(--slate12);\n  cursor: pointer;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nli {\n  font-size: 0.95rem;\n}\n\n.secondary {\n  font-size: 0.875rem;\n  color: var(--slate10);\n}\n\np,\nspan {\n  color: var(--slate12);\n}\n\ninput::placeholder {\n  color: var(--slate11);\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}\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-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}";
+var css_248z$9 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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* {\n  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, helvetica, \"helvetica neue\", ubuntu, roboto, noto, \"segoe ui\", arial, sans-serif;\n  color: var(--slate12);\n  margin: 0;\n  font-size: 17px;\n}\n\nh1 {\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 2.25rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n}\n\nh5 {\n  font-size: 1rem;\n}\n\nh6 {\n  font-size: 0.875rem;\n}\n\nlabel {\n  font-size: 1rem;\n  color: var(--slate12);\n  cursor: pointer;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nli {\n  font-size: 0.95rem;\n}\n\n.secondary {\n  font-size: 0.875rem;\n  color: var(--slate10);\n}\n\np,\nspan {\n  color: var(--slate12);\n}\n\ninput::placeholder {\n  color: var(--slate11);\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$9);
 
 var ICON_SIZE = 18;
 var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
-    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, inputProps = _a.inputProps, footer = _a.footer, _d = _a.noMatchText, noMatchText = _d === void 0 ? 'No matching items' : _d, onScrollReachEnd = _a.onScrollReachEnd;
-    var _e = React.useState(items), inputItems = _e[0], setInputItems = _e[1];
+    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.icon, icon = _d === void 0 ? React__default["default"].createElement(CursorText$1, null) : _d, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, inputProps = _a.inputProps, header = _a.header, footer = _a.footer, _e = _a.noMatchText, noMatchText = _e === void 0 ? 'No matching items' : _e, onScrollReachEnd = _a.onScrollReachEnd, _f = _a.stateReducer, stateReducer = _f === void 0 ? function (state, _a) {
+        _a.type; var changes = _a.changes;
+        return changes;
+    } : _f;
+    var _g = React.useState(items), inputItems = _g[0], setInputItems = _g[1];
     React.useEffect(function () {
         setInputItems(items);
     }, [items]);
@@ -31221,7 +31326,7 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
             lodash_debounce(onScrollReachEnd, 1000, { leading: true, trailing: false })
             : undefined;
     }, [onScrollReachEnd]);
-    var _f = useCombobox({
+    var _h = useCombobox({
         items: inputItems,
         onInputValueChange: function (_a) {
             var inputValue = _a.inputValue;
@@ -31233,9 +31338,10 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                 setInputItems(items);
             }
         },
+        stateReducer: stateReducer
         // to what extent is this necessary?
         // environment: environment ? environment : undefined
-    }), isOpen = _f.isOpen, getToggleButtonProps = _f.getToggleButtonProps, getMenuProps = _f.getMenuProps, getInputProps = _f.getInputProps, getComboboxProps = _f.getComboboxProps, highlightedIndex = _f.highlightedIndex, getItemProps = _f.getItemProps, openMenu = _f.openMenu, closeMenu = _f.closeMenu, selectItem = _f.selectItem, selectedItem = _f.selectedItem, inputValue = _f.inputValue;
+    }), isOpen = _h.isOpen, getToggleButtonProps = _h.getToggleButtonProps, getMenuProps = _h.getMenuProps, getInputProps = _h.getInputProps, getComboboxProps = _h.getComboboxProps, highlightedIndex = _h.highlightedIndex, getItemProps = _h.getItemProps, openMenu = _h.openMenu, closeMenu = _h.closeMenu, selectItem = _h.selectItem, selectedItem = _h.selectedItem, inputValue = _h.inputValue;
     React.useImperativeHandle(ref, function () { return ({
         selectItem: selectItem,
         selectedItem: selectedItem,
@@ -31244,9 +31350,7 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
     React.useEffect(function () {
         if (!selectedItem)
             return;
-        if (setSelected) {
-            setSelected(selectedItem);
-        }
+        setSelected && setSelected(selectedItem);
         closeMenu();
     }, [closeMenu, selectedItem, setSelected]);
     return (React__default["default"].createElement("div", { "data-testid": "ComboBoxSelect", className: "poll-combobox" },
@@ -31269,7 +31373,7 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                     display: 'flex',
                     color: 'white',
                     zIndex: 20,
-                } }, selectedItem ? React__default["default"].createElement(CheckCircle$1, { size: ICON_SIZE }) : React__default["default"].createElement(CursorText$1, { size: ICON_SIZE })),
+                } }, selectedItem ? React__default["default"].createElement(CheckCircle$1, { size: ICON_SIZE }) : React__default["default"].cloneElement(icon, { size: ICON_SIZE })),
             loading
                 ? (React__default["default"].createElement("button", { tabIndex: -1, disabled: disabled, style: {
                         borderBottomRightRadius: isOpen ? 0 : 4,
@@ -31278,9 +31382,7 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                 : selectedItem
                     ? (React__default["default"].createElement("button", { tabIndex: -1, disabled: disabled, onClick: function () {
                             selectItem(null);
-                            if (setSelected) {
-                                setSelected(undefined);
-                            }
+                            setSelected && setSelected(undefined);
                         }, style: {
                             borderBottomRightRadius: isOpen ? 0 : 4,
                         } },
@@ -31295,6 +31397,12 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                 padding: isOpen ? '6px 4px' : 0,
                 visibility: isOpen ? undefined : 'hidden'
             } },
+            header &&
+                React__default["default"].createElement("div", { className: 'poll-combo-header-container', style: {
+                        opacity: isOpen ? 1 : 0
+                    } },
+                    header,
+                    React__default["default"].createElement(Root$8, { key: "poll-separator", className: "poll-separator" })),
             React__default["default"].createElement(PerfectScrollbar, { options: {
                     wheelPropagation: false,
                 }, onYReachEnd: function () {
@@ -34010,30 +34118,28 @@ var Logo = function () { return (React__default["default"].createElement("div",
             backgroundColor: 'rgba(0,0,0,0)',
         } }))); };
 
-var css_248z$5 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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* {\n  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, helvetica, \"helvetica neue\", ubuntu, roboto, noto, \"segoe ui\", arial, sans-serif;\n  color: var(--slate12);\n  margin: 0;\n  font-size: 17px;\n}\n\nh1 {\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 2.25rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n}\n\nh5 {\n  font-size: 1rem;\n}\n\nh6 {\n  font-size: 0.875rem;\n}\n\nlabel {\n  font-size: 1rem;\n  color: var(--slate12);\n  cursor: pointer;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nli {\n  font-size: 0.95rem;\n}\n\n.secondary {\n  font-size: 0.875rem;\n  color: var(--slate10);\n}\n\np,\nspan {\n  color: var(--slate12);\n}\n\ninput::placeholder {\n  color: var(--slate11);\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: 6px 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}\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$5 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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* {\n  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, helvetica, \"helvetica neue\", ubuntu, roboto, noto, \"segoe ui\", arial, sans-serif;\n  color: var(--slate12);\n  margin: 0;\n  font-size: 17px;\n}\n\nh1 {\n  font-size: 3rem;\n}\n\nh2 {\n  font-size: 2.25rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n}\n\nh5 {\n  font-size: 1rem;\n}\n\nh6 {\n  font-size: 0.875rem;\n}\n\nlabel {\n  font-size: 1rem;\n  color: var(--slate12);\n  cursor: pointer;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nli {\n  font-size: 0.95rem;\n}\n\n.secondary {\n  font-size: 0.875rem;\n  color: var(--slate10);\n}\n\np,\nspan {\n  color: var(--slate12);\n}\n\ninput::placeholder {\n  color: var(--slate11);\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$5);
 
 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
-    // prefix
-    ;
+    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("button", { type: 'button', onClick: onClick, disabled: disabled, style: {
                     flex: 1,
                 } },
-                React__default["default"].createElement(Logo, null),
+                icon,
                 label),
             options && options.length
                 && React__default["default"].createElement(React__default["default"].Fragment, null, asButtons ?
                     React__default["default"].createElement(React__default["default"].Fragment, null, options.reduce(function (p, c) { return __spreadArray$2(__spreadArray$2([], p, true), c.options, true); }, []).map(function (o) {
                         var _a;
-                        return React__default["default"].createElement("button", { key: o.id, style: {
+                        return React__default["default"].createElement("button", { type: 'button', key: o.id, style: {
                                 boxShadow: !disabled && o.checked ? 'inset 0px 0px 9px 4px #096dd9' : undefined
                             }, onClick: function (e) { return o.onSelect && o.onSelect(o); } }, (_a = o.icon) !== null && _a !== void 0 ? _a : o.label);
                     }))
                     :
-                        React__default["default"].createElement(Dropdown, { trigger: (React__default["default"].createElement("button", null, triggerIcon)), optionGroups: options, contentProps: {
+                        React__default["default"].createElement(Dropdown, { trigger: (React__default["default"].createElement("button", { type: 'button' }, triggerIcon)), optionGroups: options, contentProps: {
                                 align: 'end',
                                 style: {
                                     fontSize: 'clamp(0.65rem, 8vw - 0.75rem, 0.85rem)',
@@ -34041,7 +34147,7 @@ var SettingsButton = function (_a) {
                             }, disabled: disabled })))));
 };
 
-var css_248z$4 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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: 8px 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}";
+var css_248z$4 = ":root {\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:root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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);
 
 const VisuallyHidden=/*#__PURE__*/React__namespace.forwardRef(((i,o)=>/*#__PURE__*/React__namespace.createElement(Primitive.span,_extends$f({},i,{ref:o,style:{position:"absolute",border:0,width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",wordWrap:"normal",...i.style}}))));const Root$2=VisuallyHidden;
@@ -34201,17 +34307,17 @@ var GetModelActions;
 })(GetModelActions || (GetModelActions = {}));
 
 var GetModel = function (_a) {
-    var onChange = _a.onChange, setHbjson = _a.setHbjson, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Get Model' : _b;
+    var onChange = _a.onChange, setHbjson = _a.setHbjson, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Get Model' : _b, _c = _a.showHelpText, showHelpText = _c === void 0 ? true : _c;
     var subscribeRef = React.useRef();
-    var _c = React.useState(performance.now().toString()), key = _c[0], setKey = _c[1];
-    var _d = React.useState(Boolean(optionsConfig) && typeof optionsConfig !== 'undefined' &&
-        typeof optionsConfig.selection !== 'undefined' &&
-        typeof optionsConfig.selection.selected !== 'undefined' ? optionsConfig.selection.selected : false), selection = _d[0], setSelection = _d[1];
+    var _d = React.useState(performance.now().toString()), key = _d[0], setKey = _d[1];
     var _e = React.useState(Boolean(optionsConfig) && typeof optionsConfig !== 'undefined' &&
+        typeof optionsConfig.selection !== 'undefined' &&
+        typeof optionsConfig.selection.selected !== 'undefined' ? optionsConfig.selection.selected : false), selection = _e[0], setSelection = _e[1];
+    var _f = React.useState(Boolean(optionsConfig) && typeof optionsConfig !== 'undefined' &&
         typeof optionsConfig.subscribe !== 'undefined' &&
-        typeof optionsConfig.subscribe.selected !== 'undefined' ? optionsConfig.subscribe.selected : false), subscribe = _e[0], setSubscribe = _e[1];
+        typeof optionsConfig.subscribe.selected !== 'undefined' ? optionsConfig.subscribe.selected : false), subscribe = _f[0], setSubscribe = _f[1];
     // pollination-react-io hooks
-    var _f = useGetHbjson(), host = _f.host, hbjson = _f.hbjson, getHbjson = _f.getHbjson;
+    var _g = useGetHbjson(), host = _g.host, hbjson = _g.hbjson, getHbjson = _g.getHbjson;
     // set selection and subscribe on props change
     React.useEffect(function () {
         if (!optionsConfig)
@@ -34226,16 +34332,17 @@ var GetModel = function (_a) {
         setSubscribe(sub);
     }, [optionsConfig]);
     React.useEffect(function () {
-        if (!hbjson || !setHbjson)
+        if (!hbjson)
             return;
         var fr = new FileReader();
         fr.onload = function () {
             if (typeof this.result !== 'string')
                 return;
-            setHbjson({ hbjson: JSON.parse(this.result) });
+            setHbjson && setHbjson({ hbjson: JSON.parse(this.result) });
         };
         fr.readAsText(hbjson);
-    }, [hbjson, setHbjson]);
+        onChange && onChange(new File([hbjson], "Model_linked_from_".concat(host, ".hbjson")));
+    }, [hbjson, host, onChange, setHbjson]);
     // subscribe
     React.useEffect(function () {
         if (!getHbjson)
@@ -34310,7 +34417,7 @@ var GetModel = function (_a) {
                         return typeof optionsConfig[o.id] === 'undefined' ? true :
                             typeof optionsConfig[o.id].show === 'undefined' ? true : optionsConfig[o.id].show;
                     }),
-                }] : undefined, asButtons: true, label: buttonLabel, helpText: "Get ".concat(selection ? 'selected ' : '', " model").concat(subscribe ? ' continuously' : '', ".") })));
+                }] : undefined, asButtons: true, label: buttonLabel, helpText: showHelpText && "Get ".concat(selection ? 'selected ' : '', " model").concat(subscribe ? ' continuously' : '', "."), icon: hbjson ? React__default["default"].createElement(CheckCircle$1, null) : undefined })));
 };
 
 // Generated with util/create-component.js
@@ -35291,6 +35398,7 @@ exports.sendMessageDotNet = sendMessageDotNet;
 exports.sendMessageRuby = sendMessageRuby;
 exports.useAPIClient = useAPIClient;
 exports.useArtifacts = useArtifacts;
+exports.useCreateStudy = useCreateStudy;
 exports.useGetGeometry = useGetGeometry;
 exports.useGetHbjson = useGetHbjson;
 exports.useHbjsontoVTK = useHbjsontoVTK;