@dxos/react-ui-form 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

package/dist/lib/node-esm/index.mjs

@@ -101,41 +101,105 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   return primary;
 };
 
+// packages/ui/react-ui-form/src/components/ControlSection.tsx
+import React2 from "react";
+import { toLocalizedString, useTranslation, Input as Input2 } from "@dxos/react-ui";
+var ControlSectionHeading = ({ title, description }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
+    className: "pli-4 container-max-width text-xl mbs-6 mbe-4"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: "pli-4 mlb-4 container-max-width text-description"
+  }, toLocalizedString(description, t)));
+};
+var ControlSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
+};
+var ControlGroup = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+  role: "none",
+  className: "group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
+}, children);
+var ControlFrame = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+  role: "none",
+  className: "p-4 border border-separator rounded-lg container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-2 md:gap-8"
+}, children);
+var controlItemClasses = "p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center";
+var controlItemTitleClasses = "text-lg font-normal mbe-2";
+var controlItemDescriptionClasses = "text-base mlb-2 md:mbe-0 text-description";
+var ControlItem = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React2.createElement("h3", {
+    className: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: controlItemDescriptionClasses
+  }, toLocalizedString(description, t))), children);
+};
+var ControlItemInput = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Input2.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React2.createElement(Input2.Label, {
+    classNames: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Description, {
+    classNames: controlItemDescriptionClasses
+  }, toLocalizedString(description, t)))), children));
+};
+var ControlFrameItem = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "group",
+    className: "min-is-0"
+  }, /* @__PURE__ */ React2.createElement("h3", {
+    className: "text-lg mbe-2"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: "mlb-2 md:mbe-0 text-description"
+  }, toLocalizedString(description, t)), children);
+};
+
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React12, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useState as useState4 } from "react";
+import React13, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useState as useState4 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React3, { useCallback, useState, useEffect, useMemo } from "react";
+import React4, { useCallback, useState, useEffect, useMemo } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
-import { Input as Input2, useTranslation } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
-import React2 from "react";
+import React3 from "react";
 import { Icon, Tooltip } from "@dxos/react-ui";
 import { errorText } from "@dxos/react-ui-theme";
 var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
     className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
     classNames: errorText
-  })), /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+  })), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), error)));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation2(translationKey);
   const { status, error } = getStatus();
   const geoPoint = useMemo(() => getValue3() ?? [
     0,
@@ -178,14 +242,14 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     onValueChange,
     type
   ]);
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+  return /* @__PURE__ */ React4.createElement(Input3.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -193,7 +257,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     value: latitudeText,
     onChange: handleCoordinateChange("latitude", setLatitudeText),
     onBlur
-  }), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -205,9 +269,9 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/SelectOptionsInput.tsx
-import React4, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
+import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
 import { PublicKey } from "@dxos/keys";
