@membranehq/react 0.1.0

package/dist/cjs/components/DataBuilder/DataBuilderFormField.cjs

@@ -0,0 +1,124 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var isDefinedValue = require('../ComboBox/Badges/isDefinedValue.cjs');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+var NestedLevel = require('../DataBuilderUI/NestedLevel.cjs');
+var Row = require('../DataBuilderUI/Row.cjs');
+require('../DataBuilderUI/Title.cjs');
+var dataBuilderContext = require('./data-builder-context.cjs');
+var dataField = require('./data-field.cjs');
+var fieldContext = require('./field-context.cjs');
+var FieldDelete = require('./FieldDelete.cjs');
+var index = require('./FieldName/index.cjs');
+var index$1 = require('./FieldTypeSelector/index.cjs');
+var convertableSchemaToSchema = require('./FieldTypeSelector/convertableSchemaToSchema.cjs');
+var index$2 = require('./FieldValue/index.cjs');
+var hooks = require('./hooks.cjs');
+var Nested = require('./Nested.cjs');
+
+function DataBuilderFormField({ field, onChange, onKeyChange, onDelete, onEnter }) {
+  const { hideReadOnlyFields } = dataBuilderContext.default();
+  if (field.schema?.readOnly && hideReadOnlyFields) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldContext.DataBuilderFieldProvider, { field, children: /* @__PURE__ */ jsxRuntime.jsx(DataBuilderFieldContent, { onChange, onKeyChange, onDelete, onEnter }) });
+}
+function DataBuilderFieldContent({ onChange, onKeyChange, onDelete, onEnter }) {
+  const { isReadOnly } = dataBuilderContext.default();
+  const isFieldFrozen = hooks.usIsFieldFrozen();
+  const {
+    field,
+    localSchema,
+    setLocalSchema,
+    resetLocalSchema,
+    localSchemaChangedManually,
+    setLocalSchemaChangedManually,
+    autoOpen,
+    setAutoOpen
+  } = fieldContext.default();
+  React.useEffect(() => {
+    if (!localSchemaChangedManually) {
+      resetLocalSchema();
+    }
+  }, [JSON.stringify(field?.schema)]);
+  function handleChange(value) {
+    onChange?.(value);
+  }
+  function handleKeyChange(newKey) {
+    onKeyChange?.(newKey);
+  }
+  function handleEnterKey(value) {
+    if (value && onEnter) {
+      onEnter?.();
+    }
+  }
+  function handleEscKey(value) {
+    if (!value && onDelete) {
+      onDelete?.();
+    }
+  }
+  function handleLocalSchemaTypeChange(schemaType) {
+    const showValueDropdown = !(schemaType === "object" || schemaType === "array");
+    const resetValue = !convertableSchemaToSchema.convertableSchemaToSchema(localSchema?.type, schemaType);
+    setLocalSchemaChangedManually(true);
+    setLocalSchema({ ...localSchema, type: schemaType });
+    if (resetValue) {
+      onChange?.("");
+    }
+    setAutoOpen(showValueDropdown);
+  }
+  let showValue = true;
+  const fieldIsObjectOrArray = ["object", "array"].includes(localSchema?.type);
+  const fieldHasCustomValue = !sdk.isFormula(field?.value);
+  if (fieldIsObjectOrArray && fieldHasCustomValue && !autoOpen) {
+    showValue = false;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NestedLevel.NestedLevel, { level: field.level, children: dataField.isFieldVisible(field) && /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { span: !showValue ? "short" : "default", children: [
+      (isDefinedValue.isDefinedValue(field.key) || field.schema?.title) && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.FieldName,
+        {
+          field,
+          onKeyChange: handleKeyChange,
+          onEnter: handleEnterKey,
+          onEsc: handleEscKey,
+          typeSelectorSlot: /* @__PURE__ */ jsxRuntime.jsx(index$1.FieldTypeSelector, { onChange: handleChange, onSchemaChange: handleLocalSchemaTypeChange })
+        }
+      ) }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(FieldDataInput, { onChange: handleChange }) }),
+      field.isDeletable && !isReadOnly && !isFieldFrozen && /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Nested.default, { field, onChange: handleChange })
+  ] });
+}
+function FieldDataInput({ onChange }) {
+  const { field, localSchema, setLocalSchemaChangedManually } = fieldContext.default();
+  function handleChange(value) {
+    setLocalSchemaChangedManually(false);
+    onChange(value);
+  }
+  const fieldWithDefinedSchema = !field.schema?.type ? {
+    ...field,
+    schema: {
+      ...field.schema,
+      ...localSchema,
+      anyOf: void 0
+    }
+  } : field;
+  return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { field: fieldWithDefinedSchema, onChange: handleChange });
+}
+
+exports.DataBuilderFormField = DataBuilderFormField;

