@ai-stack/payloadcms 3.76.0-beta.1 → 3.76.0-beta.2

package/dist/ui/DynamicVoiceSelect/index.js

@@ -1,7 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.js';
+const StatusMessage = ({ label, message, path })=>/*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    color: 'var(--theme-elevation-600)',
+                    fontSize: '13px'
+                },
+                children: message
+            })
+        ]
+    });
 export const DynamicVoiceSelect = (props)=>{
     const { name, path } = props;
     // Get provider from siblings
@@ -13,29 +32,7 @@ export const DynamicVoiceSelect = (props)=>{
     const { setValue, value } = useField({
         path
     });
-    const [aiSettings, setAiSettings] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
-    useEffect(()=>{
-        const fetchSettings = async ()=>{
-            setIsLoading(true);
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    setAiSettings(data);
-                }
-            } catch (err) {
-                console.error('Error fetching AI settings:', err);
-            } finally{
-                setIsLoading(false);
-            }
-        };
-        void fetchSettings();
-    }, [
-        provider
-    ]) // Re-fetch when provider changes to ensure we have the latest voices
-    ;
+    const { data: aiSettings, isLoading } = useAISettings();
     const voices = useMemo(()=>{
         if (!provider || !aiSettings?.providers) {
             return [];
@@ -68,64 +65,24 @@ export const DynamicVoiceSelect = (props)=>{
         setValue
     ]);
     if (!provider) {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "field-type text",
-            children: [
-                /*#__PURE__*/ _jsx("label", {
-                    className: "field-label",
-                    htmlFor: path,
-                    children: "Voice"
-                }),
-                /*#__PURE__*/ _jsx("p", {
-                    style: {
-                        color: 'var(--theme-elevation-600)',
-                        fontSize: '13px'
-                    },
-                    children: "Please select a provider first."
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: "Please select a provider first.",
+            path: path
         });
     }
     if (isLoading) {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "field-type text",
-            children: [
-                /*#__PURE__*/ _jsx("label", {
-                    className: "field-label",
-                    htmlFor: path,
-                    children: "Voice"
-                }),
-                /*#__PURE__*/ _jsx("p", {
-                    style: {
-                        color: 'var(--theme-elevation-600)',
-                        fontSize: '13px'
-                    },
-                    children: "Loading voices..."
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: "Loading voices...",
+            path: path
         });
     }
     if (voices.length === 0) {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "field-type text",
-            children: [
-                /*#__PURE__*/ _jsx("label", {
-                    className: "field-label",
-                    htmlFor: path,
-                    children: "Voice"
-                }),
-                /*#__PURE__*/ _jsxs("p", {
-                    style: {
-                        color: 'var(--theme-elevation-600)',
-                        fontSize: '13px'
-                    },
-                    children: [
-                        "No voices available. Please configure voices in AI Settings for ",
-                        provider,
-                        "."
-                    ]
-                })
-            ]
+        return /*#__PURE__*/ _jsx(StatusMessage, {
+            label: "Voice",
+            message: `No voices available. Please configure voices in AI Settings for ${provider}.`,
+            path: path
         });
     }
     return /*#__PURE__*/ _jsxs("div", {
@@ -138,13 +95,7 @@ export const DynamicVoiceSelect = (props)=>{
             }),
             /*#__PURE__*/ _jsx(SelectInput, {
                 name: name,
-                onChange: (option)=>{
-                    if (option && typeof option === 'object' && 'value' in option) {
-                        setValue(option.value);
-                    } else {
-                        setValue(option);
-                    }
-                },
+                onChange: (option)=>handleSelectChange(setValue, option),
                 options: voices,
                 path: path,
                 value: value

package/dist/ui/DynamicVoiceSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/DynamicVoiceSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\ntype Props = {\n  name: string\n  path: string\n}\n\ninterface Voice {\n  category?: string\n  enabled?: boolean\n  id: string\n  labels?: Record<string, unknown>\n  name: string\n  preview_url?: string\n}\n\ninterface ProviderBlock {\n  blockType: string\n  enabled?: boolean\n  voices?: Voice[]\n}\n\nexport const DynamicVoiceSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  // Get provider from siblings\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const providerPath = `${parentPath}.provider`\n\n  // Use useFormFields to get the provider field value - this will re-render when provider changes\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = (providerField?.value as string) || ''\n\n  const { setValue, value } = useField<string>({ path })\n  const [aiSettings, setAiSettings] = useState<{ providers?: ProviderBlock[] } | null>(null)\n  const [isLoading, setIsLoading] = useState(true)\n\n  // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices\n  useEffect(() => {\n    const fetchSettings = async () => {\n      setIsLoading(true)\n      try {\n        const response = await fetch('/api/globals/ai-providers?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          setAiSettings(data)\n        }\n      } catch (err) {\n        console.error('Error fetching AI settings:', err)\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    void fetchSettings()\n  }, [provider]) // Re-fetch when provider changes to ensure we have the latest voices\n\n  const voices = useMemo(() => {\n    if (!provider || !aiSettings?.providers) {\n      return []\n    }\n\n    // Find the provider block matching the selected provider\n    const providerBlock = aiSettings.providers.find(\n      (p: ProviderBlock) => p.blockType === provider && p.enabled !== false,\n    )\n\n    if (!providerBlock?.voices) {\n      return []\n    }\n\n    // Get enabled voices from provider block\n    return providerBlock.voices\n      .filter((v: Voice) => v.enabled !== false)\n      .map((v: Voice) => ({\n        label: v.name || v.id,\n        value: v.id,\n      }))\n  }, [provider, aiSettings])\n\n  // Clear voice selection when provider changes and current voice is not available\n  useEffect(() => {\n    if (value && voices.length > 0) {\n      const voiceExists = voices.some((v) => v.value === value)\n      if (!voiceExists) {\n        setValue('')\n      }\n    }\n  }, [voices, value, setValue])\n\n  if (!provider) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          Please select a provider first.\n        </p>\n      </div>\n    )\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>\n      </div>\n    )\n  }\n\n  if (voices.length === 0) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          No voices available. Please configure voices in AI Settings for {provider}.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Voice\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value as string)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","useState","DynamicVoiceSelect","props","name","path","parentPath","split","slice","join","providerPath","providerField","fields","provider","value","setValue","aiSettings","setAiSettings","isLoading","setIsLoading","fetchSettings","response","fetch","ok","data","json","err","console","error","voices","providers","providerBlock","find","p","blockType","enabled","filter","v","map","label","id","length","voiceExists","some","div","className","htmlFor","style","color","fontSize","onChange","option","options"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/DynamicVoiceSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo } from 'react'\n\nimport type { Voice } from '../shared/types.js'\n\nimport { handleSelectChange } from '../shared/handleSelectChange.js'\nimport { useAISettings } from '../hooks/useAISettings.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\ninterface ProviderBlock {\n  blockType: string\n  enabled?: boolean\n  voices?: Voice[]\n}\n\nconst StatusMessage: React.FC<{ label: string; message: string; path: string }> = ({ label, message, path }) => (\n  <div className=\"field-type text\">\n    <label className=\"field-label\" htmlFor={path}>\n      {label}\n    </label>\n    <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n      {message}\n    </p>\n  </div>\n)\n\nexport const DynamicVoiceSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  // Get provider from siblings\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const providerPath = `${parentPath}.provider`\n\n  // Use useFormFields to get the provider field value - this will re-render when provider changes\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = (providerField?.value as string) || ''\n\n  const { setValue, value } = useField<string>({ path })\n  const { data: aiSettings, isLoading } = useAISettings()\n\n  const voices = useMemo(() => {\n    if (!provider || !aiSettings?.providers) {\n      return []\n    }\n\n    // Find the provider block matching the selected provider\n    const providerBlock = aiSettings.providers.find(\n      (p: ProviderBlock) => p.blockType === provider && p.enabled !== false,\n    ) as ProviderBlock | undefined\n\n    if (!providerBlock?.voices) {\n      return []\n    }\n\n    // Get enabled voices from provider block\n    return providerBlock.voices\n      .filter((v: Voice) => v.enabled !== false)\n      .map((v: Voice) => ({\n        label: v.name || v.id,\n        value: v.id,\n      }))\n  }, [provider, aiSettings])\n\n  // Clear voice selection when provider changes and current voice is not available\n  useEffect(() => {\n    if (value && voices.length > 0) {\n      const voiceExists = voices.some((v) => v.value === value)\n      if (!voiceExists) {\n        setValue('')\n      }\n    }\n  }, [voices, value, setValue])\n\n  if (!provider) {\n    return <StatusMessage label=\"Voice\" message=\"Please select a provider first.\" path={path} />\n  }\n\n  if (isLoading) {\n    return <StatusMessage label=\"Voice\" message=\"Loading voices...\" path={path} />\n  }\n\n  if (voices.length === 0) {\n    return (\n      <StatusMessage\n        label=\"Voice\"\n        message={`No voices available. Please configure voices in AI Settings for ${provider}.`}\n        path={path}\n      />\n    )\n  }\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Voice\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => handleSelectChange(setValue, option)}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","handleSelectChange","useAISettings","StatusMessage","label","message","path","div","className","htmlFor","p","style","color","fontSize","DynamicVoiceSelect","props","name","parentPath","split","slice","join","providerPath","providerField","fields","provider","value","setValue","data","aiSettings","isLoading","voices","providers","providerBlock","find","blockType","enabled","filter","v","map","id","length","voiceExists","some","onChange","option","options"],"mappings":"AAAA;;AAEA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACrE,OAAOC,SAASC,SAAS,EAAEC,OAAO,QAAQ,QAAO;AAIjD,SAASC,kBAAkB,QAAQ,kCAAiC;AACpE,SAASC,aAAa,QAAQ,4BAA2B;AAazD,MAAMC,gBAA4E,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAE,iBACzG,MAACC;QAAIC,WAAU;;0BACb,KAACJ;gBAAMI,WAAU;gBAAcC,SAASH;0BACrCF;;0BAEH,KAACM;gBAAEC,OAAO;oBAAEC,OAAO;oBAA8BC,UAAU;gBAAO;0BAC/DR;;;;AAKP,OAAO,MAAMS,qBAAsC,CAACC;IAClD,MAAM,EAAEC,IAAI,EAAEV,IAAI,EAAE,GAAGS;IAEvB,6BAA6B;IAC7B,MAAME,aAAaX,KAAKY,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACrD,MAAMC,eAAe,CAAC,EAAEJ,WAAW,SAAS,CAAC;IAE7C,gGAAgG;IAChG,MAAMK,gBAAgBzB,cAAc,CAAC,CAAC0B,OAAO,GAAKA,MAAM,CAACF,aAAa;IACtE,MAAMG,WAAW,AAACF,eAAeG,SAAoB;IAErD,MAAM,EAAEC,QAAQ,EAAED,KAAK,EAAE,GAAG7B,SAAiB;QAAEU;IAAK;IACpD,MAAM,EAAEqB,MAAMC,UAAU,EAAEC,SAAS,EAAE,GAAG3B;IAExC,MAAM4B,SAAS9B,QAAQ;QACrB,IAAI,CAACwB,YAAY,CAACI,YAAYG,WAAW;YACvC,OAAO,EAAE;QACX;QAEA,yDAAyD;QACzD,MAAMC,gBAAgBJ,WAAWG,SAAS,CAACE,IAAI,CAC7C,CAACvB,IAAqBA,EAAEwB,SAAS,KAAKV,YAAYd,EAAEyB,OAAO,KAAK;QAGlE,IAAI,CAACH,eAAeF,QAAQ;YAC1B,OAAO,EAAE;QACX;QAEA,yCAAyC;QACzC,OAAOE,cAAcF,MAAM,CACxBM,MAAM,CAAC,CAACC,IAAaA,EAAEF,OAAO,KAAK,OACnCG,GAAG,CAAC,CAACD,IAAc,CAAA;gBAClBjC,OAAOiC,EAAErB,IAAI,IAAIqB,EAAEE,EAAE;gBACrBd,OAAOY,EAAEE,EAAE;YACb,CAAA;IACJ,GAAG;QAACf;QAAUI;KAAW;IAEzB,iFAAiF;IACjF7B,UAAU;QACR,IAAI0B,SAASK,OAAOU,MAAM,GAAG,GAAG;YAC9B,MAAMC,cAAcX,OAAOY,IAAI,CAAC,CAACL,IAAMA,EAAEZ,KAAK,KAAKA;YACnD,IAAI,CAACgB,aAAa;gBAChBf,SAAS;YACX;QACF;IACF,GAAG;QAACI;QAAQL;QAAOC;KAAS;IAE5B,IAAI,CAACF,UAAU;QACb,qBAAO,KAACrB;YAAcC,OAAM;YAAQC,SAAQ;YAAkCC,MAAMA;;IACtF;IAEA,IAAIuB,WAAW;QACb,qBAAO,KAAC1B;YAAcC,OAAM;YAAQC,SAAQ;YAAoBC,MAAMA;;IACxE;IAEA,IAAIwB,OAAOU,MAAM,KAAK,GAAG;QACvB,qBACE,KAACrC;YACCC,OAAM;YACNC,SAAS,CAAC,gEAAgE,EAAEmB,SAAS,CAAC,CAAC;YACvFlB,MAAMA;;IAGZ;IAEA,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACJ;gBAAMI,WAAU;gBAAcC,SAASH;0BAAM;;0BAG9C,KAACX;gBACCqB,MAAMA;gBACN2B,UAAU,CAACC,SAAW3C,mBAAmByB,UAAUkB;gBACnDC,SAASf;gBACTxB,MAAMA;gBACNmB,OAAOA;;;;AAIf,EAAC"}

package/dist/ui/DynamicVoiceSelect/index.jsx

@@ -1,6 +1,16 @@
 'use client';
 import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { handleSelectChange } from '../shared/handleSelectChange.js';
+import { useAISettings } from '../hooks/useAISettings.js';
+const StatusMessage = ({ label, message, path }) => (<div className="field-type text">
+    <label className="field-label" htmlFor={path}>
+      {label}
+    </label>
+    <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+      {message}
+    </p>
+  </div>);
 export const DynamicVoiceSelect = (props) => {
     const { name, path } = props;
     // Get provider from siblings
@@ -10,28 +20,7 @@ export const DynamicVoiceSelect = (props) => {
     const providerField = useFormFields(([fields]) => fields[providerPath]);
     const provider = providerField?.value || '';
     const { setValue, value } = useField({ path });
-    const [aiSettings, setAiSettings] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
-    useEffect(() => {
-        const fetchSettings = async () => {
-            setIsLoading(true);
-            try {
-                const response = await fetch('/api/globals/ai-providers?depth=1');
-                if (response.ok) {
-                    const data = await response.json();
-                    setAiSettings(data);
-                }
-            }
-            catch (err) {
-                console.error('Error fetching AI settings:', err);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        void fetchSettings();
-    }, [provider]); // Re-fetch when provider changes to ensure we have the latest voices
+    const { data: aiSettings, isLoading } = useAISettings();
     const voices = useMemo(() => {
         if (!provider || !aiSettings?.providers) {
             return [];
@@ -59,44 +48,18 @@ export const DynamicVoiceSelect = (props) => {
         }
     }, [voices, value, setValue]);
     if (!provider) {
-        return (<div className="field-type text">
-        <label className="field-label" htmlFor={path}>
-          Voice
-        </label>
-        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
-          Please select a provider first.
-        </p>
-      </div>);
+        return <StatusMessage label="Voice" message="Please select a provider first." path={path}/>;
     }
     if (isLoading) {
-        return (<div className="field-type text">
-        <label className="field-label" htmlFor={path}>
-          Voice
-        </label>
-        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>
-      </div>);
+        return <StatusMessage label="Voice" message="Loading voices..." path={path}/>;
     }
     if (voices.length === 0) {
-        return (<div className="field-type text">
-        <label className="field-label" htmlFor={path}>
-          Voice
-        </label>
-        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
-          No voices available. Please configure voices in AI Settings for {provider}.
-        </p>
-      </div>);
+        return (<StatusMessage label="Voice" message={`No voices available. Please configure voices in AI Settings for ${provider}.`} path={path}/>);
     }
     return (<div className="field-type select">
       <label className="field-label" htmlFor={path}>
         Voice
       </label>
-      <SelectInput name={name} onChange={(option) => {
-            if (option && typeof option === 'object' && 'value' in option) {
-                setValue(option.value);
-            }
-            else {
-                setValue(option);
-            }
-        }} options={voices} path={path} value={value}/>
+      <SelectInput name={name} onChange={(option) => handleSelectChange(setValue, option)} options={voices} path={path} value={value}/>
     </div>);
 };

package/dist/ui/GlobalProviderOptions/index.d.ts

@@ -0,0 +1,2 @@
+import type { FieldClientComponent } from 'payload';
+export declare const GlobalProviderOptions: FieldClientComponent;

package/dist/ui/GlobalProviderOptions/index.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+export const GlobalProviderOptions = ({ path })=>{
+    const fieldPath = String(path || '');
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const schemaPath = `${groupPath}.schema`;
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const schemaField = useFormFields(([fields])=>fields[schemaPath]);
+    const provider = typeof providerField?.value === 'string' ? providerField.value : undefined;
+    const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {};
+    const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null;
+    const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField({
+        path: fieldPath
+    });
+    const handleOptionChange = useCallback((keyPath, targetValue)=>{
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValue,
+            keyPath,
+            provider,
+            targetValue
+        });
+        setProviderOptionsValue(nextValue);
+    }, [
+        provider,
+        providerOptionsValue,
+        setProviderOptionsValue
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "Select a provider to configure provider options."
+                })
+            ]
+        });
+    }
+    if (!schema || Object.keys(schema).length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type",
+            style: {
+                marginTop: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "field-label",
+                    children: "Provider Options"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        margin: 0
+                    },
+                    children: "No provider options schema exists for this provider and capability."
+                })
+            ]
+        });
+    }
+    const selectedProviderValues = isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider]) ? providerOptionsValue[provider] : {};
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type",
+        style: {
+            marginTop: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "field-label",
+                children: "Provider Options"
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                style: {
+                    color: 'var(--theme-elevation-500)',
+                    marginBottom: '0.75rem',
+                    marginTop: 0
+                },
+                children: [
+                    "Configure default provider options for ",
+                    provider,
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: /*#__PURE__*/ _jsx(ProviderOptionsTree, {
+                    onChange: handleOptionChange,
+                    path: [],
+                    schemaValue: schema,
+                    selectedValue: selectedProviderValues
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/GlobalProviderOptions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/GlobalProviderOptions/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldClientComponent } from 'payload'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useCallback } from 'react'\n\nimport { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js'\nimport { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js'\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return !!value && typeof value === 'object' && !Array.isArray(value)\n}\n\nexport const GlobalProviderOptions: FieldClientComponent = ({ path }) => {\n  const fieldPath = String(path || '')\n  const groupPath = fieldPath.split('.').slice(0, -1).join('.')\n  const providerPath = `${groupPath}.provider`\n  const schemaPath = `${groupPath}.schema`\n\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const schemaField = useFormFields(([fields]) => fields[schemaPath])\n  const provider = typeof providerField?.value === 'string' ? providerField.value : undefined\n\n  const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {}\n  const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null\n\n  const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField<unknown>({\n    path: fieldPath,\n  })\n\n  const handleOptionChange = useCallback(\n    (keyPath: string[], targetValue: unknown) => {\n      const nextValue = updateProviderOptionsValue({\n        currentValue: providerOptionsValue,\n        keyPath,\n        provider,\n        targetValue,\n      })\n      setProviderOptionsValue(nextValue)\n    },\n    [provider, providerOptionsValue, setProviderOptionsValue],\n  )\n\n  if (!provider) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          Select a provider to configure provider options.\n        </p>\n      </div>\n    )\n  }\n\n  if (!schema || Object.keys(schema).length === 0) {\n    return (\n      <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n        <div className=\"field-label\">Provider Options</div>\n        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>\n          No provider options schema exists for this provider and capability.\n        </p>\n      </div>\n    )\n  }\n\n  const selectedProviderValues =\n    isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider])\n      ? providerOptionsValue[provider]\n      : {}\n\n  return (\n    <div className=\"field-type\" style={{ marginTop: '1rem' }}>\n      <div className=\"field-label\">Provider Options</div>\n      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>\n        Configure default provider options for {provider}.\n      </p>\n      <div style={{ display: 'flex', flexDirection: 'column' }}>\n        <ProviderOptionsTree\n          onChange={handleOptionChange}\n          path={[]}\n          schemaValue={schema}\n          selectedValue={selectedProviderValues}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useFormFields","React","useCallback","ProviderOptionsTree","updateProviderOptionsValue","isRecord","value","Array","isArray","GlobalProviderOptions","path","fieldPath","String","groupPath","split","slice","join","providerPath","schemaPath","providerField","fields","schemaField","provider","undefined","schemaByProvider","schema","setValue","setProviderOptionsValue","providerOptionsValue","handleOptionChange","keyPath","targetValue","nextValue","currentValue","div","className","style","marginTop","p","color","margin","Object","keys","length","selectedProviderValues","marginBottom","display","flexDirection","onChange","schemaValue","selectedValue"],"mappings":"AAAA;;AAIA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,iBAAgB;AACxD,YAAYC,WAAW,QAAO;AAC9B,SAASC,WAAW,QAAQ,QAAO;AAEnC,SAASC,mBAAmB,QAAQ,uDAAsD;AAC1F,SAASC,0BAA0B,QAAQ,mDAAkD;AAE7F,SAASC,SAASC,KAAc;IAC9B,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,CAACC,MAAMC,OAAO,CAACF;AAChE;AAEA,OAAO,MAAMG,wBAA8C,CAAC,EAAEC,IAAI,EAAE;IAClE,MAAMC,YAAYC,OAAOF,QAAQ;IACjC,MAAMG,YAAYF,UAAUG,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,CAAC;IACzD,MAAMC,eAAe,CAAC,EAAEJ,UAAU,SAAS,CAAC;IAC5C,MAAMK,aAAa,CAAC,EAAEL,UAAU,OAAO,CAAC;IAExC,MAAMM,gBAAgBnB,cAAc,CAAC,CAACoB,OAAO,GAAKA,MAAM,CAACH,aAAa;IACtE,MAAMI,cAAcrB,cAAc,CAAC,CAACoB,OAAO,GAAKA,MAAM,CAACF,WAAW;IAClE,MAAMI,WAAW,OAAOH,eAAeb,UAAU,WAAWa,cAAcb,KAAK,GAAGiB;IAElF,MAAMC,mBAAmBnB,SAASgB,aAAaf,SAASe,YAAYf,KAAK,GAAG,CAAC;IAC7E,MAAMmB,SAASH,YAAYjB,SAASmB,gBAAgB,CAACF,SAAS,IAAIE,gBAAgB,CAACF,SAAS,GAAG;IAE/F,MAAM,EAAEI,UAAUC,uBAAuB,EAAErB,OAAOsB,oBAAoB,EAAE,GAAG7B,SAAkB;QAC3FW,MAAMC;IACR;IAEA,MAAMkB,qBAAqB3B,YACzB,CAAC4B,SAAmBC;QAClB,MAAMC,YAAY5B,2BAA2B;YAC3C6B,cAAcL;YACdE;YACAR;YACAS;QACF;QACAJ,wBAAwBK;IAC1B,GACA;QAACV;QAAUM;QAAsBD;KAAwB;IAG3D,IAAI,CAACL,UAAU;QACb,qBACE,MAACY;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,WAAW;YAAO;;8BACrD,KAACH;oBAAIC,WAAU;8BAAc;;8BAC7B,KAACG;oBAAEF,OAAO;wBAAEG,OAAO;wBAA8BC,QAAQ;oBAAE;8BAAG;;;;IAKpE;IAEA,IAAI,CAACf,UAAUgB,OAAOC,IAAI,CAACjB,QAAQkB,MAAM,KAAK,GAAG;QAC/C,qBACE,MAACT;YAAIC,WAAU;YAAaC,OAAO;gBAAEC,WAAW;YAAO;;8BACrD,KAACH;oBAAIC,WAAU;8BAAc;;8BAC7B,KAACG;oBAAEF,OAAO;wBAAEG,OAAO;wBAA8BC,QAAQ;oBAAE;8BAAG;;;;IAKpE;IAEA,MAAMI,yBACJvC,SAASuB,yBAAyBvB,SAASuB,oBAAoB,CAACN,SAAS,IACrEM,oBAAoB,CAACN,SAAS,GAC9B,CAAC;IAEP,qBACE,MAACY;QAAIC,WAAU;QAAaC,OAAO;YAAEC,WAAW;QAAO;;0BACrD,KAACH;gBAAIC,WAAU;0BAAc;;0BAC7B,MAACG;gBAAEF,OAAO;oBAAEG,OAAO;oBAA8BM,cAAc;oBAAWR,WAAW;gBAAE;;oBAAG;oBAChDf;oBAAS;;;0BAEnD,KAACY;gBAAIE,OAAO;oBAAEU,SAAS;oBAAQC,eAAe;gBAAS;0BACrD,cAAA,KAAC5C;oBACC6C,UAAUnB;oBACVnB,MAAM,EAAE;oBACRuC,aAAaxB;oBACbyB,eAAeN;;;;;AAKzB,EAAC"}

package/dist/ui/GlobalProviderOptions/index.jsx

@@ -0,0 +1,60 @@
+'use client';
+import { useField, useFormFields } from '@payloadcms/ui';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { ProviderOptionsTree } from '../InstructionProviderOptions/ProviderOptionsTree.js';
+import { updateProviderOptionsValue } from '../providerOptions/updateProviderOptionsValue.js';
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+export const GlobalProviderOptions = ({ path }) => {
+    const fieldPath = String(path || '');
+    const groupPath = fieldPath.split('.').slice(0, -1).join('.');
+    const providerPath = `${groupPath}.provider`;
+    const schemaPath = `${groupPath}.schema`;
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const schemaField = useFormFields(([fields]) => fields[schemaPath]);
+    const provider = typeof providerField?.value === 'string' ? providerField.value : undefined;
+    const schemaByProvider = isRecord(schemaField?.value) ? schemaField.value : {};
+    const schema = provider && isRecord(schemaByProvider[provider]) ? schemaByProvider[provider] : null;
+    const { setValue: setProviderOptionsValue, value: providerOptionsValue } = useField({
+        path: fieldPath,
+    });
+    const handleOptionChange = useCallback((keyPath, targetValue) => {
+        const nextValue = updateProviderOptionsValue({
+            currentValue: providerOptionsValue,
+            keyPath,
+            provider,
+            targetValue,
+        });
+        setProviderOptionsValue(nextValue);
+    }, [provider, providerOptionsValue, setProviderOptionsValue]);
+    if (!provider) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          Select a provider to configure provider options.
+        </p>
+      </div>);
+    }
+    if (!schema || Object.keys(schema).length === 0) {
+        return (<div className="field-type" style={{ marginTop: '1rem' }}>
+        <div className="field-label">Provider Options</div>
+        <p style={{ color: 'var(--theme-elevation-500)', margin: 0 }}>
+          No provider options schema exists for this provider and capability.
+        </p>
+      </div>);
+    }
+    const selectedProviderValues = isRecord(providerOptionsValue) && isRecord(providerOptionsValue[provider])
+        ? providerOptionsValue[provider]
+        : {};
+    return (<div className="field-type" style={{ marginTop: '1rem' }}>
+      <div className="field-label">Provider Options</div>
+      <p style={{ color: 'var(--theme-elevation-500)', marginBottom: '0.75rem', marginTop: 0 }}>
+        Configure default provider options for {provider}.
+      </p>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ProviderOptionsTree onChange={handleOptionChange} path={[]} schemaValue={schema} selectedValue={selectedProviderValues}/>
+      </div>
+    </div>);
+};