-import { Icon as Icon2, IconButton, Input as Input3, Tag, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Icon as Icon2, IconButton, Input as Input4, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
 import { hues, mx as mx2 } from "@dxos/react-ui-theme";
@@ -215,7 +279,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
   const [selected, setSelectedId] = useState2(null);
   const [isNewOption, setIsNewOption] = useState2(false);
   const inputRef = useRef(null);
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation3(translationKey);
   const { status, error } = getStatus();
   const options = getValue3();
   useEffect2(() => {
@@ -318,43 +382,43 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
     role: "none"
-  }, options && /* @__PURE__ */ React4.createElement(List.Root, {
+  }, options && /* @__PURE__ */ React5.createElement(List.Root, {
     items: options,
     isItem: (item) => true,
     onMove: handleMove
-  }, ({ items }) => /* @__PURE__ */ React4.createElement("div", {
+  }, ({ items }) => /* @__PURE__ */ React5.createElement("div", {
     role: "list",
     className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ React4.createElement("div", {
+  }, items?.map((item) => /* @__PURE__ */ React5.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ React4.createElement(List.Item, {
+  }, /* @__PURE__ */ React5.createElement(List.Item, {
     role: "button",
     item,
     classNames: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center"
-  }, /* @__PURE__ */ React4.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React4.createElement(List.ItemTitle, {
+  }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
     onClick: () => handleClick(item.id),
     classNames: "flex-1"
-  }, /* @__PURE__ */ React4.createElement(Tag, {
+  }, /* @__PURE__ */ React5.createElement(Tag, {
     palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ React4.createElement(Icon2, {
+  }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(Icon2, {
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
     onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ React4.createElement("div", {
+  })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
     className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, {
     classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ React4.createElement("div", {
+  }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
     className: "flex flex-row items-center gap-1"
-  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+  }, /* @__PURE__ */ React5.createElement(Input4.TextInput, {
     placeholder: t("select option label placeholder"),
     ref: selected === item.id ? inputRef : void 0,
     value: item.title,
@@ -362,34 +426,35 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     onKeyDown: handleKeyDown,
     classNames: "flex-1",
     "data-no-submit": true
-  }), /* @__PURE__ */ React4.createElement(Toolbar.Root, {
+  }), /* @__PURE__ */ React5.createElement(Toolbar.Root, {
     classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ React4.createElement(HuePicker, {
+  }, /* @__PURE__ */ React5.createElement(HuePicker, {
     value: item.color,
-    onChange: handleColorChange(item.id)
-  })), /* @__PURE__ */ React4.createElement(IconButton, {
+    onChange: handleColorChange(item.id),
+    rootVariant: "toolbar-button"
+  })), /* @__PURE__ */ React5.createElement(IconButton, {
     icon: "ph--trash--fill",
     iconOnly: true,
     label: t("select option delete"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ React4.createElement("div", {
+  })))))), /* @__PURE__ */ React5.createElement("div", {
     role: "listitem"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "button",
     className: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     onClick: handleAdd
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React4.createElement(Icon2, {
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
     icon: "ph--plus--regular"
-  }), /* @__PURE__ */ React4.createElement("span", {
+  }), /* @__PURE__ */ React5.createElement("span", {
     className: "text-sm"
   }, t("select option add")))))))));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
-import React5 from "react";
-import { Input as Input4 } from "@dxos/react-ui";
+import React6 from "react";
+import { Input as Input5 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
@@ -401,13 +466,13 @@ var gridCols = [
 var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue3() ?? {};
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
+  return /* @__PURE__ */ React6.createElement(Input5.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React5.createElement(InputHeader, {
+  }, /* @__PURE__ */ React6.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
     className: mx3("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React5.createElement(Input4.TextInput, {
+  }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input5.TextInput, {
     key: prop,
     type: "number",
     disabled,
@@ -421,69 +486,69 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 };
 
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-import React6, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-import { Input as Input5, Select } from "@dxos/react-ui";
+import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Input as Input6, Select } from "@dxos/react-ui";
 var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.TextInput, {
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.TextInput, {
     disabled,
     placeholder,
     value: getValue3() ?? "",
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.Validation, null, error));
 };
 var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.TextInput, {
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.TextInput, {
     type: "number",
     disabled,
     placeholder,
     value: getValue3() ?? 0,
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
 };
 var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue3());
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.Switch, {
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.Switch, {
     checked,
     onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Select.Root, {
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Select.Root, {
     value: getValue3(),
     onValueChange: (value) => onValueChange(type, value)
-  }, /* @__PURE__ */ React6.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ React6.createElement(Select.Portal, null, /* @__PURE__ */ React6.createElement(Select.Content, null, /* @__PURE__ */ React6.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ React7.createElement(Select.Portal, null, /* @__PURE__ */ React7.createElement(Select.Content, null, /* @__PURE__ */ React7.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React6.createElement(Select.Option, {
+    /* @__PURE__ */ React7.createElement(Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
 };
 var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
@@ -506,11 +571,11 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
     getValue3(),
     adjustHeight
   ]);
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.TextArea, {
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.TextArea, {
     ref: textareaRef,
     disabled,
     placeholder,
@@ -522,20 +587,20 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
       resize: "none"
     },
     spellCheck: false
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.Validation, null, error));
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React11, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
+import React12, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
 import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-import React8 from "react";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import React9 from "react";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React7, { createContext, useContext, useEffect as useEffect5, useMemo as useMemo3 } from "react";
+import React8, { createContext, useContext, useEffect as useEffect5, useMemo as useMemo3 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -809,27 +874,27 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
     form.handleSave,
     autoSave
   ]);
-  return /* @__PURE__ */ React7.createElement(FormContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(FormContext.Provider, {
     value: form
   }, children);
 };
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
 var FormActions = ({ onCancel, readonly }) => {
-  const { t } = useTranslation3(translationKey);
+  const { t } = useTranslation4(translationKey);
   const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "mt-2 flex justify-center"
-  }, /* @__PURE__ */ React8.createElement("div", {
+  }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: mx4(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
+  }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
+  }), handleSave && /* @__PURE__ */ React9.createElement(IconButton2, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSave,
@@ -842,7 +907,7 @@ var FormActions = ({ onCancel, readonly }) => {
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
 import { pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React10, { useMemo as useMemo5 } from "react";
+import React11, { useMemo as useMemo5 } from "react";
 import { AST as AST3, S } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
 import { mx as mx6 } from "@dxos/react-ui-theme";
@@ -852,17 +917,17 @@ import { isNotFalsy } from "@dxos/util";
 // packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
 import { pipe } from "effect";
 import { capitalize } from "effect/String";
-import React9, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
+import React10, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
 import { AST as AST2 } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 import { getSchemaProperties } from "@dxos/schema";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var padding = "px-2";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = useTranslation4(translationKey);
+  const { t } = useTranslation5(translationKey);
   const { ast, name, type, title } = property;
   const values = useFormValues(path ?? []);
   invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
@@ -921,20 +986,20 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: mx5(padding)
-  }, /* @__PURE__ */ React9.createElement(InputHeader, null, label), /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ React9.createElement("div", {
+  }, values.map((_value, index) => /* @__PURE__ */ React10.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React9.createElement(FormField, {
+  }, /* @__PURE__ */ React10.createElement(FormField, {
     property: {
       ...property,
       array: false,
@@ -948,15 +1013,15 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     inline: true,
     Custom,
     lookupComponent
-  })), /* @__PURE__ */ React9.createElement(IconButton3, {
+  })), /* @__PURE__ */ React10.createElement(IconButton3, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
     onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ React9.createElement("div", {
+  })))), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React9.createElement(IconButton3, {
+  }, /* @__PURE__ */ React10.createElement(IconButton3, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
@@ -1008,14 +1073,14 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
     }, FoundComponent);
   }
   const jsonPath = createJsonPath3(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return /* @__PURE__ */ React10.createElement(CustomComponent, {
+    return /* @__PURE__ */ React11.createElement(CustomComponent, {
       type,
       format,
       label,
@@ -1026,7 +1091,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     });
   }
   if (array) {
-    return /* @__PURE__ */ React10.createElement(ArrayField, {
+    return /* @__PURE__ */ React11.createElement(ArrayField, {
       property,
       path,
       inputProps,
@@ -1036,9 +1101,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
   }
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React10.createElement(InputComponent, {
+    }, /* @__PURE__ */ React11.createElement(InputComponent, {
       type,
       format,
       label,
@@ -1049,9 +1114,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }));
   }
   if (options) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React10.createElement(SelectInput, {
+    }, /* @__PURE__ */ React11.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -1069,9 +1134,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     const baseNode = findNode2(ast, isDiscriminatedUnion2);
     const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode2(ast, AST3.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ React10.createElement("div", {
+      return /* @__PURE__ */ React11.createElement("div", {
         role: "none"
-      }, !inline && /* @__PURE__ */ React10.createElement("div", null, label), /* @__PURE__ */ React10.createElement(FormFields, {
+      }, !inline && /* @__PURE__ */ React11.createElement("div", null, label), /* @__PURE__ */ React11.createElement(FormFields, {
         schema: S.make(typeLiteral),
         path,
         readonly,
@@ -1093,11 +1158,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     role: "form",
     className: mx6("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ React10.createElement(FormField, {
+    return /* @__PURE__ */ React11.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -1128,7 +1193,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, [
     autoFocus
   ]);
-  return /* @__PURE__ */ React11.createElement(FormProvider, {
+  return /* @__PURE__ */ React12.createElement(FormProvider, {
     formRef,
     schema,
     autoSave,
@@ -1137,12 +1202,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ React11.createElement("div", {
+  }, /* @__PURE__ */ React12.createElement("div", {
     ref: formRef,
     role: "none",
     className: mx7("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ React11.createElement(FormFields, {
+  }, /* @__PURE__ */ React12.createElement(FormFields, {
     schema,
     path,
     readonly,
@@ -1150,7 +1215,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     sort,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React11.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React12.createElement(FormActions, {
     onCancel,
     readonly
   })));
@@ -1159,7 +1224,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
-  const { t } = useTranslation5(translationKey);
+  const { t } = useTranslation6(translationKey);
   const [props, setProps] = useState4(projection.getFieldProjection(field.id).props);
   useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
@@ -1260,26 +1325,26 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onSave
   ]);
   const Custom = useMemo7(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["format"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
         value: p.name
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ React12.createElement(SelectOptionInput, props2)
+    ["options"]: (props2) => /* @__PURE__ */ React13.createElement(SelectOptionInput, props2)
   }), [
     t,
     schemas,
@@ -1297,7 +1362,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     });
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Form, {
+  return /* @__PURE__ */ React13.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -1316,10 +1381,10 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React13, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
+import React14, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
-import { IconButton as IconButton4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { IconButton as IconButton4, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
 import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
@@ -1334,8 +1399,8 @@ var ViewMetaSchema = S2.Struct({
   })
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = useTranslation6(translationKey);
-  const projection = useMemo8(() => new ViewProjection(schema, view), [
+  const { t } = useTranslation7(translationKey);
+  const projection = useMemo8(() => new ViewProjection(schema.jsonSchema, view), [
     schema,
     view
   ]);
@@ -1445,77 +1510,77 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     projection
   ]);
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React13.createElement(Form, {
+  }, /* @__PURE__ */ React14.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: schema.readonly ? void 0 : handleUpdate
-  }), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", {
+  }), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React13.createElement("label", {
+  }, /* @__PURE__ */ React14.createElement("label", {
     className: mx8(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React13.createElement(List2.Root, {
+  }, t("fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
     getId: (field2) => field2.id,
     onMove: schema.readonly ? void 0 : handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, showHeading && /* @__PURE__ */ React13.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ React14.createElement(React14.Fragment, null, showHeading && /* @__PURE__ */ React14.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React13.createElement("div", null), /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React13.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React14.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React13.createElement(List2.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: field2.id,
     item: field2,
     classNames: mx8(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React13.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, {
+  }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React13.createElement("div", {
+  }, field2.path), /* @__PURE__ */ React14.createElement("div", {
     className: "flex items-center gap-2 -ml-4"
-  }, /* @__PURE__ */ React13.createElement(List2.ItemButton, {
+  }, /* @__PURE__ */ React14.createElement(List2.ItemButton, {
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), !schema.readonly && /* @__PURE__ */ React13.createElement(List2.ItemDeleteButton, {
+  }), !schema.readonly && /* @__PURE__ */ React14.createElement(List2.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
-  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", {
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React13.createElement("label", {
+  }, /* @__PURE__ */ React14.createElement("label", {
     className: mx8(inputTextLabel)
-  }, t("hidden fields label"))), /* @__PURE__ */ React13.createElement(List2.Root, {
+  }, t("hidden fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: hiddenProperties,
     isItem: (item) => typeof item === "string",
     getId: (property) => property
-  }, ({ items: properties }) => /* @__PURE__ */ React13.createElement("div", {
+  }, ({ items: properties }) => /* @__PURE__ */ React14.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, properties?.map((property) => /* @__PURE__ */ React13.createElement(List2.Item, {
+  }, properties?.map((property) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: property,
     item: property,
     classNames: mx8(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React13.createElement("div", null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React13.createElement(List2.ItemButton, {
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React14.createElement(List2.ItemButton, {
     icon: "ph--eye--regular",
     onClick: () => handleShow(property)
-  }))))))), field && /* @__PURE__ */ React13.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ React14.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React13.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React14.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React13.createElement(IconButton4, {
+  }, /* @__PURE__ */ React14.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: schema.readonly ? void 0 : handleAdd,
@@ -1629,12 +1694,14 @@ var cellClassesForFieldType = ({ type, format }) => {
   switch (format) {
     case FormatEnum3.Markdown:
       return void 0;
+    case FormatEnum3.Time:
     case FormatEnum3.Timestamp:
     case FormatEnum3.DateTime:
     case FormatEnum3.Date:
-    case FormatEnum3.Time:
+    case FormatEnum3.Duration:
       return [
-        "font-mono"
+        "font-mono",
+        "text-right"
       ];
     case FormatEnum3.Currency:
       return [
@@ -1649,15 +1716,13 @@ var cellClassesForFieldType = ({ type, format }) => {
       return void 0;
   }
 };
-var cellClassesForRowSelection = (selected) => selected ? [
-  "!bg-gridCellSelected"
-] : void 0;
 var pathNotUniqueError = (path) => ({
   path: "path",
   message: `'${path}' is already present`
 });
 
 // packages/ui/react-ui-form/src/util/formatting.ts
+import { format as formatDate } from "date-fns/format";
 import { FormatEnum as FormatEnum4, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
 var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
   const formatScalar = (type2) => {
@@ -1699,17 +1764,14 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case FormatEnum4.DateTime:
-    case FormatEnum4.Date:
+    case FormatEnum4.Date: {
+      return formatDate(new Date(value), "yyyy-MM-dd");
+    }
     case FormatEnum4.Time: {
-      const date = new Date(value);
-      if (format === FormatEnum4.DateTime) {
-        return date.toLocaleString(locale);
-      } else if (format === FormatEnum4.Date) {
-        return date.toLocaleDateString(locale);
-      } else {
-        return date.toLocaleTimeString(locale);
-      }
+      return formatDate(new Date(value), "HH:mm:ss");
+    }
+    case FormatEnum4.DateTime: {
+      return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
     }
     case FormatEnum4.GeoPoint: {
       if (value === null || value === void 0) {
@@ -1786,6 +1848,13 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
 };
 export {
   BooleanInput,
+  ControlFrame,
+  ControlFrameItem,
+  ControlGroup,
+  ControlItem,
+  ControlItemInput,
+  ControlSection,
+  ControlSectionHeading,
   DeprecatedFormContainer,
   DeprecatedFormInput,
   FieldEditor,
@@ -1801,7 +1870,7 @@ export {
   TupleInput,
   ViewEditor,
   cellClassesForFieldType,
-  cellClassesForRowSelection,
+  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   parseValue,