slice-machine-ui 2.2.2-beta.1 → 2.2.2-beta.11

package/src/legacy/lib/builders/common/Zone/index.jsx

@@ -1,13 +1,14 @@
-import { Button, Switch, Text } from "@prismicio/editor-ui";
+import { Switch, Text } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 import { BaseStyles } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
+import { fields as allFields } from "@/domain/fields";
+import { AddFieldDropdown } from "@/features/builder/AddFieldDropdown";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
-import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import Card from "./Card";
 import NewField from "./Card/components/NewField";
 import { ZoneEmptyState } from "./components/ZoneEmptyState";
@@ -32,7 +33,6 @@ const Zone = ({
   testId,
   isRepeatableCustomType,
   emptyStateHeading,
-  emptyStateActionTestId,
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const widgetsArrayWithCondUid = (() => {
@@ -50,7 +50,6 @@ const Zone = ({
 
   const [showHints, setShowHints] = useState(false);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
-  const [selectModalData, setSelectModalData] = useState({ isOpen: false });
   const [newFieldData, setNewFieldData] = useState(null);
 
   /** @param {[string, import("@prismicio/types-internal/lib/customtypes").NestableWidget]} field */
@@ -68,22 +67,38 @@ const Zone = ({
       contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
-  const enterSelectMode = () => {
-    setSelectModalData({ isOpen: true });
-  };
 
   const closeEditModal = () => {
     setEditModalData({ isOpen: false });
   };
-  const closeSelectModal = () => setSelectModalData({ isOpen: false });
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment
     setNewFieldData({ widgetTypeName, fields });
-    setSelectModalData({ isOpen: false });
   };
 
   const onCancelNewField = () => setNewFieldData(null);
+  const addFieldDropdown = (
+    <AddFieldDropdown
+      disabled={newFieldData !== null}
+      onSelectField={onSelectFieldType}
+      fields={
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        widgetsArrayWithCondUid.filter(Boolean).map((widget) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const { TYPE_NAME, CUSTOM_NAME } = widget;
+          return allFields.find(
+            (f) =>
+              f.type === TYPE_NAME &&
+              (CUSTOM_NAME === undefined || f.variant === CUSTOM_NAME),
+          );
+        })
+      }
+      triggerDataTestId={
+        Boolean(isRepeatable) ? "add-field-in-items" : undefined
+      }
+    />
+  );
 
   return (
     <>
@@ -103,18 +118,7 @@ const Zone = ({
                 style={{ flexShrink: 0 }}
                 data-testid="code-snippets-switch"
               />
-              <Button
-                data-testid={`add-${
-                  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                  isRepeatable ? "Repeatable" : "Static"
-                }-field`}
-                onClick={enterSelectMode}
-                startIcon="add"
-                color="grey"
-                disabled={newFieldData !== null}
-              >
-                Add a field
-              </Button>
+              {addFieldDropdown}
             </>
           ) : undefined
         }
@@ -129,9 +133,8 @@ const Zone = ({
             zoneType={getResolvedZoneType(zoneType, zoneTypeFormat)}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             heading={emptyStateHeading}
-            onActionClick={() => enterSelectMode()}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            actionTestId={emptyStateActionTestId}
+            action={addFieldDropdown}
           />
         ) : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
         fields.length > 0 || newFieldData ? (
@@ -153,7 +156,6 @@ const Zone = ({
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment
               renderHintBase={renderHintBase}
               enterEditMode={enterEditMode}
-              enterSelectMode={enterSelectMode}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               onDragEnd={onDragEnd}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -194,13 +196,6 @@ const Zone = ({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         zoneType={zoneType}
       />
-      <SelectFieldTypeModal
-        data={selectModalData}
-        close={closeSelectModal}
-        onSelect={onSelectFieldType}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        widgetsArray={widgetsArrayWithCondUid}
-      />
     </>
   );
 };

package/src/legacy/lib/builders/utils/index.ts

@@ -1,3 +1,5 @@
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widgets";
+
 import { TabField } from "@/legacy/lib/models/common/CustomType";
 
 interface Widgets {
@@ -21,6 +23,12 @@ export const findWidgetByConfigOrType = (
         return widgets.Link;
     }
   }
+  // The Group & NestedGroup widgets share the "Group" type. They are never
+  // in the same widget group, so this will use whichever is provided. For example,
+  // in the custom list item for Group, we always pass NestedGroup as the Group widget.
+  if (type === GroupFieldType) {
+    return widgets.Group ?? widgets.NestedGroup;
+  }
 
   return widgets[type];
 };

package/src/legacy/lib/models/common/Group.ts

@@ -1,32 +1,49 @@
-import { Group } from "@prismicio/types-internal/lib/customtypes/widgets";
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import {
+  Group,
+  GroupFieldType,
+} from "@prismicio/types-internal/lib/customtypes/widgets";
 import { StringOrNull } from "@prismicio/types-internal/lib/validators";
 import { getOrElseW } from "fp-ts/lib/Either";
 import * as t from "io-ts";
 
 import { FieldsSM } from "./Fields";
 
-export const GroupConfig = t.exact(
-  t.partial({
-    label: StringOrNull,
-    repeat: t.boolean,
-    fields: FieldsSM,
-  }),
-);
-export type GroupConfig = t.TypeOf<typeof GroupConfig>;
-
-export const GroupSM = t.exact(
-  t.intersection([
-    t.type({
-      type: t.literal("Group"),
-    }),
+const createGroupConfig = <TFields extends t.Mixed>(fields: TFields) =>
+  t.exact(
     t.partial({
-      fieldset: StringOrNull,
-      icon: t.string,
-      description: t.string,
-      config: GroupConfig,
+      label: StringOrNull,
+      repeat: t.boolean,
+      fields,
     }),
-  ]),
+  );
+
+const createGroupSM = <TFields extends t.Mixed>(fields: TFields) =>
+  t.exact(
+    t.intersection([
+      t.type({
+        type: t.literal("Group"),
+      }),
+      t.partial({
+        fieldset: StringOrNull,
+        icon: t.string,
+        description: t.string,
+        config: createGroupConfig(fields),
+      }),
+    ]),
+  );
+
+export const NestedGroupSM = createGroupSM(FieldsSM);
+export type NestedGroupSM = t.TypeOf<typeof NestedGroupSM>;
+
+const GroupFieldsSM = t.array(
+  t.type({
+    key: t.string,
+    value: t.union([NestableWidget, NestedGroupSM]),
+  }),
 );
+
+export const GroupSM = createGroupSM(GroupFieldsSM);
 export type GroupSM = t.TypeOf<typeof GroupSM>;
 
 export const Groups = {
@@ -34,10 +51,13 @@ export const Groups = {
     const fields = (() => {
       if (!group.config?.fields) return;
 
-      return group.config.fields.reduce(
-        (acc, { key, value }) => ({ ...acc, [key]: value }),
-        {},
-      );
+      return group.config.fields.reduce((acc, { key, value }) => {
+        if (value.type === GroupFieldType) {
+          return { ...acc, [key]: Groups.fromSM(value) };
+        } else {
+          return { ...acc, [key]: value };
+        }
+      }, {});
     })();
 
     return getOrElseW(() => {
@@ -58,10 +78,13 @@ export const Groups = {
       if (!group.config?.fields) return;
 
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      return Object.entries(group.config?.fields || {}).map(([key, value]) => ({
-        key,
-        value,
-      }));
+      return Object.entries(group.config?.fields || {}).map(([key, value]) => {
+        if (value.type === GroupFieldType) {
+          return { key, value: Groups.toSM(value) };
+        } else {
+          return { key, value };
+        }
+      });
     })();
 
     return getOrElseW(() => {

package/src/legacy/lib/models/common/widgets/Boolean/index.ts

@@ -1,5 +1,5 @@
 import { BooleanField } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { BsToggleOn } from "react-icons/bs";
+import { MdOutlineToggleOff } from "react-icons/md";
 import * as yup from "yup";
 
 import { createValidationSchema } from "../../../../forms";
@@ -18,9 +18,7 @@ import { removeProp } from "../../../../utils";
 import { Widget } from "../Widget";
 
 const Meta = {
-  icon: BsToggleOn,
-  title: "Boolean",
-  description: "An input that is either true or false",
+  icon: MdOutlineToggleOff,
 };
 
 const FormFields = {

package/src/legacy/lib/models/common/widgets/Color/index.ts

@@ -1,5 +1,5 @@
 import { Color } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { MdColorLens } from "react-icons/md";
+import { MdOutlineColorLens } from "react-icons/md";
 
 import { createDefaultWidgetValues } from "../../../../utils";
 import { Widget } from "../Widget";
@@ -12,9 +12,7 @@ import { Widget } from "../Widget";
 } */
 
 const Meta = {
-  icon: MdColorLens,
-  title: "Color",
-  description: "A color picker",
+  icon: MdOutlineColorLens,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/src/legacy/lib/models/common/widgets/ContentRelationship/index.ts

@@ -25,8 +25,6 @@ import Form, { FormFields } from "./Form";
 
 const Meta = {
   icon: MdSettingsEthernet,
-  title: "Content Relationship",
-  description: "Define content relations & internal links",
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call

package/src/legacy/lib/models/common/widgets/Date/index.ts

@@ -17,8 +17,6 @@ const { FormFields, schema } = createDefaultWidgetValues("Date");
 
 const Meta = {
   icon: MdDateRange,
-  title: "Date",
-  description: "A calendar date picker",
 };
 
 export const DateWidget: Widget<Date, typeof schema> = {

package/src/legacy/lib/models/common/widgets/Embed/index.ts

@@ -1,5 +1,5 @@
 import { Embed } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { FiCode } from "react-icons/fi";
+import { MdCode } from "react-icons/md";
 
 import { createDefaultWidgetValues } from "../../../../utils";
 import { Widget } from "../Widget";
@@ -16,9 +16,7 @@ import { Widget } from "../Widget";
 const { FormFields, schema } = createDefaultWidgetValues("Embed");
 
 const Meta = {
-  icon: FiCode,
-  title: "Embed",
-  description: "Embed videos, songs, tweets, slides, …",
+  icon: MdCode,
 };
 
 export const EmbedWidget: Widget<Embed, typeof schema> = {

package/src/legacy/lib/models/common/widgets/GeoPoint/index.ts

@@ -1,5 +1,5 @@
 import { GeoPoint } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { MdPlace } from "react-icons/md";
+import { MdOutlinePlace } from "react-icons/md";
 import * as yup from "yup";
 
 import { DefaultFields } from "../../../../forms/defaults";
@@ -36,9 +36,7 @@ const schema = yup.object().shape({
 });
 
 const Meta = {
-  icon: MdPlace,
-  title: "GeoPoint",
-  description: "A field for storing geo-coordinates",
+  icon: MdOutlinePlace,
 };
 
 export const GeoPointWidget: Widget<GeoPoint, typeof schema> = {

package/src/legacy/lib/models/common/widgets/Group/ListItem/index.jsx

@@ -1,32 +1,35 @@
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widgets";
 import { Fragment, useState } from "react";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
-import { Box, Button } from "theme-ui";
+import { Box } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
+import { fields as allFields } from "@/domain/fields";
 import {
   addFieldToGroup,
   deleteFieldFromGroup,
   reorderFieldInGroup,
   updateFieldInGroup,
 } from "@/domain/group";
+import { AddFieldDropdown } from "@/features/builder/AddFieldDropdown";
 import ListItem from "@/legacy/components/ListItem";
 import EditModal from "@/legacy/lib/builders/common/EditModal";
-import SelectFieldTypeModal from "@/legacy/lib/builders/common/SelectFieldTypeModal";
 import Hint from "@/legacy/lib/builders/common/Zone/Card/components/Hints";
 import NewField from "@/legacy/lib/builders/common/Zone/Card/components/NewField";
 import { findWidgetByConfigOrType } from "@/legacy/lib/builders/utils";
 import { Groups } from "@/legacy/lib/models/common/Group";
-import * as Widgets from "@/legacy/lib/models/common/widgets";
-import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 /* eslint-disable */
-const CustomListItem = ({
+export const CustomListItem = ({
   tabId,
   widget,
+  Widgets,
+  widgetsArray,
+  hintBase,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   parentSnapshot,
   showHints,
@@ -37,14 +40,12 @@ const CustomListItem = ({
   HintElement,
   ...rest
 }) => {
-  const [selectMode, setSelectMode] = useState(false);
   const [newFieldData, setNewFieldData] = useState(null);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     setNewFieldData({ widgetTypeName });
-    setSelectMode(false);
   };
 
   const onCancelNewField = () => {
@@ -86,7 +87,7 @@ const CustomListItem = ({
       group: Groups.fromSM(groupItem.value),
       previousFieldId: previousKey,
       newFieldId: newKey,
-      field: value,
+      field: value.type === GroupFieldType ? Groups.fromSM(value) : value,
     });
 
     saveItem({
@@ -169,15 +170,28 @@ const CustomListItem = ({
         {...rest}
         HintElement={HintElement}
         CustomEditElements={[
-          <Button
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-            key={`custom-edit-element-${groupItem.key}`}
-            mr={2}
-            variant="buttons.darkSmall"
-            onClick={() => setSelectMode(true)}
-          >
-            Add Field
-          </Button>,
+          <AddFieldDropdown
+            key="add-field-dropdown"
+            disabled={newFieldData !== null}
+            onSelectField={onSelectFieldType}
+            fields={widgetsArray.filter(Boolean).map((widget) => {
+              const { TYPE_NAME, CUSTOM_NAME } = widget;
+
+              const field = allFields.find(
+                (f) =>
+                  f.type === TYPE_NAME &&
+                  (CUSTOM_NAME === undefined || f.variant === CUSTOM_NAME),
+              );
+
+              if (!field) {
+                throw new Error(
+                  `Field not found for widget: ${TYPE_NAME} - ${CUSTOM_NAME}`,
+                );
+              }
+
+              return field;
+            })}
+          />,
         ]}
         children={
           <Box sx={{ ml: 4 }}>
@@ -215,6 +229,8 @@ const CustomListItem = ({
                           key: item.key,
                           enterEditMode,
                           deleteItem: onDeleteItem,
+                          saveItem: onSaveField,
+                          showHints,
                           renderFieldAccessor: (key) =>
                             `item${transformKeyAccessor(item.key)}`,
                           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
@@ -232,13 +248,25 @@ const CustomListItem = ({
                             isRepeatable={isRepeatable}
                             renderHintBase={({ item }) =>
                               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-                              `item${transformKeyAccessor(item.key)}`
+                              `${hintBase}${transformKeyAccessor(item.key)}`
                             }
+                            hintItemName={widget.hintItemName}
                             Widgets={Widgets}
                             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                             typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}
                           />
                         );
+
+                        if (widget.CustomListItem) {
+                          const { CustomListItem } = widget;
+                          return (
+                            <CustomListItem
+                              {...props}
+                              HintElement={HintElement}
+                            />
+                          );
+                        }
+
                         return (
                           <ListItem {...props} HintElement={HintElement} />
                         );
@@ -266,12 +294,6 @@ const CustomListItem = ({
           </Box>
         }
       />
-      <SelectFieldTypeModal
-        data={{ isOpen: selectMode }}
-        close={() => setSelectMode(false)}
-        onSelect={onSelectFieldType}
-        widgetsArray={groupBuilderWidgetsArray}
-      />
       <EditModal
         data={editModalData}
         close={closeEditModal}
@@ -282,6 +304,4 @@ const CustomListItem = ({
     </Fragment>
   );
 };
-
-export default CustomListItem;
 /* eslint-enable */

package/src/legacy/lib/models/common/widgets/Group/createGroupWidget.ts

@@ -0,0 +1,81 @@
+import { MdOutlineCreateNewFolder } from "react-icons/md";
+import * as yup from "yup";
+
+import { TabField } from "@/legacy/lib/models/common/CustomType";
+import {
+  type GroupSM,
+  type NestedGroupSM,
+} from "@/legacy/lib/models/common/Group";
+import { type Widget } from "@/legacy/lib/models/common/widgets/Widget";
+
+import { type GroupListItemProps } from ".";
+import Form, { FormFields } from "./Form";
+
+const Meta = {
+  icon: MdOutlineCreateNewFolder,
+};
+
+const createSchema = (typeRegex: RegExp) =>
+  yup.object().shape({
+    type: yup
+      .string()
+      .matches(typeRegex, { excludeEmptyString: true })
+      .required(),
+    config: yup.object().shape({
+      fields: yup.array(),
+      label: yup.string(),
+      placeholder: yup.string(),
+      repeat: yup.boolean().optional(),
+    }),
+  });
+export type SchemaType = ReturnType<typeof createSchema>;
+
+type CreateGroupWidgetArgsBase<T extends TabField> = {
+  schemaTypeRegex: RegExp;
+  customListItem: (props: GroupListItemProps<T>) => JSX.Element;
+  hintItemName: string;
+  customName?: string;
+};
+type CreateTopGroupWidgetArgs = CreateGroupWidgetArgsBase<GroupSM>;
+type CreateNestedGroupWidgetArgs = CreateGroupWidgetArgsBase<NestedGroupSM> & {
+  customName: "NestedGroup";
+};
+type CreateGroupWidgetArgs =
+  | CreateTopGroupWidgetArgs
+  | CreateNestedGroupWidgetArgs;
+
+export function createGroupWidget(
+  args: CreateTopGroupWidgetArgs,
+): Widget<GroupSM, SchemaType>;
+
+export function createGroupWidget(
+  args: CreateNestedGroupWidgetArgs,
+): Widget<NestedGroupSM, SchemaType>;
+
+export function createGroupWidget({
+  schemaTypeRegex,
+  customListItem,
+  customName,
+  hintItemName,
+}: CreateGroupWidgetArgs):
+  | Widget<GroupSM, SchemaType>
+  | Widget<NestedGroupSM, SchemaType> {
+  return {
+    Meta,
+    Form,
+    FormFields,
+    schema: createSchema(schemaTypeRegex),
+    create: (label: string) => ({
+      type: "Group",
+      config: {
+        label,
+        repeat: true,
+        fields: [],
+      },
+    }),
+    CustomListItem: customListItem,
+    TYPE_NAME: "Group",
+    CUSTOM_NAME: customName,
+    hintItemName,
+  };
+}

package/src/legacy/lib/models/common/widgets/Group/index.tsx

@@ -0,0 +1,72 @@
+import { type DroppableStateSnapshot } from "react-beautiful-dnd";
+
+import { useNestedGroupExperiment } from "@/hooks/useNestedGroupExperiment";
+import { type Item } from "@/legacy/components/ListItem";
+import { type TabField } from "@/legacy/lib/models/common/CustomType";
+import { type GroupSM } from "@/legacy/lib/models/common/Group";
+import { Widgets } from "@/legacy/lib/models/common/widgets/groupWidgets";
+import { type Widget } from "@/legacy/lib/models/common/widgets/Widget";
+
+import { createGroupWidget, type SchemaType } from "./createGroupWidget";
+import { CustomListItem } from "./ListItem";
+
+const widgetsArray = [
+  Widgets.Image,
+  Widgets.Text,
+  Widgets.StructuredText,
+  Widgets.Link,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Number,
+  Widgets.Color,
+  Widgets.Date,
+  Widgets.Embed,
+  Widgets.Timestamp,
+  Widgets.GeoPoint,
+  Widgets.ContentRelationship,
+  Widgets.LinkToMedia,
+  Widgets.NestedGroup,
+];
+
+export interface GroupListItemProps<F extends TabField> {
+  tabId: string;
+  widget: Widget<F, SchemaType>;
+  parentSnapshot: DroppableStateSnapshot;
+  showHints: boolean;
+  isRepeatable: boolean;
+  item: Item<F>;
+  draggableId: string;
+  saveItem: ({
+    apiId,
+    newKey,
+    value,
+  }: {
+    apiId: string;
+    newKey: string;
+    value: F;
+  }) => void;
+  HintElement: JSX.Element;
+}
+
+const hintItemName = "item";
+
+const GroupListItem = (props: GroupListItemProps<GroupSM>): JSX.Element => {
+  const nestedGroupExperiment = useNestedGroupExperiment();
+  const maybeFilteredWidgetsArray = nestedGroupExperiment.eligible
+    ? widgetsArray
+    : widgetsArray.filter((widget) => widget.CUSTOM_NAME !== "NestedGroup");
+  return (
+    <CustomListItem
+      Widgets={Widgets}
+      widgetsArray={maybeFilteredWidgetsArray}
+      hintBase={hintItemName}
+      {...props}
+    />
+  );
+};
+
+export const GroupWidget = createGroupWidget({
+  schemaTypeRegex: /^Group$/,
+  customListItem: GroupListItem,
+  hintItemName,
+});

package/src/legacy/lib/models/common/widgets/Image/index.ts

@@ -1,5 +1,5 @@
 import { Image } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { BsImage } from "react-icons/bs";
+import { MdOutlineImage } from "react-icons/md";
 import * as yup from "yup";
 
 import { createValidationSchema } from "../../../../forms";
@@ -38,9 +38,7 @@ const schema = yup.object().shape({
 });
 
 const Meta = {
-  icon: BsImage,
-  title: "Image",
-  description: "A responsive image field with constraints",
+  icon: MdOutlineImage,
 };
 
 export const ImageWidget: Widget<Image, typeof schema> = {