package/dist/cjs/components/DataBuilder/FieldDelete.cjs

@@ -0,0 +1,31 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var index = require('../Tooltip/index.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+require('../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../DataBuilderUI/styles.module.css.cjs');
+require('../DataBuilderUI/Row.cjs');
+require('../DataBuilderUI/Title.cjs');
+
+function FieldDelete({ onClick }) {
+  const handleClick = useEventStopPropagation.default(onClick);
+  if (!onClick) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: "Delete", usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsx(Cell.CellButton, { type: "icon", icon: svgIconType.SvgIconType.Close, onClick: handleClick, "aria-label": "Delete" }) });
+}
+
+exports.FieldDelete = FieldDelete;

package/dist/cjs/components/DataBuilder/FieldDescription.cjs

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var text = require('../../ui-kit/styled/text.cjs');
+var index = require('../Tooltip/index.cjs');
+
+function FieldDescription({ text: text$1 }) {
+  if (!text$1) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip: text$1, offset: [0, 4], placement: "bottom-start", usePortal: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    text.Text,
+    {
+      as: "span",
+      display: "inline-block",
+      px: "1",
+      ml: "2",
+      cursor: "help",
+      bg: "neutral.2",
+      rounded: "xs",
+      color: "neutral.11",
+      textAlign: "center",
+      lineHeight: "1.2",
+      minW: "5",
+      _hover: {
+        bg: "neutral.3"
+      },
+      children: "?"
+    }
+  ) });
+}
+
+exports.FieldDescription = FieldDescription;

package/dist/cjs/components/DataBuilder/FieldList.cjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Form = require('./Form.cjs');
+var index = require('./index.cjs');
+
+function FieldList({
+  schema,
+  value,
+  variablesSchema,
+  isAdminMode,
+  frozenFieldsLocators = [],
+  onChange,
+  collapsed,
+  hideReadOnlyFields
+}) {
+  if (schema?.type !== "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Something went wrong. Trying to display a field list for schema that is not an object." });
+  }
+  const field = index.makeDataField({
+    schema,
+    value,
+    variablesSchema
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.DataBuilderForm,
+    {
+      field,
+      onChange,
+      isAdminMode,
+      frozenFieldsLocators,
+      collapsed,
+      hideReadOnlyFields
+    }
+  );
+}
+
+exports.FieldList = FieldList;

package/dist/cjs/components/DataBuilder/FieldName/FieldNameInput.cjs

@@ -0,0 +1,135 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
+
+const fieldNameInputRecipe = sva.sva({
+  className: "field-name-input",
+  slots: ["wrapper", "input", "span"],
+  base: {
+    wrapper: {
+      display: "inline-block",
+      cursor: "default",
+      position: "relative",
+      _hover: {
+        "& .span": {
+          visibility: "hidden"
+        },
+        "& .input": {
+          visibility: "visible"
+        }
+      }
+    },
+    span: {
+      display: "block",
+      visibility: "visible",
+      _empty: {
+        _after: {
+          color: "gray.9",
+          content: "var(--placeholder-text)"
+        }
+      }
+    },
+    input: {
+      position: "absolute",
+      inset: "0",
+      w: "full",
+      transitionProperty: "colors",
+      p: "0",
+      m: "0",
+      borderTopColor: "transparent",
+      opacity: "0",
+      _hover: {
+        opacity: "1"
+      },
+      _focus: {
+        opacity: "1",
+        outline: "none",
+        "& + .span": {
+          visibility: "hidden"
+        }
+      }
+    }
+  }
+});
+const fieldNameInputClassNames = fieldNameInputRecipe();
+function FieldNameInput({
+  value,
+  className,
+  placeholder = "Enter some text",
+  onChange = () => {
+  },
+  onEnter = () => {
+  },
+  onEsc = () => {
+  },
+  onFocus = () => {
+  },
+  onBlur = () => {
+  },
+  editable = true,
+  autoFocus = false,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.currentTarget.blur();
+      onEnter?.(value);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.currentTarget.blur();
+      onEsc?.(value);
+      return;
+    }
+  };
+  const handleFocus = (event) => {
+    onFocus(event.target.value);
+  };
+  const handleBlur = (event) => {
+    onChange(event.target.value);
+    onBlur(event.target.value);
+  };
+  const style = React.useMemo(
+    () => ({
+      "--placeholder-text": `"${placeholder}"`
+    }),
+    [placeholder]
+  );
+  const classNames = clsx.clsx(fieldNameInputClassNames.wrapper, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames, ...props, title: value, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: fieldNameInputClassNames.input,
+        onChange: handleChange,
+        value,
+        placeholder,
+        "aria-label": placeholder,
+        readOnly: !editable,
+        autoFocus,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldNameInputClassNames.span, style, children: value?.replace(/\s/g, "\xA0") })
+  ] });
+}
+
+exports.FieldNameInput = FieldNameInput;

