(store, doc, body) => {
   return GuiFactory.build(
     Container.sketch({
       dom: {
         classes: [ 'colorinput-container' ]
       },
       components: [
         renderColorInput({
           type: 'colorinput',
           name: 'alpha',
           label: Option.some('test-color-input'),
         }, helpers.shared, {
           colorPicker: (callback, value) => {},
           hasCustomColors: () => true,
           getColors: () => [
             { type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
             { type: choiceItem, text: 'Green', value: '#2FCC71' },
             { type: choiceItem, text: 'Blue', value: '#3598DB' },
             { type: choiceItem, text: 'Purple', value: '#9B59B6' },
             { type: choiceItem, text: 'Navy Blue', value: '#34495E' }
           ],
           getColorCols: () => 3
         })
       ]
     })
   );
 },

const makeCell = (row, col, labelId) => {
  const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
  const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );

  return GuiFactory.build({
    dom: {
      tag: 'div',
      attributes: {
        role: 'button',
        ['aria-labelledby']: labelId
      }
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('insert-table-picker-cell', [
        AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
        AlloyEvents.run(SystemEvents.execute(), emitExecute),
        AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
      ]),
      Toggling.config({
        toggleClass: 'tox-insert-table-picker__selected',
        toggleOnExecute: false
      }),
      Focusing.config({onFocus: emitCellOver})
    ])
  });
};

const renderText = (text: string): AlloySpec => ({
  dom: {
    tag: 'div',
    classes: [ ItemClasses.textClass ]
  },
  components: [ GuiFactory.text(I18n.translate(text)) ]
});

      return memContainer.getOpt(anyInSystem).map((panel) => {
        const aImg = GuiFactory.external({
          element: img
        });

        Replacing.replaceAt(panel, 1, Option.some(aImg));

        const lastViewRect = viewRectState.get();
        const viewRect = {
          x: 0,
          y: 0,
          w: img.dom().naturalWidth,
          h: img.dom().naturalHeight
        };
        viewRectState.set(viewRect);
        const rect = Rect.inflate(viewRect, -20, -20);
        rectState.set(rect);

        if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
          zoomFit(panel, img);
        }

        repaintImg(panel, img);
        return img;
      });

 moveTo: (x: number, y: number) => {
   InlineView.showAt(notificationWrapper, {
     anchor: 'makeshift',
     x,
     y
   }, GuiFactory.premade(notification));
 },

    const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
      const initialData = validateData<T>(internalInitialData, dataValidator);

      const dialogInit = {
        dataValidator,
        initialData,
        internalDialog: contents
      };

      const dialogUi = renderInlineDialog<T>(
        dialogInit,
        {
          redial: DialogManager.DialogManager.redial,
          closeWindow: () => {
            InlineView.hide(inlineDialog);
            closeWindow(dialogUi.instanceApi);
          }
        },
        extras.backstage, ariaAttrs
      );

      const inlineDialog = GuiFactory.build(InlineView.sketch({
        lazySink: extras.backstage.shared.getSink,
        dom: {
          tag: 'div',
          classes: [ ]
        },
        // Fires the default dismiss event.
        fireDismissalEventInstead: { },
        inlineBehaviours: Behaviour.derive([
          AddEventsBehaviour.config('window-manager-inline-events', [
            // Can't just fireDimissalEvent formCloseEvent, because it is on the parent component of the dialog
            AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
              AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
            })
          ])
        ])
      }));
      InlineView.showAt(
        inlineDialog,
        anchor,
        GuiFactory.premade(dialogUi.dialog)
      );
      dialogUi.instanceApi.setData(initialData);
      Keying.focusIn(dialogUi.dialog);
      return dialogUi.instanceApi;
    };

export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
  const numRows = 10;
  const numColumns = 10;
  const sizeLabelId = Id.generate('size-label');
  const cells = makeCells(sizeLabelId, numRows, numColumns);

  const memLabel = Memento.record({
    dom: {
      tag: 'span',
      classes: ['tox-insert-table-picker__label'],
      attributes: {
        id: sizeLabelId
      }
    },
    components: [GuiFactory.text('0x0')],
    behaviours: Behaviour.derive([
      Replacing.config({})
    ])
  });

  return {
    type: 'widget',
    data: { value: Id.generate('widget-id')},
    dom: {
      tag: 'div',
      classes: ['tox-fancymenuitem'],
    },
    autofocus: true,
    components: [ItemWidget.parts().widget({
      dom: {
        tag: 'div',
        classes: ['tox-insert-table-picker']
      },
      components: makeComponents(cells).concat(memLabel.asSpec()),
      behaviours: Behaviour.derive([
        AddEventsBehaviour.config('insert-table-picker', [
          AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
            const row = e.event().row();
            const col = e.event().col();
            selectCells(cells, row, col, numRows, numColumns);
            Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
          }),
          AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
            spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
            AlloyTriggers.emit(c, SystemEvents.sandboxClose());
          })
        ]),
        Keying.config({
          initSize: {
            numRows,
            numColumns
          },
          mode: 'flatgrid',
          selector: '[role="button"]'
        })
      ])
    })]
  };
}

 const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
   if (comp.getSystem().isConnected()) {
     const banner = memBannerText.get(comp);
     Replacing.set(banner, [
       GuiFactory.text(text)
     ]);
   }
 };

 (store, doc, body) => {
   return GuiFactory.build(
     renderHtmlPanel({
       type: 'htmlpanel',
       html: '<br /><br /><hr />',
       presets: 'presentation'
     })
   );
 },

 Arr.last(stack.get()).each((last) => {
   stack.set(stack.get().slice(0, stack.get().length - 1));
   AlloyTriggers.emitWith(comp, changeSlideEvent, {
     // Because we are using premade, we should have access to the same element
     // to give focus (although it isn't working)
     contents: GuiFactory.premade(last.bar),
     focus: last.focus
   });
 });