@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.3

package/dist/entry-By211Wlw.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-BT8_EkuZ.cjs');
+
+const Entry = ({ label, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-md", className: "text-neutral3", children: label }),
+    children
+  ] });
+};
+
+exports.Entry = Entry;
+//# sourceMappingURL=entry-By211Wlw.cjs.map

package/dist/entry-By211Wlw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-By211Wlw.cjs","sources":["../src/ds/components/Entry/entry.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt/Txt';\n\nexport type EntryProps = {\n  label: ReactNode;\n  children: ReactNode;\n};\n\nexport const Entry = ({ label, children }: EntryProps) => {\n  return (\n    <div className=\"space-y-2\">\n      <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral3\">\n        {label}\n      </Txt>\n\n      {children}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Txt"],"mappings":";;;;;AAQO,MAAM,KAAA,GAAQ,CAAC,EAAE,KAAA,EAAO,UAAS,KAAkB;AACxD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,WAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,iBACnC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAEC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/entry-Dn_tH23N.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-p33XTnu8.js';
+
+const Entry = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-neutral3", children: label }),
+    children
+  ] });
+};
+
+export { Entry as E };
+//# sourceMappingURL=entry-Dn_tH23N.js.map

package/dist/entry-Dn_tH23N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-Dn_tH23N.js","sources":["../src/ds/components/Entry/entry.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt/Txt';\n\nexport type EntryProps = {\n  label: ReactNode;\n  children: ReactNode;\n};\n\nexport const Entry = ({ label, children }: EntryProps) => {\n  return (\n    <div className=\"space-y-2\">\n      <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral3\">\n        {label}\n      </Txt>\n\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,KAAA,GAAQ,CAAC,EAAE,KAAA,EAAO,UAAS,KAAkB;AACxD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,iBACnC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAEC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/environment-variables-editor-BQma-nhE.cjs