package/dist/ui/Icons/Icons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 import LottieAnimation from './LottieAnimation.js';
 export const PluginIcon = ({ color = 'white', isLoading })=>{
     return /*#__PURE__*/ _jsx("span", {

package/dist/ui/Icons/Icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Icons/Icons.tsx"],"sourcesContent":["import React from 'react'\n\nimport styles from './icons.module.css'\nimport LottieAnimation from './LottieAnimation.js'\n\nexport const PluginIcon = ({\n  color = 'white',\n  isLoading,\n}: {\n  color?: string\n  isLoading?: boolean\n}) => {\n  return (\n    <span className={styles.actions_icon}>\n      <LottieAnimation isLoading={isLoading} />\n    </span>\n  )\n}\n\nexport const TuneIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const LocalLibraryIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M480-115.38q-67.38-54.93-148.85-86.7Q249.69-233.85 160-240v-373.85q91.77 5.39 174.38 43.81Q417-531.62 480-474.92q63-56.7 145.62-95.12 82.61-38.42 174.38-43.81V-240q-89.92 6.15-171.27 37.92-81.35 31.77-148.73 86.7Zm0-50.16q63-46.23 134-74.56 71-28.33 146-37.44v-291.38q-78.38 13-149.65 50.57-71.27 37.58-130.35 96.66-59.08-59.08-130.35-96.66-71.27-37.57-149.65-50.57v291.38q75 9.11 146 37.44t134 74.56Zm0-451.38q-53.31 0-91.27-37.96-37.96-37.97-37.96-91.27 0-53.31 37.96-91.27 37.96-37.96 91.27-37.96 53.31 0 91.27 37.96 37.96 37.96 37.96 91.27 0 53.3-37.96 91.27-37.96 37.96-91.27 37.96Zm.03-40q36.82 0 63.01-26.22 26.19-26.22 26.19-63.04t-26.22-63.01q-26.22-26.19-63.04-26.19t-63.01 26.21q-26.19 26.22-26.19 63.04t26.22 63.01q26.22 26.2 63.04 26.2Zm-.03-89.23Zm0 324.46Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SpellCheckIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M564-93.85 407.85-250 450-292.15l114 114 226.77-226.77 42.15 42.15L564-93.85ZM135.39-320l191.69-520h69.38l190.92 520h-68.92l-49.07-142H250.92l-49.84 142h-65.69ZM272-518h178.31L362-765.54h-3.23L272-518Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const TranslateIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m476-100 178.15-460h62.46l178.16 460h-63.62l-45.3-122H584.92l-45.31 122H476ZM160.38-217.69l-42.15-42.16 198.92-199.3q-34.61-35-65.8-83.08Q220.15-590.31 200-640h63.61q17.31 36.31 42.12 72.62 24.81 36.3 53.58 66.07 42.61-43 80.61-104.42T493.62-720H67.69v-60H330v-64.61h60V-780h262.31v60h-97.93q-19.46 67.38-62.03 140.88-42.58 73.5-90.89 121.2l98.69 101.07-22.69 61.62-118.15-121.16-198.93 198.7Zm443.77-57.39h162.46l-81.23-218.23-81.23 218.23Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const DocsAddOnIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M650-131v-120H530v-60h120v-120h60v120h120v60H710v120h-60ZM170-250v-60h281.85q-1.85 15.8-1.35 30.09t2.35 29.91H170Zm0-160v-60h379.08q-17.23 12.15-31.5 27.15-14.27 15-25.96 32.85H170Zm0-160v-60h580v60H170Zm0-160v-60h580v60H170Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SummarizeIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M320-603.85q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h419.23L820-631.54v419.23Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q5.39 0 8.85-3.46t3.46-8.85V-600H600v-160H212.31q-5.39 0-8.85 3.46t-3.46 8.85v535.38q0 5.39 3.46 8.85t8.85 3.46ZM200-760v160-160V-200v-560Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SegmentIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M380-254.62v-59.99h440v59.99H380ZM380-450v-60h440v60H380ZM140-645.39v-59.99h680v59.99H140Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const StylusNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m487.46-283.15 332.31-332.31q2.69-2.69 2.69-6.54t-2.69-6.54l-38.92-38.92q-2.7-2.69-6.54-2.69-3.85 0-6.54 2.69L435.46-335.15l52 52Zm-251 72.38q-89.23-5-134-39.69-44.77-34.69-44.77-98.16 0-60.76 51-98.57 51-37.81 141.77-45.81 43.62-3.77 65.43-15.77 21.8-12 21.8-33.23 0-29.46-29.5-44.96t-96.73-22.27l5.46-59.62q92.23 8.77 136.5 39.77 44.27 31 44.27 87.08 0 47.61-36.57 75.5-36.58 27.88-106.2 33.5-68.61 5.77-102.92 26.77t-34.31 57.61q0 37.31 28.58 55.51 28.58 18.19 92.65 22.34l-2.46 60Zm260.38 3.15L359.92-344.54l373.54-373.15q17.69-17.69 41.35-17.5 23.65.19 41.34 17.5L870-663.85q17.69 17.7 17.69 41.54 0 23.85-17.69 41.54L496.84-207.62ZM363.23-180q-13.54 3.23-23.84-7.08-10.31-10.31-7.08-23.84l27.61-133.62 136.92 136.92L363.23-180Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const EditNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M180-400v-60h280v60H180Zm0-160v-60h440v60H180Zm0-160v-60h440v60H180Zm344.62 540v-105.69l217.15-216.16q7.46-7.46 16.11-10.5 8.65-3.03 17.3-3.03 9.43 0 18.25 3.53 8.82 3.54 16.03 10.62l37 37.38q6.46 7.47 10 16.16Q860-439 860-430.31t-3.23 17.69q-3.23 9-10.31 16.46L630.31-180H524.62Zm287.69-250.31-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-18.38-19-18.62-18.76-130.84 130.23v38Zm149.46-149.47-18.62-18.76 37 37.76-18.38-19Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const ArrowIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z\" />\n      </svg>\n    </span>\n  )\n}\n"],"names":["React","styles","LottieAnimation","PluginIcon","color","isLoading","span","className","actions_icon","TuneIcon","size","icon","svg","height","viewBox","width","xmlns","path","d","LocalLibraryIcon","SpellCheckIcon","TranslateIcon","DocsAddOnIcon","SummarizeIcon","SegmentIcon","StylusNoteIcon","EditNoteIcon","ArrowIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/Icons/Icons.tsx"],"sourcesContent":["import React from 'react'\n\nimport styles from './icons.module.scss'\nimport LottieAnimation from './LottieAnimation.js'\n\nexport const PluginIcon = ({\n  color = 'white',\n  isLoading,\n}: {\n  color?: string\n  isLoading?: boolean\n}) => {\n  return (\n    <span className={styles.actions_icon}>\n      <LottieAnimation isLoading={isLoading} />\n    </span>\n  )\n}\n\nexport const TuneIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const LocalLibraryIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M480-115.38q-67.38-54.93-148.85-86.7Q249.69-233.85 160-240v-373.85q91.77 5.39 174.38 43.81Q417-531.62 480-474.92q63-56.7 145.62-95.12 82.61-38.42 174.38-43.81V-240q-89.92 6.15-171.27 37.92-81.35 31.77-148.73 86.7Zm0-50.16q63-46.23 134-74.56 71-28.33 146-37.44v-291.38q-78.38 13-149.65 50.57-71.27 37.58-130.35 96.66-59.08-59.08-130.35-96.66-71.27-37.57-149.65-50.57v291.38q75 9.11 146 37.44t134 74.56Zm0-451.38q-53.31 0-91.27-37.96-37.96-37.97-37.96-91.27 0-53.31 37.96-91.27 37.96-37.96 91.27-37.96 53.31 0 91.27 37.96 37.96 37.96 37.96 91.27 0 53.3-37.96 91.27-37.96 37.96-91.27 37.96Zm.03-40q36.82 0 63.01-26.22 26.19-26.22 26.19-63.04t-26.22-63.01q-26.22-26.19-63.04-26.19t-63.01 26.21q-26.19 26.22-26.19 63.04t26.22 63.01q26.22 26.2 63.04 26.2Zm-.03-89.23Zm0 324.46Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SpellCheckIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M564-93.85 407.85-250 450-292.15l114 114 226.77-226.77 42.15 42.15L564-93.85ZM135.39-320l191.69-520h69.38l190.92 520h-68.92l-49.07-142H250.92l-49.84 142h-65.69ZM272-518h178.31L362-765.54h-3.23L272-518Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const TranslateIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m476-100 178.15-460h62.46l178.16 460h-63.62l-45.3-122H584.92l-45.31 122H476ZM160.38-217.69l-42.15-42.16 198.92-199.3q-34.61-35-65.8-83.08Q220.15-590.31 200-640h63.61q17.31 36.31 42.12 72.62 24.81 36.3 53.58 66.07 42.61-43 80.61-104.42T493.62-720H67.69v-60H330v-64.61h60V-780h262.31v60h-97.93q-19.46 67.38-62.03 140.88-42.58 73.5-90.89 121.2l98.69 101.07-22.69 61.62-118.15-121.16-198.93 198.7Zm443.77-57.39h162.46l-81.23-218.23-81.23 218.23Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const DocsAddOnIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M650-131v-120H530v-60h120v-120h60v120h120v60H710v120h-60ZM170-250v-60h281.85q-1.85 15.8-1.35 30.09t2.35 29.91H170Zm0-160v-60h379.08q-17.23 12.15-31.5 27.15-14.27 15-25.96 32.85H170Zm0-160v-60h580v60H170Zm0-160v-60h580v60H170Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SummarizeIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M320-603.85q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h419.23L820-631.54v419.23Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q5.39 0 8.85-3.46t3.46-8.85V-600H600v-160H212.31q-5.39 0-8.85 3.46t-3.46 8.85v535.38q0 5.39 3.46 8.85t8.85 3.46ZM200-760v160-160V-200v-560Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const SegmentIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M380-254.62v-59.99h440v59.99H380ZM380-450v-60h440v60H380ZM140-645.39v-59.99h680v59.99H140Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const StylusNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m487.46-283.15 332.31-332.31q2.69-2.69 2.69-6.54t-2.69-6.54l-38.92-38.92q-2.7-2.69-6.54-2.69-3.85 0-6.54 2.69L435.46-335.15l52 52Zm-251 72.38q-89.23-5-134-39.69-44.77-34.69-44.77-98.16 0-60.76 51-98.57 51-37.81 141.77-45.81 43.62-3.77 65.43-15.77 21.8-12 21.8-33.23 0-29.46-29.5-44.96t-96.73-22.27l5.46-59.62q92.23 8.77 136.5 39.77 44.27 31 44.27 87.08 0 47.61-36.57 75.5-36.58 27.88-106.2 33.5-68.61 5.77-102.92 26.77t-34.31 57.61q0 37.31 28.58 55.51 28.58 18.19 92.65 22.34l-2.46 60Zm260.38 3.15L359.92-344.54l373.54-373.15q17.69-17.69 41.35-17.5 23.65.19 41.34 17.5L870-663.85q17.69 17.7 17.69 41.54 0 23.85-17.69 41.54L496.84-207.62ZM363.23-180q-13.54 3.23-23.84-7.08-10.31-10.31-7.08-23.84l27.61-133.62 136.92 136.92L363.23-180Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const EditNoteIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M180-400v-60h280v60H180Zm0-160v-60h440v60H180Zm0-160v-60h440v60H180Zm344.62 540v-105.69l217.15-216.16q7.46-7.46 16.11-10.5 8.65-3.03 17.3-3.03 9.43 0 18.25 3.53 8.82 3.54 16.03 10.62l37 37.38q6.46 7.47 10 16.16Q860-439 860-430.31t-3.23 17.69q-3.23 9-10.31 16.46L630.31-180H524.62Zm287.69-250.31-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-18.38-19-18.62-18.76-130.84 130.23v38Zm149.46-149.47-18.62-18.76 37 37.76-18.38-19Z\" />\n      </svg>\n    </span>\n  )\n}\n\nexport const ArrowIcon = ({ color = 'white', size = 24 }) => {\n  return (\n    <span className={styles.icon}>\n      <svg height={size} viewBox=\"0 -960 960 960\" width={size} xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z\" />\n      </svg>\n    </span>\n  )\n}\n"],"names":["React","styles","LottieAnimation","PluginIcon","color","isLoading","span","className","actions_icon","TuneIcon","size","icon","svg","height","viewBox","width","xmlns","path","d","LocalLibraryIcon","SpellCheckIcon","TranslateIcon","DocsAddOnIcon","SummarizeIcon","SegmentIcon","StylusNoteIcon","EditNoteIcon","ArrowIcon"],"mappings":"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"}

package/dist/ui/Icons/Icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 import LottieAnimation from './LottieAnimation.js';
 export const PluginIcon = ({ color = 'white', isLoading, }) => {
     return (<span className={styles.actions_icon}>

package/dist/ui/Icons/LottieAnimation.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 const LottieAnimation = ({ isLoading = false })=>{
     const svgRef = useRef(null);
     const [animations, setAnimations] = useState([]);

package/dist/ui/Icons/LottieAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.css'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) {return}\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;YAAC;QAAM;QAEjB,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}
+{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.scss'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) {return}\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,sBAAqB;AAExC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;YAAC;QAAM;QAEjB,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}

package/dist/ui/Icons/LottieAnimation.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './icons.module.css';
+import styles from './icons.module.scss';
 const LottieAnimation = ({ isLoading = false }) => {
     const svgRef = useRef(null);
     const [animations, setAnimations] = useState([]);

package/dist/ui/InstructionProviderOptions/ProviderOptionsTree.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Primitive = boolean | null | number | string | undefined;
+type PrimitiveArray = number[] | string[];
+type ProviderOptionTreeNodeProps = {
+    disabled?: boolean;
+    onChange: (path: string[], value: any) => void;
+    path: string[];
+    schemaValue: Primitive | PrimitiveArray | Record<string, any>;
+    selectedValue: any;
+};
+export declare const ProviderOptionsTree: React.FC<ProviderOptionTreeNodeProps>;
+export {};