package/dist/cjs/components/DataBuilder/FieldName/index.cjs

@@ -0,0 +1,89 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var FieldNameInput = require('./FieldNameInput.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+require('../../DataBuilderUI/Row.cjs');
+var Title = require('../../DataBuilderUI/Title.cjs');
+var dataBuilderContext = require('../data-builder-context.cjs');
+var dataField = require('../data-field.cjs');
+var FieldDescription = require('../FieldDescription.cjs');
+var LevelKeysConflictProvider = require('../Nested/LevelKeysConflictProvider.cjs');
+
+function FieldName({
+  field,
+  onKeyChange,
+  onEnter,
+  onEsc,
+  rightSlot,
+  typeSelectorSlot
+}) {
+  const { errorFieldsLocators } = dataBuilderContext.default();
+  const conflictedPropertiesKey = LevelKeysConflictProvider.useLevelKeysConflicts();
+  const { value, onChange } = useControlledInputValue(field.key || "", onKeyChange);
+  if (field.isInSchema || field.key === void 0) {
+    const isErrorField = field?.valueLocator && (errorFieldsLocators || []).includes(field.valueLocator);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Title.Title,
+      {
+        required: field.isRequired,
+        hasValue: !!field.value || field.value === false,
+        hasError: !!isErrorField,
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: field.schema?.description }),
+        children: dataField.fieldLabel(field)
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Title.Title,
+      {
+        typeSelectorSlot,
+        rightSlot: rightSlot || /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: field.schema?.description }),
+        hasNameConflict: conflictedPropertiesKey.has(field.key),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          FieldNameInput.FieldNameInput,
+          {
+            onChange,
+            onEnter,
+            onEsc,
+            autoFocus: !field.key,
+            value,
+            onBlur: () => {
+              onChange(field.key || "");
+            },
+            placeholder: "Enter field name"
+          }
+        )
+      }
+    );
+  }
+}
+const useControlledInputValue = (value, onChange) => {
+  const [inputValue, setInputValue] = React.useState(value);
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  return {
+    value: inputValue,
+    onChange: (value2) => {
+      setInputValue(value2);
+      onChange(value2);
+    }
+  };
+};
+
+exports.FieldName = FieldName;

package/dist/cjs/components/DataBuilder/FieldTypeSelector/convertableSchemaToSchema.cjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+function convertableSchemaToSchema(oldSchemaType, newSchemaType) {
+  if (oldSchemaType === newSchemaType) {
+    return true;
+  }
+  if ([oldSchemaType, newSchemaType].includes("object") || [oldSchemaType, newSchemaType].includes("array")) {
+    return false;
+  }
+  return true;
+}
+
+exports.convertableSchemaToSchema = convertableSchemaToSchema;

package/dist/cjs/components/DataBuilder/FieldTypeSelector/index.cjs