@@ -0,0 +1,519 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-BVNuv0IS.cjs');
+const Notice = require('./Notice-wX_dMPTN.cjs');
+const envFile = require('./env-file-NaBwN1WJ.cjs');
+const dataList = require('./data-list-fdicRqId.cjs');
+const hooks_useCopyToClipboard = require('./use-copy-to-clipboard-y495_Ckw.cjs');
+const fieldBlock = require('./field-block-BR_ZD9QO.cjs');
+const inputGroup = require('./input-group-BJUC93w1.cjs');
+
+function EnvironmentVariablesEditorActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-2", className), ...props });
+}
+
+const EnvironmentVariablesEditorContext = React.createContext(null);
+const EnvironmentVariablesEditorReadOnlyListContext = React.createContext({
+  showIcon: false
+});
+function useEnvironmentVariablesEditorContext(componentName) {
+  const context = React.use(EnvironmentVariablesEditorContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within EnvironmentVariablesEditor.Root`);
+  }
+  return context;
+}
+
+function EnvironmentVariablesEditorAddButton({
+  className,
+  children,
+  ...props
+}) {
+  const { editor, disabled, readOnly } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.AddButton");
+  if (readOnly) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border1" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { type: "button", variant: "ghost", size: "sm", disabled, onClick: () => editor.appendRow(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, {}),
+      children ?? "Add Variable"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border1" })
+  ] });
+}
+
+function EnvironmentVariablesEditorMessages({
+  error,
+  children,
+  variant = "destructive",
+  ...props
+}) {
+  const message = children ?? error;
+  if (!message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice.Message, { children: message }) });
+}
+
+function EnvironmentVariablesEditorDuplicateKeysError({
+  message = envFile.DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE,
+  ...props
+}) {
+  const { editor } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.DuplicateKeysError");
+  if (!editor.hasDuplicateKeys) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorMessages, { error: message, ...props });
+}
+
+function EnvironmentVariablesEditorReadOnlyEmpty({
+  message = "No environment variables found",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.NoMatch, { message, ...props });
+}
+
+function EnvironmentVariablesEditorReadOnlyHeader({
+  className,
+  nameLabel = "Key",
+  valueLabel = "Value",
+  updatedAtLabel = "Last Updated",
+  ...props
+}) {
+  const { showIcon } = React.use(EnvironmentVariablesEditorReadOnlyListContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataList.DataList.Top, { className, ...props, children: [
+    showIcon && /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { "aria-hidden": "true", className: "justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { children: nameLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { children: valueLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { className: "justify-end", children: updatedAtLabel })
+  ] });
+}
+
+function EnvironmentVariablesEditorReadOnlyItem({
+  className,
+  name,
+  value,
+  copyValue,
+  copyLabel = "Copy value",
+  updatedAt,
+  revealed,
+  defaultRevealed,
+  onRevealedChange,
+  actor,
+  icon,
+  ...props
+}) {
+  const { showIcon } = React.use(EnvironmentVariablesEditorReadOnlyListContext);
+  const [uncontrolledRevealed, setUncontrolledRevealed] = React.useState(defaultRevealed ?? false);
+  const { isCopied, copyToClipboard } = hooks_useCopyToClipboard.useCopyToClipboard({ copiedDuration: 1500, showToast: false });
+  const isRevealed = revealed ?? uncontrolledRevealed;
+  const displayedValue = isRevealed ? value : "************";
+  const leadingIcon = icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2Icon, {});
+  const resolvedCopyValue = copyValue ?? getCopyableReadOnlyValue(value);
+  const canCopyValue = isRevealed && Boolean(resolvedCopyValue);
+  function toggleRevealed() {
+    const nextRevealed = !isRevealed;
+    if (revealed === void 0) {
+      setUncontrolledRevealed(nextRevealed);
+    }
+    onRevealedChange?.(nextRevealed);
+  }
+  function handleCopyValue() {
+    if (!resolvedCopyValue) return;
+    copyToClipboard(resolvedCopyValue);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataList.DataList.RowStatic, { className: utils_cn.cn("min-h-14", className), ...props, children: [
+    showIcon && /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.Cell, { height: "compact", className: "justify-items-center overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 items-center justify-center rounded-full border border-border1 text-neutral3 [&>svg]:size-3.5", children: leadingIcon }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.MonoCell, { height: "compact", className: "text-ui-sm text-neutral6", children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.Cell, { height: "compact", className: "min-w-0", children: value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          "aria-label": isRevealed ? "Hide value" : "Show value",
+          onClick: toggleRevealed,
+          children: isRevealed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOffIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group relative flex min-w-0 flex-1 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils_cn.cn(
+              "block min-w-0 flex-1 truncate font-mono text-ui-xs text-neutral4",
+              canCopyValue && "pr-7"
+            ),
+            children: displayedValue
+          }
+        ),
+        canCopyValue && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs",
+            "aria-label": isCopied ? "Copied value" : copyLabel,
+            tooltip: isCopied ? "Copied" : copyLabel,
+            className: "absolute right-0 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+            onClick: handleCopyValue,
+            children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { "aria-hidden": true })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.Cell, { height: "compact", className: "min-w-0 justify-items-end text-ui-xs text-neutral3", children: (updatedAt || actor) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: updatedAt }),
+      actor
+    ] }) })
+  ] });
+}
+function getCopyableReadOnlyValue(value) {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  return void 0;
+}
+
+const READ_ONLY_COLUMNS = "minmax(12rem,1.4fr) minmax(8rem,0.9fr) minmax(8rem,auto)";
+const READ_ONLY_COLUMNS_WITH_ICON = `auto ${READ_ONLY_COLUMNS}`;
+function EnvironmentVariablesEditorReadOnlyList({
+  className,
+  children,
+  columns,
+  header,
+  showHeader = true,
+  showIcon = false,
+  nameLabel,
+  valueLabel,
+  updatedAtLabel,
+  variant = "lined",
+  scrollRef,
+  ...props
+}) {
+  const resolvedColumns = columns ?? (showIcon ? READ_ONLY_COLUMNS_WITH_ICON : READ_ONLY_COLUMNS);
+  const contextValue = React.useMemo(() => ({ showIcon }), [showIcon]);
+  return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorReadOnlyListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    dataList.DataList,
+    {
+      columns: resolvedColumns,
+      variant,
+      scrollRef,
+      className: utils_cn.cn("min-h-0", className),
+      ...props,
+      children: [
+        showHeader && (header ?? /* @__PURE__ */ jsxRuntime.jsx(
+          EnvironmentVariablesEditorReadOnlyHeader,
+          {
+            nameLabel,
+            valueLabel,
+            updatedAtLabel
+          }
+        )),
+        children
+      ]
+    }
+  ) });
+}
+
+function EnvironmentVariablesEditorRoot({
+  editor,
+  className,
+  children,
+  disabled,
+  readOnly,
+  rowErrors,
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({
+      editor: {
+        rows: editor.rows,
+        uploadError: editor.uploadError,
+        fileInputRef: editor.fileInputRef,
+        hasDuplicateKeys: editor.hasDuplicateKeys,
+        updateRow: editor.updateRow,
+        removeRow: editor.removeRow,
+        handleFileUpload: editor.handleFileUpload,
+        handlePaste: editor.handlePaste,
+        getRowId: editor.getRowId,
+        isValueRevealed: editor.isValueRevealed,
+        toggleValueVisibility: editor.toggleValueVisibility,
+        rowHasDuplicateKey: editor.rowHasDuplicateKey,
+        appendRow: () => editor.appendRow()
+      },
+      disabled: Boolean(disabled),
+      readOnly: Boolean(readOnly),
+      rowErrors
+    }),
+    [editor, disabled, readOnly, rowErrors]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props, children }) });
+}
+
+function EnvironmentVariablesEditorRow({
+  row,
+  index,
+  rowErrors,
+  keyLabel = "Key",
+  valueLabel = "Value",
+  keyPlaceholder = "e.g: OPEN_AI_KEY",
+  valuePlaceholder = "e.g: sk-xxxxxxxx",
+  duplicateKeyMessage = envFile.DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE,
+  className,
+  ...props
+}) {
+  const {
+    editor,
+    disabled,
+    readOnly,
+    rowErrors: contextRowErrors
+  } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.Row");
+  const isDisabled = disabled || readOnly;
+  const resolvedRowErrors = rowErrors ?? contextRowErrors;
+  const keyError = resolvedRowErrors?.[index]?.key ?? (editor.rowHasDuplicateKey(index) ? duplicateKeyMessage : null);
+  const valueError = resolvedRowErrors?.[index]?.value;
+  const keyFieldName = `env-key-${index}`;
+  const valueFieldName = `env-value-${index}`;
+  const keyInputId = `input-${keyFieldName}`;
+  const valueInputId = `input-${valueFieldName}`;
+  const revealValueLabel = editor.isValueRevealed(index) ? "Hide value" : "Show value";
+  const removeRowLabel = `Remove environment variable ${row.key.trim() || index + 1}`;
+  function handlePaste(text) {
+    return editor.handlePaste(index, text);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex flex-col items-stretch gap-2 sm:flex-row sm:items-start", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Layout, { children: /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name: keyFieldName, children: keyLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroup, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        inputGroup.InputGroupInput,
+        {
+          id: keyInputId,
+          placeholder: keyPlaceholder,
+          className: "font-mono",
+          value: row.key,
+          disabled: isDisabled,
+          error: Boolean(keyError),
+          onChange: (event) => editor.updateRow(index, { key: event.target.value }),
+          onPaste: (event) => {
+            if (handlePaste(event.clipboardData.getData("text"))) {
+              event.preventDefault();
+            }
+          }
+        }
+      ) }),
+      keyError && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: keyError })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Layout, { children: /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name: valueFieldName, children: valueLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs(inputGroup.InputGroup, { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          inputGroup.InputGroupInput,
+          {
+            id: valueInputId,
+            placeholder: valuePlaceholder,
+            className: "font-mono",
+            type: editor.isValueRevealed(index) ? "text" : "password",
+            value: row.value,
+            disabled: isDisabled,
+            error: Boolean(valueError),
+            onChange: (event) => editor.updateRow(index, { value: event.target.value }),
+            onPaste: (event) => {
+              if (handlePaste(event.clipboardData.getData("text"))) {
+                event.preventDefault();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          inputGroup.InputGroupButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            disabled: isDisabled,
+            "aria-label": revealValueLabel,
+            tooltip: revealValueLabel,
+            onClick: () => editor.toggleValueVisibility(index),
+            children: editor.isValueRevealed(index) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOffIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { "aria-hidden": true })
+          }
+        ) })
+      ] }),
+      valueError && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: valueError })
+    ] }) }) }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 self-end sm:self-auto sm:pt-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-md",
+        disabled,
+        "aria-label": removeRowLabel,
+        tooltip: "Remove variable",
+        onClick: () => editor.removeRow(index),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, {})
+      }
+    ) })
+  ] });
+}
+
+function EnvironmentVariablesEditorRows({
+  className,
+  rowErrors,
+  keyLabel,
+  valueLabel,
+  keyPlaceholder,
+  valuePlaceholder,
+  duplicateKeyMessage,
+  ...props
+}) {
+  const { editor, rowErrors: contextRowErrors } = useEnvironmentVariablesEditorContext(
+    "EnvironmentVariablesEditor.Rows"
+  );
+  const resolvedRowErrors = rowErrors ?? contextRowErrors;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("space-y-2", className), ...props, children: editor.rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    EnvironmentVariablesEditorRow,
+    {
+      row,
+      index,
+      rowErrors: resolvedRowErrors,
+      keyLabel,
+      valueLabel,
+      keyPlaceholder,
+      valuePlaceholder,
+      duplicateKeyMessage
+    },
+    editor.getRowId(index)
+  )) });
+}
+
+function EnvironmentVariablesEditorUploadButton({
+  children = "Import .env",
+  inputLabel = "Import .env file",
+  disabled,
+  onClick,
+  type = "button",
+  variant = "ghost",
+  size = "sm",
+  ...props
+}) {
+  const {
+    editor,
+    disabled: contextDisabled,
+    readOnly
+  } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.UploadButton");
+  const isDisabled = contextDisabled || disabled;
+  if (readOnly) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: editor.fileInputRef,
+        type: "file",
+        accept: ".env,text/plain",
+        "aria-label": inputLabel,
+        className: "hidden",
+        disabled: isDisabled,
+        onChange: editor.handleFileUpload
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button.Button,
+      {
+        type,
+        variant,
+        size,
+        disabled: isDisabled,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            editor.fileInputRef.current?.click();
+          }
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadIcon, {}),
+          children
+        ]
+      }
+    )
+  ] });
+}
+
+function EnvironmentVariablesEditorUpload({
+  className,
+  children,
+  ...props
+}) {
+  const { readOnly } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.Upload");
+  if (readOnly) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center justify-end gap-2", className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorUploadButton, {}) });
+}
+
+function EnvironmentVariablesEditorUploadError(props) {
+  const { editor } = useEnvironmentVariablesEditorContext("EnvironmentVariablesEditor.UploadError");
+  if (!editor.uploadError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorMessages, { error: editor.uploadError, ...props });
+}
+
+const renderEnvironmentVariablesEditor = ({
+  className,
+  children,
+  addLabel = "Add Variable",
+  keyLabel = "Key",
+  valueLabel = "Value",
+  keyPlaceholder = "e.g: OPEN_AI_KEY",
+  valuePlaceholder = "e.g: sk-xxxxxxxx",
+  duplicateKeyMessage = envFile.DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE,
+  rowErrors,
+  error,
+  actions,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EnvironmentVariablesEditorRoot,
+    {
+      className: utils_cn.cn(!children && "space-y-3", className),
+      rowErrors,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorUpload, { children: /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorUploadButton, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorUploadError, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnvironmentVariablesEditorRows,
+          {
+            rowErrors,
+            keyLabel,
+            valueLabel,
+            keyPlaceholder,
+            valuePlaceholder,
+            duplicateKeyMessage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorAddButton, { children: addLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorDuplicateKeysError, { message: duplicateKeyMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorMessages, { error }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx(EnvironmentVariablesEditorActions, { children: actions })
+      ] })
+    }
+  );
+};
+const EnvironmentVariablesEditor = Object.assign(renderEnvironmentVariablesEditor, {
+  Root: EnvironmentVariablesEditorRoot,
+  Upload: EnvironmentVariablesEditorUpload,
+  UploadButton: EnvironmentVariablesEditorUploadButton,
+  UploadError: EnvironmentVariablesEditorUploadError,
+  Rows: EnvironmentVariablesEditorRows,
+  Row: EnvironmentVariablesEditorRow,
+  AddButton: EnvironmentVariablesEditorAddButton,
+  Messages: EnvironmentVariablesEditorMessages,
+  DuplicateKeysError: EnvironmentVariablesEditorDuplicateKeysError,
+  Actions: EnvironmentVariablesEditorActions,
+  ReadOnlyList: EnvironmentVariablesEditorReadOnlyList,
+  ReadOnlyHeader: EnvironmentVariablesEditorReadOnlyHeader,
+  ReadOnlyEmpty: EnvironmentVariablesEditorReadOnlyEmpty,
+  ReadOnlyItem: EnvironmentVariablesEditorReadOnlyItem
+});
+
+exports.EnvironmentVariablesEditor = EnvironmentVariablesEditor;
+//# sourceMappingURL=environment-variables-editor-BQma-nhE.cjs.map