@pstdio/ui 0.0.1

package/storybook-static/assets/param-editor.stories-0ae3y4Vu.js

@@ -0,0 +1,921 @@
+import{r as T,j as t}from"./iframe-B8FSoBNY.js";import{c as F}from"./compiler-runtime-BXE7OOXE.js";import{N as K,S as $,D as X,C as Z,a as j}from"./param-editor-selection-input-2pJE1_W1.js";import{T as ae}from"./tooltip-DZxUoouw.js";import{F as ee}from"./flex-DAJL4AFZ.js";import{T as D}from"./index-cFwdnc0b.js";import{I as z}from"./input-ZSs5cSFQ.js";import{B as N}from"./index-B0y2_lLF.js";import{T as ie}from"./textarea-rqmaWSc5.js";import{B as se}from"./button-C7it2n8t.js";import{C as re}from"./chevron-down-BYCAGyCV.js";import{c as oe}from"./createLucideIcon-CcBBUKX8.js";import{S as ne}from"./stack-CN4X31TA.js";import{b as le,c as de}from"./collapsible-DBDG7h1r.js";import{S as H}from"./separator-CQkMOHNm.js";import"./preload-helper-PPVm8Dsz.js";import"./create-recipe-context-BU56IzEo.js";import"./factory-DAJZwK4o.js";import"./number-C92MPsRM.js";import"./create-slot-recipe-context-DAhDE6G_.js";import"./icons-WRA1cA-W.js";import"./icon-button-DHiUe7rR.js";import"./factory-BR3bc_RM.js";import"./create-split-props-u5h9OPvL.js";import"./use-presence-context-DK2PGZth.js";import"./normalize-props-D7NI5JRu.js";import"./index-DaXC_qY_.js";import"./index-DpB4ozcR.js";import"./computed-style-C0hzrq9-.js";import"./use-field-context-DoxKQlMm.js";import"./tooltip-C_a-XGZ8.js";import"./overflow-CkG1DOya.js";import"./typeahead-CuY9WxfQ.js";import"./menu-item-CrqDaj9K.js";import"./tabbable-DHAf8oAu.js";import"./mutation-observer-CAfGweIM.js";import"./dismissable-layer-Cc5dFRd8.js";import"./icon-C8FN9JqD.js";import"./badge-CtgJasjB.js";import"./form-D_Xln9tK.js";import"./number-input-D1aC-9ls.js";import"./portal-CZHfPTRw.js";import"./spinner-ZYH_gvW-.js";import"./index-CXwl6T4k.js";import"./collapsible-content-B1Uq3jUM.js";function Q(i,e=[]){const r=T.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return T.useInsertionEffect(()=>{r.current=i}),T.useCallback((...l)=>r.current?.(...l),e)}function me(i={}){const e=Q(i.onOpen),r=Q(i.onClose),[l,s]=T.useState(i.defaultOpen||!1),o=i.open!==void 0?i.open:l,m=i.open!==void 0,p=T.useCallback(()=>{m||s(!1),r?.()},[m,r]),x=T.useCallback(()=>{m||s(!0),e?.()},[m,e]),f=T.useCallback(()=>{o?p():x()},[o,x,p]);return{open:o,onOpen:x,onClose:p,onToggle:f,setOpen:s}}const ue=[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]],pe=oe("chevron-left",ue),J=i=>{const e=F.c(21),{id:r,defaultValue:l,name:s,onChange:o,description:m,readOnly:p,singleLine:x,hideLabel:f,fullWidth:b}=i,c=x===void 0?!0:x,d=f===void 0?!1:f,v=b===void 0?!1:b,[y,h]=T.useState(l),C=T.useRef(null);let g;e[0]!==r||e[1]!==o?(g=A=>{C.current&&clearTimeout(C.current),C.current=setTimeout(()=>o(r,A),540)},e[0]=r,e[1]=o,e[2]=g):g=e[2];const V=g;let n,u;e[3]!==l?(n=()=>{h(l)},u=[l],e[3]=l,e[4]=n,e[5]=u):(n=e[4],u=e[5]),T.useEffect(n,u);let a;e[6]!==V?(a=A=>{h(A),V(A)},e[6]=V,e[7]=a):a=e[7];const S=a;let L;e[8]===Symbol.for("react.memo_cache_sentinel")?(L={placement:"right"},e[8]=L):L=e[8];let I;e[9]===Symbol.for("react.memo_cache_sentinel")?(I={padding:"xxs"},e[9]=I):I=e[9];let w;e[10]!==v||e[11]!==S||e[12]!==d||e[13]!==s||e[14]!==p||e[15]!==c||e[16]!==y?(w=c&&!v?t.jsxs(ee,{alignItems:"center",justifyContent:"space-between",minHeight:"2rem",mb:"sm",children:[!d&&t.jsx(D,{mr:"xs",textStyle:"label/S/medium",color:"foreground.secondary",children:s}),t.jsx(z,{className:"nodrag",readOnly:p,flex:"1",maxW:"12.5rem",size:"sm",type:"text",placeholder:d?s:void 0,value:y,onChange:A=>S(A.target.value),onKeyUp:ce})]}):t.jsxs(N,{children:[!d&&t.jsx(D,{textStyle:"label/S/medium",color:"foreground.secondary",mb:"xs",children:s}),c?t.jsx(z,{className:"nodrag",readOnly:p,width:"100%",size:"sm",type:"text",placeholder:d?s:void 0,value:y,onChange:A=>S(A.target.value),onKeyUp:ge}):t.jsx(ie,{className:"nodrag",readOnly:p,width:"100%",size:"sm",placeholder:d?s:void 0,value:y,onChange:A=>S(A.target.value),rows:3,resize:"vertical"})]}),e[10]=v,e[11]=S,e[12]=d,e[13]=s,e[14]=p,e[15]=c,e[16]=y,e[17]=w):w=e[17];let M;return e[18]!==m||e[19]!==w?(M=t.jsx(N,{children:t.jsx(ae,{positioning:L,content:m,contentProps:I,children:w})}),e[18]=m,e[19]=w,e[20]=M):M=e[20],M};J.__docgenInfo={description:"",methods:[],displayName:"TextInput",props:{id:{required:!0,tsType:{name:"string"},description:""},defaultValue:{required:!0,tsType:{name:"string"},description:""},name:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(id: string, value: string) => void",signature:{arguments:[{type:{name:"string"},name:"id"},{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},description:{required:!0,tsType:{name:"string"},description:""},readOnly:{required:!1,tsType:{name:"boolean"},description:""},singleLine:{required:!1,tsType:{name:"boolean"},description:""},hideLabel:{required:!1,tsType:{name:"boolean"},description:""},fullWidth:{required:!1,tsType:{name:"boolean"},description:""}}};function ce(i){i.key==="Enter"&&i.currentTarget.blur()}function ge(i){i.key==="Enter"&&i.currentTarget.blur()}const te=i=>{const e=F.c(26),{group:r,defaultValues:l,onChange:s,readOnly:o,fullWidth:m}=i,p=m===void 0?!1:m,x=!r.defaultCollapsed;let f;e[0]!==x?(f={defaultOpen:x},e[0]=x,e[1]=f):f=e[1];const{open:b,onToggle:c}=me(f);let d;e[2]!==l||e[3]!==p||e[4]!==s||e[5]!==o?(d=a=>{if(a.type==="number"){const S=l[a.id]===void 0?a.defaultValue:l[a.id];return t.jsx(K,{readOnly:o,id:a.id,name:a.name,description:a.description||"",defaultValue:S,min:a.min,max:a.max,step:a.step,onChange:s,fullWidth:p},a.id)}if(a.type==="text"){const S=l[a.id]===void 0?a.defaultValue:l[a.id];return t.jsx(J,{readOnly:o,id:a.id,name:a.name,description:a.description||"",defaultValue:S,singleLine:a.singleLine,onChange:s,fullWidth:p},a.id)}if(a.type==="selection"){const S=l[a.id]===void 0?a.defaultValue:l[a.id];return t.jsx($,{readOnly:o,id:a.id,name:a.name,description:a.description||"",defaultValue:S,options:a.options,onChange:s,multiSelect:a.multiSelect,placeholder:a.placeholder,fullWidth:p},a.id)}if(a.type==="date"){const S=l[a.id]===void 0?a.defaultValue:l[a.id];return t.jsx(X,{readOnly:o,id:a.id,name:a.name,description:a.description||"",defaultValue:S,min:a.min,max:a.max,onChange:s,fullWidth:p},a.id)}if(a.type==="color"){const S=l[a.id]===void 0?a.defaultValue:l[a.id];return t.jsx(Z,{readOnly:o,id:a.id,name:a.name,description:a.description||"",defaultValue:S,onChange:s,fullWidth:p},a.id)}return null},e[2]=l,e[3]=p,e[4]=s,e[5]=o,e[6]=d):d=e[6];const v=d;let y;e[7]!==r.collapsible||e[8]!==r.title||e[9]!==c||e[10]!==b?(y=r.collapsible?t.jsx(se,{variant:"ghost",size:"xs",onClick:c,pl:0,_hover:{bg:"transparent"},children:t.jsxs(ee,{alignItems:"center",gap:"xs",children:[t.jsx(D,{textStyle:"label/M/medium",children:r.title}),b?t.jsx(re,{size:14}):t.jsx(pe,{size:14})]})}):t.jsx(D,{textStyle:"label/M/medium",children:r.title}),e[7]=r.collapsible,e[8]=r.title,e[9]=c,e[10]=b,e[11]=y):y=e[11];let h;e[12]!==r.description?(h=r.description&&t.jsx(D,{textStyle:"label/S/regular",color:"foreground.secondary",mb:"sm",children:r.description}),e[12]=r.description,e[13]=h):h=e[13];const C=r.collapsible?b:!0;let g;e[14]!==r.params||e[15]!==v?(g=r.params.map(v),e[14]=r.params,e[15]=v,e[16]=g):g=e[16];let V;e[17]!==g?(V=t.jsx(le,{children:t.jsx(ne,{gap:"md",children:g})}),e[17]=g,e[18]=V):V=e[18];let n;e[19]!==C||e[20]!==V?(n=t.jsx(de,{open:C,children:V}),e[19]=C,e[20]=V,e[21]=n):n=e[21];let u;return e[22]!==y||e[23]!==h||e[24]!==n?(u=t.jsxs(N,{children:[y,h,n]}),e[22]=y,e[23]=h,e[24]=n,e[25]=u):u=e[25],u};te.__docgenInfo={description:"",methods:[],displayName:"InputGroupComponent",props:{group:{required:!0,tsType:{name:"InputGroup"},description:""},defaultValues:{required:!0,tsType:{name:"Record",elements:[{name:"string"},{name:"union",raw:"number | string | null | ObjectDefinition | Array<number> | Array<string>",elements:[{name:"number"},{name:"string"},{name:"null"},{name:"Array",elements:[{name:"unknown"}],raw:"(NumberParam | TextParam)[]"},{name:"Array",elements:[{name:"number"}],raw:"Array<number>"},{name:"Array",elements:[{name:"string"}],raw:"Array<string>"}]}],raw:"Record<string, ParamValue>"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(id: string, value: ParamValue) => void",signature:{arguments:[{type:{name:"string"},name:"id"},{type:{name:"union",raw:"number | string | null | ObjectDefinition | Array<number> | Array<string>",elements:[{name:"number"},{name:"string"},{name:"null"},{name:"Array",elements:[{name:"unknown"}],raw:"(NumberParam | TextParam)[]"},{name:"Array",elements:[{name:"number"}],raw:"Array<number>"},{name:"Array",elements:[{name:"string"}],raw:"Array<string>"}]},name:"value"}],return:{name:"void"}}},description:""},readOnly:{required:!1,tsType:{name:"boolean"},description:""},fullWidth:{required:!1,tsType:{name:"boolean"},description:""}}};const P=i=>{const e=F.c(31),{params:r,groups:l,defaultValues:s,onChange:o,readOnly:m,fullWidth:p}=i;let x;e[0]!==r?(x=r===void 0?[]:r,e[0]=r,e[1]=x):x=e[1];const f=x;let b;e[2]!==l?(b=l===void 0?[]:l,e[2]=l,e[3]=b):b=e[3];const c=b,d=p===void 0?!1:p;let v;e[4]!==s||e[5]!==d||e[6]!==o||e[7]!==m?(v=n=>{if(n.type==="number"){const u=s[n.id]===void 0?n.defaultValue??n.min:s[n.id];return t.jsx(K,{readOnly:m,id:n.id,name:n.name,description:n.description||"",defaultValue:u,min:n.min,max:n.max,step:n.step,onChange:o,fullWidth:d},n.id)}if(n.type==="text"){const u=s[n.id]===void 0?n.defaultValue:s[n.id];return t.jsx(J,{readOnly:m,id:n.id,name:n.name,description:n.description||"",defaultValue:u,singleLine:n.singleLine,onChange:o,fullWidth:d},n.id)}if(n.type==="selection"){const u=s[n.id]===void 0?n.defaultValue:s[n.id];return t.jsx($,{readOnly:m,id:n.id,name:n.name,description:n.description||"",defaultValue:u,options:n.options,onChange:o,multiSelect:n.multiSelect,placeholder:n.placeholder,fullWidth:d},n.id)}if(n.type==="date"){const u=s[n.id]===void 0?n.defaultValue??n.min:s[n.id];return t.jsx(X,{readOnly:m,id:n.id,name:n.name,description:n.description||"",defaultValue:u,min:n.min,max:n.max,onChange:o,fullWidth:d},n.id)}if(n.type==="color"){const u=s[n.id]===void 0?n.defaultValue:s[n.id];return t.jsx(Z,{readOnly:m,id:n.id,name:n.name,description:n.description||"",defaultValue:u,onChange:o,fullWidth:d},n.id)}return null},e[4]=s,e[5]=d,e[6]=o,e[7]=m,e[8]=v):v=e[8];const y=v;let h;e[9]!==f||e[10]!==y?(h=f.map(y),e[9]=f,e[10]=y,e[11]=h):h=e[11];let C;e[12]!==c.length||e[13]!==f.length?(C=f.length>0&&c.length>0&&t.jsx(H,{borderColor:"border.secondary"}),e[12]=c.length,e[13]=f.length,e[14]=C):C=e[14];let g;if(e[15]!==s||e[16]!==d||e[17]!==c||e[18]!==o||e[19]!==m){let n;e[21]!==s||e[22]!==d||e[23]!==c.length||e[24]!==o||e[25]!==m?(n=(u,a)=>t.jsxs(T.Fragment,{children:[t.jsx(te,{group:u,defaultValues:s,onChange:o,readOnly:m,fullWidth:d}),a<c.length-1&&t.jsx(H,{borderColor:"border.secondary"})]},u.id),e[21]=s,e[22]=d,e[23]=c.length,e[24]=o,e[25]=m,e[26]=n):n=e[26],g=c.map(n),e[15]=s,e[16]=d,e[17]=c,e[18]=o,e[19]=m,e[20]=g}else g=e[20];let V;return e[27]!==h||e[28]!==C||e[29]!==g?(V=t.jsxs(ne,{flex:"1",maxW:"full",gap:"md",children:[h,C,g]}),e[27]=h,e[28]=C,e[29]=g,e[30]=V):V=e[30],V};P.__docgenInfo={description:"",methods:[],displayName:"ParamEditor",props:{params:{required:!1,tsType:{name:"Array",elements:[{name:"union",raw:`| NumberParam
+| TextParam
+| SelectionParam
+| DateParam
+| ColorParam
+| ObjectParam
+| ListParam
+| VectorParam`,elements:[{name:"NumberParam"},{name:"TextParam"},{name:"SelectionParam"},{name:"DateParam"},{name:"ColorParam"},{name:"ObjectParam"},{name:"ListParam"},{name:"VectorParam"}]}],raw:"Param[]"},description:""},groups:{required:!1,tsType:{name:"Array",elements:[{name:"InputGroup"}],raw:"InputGroup[]"},description:""},defaultValues:{required:!0,tsType:{name:"Record",elements:[{name:"string"},{name:"union",raw:"number | string | null | ObjectDefinition | Array<number> | Array<string>",elements:[{name:"number"},{name:"string"},{name:"null"},{name:"Array",elements:[{name:"unknown"}],raw:"(NumberParam | TextParam)[]"},{name:"Array",elements:[{name:"number"}],raw:"Array<number>"},{name:"Array",elements:[{name:"string"}],raw:"Array<string>"}]}],raw:"Record<string, ParamValue>"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(id: string, value: ParamValue) => void",signature:{arguments:[{type:{name:"string"},name:"id"},{type:{name:"union",raw:"number | string | null | ObjectDefinition | Array<number> | Array<string>",elements:[{name:"number"},{name:"string"},{name:"null"},{name:"Array",elements:[{name:"unknown"}],raw:"(NumberParam | TextParam)[]"},{name:"Array",elements:[{name:"number"}],raw:"Array<number>"},{name:"Array",elements:[{name:"string"}],raw:"Array<string>"}]},name:"value"}],return:{name:"void"}}},description:""},readOnly:{required:!1,tsType:{name:"boolean"},description:""},fullWidth:{required:!1,tsType:{name:"boolean"},description:""}}};const on={title:"Components/ParamEditor",component:P,parameters:{layout:"fullscreen"},tags:[],argTypes:{}},k={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:5,2:5,3:"Hello World",4:`This is a multiline text example
+with multiple lines`,5:"user",6:"2024-07-30",7:"#ff0000"},onChange:()=>{},params:[{id:"1",name:"Temperature",type:"number",description:"Controls randomness in the output",defaultValue:1,min:0,max:2,step:.1},{id:"2",name:"Max Tokens",type:"number",description:"Maximum number of tokens to generate",defaultValue:100,min:1,max:1e3,step:1},{id:"3",name:"System Message",type:"text",description:"Single line system instruction",defaultValue:"You are a helpful assistant",singleLine:!0},{id:"4",name:"Prompt Template",type:"text",description:"Multi-line prompt template",defaultValue:`Please help me with:
+{user_input}`,singleLine:!1},{id:"5",name:"Role",type:"selection",description:"Select a role",defaultValue:"user",options:[{id:"user",name:"User"},{id:"assistant",name:"Assistant"},{id:"system",name:"System"}]},{id:"6",name:"Start Date",type:"date",description:"Select the start date for the process",defaultValue:"2024-01-01",min:"2024-01-01",max:"2024-12-31"},{id:"7",name:"Theme Color",type:"color",description:"Pick a theme color",defaultValue:"#ff0000"}],readOnly:!1}},E={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:"Short instruction",2:`This is a longer text input
+that spans multiple lines
+and demonstrates multiline capability`,3:"API_KEY_12345"},onChange:()=>{},params:[{id:"1",name:"Quick Command",type:"text",description:"Single line command or instruction",defaultValue:"help",singleLine:!0},{id:"2",name:"Description",type:"text",description:"Detailed description or documentation",defaultValue:"Enter your description here...",singleLine:!1},{id:"3",name:"API Key",type:"text",description:"Your API key (read-only in this example)",defaultValue:"sk-...",singleLine:!0}],readOnly:!1}},O={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:.7,2:"You are a helpful AI assistant",3:`Please analyze the following text:
+{input}
+
+Provide a summary and key insights.`,4:"assistant",5:"2024-07-30"},onChange:()=>{},params:[{id:"1",name:"Temperature",type:"number",description:"Model temperature setting",defaultValue:.5,min:0,max:1,step:.1},{id:"2",name:"System Prompt",type:"text",description:"System-level instructions",defaultValue:"You are a helpful assistant",singleLine:!0},{id:"3",name:"User Prompt Template",type:"text",description:"Template for user prompts",defaultValue:"Please help with: {request}",singleLine:!1},{id:"4",name:"Role",type:"selection",description:"Select a role",defaultValue:"assistant",options:[{id:"user",name:"User"},{id:"assistant",name:"Assistant"},{id:"system",name:"System"}]},{id:"5",name:"Deadline",type:"date",description:"Project deadline (read-only)",defaultValue:"2024-12-31",min:"2024-01-01",max:"2025-12-31"}],readOnly:!0}},R={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:"2024-07-30",2:"2024-01-01",3:"2025-12-31",4:"2024-06-15"},onChange:()=>{},params:[{id:"1",name:"Current Date",type:"date",description:"Today's date with no restrictions",defaultValue:"2024-07-30"},{id:"2",name:"Start Date",type:"date",description:"Project start date (minimum: 2024-01-01)",defaultValue:"2024-01-01",min:"2024-01-01"},{id:"3",name:"End Date",type:"date",description:"Project end date (maximum: 2025-12-31)",defaultValue:"2025-12-31",max:"2025-12-31"},{id:"4",name:"Event Date",type:"date",description:"Event date with both min/max constraints",defaultValue:"2024-06-15",min:"2024-01-01",max:"2024-12-31"}],readOnly:!1}},U={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:["user","assistant"],2:["javascript","typescript","python"],3:[],4:["high"]},onChange:()=>{},params:[{id:"1",name:"Allowed Roles",type:"selection",description:"Select multiple roles that are allowed",defaultValue:["user","assistant"],multiSelect:!0,options:[{id:"user",name:"User"},{id:"assistant",name:"Assistant"},{id:"system",name:"System"},{id:"admin",name:"Administrator"}]},{id:"2",name:"Programming Languages",type:"selection",description:"Choose your preferred programming languages",defaultValue:["javascript","typescript"],multiSelect:!0,options:[{id:"javascript",name:"JavaScript"},{id:"typescript",name:"TypeScript"},{id:"python",name:"Python"},{id:"java",name:"Java"},{id:"csharp",name:"C#"},{id:"go",name:"Go"},{id:"rust",name:"Rust"}]},{id:"3",name:"Categories",type:"selection",description:"Select categories (none selected by default)",defaultValue:[],multiSelect:!0,placeholder:"Category",options:[{id:"web",name:"Web Development"},{id:"mobile",name:"Mobile Development"},{id:"ai",name:"Artificial Intelligence"},{id:"data",name:"Data Science"},{id:"devops",name:"DevOps"}]},{id:"4",name:"Priority Levels",type:"selection",description:"Select priority levels for tasks",defaultValue:["high"],multiSelect:!0,options:[{id:"low",name:"Low Priority"},{id:"medium",name:"Medium Priority"},{id:"high",name:"High Priority"},{id:"urgent",name:"Urgent"}]}],readOnly:!1}},_={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:"assistant",2:["javascript","python"],3:"production",4:["feature","bugfix"]},onChange:()=>{},params:[{id:"1",name:"Default Role (Single)",type:"selection",description:"Choose one default role",defaultValue:"assistant",options:[{id:"user",name:"User"},{id:"assistant",name:"Assistant"},{id:"system",name:"System"}]},{id:"2",name:"Languages (Multi)",type:"selection",description:"Select multiple programming languages",defaultValue:["javascript"],multiSelect:!0,options:[{id:"javascript",name:"JavaScript"},{id:"python",name:"Python"},{id:"java",name:"Java"},{id:"csharp",name:"C#"}]},{id:"3",name:"Environment (Single)",type:"selection",description:"Choose deployment environment",defaultValue:"staging",options:[{id:"development",name:"Development"},{id:"staging",name:"Staging"},{id:"production",name:"Production"}]},{id:"4",name:"Branch Types (Multi)",type:"selection",description:"Select allowed branch types",defaultValue:["feature"],multiSelect:!0,options:[{id:"feature",name:"Feature Branch"},{id:"bugfix",name:"Bug Fix"},{id:"hotfix",name:"Hot Fix"},{id:"release",name:"Release Branch"}]}],readOnly:!1}},q={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{temp:.7,maxTokens:150,systemMsg:"You are a helpful assistant",promptTemplate:`Please help me with:
+{user_input}`,role:"assistant",startDate:"2024-01-01",endDate:"2024-12-31",apiUrl:"https://api.example.com",timeout:30},onChange:()=>{},groups:[{id:"llm-settings",title:"LLM Configuration",description:"Settings that control the language model behavior",collapsible:!0,defaultCollapsed:!1,params:[{id:"temp",name:"Temperature",type:"number",description:"Controls randomness in the output",defaultValue:.7,min:0,max:2,step:.1},{id:"maxTokens",name:"Max Tokens",type:"number",description:"Maximum number of tokens to generate",defaultValue:150,min:1,max:1e3,step:1}]},{id:"prompt-settings",title:"Prompt Configuration",description:"Configure your prompts and system messages",collapsible:!0,defaultCollapsed:!1,params:[{id:"systemMsg",name:"System Message",type:"text",description:"System-level instructions",defaultValue:"You are a helpful assistant",singleLine:!0},{id:"promptTemplate",name:"Prompt Template",type:"text",description:"Template for user prompts",defaultValue:"Please help with: {request}",singleLine:!1},{id:"role",name:"Default Role",type:"selection",description:"Select the default role",defaultValue:"assistant",options:[{id:"user",name:"User"},{id:"assistant",name:"Assistant"},{id:"system",name:"System"}]}]},{id:"scheduling",title:"Scheduling",description:"Date and time configuration",collapsible:!0,defaultCollapsed:!0,params:[{id:"startDate",name:"Start Date",type:"date",description:"Project start date",defaultValue:"2024-01-01",min:"2024-01-01"},{id:"endDate",name:"End Date",type:"date",description:"Project end date",defaultValue:"2024-12-31",max:"2025-12-31"}]},{id:"api-settings",title:"API Configuration",description:"External API settings and timeouts",collapsible:!0,defaultCollapsed:!0,params:[{id:"apiUrl",name:"API URL",type:"text",description:"Base URL for API calls",defaultValue:"https://api.example.com",singleLine:!0},{id:"timeout",name:"Timeout (seconds)",type:"number",description:"Request timeout in seconds",defaultValue:30,min:5,max:300,step:5}]}],readOnly:!1}},W={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{standalone:"Quick setting",temp:.8,model:"gpt-4",env:"production"},onChange:()=>{},params:[{id:"standalone",name:"Quick Setting",type:"text",description:"A standalone parameter outside of groups",defaultValue:"Quick setting",singleLine:!0}],groups:[{id:"model-config",title:"Model Configuration",collapsible:!1,description:"Settings related to AI model configuration",params:[{id:"temp",name:"Temperature",type:"number",description:"Model temperature",defaultValue:.8,min:0,max:1,step:.1},{id:"model",name:"Model",type:"selection",description:"Choose the AI model",defaultValue:"gpt-4",options:[{id:"gpt-3.5-turbo",name:"GPT-3.5 Turbo"},{id:"gpt-4",name:"GPT-4"},{id:"claude-3",name:"Claude 3"}]}]},{id:"deployment",title:"Deployment",collapsible:!0,defaultCollapsed:!1,description:"Settings related to deployment environment",params:[{id:"env",name:"Environment",type:"selection",description:"Deployment environment",defaultValue:"staging",options:[{id:"development",name:"Development"},{id:"staging",name:"Staging"},{id:"production",name:"Production"}]}]}],readOnly:!1}},Y={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:"user",2:["javascript","typescript"],3:"home-2",4:["high","medium"]},onChange:()=>{},params:[{id:"1",name:"User Role",type:"selection",description:"Select a user role with icons",defaultValue:"user",options:[{id:"user",name:"User",icon:"user"},{id:"assistant",name:"Assistant",icon:"code"},{id:"system",name:"System",icon:"component"},{id:"admin",name:"Administrator",icon:"teacher"}]},{id:"2",name:"Programming Languages",type:"selection",description:"Choose programming languages with icons",defaultValue:["javascript","typescript"],multiSelect:!0,options:[{id:"javascript",name:"JavaScript",icon:"code"},{id:"typescript",name:"TypeScript",icon:"code-1"},{id:"python",name:"Python",icon:"code-circle"},{id:"java",name:"Java",icon:"document-code"},{id:"csharp",name:"C#",icon:"component"}]},{id:"3",name:"Navigation Section",type:"selection",description:"Choose a navigation section with icons",defaultValue:"home-2",options:[{id:"home-2",name:"Home",icon:"home-2"},{id:"folder-2",name:"Projects",icon:"folder-2"},{id:"user",name:"Profile",icon:"user"},{id:"wallet-2",name:"Billing",icon:"wallet-2"},{id:"component",name:"Settings",icon:"component"}]},{id:"4",name:"Priority Levels",type:"selection",description:"Select priority levels with status icons",defaultValue:["high"],multiSelect:!0,options:[{id:"low",name:"Low Priority",icon:"arrow-down"},{id:"medium",name:"Medium Priority",icon:"minus"},{id:"high",name:"High Priority",icon:"arrow-up-3"},{id:"urgent",name:"Urgent",icon:"danger"}]}],readOnly:!1}},B={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{1:.7,2:"You are a helpful assistant",3:"user",4:"2024-01-01"},onChange:()=>{},params:[{id:"1",name:"Temperature",type:"number",description:"Controls randomness in the output",defaultValue:.7,min:0,max:2,step:.1},{id:"2",name:"System Message",type:"text",description:"System-level instructions for the AI",defaultValue:"You are a helpful assistant",singleLine:!0},{id:"3",name:"User Role",type:"selection",description:"Select a user role",defaultValue:"user",options:[{id:"user",name:"User",icon:"user"},{id:"assistant",name:"Assistant",icon:"code"},{id:"system",name:"System",icon:"component"}]},{id:"4",name:"Start Date",type:"date",description:"Project start date",defaultValue:"2024-01-01"}],fullWidth:!0,readOnly:!1}},G={render:i=>t.jsx(j,{padding:"md",children:t.jsx(P,{...i})}),args:{defaultValues:{temp:.7,maxTokens:150,systemMsg:"You are a helpful assistant",role:"assistant",startDate:"2024-01-01",apiUrl:"https://api.example.com"},onChange:()=>{},groups:[{id:"model-settings",title:"Model Configuration",description:"Configure model parameters and behavior",params:[{id:"temp",name:"Temperature",type:"number",description:"Controls randomness in the output",defaultValue:.7,min:0,max:2,step:.1},{id:"maxTokens",name:"Max Tokens",type:"number",description:"Maximum number of tokens to generate",defaultValue:150,min:1,max:1e3,step:1}]},{id:"prompt-settings",title:"Prompt Configuration",description:"Customize prompt behavior and context",params:[{id:"systemMsg",name:"System Message",type:"text",description:"System-level instructions",defaultValue:"You are a helpful assistant",singleLine:!0},{id:"role",name:"Assistant Role",type:"selection",description:"Choose the assistant's role",defaultValue:"assistant",options:[{id:"assistant",name:"Assistant",icon:"code"},{id:"teacher",name:"Teacher",icon:"teacher"},{id:"consultant",name:"Consultant",icon:"user"}]}]},{id:"api-settings",title:"API Configuration",description:"Configure API endpoints and timing",params:[{id:"apiUrl",name:"API Endpoint",type:"text",description:"Base URL for API requests",defaultValue:"https://api.example.com",singleLine:!0},{id:"startDate",name:"Start Date",type:"date",description:"Project start date",defaultValue:"2024-01-01"}]}],fullWidth:!0,readOnly:!1}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": 5,
+      "2": 5,
+      "3": "Hello World",
+      "4": "This is a multiline text example\\nwith multiple lines",
+      "5": "user",
+      "6": "2024-07-30",
+      "7": "#ff0000"
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Temperature",
+      type: "number",
+      description: "Controls randomness in the output",
+      defaultValue: 1,
+      min: 0,
+      max: 2,
+      step: 0.1
+    }, {
+      id: "2",
+      name: "Max Tokens",
+      type: "number",
+      description: "Maximum number of tokens to generate",
+      defaultValue: 100,
+      min: 1,
+      max: 1000,
+      step: 1
+    }, {
+      id: "3",
+      name: "System Message",
+      type: "text",
+      description: "Single line system instruction",
+      defaultValue: "You are a helpful assistant",
+      singleLine: true
+    }, {
+      id: "4",
+      name: "Prompt Template",
+      type: "text",
+      description: "Multi-line prompt template",
+      defaultValue: "Please help me with:\\n{user_input}",
+      singleLine: false
+    }, {
+      id: "5",
+      name: "Role",
+      type: "selection",
+      description: "Select a role",
+      defaultValue: "user",
+      options: [{
+        id: "user",
+        name: "User"
+      }, {
+        id: "assistant",
+        name: "Assistant"
+      }, {
+        id: "system",
+        name: "System"
+      }]
+    }, {
+      id: "6",
+      name: "Start Date",
+      type: "date",
+      description: "Select the start date for the process",
+      defaultValue: "2024-01-01",
+      min: "2024-01-01",
+      max: "2024-12-31"
+    }, {
+      id: "7",
+      name: "Theme Color",
+      type: "color",
+      description: "Pick a theme color",
+      defaultValue: "#ff0000"
+    }],
+    readOnly: false
+  }
+}`,...k.parameters?.docs?.source}}};E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": "Short instruction",
+      "2": "This is a longer text input\\nthat spans multiple lines\\nand demonstrates multiline capability",
+      "3": "API_KEY_12345"
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Quick Command",
+      type: "text",
+      description: "Single line command or instruction",
+      defaultValue: "help",
+      singleLine: true
+    }, {
+      id: "2",
+      name: "Description",
+      type: "text",
+      description: "Detailed description or documentation",
+      defaultValue: "Enter your description here...",
+      singleLine: false
+    }, {
+      id: "3",
+      name: "API Key",
+      type: "text",
+      description: "Your API key (read-only in this example)",
+      defaultValue: "sk-...",
+      singleLine: true
+    }],
+    readOnly: false
+  }
+}`,...E.parameters?.docs?.source}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": 0.7,
+      "2": "You are a helpful AI assistant",
+      "3": "Please analyze the following text:\\n{input}\\n\\nProvide a summary and key insights.",
+      "4": "assistant",
+      "5": "2024-07-30"
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Temperature",
+      type: "number",
+      description: "Model temperature setting",
+      defaultValue: 0.5,
+      min: 0,
+      max: 1,
+      step: 0.1
+    }, {
+      id: "2",
+      name: "System Prompt",
+      type: "text",
+      description: "System-level instructions",
+      defaultValue: "You are a helpful assistant",
+      singleLine: true
+    }, {
+      id: "3",
+      name: "User Prompt Template",
+      type: "text",
+      description: "Template for user prompts",
+      defaultValue: "Please help with: {request}",
+      singleLine: false
+    }, {
+      id: "4",
+      name: "Role",
+      type: "selection",
+      description: "Select a role",
+      defaultValue: "assistant",
+      options: [{
+        id: "user",
+        name: "User"
+      }, {
+        id: "assistant",
+        name: "Assistant"
+      }, {
+        id: "system",
+        name: "System"
+      }]
+    }, {
+      id: "5",
+      name: "Deadline",
+      type: "date",
+      description: "Project deadline (read-only)",
+      defaultValue: "2024-12-31",
+      min: "2024-01-01",
+      max: "2025-12-31"
+    }],
+    readOnly: true
+  }
+}`,...O.parameters?.docs?.source}}};R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": "2024-07-30",
+      "2": "2024-01-01",
+      "3": "2025-12-31",
+      "4": "2024-06-15"
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Current Date",
+      type: "date",
+      description: "Today's date with no restrictions",
+      defaultValue: "2024-07-30"
+    }, {
+      id: "2",
+      name: "Start Date",
+      type: "date",
+      description: "Project start date (minimum: 2024-01-01)",
+      defaultValue: "2024-01-01",
+      min: "2024-01-01"
+    }, {
+      id: "3",
+      name: "End Date",
+      type: "date",
+      description: "Project end date (maximum: 2025-12-31)",
+      defaultValue: "2025-12-31",
+      max: "2025-12-31"
+    }, {
+      id: "4",
+      name: "Event Date",
+      type: "date",
+      description: "Event date with both min/max constraints",
+      defaultValue: "2024-06-15",
+      min: "2024-01-01",
+      max: "2024-12-31"
+    }],
+    readOnly: false
+  }
+}`,...R.parameters?.docs?.source}}};U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": ["user", "assistant"],
+      "2": ["javascript", "typescript", "python"],
+      "3": [],
+      "4": ["high"]
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Allowed Roles",
+      type: "selection",
+      description: "Select multiple roles that are allowed",
+      defaultValue: ["user", "assistant"],
+      multiSelect: true,
+      options: [{
+        id: "user",
+        name: "User"
+      }, {
+        id: "assistant",
+        name: "Assistant"
+      }, {
+        id: "system",
+        name: "System"
+      }, {
+        id: "admin",
+        name: "Administrator"
+      }]
+    }, {
+      id: "2",
+      name: "Programming Languages",
+      type: "selection",
+      description: "Choose your preferred programming languages",
+      defaultValue: ["javascript", "typescript"],
+      multiSelect: true,
+      options: [{
+        id: "javascript",
+        name: "JavaScript"
+      }, {
+        id: "typescript",
+        name: "TypeScript"
+      }, {
+        id: "python",
+        name: "Python"
+      }, {
+        id: "java",
+        name: "Java"
+      }, {
+        id: "csharp",
+        name: "C#"
+      }, {
+        id: "go",
+        name: "Go"
+      }, {
+        id: "rust",
+        name: "Rust"
+      }]
+    }, {
+      id: "3",
+      name: "Categories",
+      type: "selection",
+      description: "Select categories (none selected by default)",
+      defaultValue: [],
+      multiSelect: true,
+      placeholder: "Category",
+      options: [{
+        id: "web",
+        name: "Web Development"
+      }, {
+        id: "mobile",
+        name: "Mobile Development"
+      }, {
+        id: "ai",
+        name: "Artificial Intelligence"
+      }, {
+        id: "data",
+        name: "Data Science"
+      }, {
+        id: "devops",
+        name: "DevOps"
+      }]
+    }, {
+      id: "4",
+      name: "Priority Levels",
+      type: "selection",
+      description: "Select priority levels for tasks",
+      defaultValue: ["high"],
+      multiSelect: true,
+      options: [{
+        id: "low",
+        name: "Low Priority"
+      }, {
+        id: "medium",
+        name: "Medium Priority"
+      }, {
+        id: "high",
+        name: "High Priority"
+      }, {
+        id: "urgent",
+        name: "Urgent"
+      }]
+    }],
+    readOnly: false
+  }
+}`,...U.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": "assistant",
+      "2": ["javascript", "python"],
+      "3": "production",
+      "4": ["feature", "bugfix"]
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Default Role (Single)",
+      type: "selection",
+      description: "Choose one default role",
+      defaultValue: "assistant",
+      options: [{
+        id: "user",
+        name: "User"
+      }, {
+        id: "assistant",
+        name: "Assistant"
+      }, {
+        id: "system",
+        name: "System"
+      }]
+    }, {
+      id: "2",
+      name: "Languages (Multi)",
+      type: "selection",
+      description: "Select multiple programming languages",
+      defaultValue: ["javascript"],
+      multiSelect: true,
+      options: [{
+        id: "javascript",
+        name: "JavaScript"
+      }, {
+        id: "python",
+        name: "Python"
+      }, {
+        id: "java",
+        name: "Java"
+      }, {
+        id: "csharp",
+        name: "C#"
+      }]
+    }, {
+      id: "3",
+      name: "Environment (Single)",
+      type: "selection",
+      description: "Choose deployment environment",
+      defaultValue: "staging",
+      options: [{
+        id: "development",
+        name: "Development"
+      }, {
+        id: "staging",
+        name: "Staging"
+      }, {
+        id: "production",
+        name: "Production"
+      }]
+    }, {
+      id: "4",
+      name: "Branch Types (Multi)",
+      type: "selection",
+      description: "Select allowed branch types",
+      defaultValue: ["feature"],
+      multiSelect: true,
+      options: [{
+        id: "feature",
+        name: "Feature Branch"
+      }, {
+        id: "bugfix",
+        name: "Bug Fix"
+      }, {
+        id: "hotfix",
+        name: "Hot Fix"
+      }, {
+        id: "release",
+        name: "Release Branch"
+      }]
+    }],
+    readOnly: false
+  }
+}`,..._.parameters?.docs?.source}}};q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      temp: 0.7,
+      maxTokens: 150,
+      systemMsg: "You are a helpful assistant",
+      promptTemplate: "Please help me with:\\n{user_input}",
+      role: "assistant",
+      startDate: "2024-01-01",
+      endDate: "2024-12-31",
+      apiUrl: "https://api.example.com",
+      timeout: 30
+    },
+    onChange: () => {},
+    groups: [{
+      id: "llm-settings",
+      title: "LLM Configuration",
+      description: "Settings that control the language model behavior",
+      collapsible: true,
+      defaultCollapsed: false,
+      params: [{
+        id: "temp",
+        name: "Temperature",
+        type: "number",
+        description: "Controls randomness in the output",
+        defaultValue: 0.7,
+        min: 0,
+        max: 2,
+        step: 0.1
+      }, {
+        id: "maxTokens",
+        name: "Max Tokens",
+        type: "number",
+        description: "Maximum number of tokens to generate",
+        defaultValue: 150,
+        min: 1,
+        max: 1000,
+        step: 1
+      }]
+    }, {
+      id: "prompt-settings",
+      title: "Prompt Configuration",
+      description: "Configure your prompts and system messages",
+      collapsible: true,
+      defaultCollapsed: false,
+      params: [{
+        id: "systemMsg",
+        name: "System Message",
+        type: "text",
+        description: "System-level instructions",
+        defaultValue: "You are a helpful assistant",
+        singleLine: true
+      }, {
+        id: "promptTemplate",
+        name: "Prompt Template",
+        type: "text",
+        description: "Template for user prompts",
+        defaultValue: "Please help with: {request}",
+        singleLine: false
+      }, {
+        id: "role",
+        name: "Default Role",
+        type: "selection",
+        description: "Select the default role",
+        defaultValue: "assistant",
+        options: [{
+          id: "user",
+          name: "User"
+        }, {
+          id: "assistant",
+          name: "Assistant"
+        }, {
+          id: "system",
+          name: "System"
+        }]
+      }]
+    }, {
+      id: "scheduling",
+      title: "Scheduling",
+      description: "Date and time configuration",
+      collapsible: true,
+      defaultCollapsed: true,
+      params: [{
+        id: "startDate",
+        name: "Start Date",
+        type: "date",
+        description: "Project start date",
+        defaultValue: "2024-01-01",
+        min: "2024-01-01"
+      }, {
+        id: "endDate",
+        name: "End Date",
+        type: "date",
+        description: "Project end date",
+        defaultValue: "2024-12-31",
+        max: "2025-12-31"
+      }]
+    }, {
+      id: "api-settings",
+      title: "API Configuration",
+      description: "External API settings and timeouts",
+      collapsible: true,
+      defaultCollapsed: true,
+      params: [{
+        id: "apiUrl",
+        name: "API URL",
+        type: "text",
+        description: "Base URL for API calls",
+        defaultValue: "https://api.example.com",
+        singleLine: true
+      }, {
+        id: "timeout",
+        name: "Timeout (seconds)",
+        type: "number",
+        description: "Request timeout in seconds",
+        defaultValue: 30,
+        min: 5,
+        max: 300,
+        step: 5
+      }]
+    }],
+    readOnly: false
+  }
+}`,...q.parameters?.docs?.source}}};W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      standalone: "Quick setting",
+      temp: 0.8,
+      model: "gpt-4",
+      env: "production"
+    },
+    onChange: () => {},
+    params: [{
+      id: "standalone",
+      name: "Quick Setting",
+      type: "text",
+      description: "A standalone parameter outside of groups",
+      defaultValue: "Quick setting",
+      singleLine: true
+    }],
+    groups: [{
+      id: "model-config",
+      title: "Model Configuration",
+      collapsible: false,
+      description: "Settings related to AI model configuration",
+      params: [{
+        id: "temp",
+        name: "Temperature",
+        type: "number",
+        description: "Model temperature",
+        defaultValue: 0.8,
+        min: 0,
+        max: 1,
+        step: 0.1
+      }, {
+        id: "model",
+        name: "Model",
+        type: "selection",
+        description: "Choose the AI model",
+        defaultValue: "gpt-4",
+        options: [{
+          id: "gpt-3.5-turbo",
+          name: "GPT-3.5 Turbo"
+        }, {
+          id: "gpt-4",
+          name: "GPT-4"
+        }, {
+          id: "claude-3",
+          name: "Claude 3"
+        }]
+      }]
+    }, {
+      id: "deployment",
+      title: "Deployment",
+      collapsible: true,
+      defaultCollapsed: false,
+      description: "Settings related to deployment environment",
+      params: [{
+        id: "env",
+        name: "Environment",
+        type: "selection",
+        description: "Deployment environment",
+        defaultValue: "staging",
+        options: [{
+          id: "development",
+          name: "Development"
+        }, {
+          id: "staging",
+          name: "Staging"
+        }, {
+          id: "production",
+          name: "Production"
+        }]
+      }]
+    }],
+    readOnly: false
+  }
+}`,...W.parameters?.docs?.source}}};Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": "user",
+      "2": ["javascript", "typescript"],
+      "3": "home-2",
+      "4": ["high", "medium"]
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "User Role",
+      type: "selection",
+      description: "Select a user role with icons",
+      defaultValue: "user",
+      options: [{
+        id: "user",
+        name: "User",
+        icon: "user"
+      }, {
+        id: "assistant",
+        name: "Assistant",
+        icon: "code"
+      }, {
+        id: "system",
+        name: "System",
+        icon: "component"
+      }, {
+        id: "admin",
+        name: "Administrator",
+        icon: "teacher"
+      }]
+    }, {
+      id: "2",
+      name: "Programming Languages",
+      type: "selection",
+      description: "Choose programming languages with icons",
+      defaultValue: ["javascript", "typescript"],
+      multiSelect: true,
+      options: [{
+        id: "javascript",
+        name: "JavaScript",
+        icon: "code"
+      }, {
+        id: "typescript",
+        name: "TypeScript",
+        icon: "code-1"
+      }, {
+        id: "python",
+        name: "Python",
+        icon: "code-circle"
+      }, {
+        id: "java",
+        name: "Java",
+        icon: "document-code"
+      }, {
+        id: "csharp",
+        name: "C#",
+        icon: "component"
+      }]
+    }, {
+      id: "3",
+      name: "Navigation Section",
+      type: "selection",
+      description: "Choose a navigation section with icons",
+      defaultValue: "home-2",
+      options: [{
+        id: "home-2",
+        name: "Home",
+        icon: "home-2"
+      }, {
+        id: "folder-2",
+        name: "Projects",
+        icon: "folder-2"
+      }, {
+        id: "user",
+        name: "Profile",
+        icon: "user"
+      }, {
+        id: "wallet-2",
+        name: "Billing",
+        icon: "wallet-2"
+      }, {
+        id: "component",
+        name: "Settings",
+        icon: "component"
+      }]
+    }, {
+      id: "4",
+      name: "Priority Levels",
+      type: "selection",
+      description: "Select priority levels with status icons",
+      defaultValue: ["high"],
+      multiSelect: true,
+      options: [{
+        id: "low",
+        name: "Low Priority",
+        icon: "arrow-down"
+      }, {
+        id: "medium",
+        name: "Medium Priority",
+        icon: "minus"
+      }, {
+        id: "high",
+        name: "High Priority",
+        icon: "arrow-up-3"
+      }, {
+        id: "urgent",
+        name: "Urgent",
+        icon: "danger"
+      }]
+    }],
+    readOnly: false
+  }
+}`,...Y.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      "1": 0.7,
+      "2": "You are a helpful assistant",
+      "3": "user",
+      "4": "2024-01-01"
+    },
+    onChange: () => {},
+    params: [{
+      id: "1",
+      name: "Temperature",
+      type: "number",
+      description: "Controls randomness in the output",
+      defaultValue: 0.7,
+      min: 0,
+      max: 2,
+      step: 0.1
+    }, {
+      id: "2",
+      name: "System Message",
+      type: "text",
+      description: "System-level instructions for the AI",
+      defaultValue: "You are a helpful assistant",
+      singleLine: true
+    }, {
+      id: "3",
+      name: "User Role",
+      type: "selection",
+      description: "Select a user role",
+      defaultValue: "user",
+      options: [{
+        id: "user",
+        name: "User",
+        icon: "user"
+      }, {
+        id: "assistant",
+        name: "Assistant",
+        icon: "code"
+      }, {
+        id: "system",
+        name: "System",
+        icon: "component"
+      }]
+    }, {
+      id: "4",
+      name: "Start Date",
+      type: "date",
+      description: "Project start date",
+      defaultValue: "2024-01-01"
+    }],
+    fullWidth: true,
+    readOnly: false
+  }
+}`,...B.parameters?.docs?.source}}};G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  render: props => {
+    return <Container padding="md">
+        <ParamEditor {...props} />
+      </Container>;
+  },
+  args: {
+    defaultValues: {
+      temp: 0.7,
+      maxTokens: 150,
+      systemMsg: "You are a helpful assistant",
+      role: "assistant",
+      startDate: "2024-01-01",
+      apiUrl: "https://api.example.com"
+    },
+    onChange: () => {},
+    groups: [{
+      id: "model-settings",
+      title: "Model Configuration",
+      description: "Configure model parameters and behavior",
+      params: [{
+        id: "temp",
+        name: "Temperature",
+        type: "number",
+        description: "Controls randomness in the output",
+        defaultValue: 0.7,
+        min: 0,
+        max: 2,
+        step: 0.1
+      }, {
+        id: "maxTokens",
+        name: "Max Tokens",
+        type: "number",
+        description: "Maximum number of tokens to generate",
+        defaultValue: 150,
+        min: 1,
+        max: 1000,
+        step: 1
+      }]
+    }, {
+      id: "prompt-settings",
+      title: "Prompt Configuration",
+      description: "Customize prompt behavior and context",
+      params: [{
+        id: "systemMsg",
+        name: "System Message",
+        type: "text",
+        description: "System-level instructions",
+        defaultValue: "You are a helpful assistant",
+        singleLine: true
+      }, {
+        id: "role",
+        name: "Assistant Role",
+        type: "selection",
+        description: "Choose the assistant's role",
+        defaultValue: "assistant",
+        options: [{
+          id: "assistant",
+          name: "Assistant",
+          icon: "code"
+        }, {
+          id: "teacher",
+          name: "Teacher",
+          icon: "teacher"
+        }, {
+          id: "consultant",
+          name: "Consultant",
+          icon: "user"
+        }]
+      }]
+    }, {
+      id: "api-settings",
+      title: "API Configuration",
+      description: "Configure API endpoints and timing",
+      params: [{
+        id: "apiUrl",
+        name: "API Endpoint",
+        type: "text",
+        description: "Base URL for API requests",
+        defaultValue: "https://api.example.com",
+        singleLine: true
+      }, {
+        id: "startDate",
+        name: "Start Date",
+        type: "date",
+        description: "Project start date",
+        defaultValue: "2024-01-01"
+      }]
+    }],
+    fullWidth: true,
+    readOnly: false
+  }
+}`,...G.parameters?.docs?.source}}};const ln=["Demo","TextInputFocus","ReadOnly","DateInputs","MultiSelectExamples","MixedSelectionTypes","WithInputGroups","MixedGroupsAndParams","SelectionsWithIcons","FullWidth","GroupsWithSeparators"];export{R as DateInputs,k as Demo,B as FullWidth,G as GroupsWithSeparators,W as MixedGroupsAndParams,_ as MixedSelectionTypes,U as MultiSelectExamples,O as ReadOnly,Y as SelectionsWithIcons,E as TextInputFocus,q as WithInputGroups,ln as __namedExportsOrder,on as default};