@@ -0,0 +1,190 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@membranehq/sdk');
+var jsConvertCase = require('js-convert-case');
+var index$1 = require('../../FloatingPortalBoundary/index.cjs');
+var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
+var icon = require('../../../ui-kit/styled/icon.cjs');
+var menu = require('../../../ui-kit/styled/menu.cjs');
+var index = require('../../SvgIcon/index.cjs');
+var dataField = require('../data-field.cjs');
+var fieldContext = require('../field-context.cjs');
+var hooks = require('../hooks.cjs');
+
+const recipe = sva.sva({
+  className: "type_selector",
+  slots: ["trigger", "content", "item", "groupContainer", "groupTitle"],
+  base: {
+    trigger: {
+      rounded: "sm",
+      px: "1",
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11",
+      fontWeight: "medium",
+      gap: "0.5",
+      _hover: {
+        bg: "neutral.2"
+      },
+      _focusVisible: {
+        bg: "neutral.2"
+      }
+    },
+    content: {
+      zIndex: "popover",
+      bg: "surface.default",
+      borderWidth: "thin",
+      borderColor: "neutral.5",
+      px: "3",
+      py: "2.5",
+      rounded: "sm",
+      minW: "48",
+      w: "auto",
+      shadow: "none",
+      flexDirection: "row",
+      alignItems: "start",
+      justifyContent: "start",
+      gap: "5"
+    },
+    item: {
+      display: "flex",
+      flexDir: "row",
+      gap: "2",
+      px: "2.5",
+      py: "2",
+      rounded: "sm",
+      margin: "0",
+      fontWeight: "normal",
+      w: "full",
+      h: "auto",
+      '&[data-selected="true"]': {
+        fontWeight: "bold"
+      },
+      "&[data-highlighted]": {
+        bg: "touchable.hover"
+      },
+      _hover: {
+        bg: "touchable.hover"
+      }
+    },
+    groupContainer: {
+      display: "flex",
+      flexDir: "column",
+      gap: "0",
+      w: "full",
+      minW: "48"
+    },
+    groupTitle: {
+      fontSize: "xs",
+      color: "neutral.9",
+      fontWeight: "bold",
+      px: "2.5",
+      py: "2",
+      m: "0"
+    }
+  }
+});
+function FieldTypeSelector({
+  onChange,
+  onSchemaChange,
+  ...rest
+}) {
+  const classes = recipe();
+  const { field, localSchema } = fieldContext.default();
+  const showUseVarFromVariables = hooks.useDataBuilderFieldCanUseVarFromVariables();
+  const schemaOptions = dataField.getFieldSchemaOptions(field).map((schemaOption) => ({
+    value: schemaOption.type,
+    label: jsConvertCase.toHeaderCase(schemaOption.type),
+    iconType: svgIconType.SvgIconType[`SchemaType_${schemaOption.type}`],
+    active: localSchema?.type === schemaOption.type
+  }));
+  const showTypeSelector = schemaOptions.length > 1;
+  if (!showTypeSelector && !showUseVarFromVariables) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(menu.Root, { lazyMount: true, unmountOnExit: true, ...rest, children: [
+    ":",
+    /* @__PURE__ */ jsxRuntime.jsxs(menu.Trigger, { className: classes.trigger, "aria-label": "Change schema type", children: [
+      localSchema?.type ?? "select",
+      /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { w: "3", h: "4", pt: "1px", children: /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: svgIconType.SvgIconType.ChevronDown }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.BoundedPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(menu.Content, { className: classes.content, children: [
+      showTypeSelector && /* @__PURE__ */ jsxRuntime.jsx(TypeSelector, { options: schemaOptions, onChange: onSchemaChange }),
+      showUseVarFromVariables && /* @__PURE__ */ jsxRuntime.jsx(FieldDropdown, { onChange })
+    ] }) }) })
+  ] });
+}
+function TypeSelector({
+  options,
+  onChange
+}) {
+  if (options.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupContainer, { title: "Field Type", children: options.map(({ value, iconType, label, active }) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: () => onChange(value), icon: iconType, "data-selected": active, children: label }, String(value))) });
+}
+function FieldDropdown({ onChange }) {
+  const { localSchema } = fieldContext.default();
+  switch (localSchema?.type) {
+    case "object":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldObjectDropdown, { onChange });
+    case "array":
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldArrayDropdown, { onChange });
+    default:
+      return null;
+  }
+}
+function FieldObjectDropdown({ onChange }) {
+  const { field, setAutoOpen } = fieldContext.default();
+  function handleUseObjectFromVariables() {
+    setAutoOpen(true);
+  }
+  function handleSetIndividualFields() {
+    onChange(void 0);
+  }
+  const valueIsIndividualFields = !sdk.isFormula(field.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupContainer, { title: "Field Value", children: valueIsIndividualFields ? /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: handleUseObjectFromVariables, children: "Use object from variables" }) : /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: handleSetIndividualFields, children: "Set individual fields" }) });
+}
+function FieldArrayDropdown({ onChange }) {
+  const { field, setAutoOpen } = fieldContext.default();
+  function handleUseListFromVariables() {
+    setAutoOpen(true);
+  }
+  function handleSetIndividualItems() {
+    onChange(void 0);
+  }
+  const valueIsIndividualFields = !sdk.isFormula(field.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupContainer, { title: "Field Value", children: valueIsIndividualFields ? /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: handleUseListFromVariables, children: "Use list from variables" }) : /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: handleSetIndividualItems, children: "Set individual items" }) });
+}
+function MenuItem({
+  icon: icon$1,
+  children,
+  ...props
+}) {
+  const classes = recipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(menu.Item, { ...props, className: classes.item, value: String(children), children: [
+    icon$1 && /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { w: "5", h: "5", children: /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: icon$1 }) }),
+    children
+  ] });
+}
+function GroupContainer({ children, title }) {
+  const classes = recipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(menu.ItemGroup, { className: classes.groupContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(menu.ItemGroupLabel, { className: classes.groupTitle, children: title }),
+    children
+  ] });
+}
+
+exports.FieldTypeSelector = FieldTypeSelector;