@micromag/screen-keypad 0.3.256

package/es/index.js

@@ -0,0 +1,748 @@
+import { FormattedMessage, defineMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { animated } from '@react-spring/web';
+import camelCase from 'camelcase';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
+import { usePlaybackContext, usePlaybackMediaRef, useScreenSize, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
+import { getStyleFromBox, getStyleFromText, getStyleFromColor } from '@micromag/core/utils';
+import Background from '@micromag/element-background';
+import Button from '@micromag/element-button';
+import Container from '@micromag/element-container';
+import Heading from '@micromag/element-heading';
+import Keypad$1 from '@micromag/element-keypad';
+import Layout from '@micromag/element-layout';
+import Scroll from '@micromag/element-scroll';
+import Text from '@micromag/element-text';
+import Visual from '@micromag/element-visual';
+
+var styles = {"popupButton":"micromag-screen-keypad-popupButton","background":"micromag-screen-keypad-background","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","buttonLabel":"micromag-screen-keypad-buttonLabel","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","popupBackdrop":"micromag-screen-keypad-popupBackdrop","withSquareItems":"micromag-screen-keypad-withSquareItems","button":"micromag-screen-keypad-button","thumbnail":"micromag-screen-keypad-thumbnail","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyText":"micromag-screen-keypad-emptyText","emptyTitle":"micromag-screen-keypad-emptyTitle","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","isPopupEmpty":"micromag-screen-keypad-isPopupEmpty","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
+
+var placeholders = [{
+  id: '1'
+}, {
+  id: '2'
+}, {
+  id: '3'
+}, {
+  id: '4'
+}, {
+  id: '5'
+}, {
+  id: '6'
+}, {
+  id: '7'
+}, {
+  id: '8'
+}, {
+  id: '9'
+}];
+var placeholderPopupBoxStyles = {
+  padding: {
+    left: 30,
+    top: 30,
+    right: 30,
+    bottom: 30
+  }
+};
+var stopDragEventsPropagation = {
+  onTouchMove: function onTouchMove(e) {
+    return e.stopPropagation();
+  },
+  onTouchStart: function onTouchStart(e) {
+    return e.stopPropagation();
+  },
+  onTouchEnd: function onTouchEnd(e) {
+    return e.stopPropagation();
+  },
+  onPointerMove: function onPointerMove(e) {
+    return e.stopPropagation();
+  },
+  onPointerUp: function onPointerUp(e) {
+    return e.stopPropagation();
+  },
+  onPointerDown: function onPointerDown(e) {
+    return e.stopPropagation();
+  }
+};
+
+var mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
+  onClick: function onClick(e) {
+    return e.stopPropagation();
+  },
+  style: {
+    position: 'fixed',
+    zIndex: '1000',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    cursor: 'default'
+  }
+});
+
+var propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    heading: PropTypes$1.headingElement,
+    description: PropTypes$1.textElement,
+    visual: PropTypes$1.visualElement,
+    boxStyle: PropTypes$1.boxStyle
+  })),
+  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  keypadSettings: PropTypes.shape({
+    layout: PropTypes.shape({
+      columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
+      columns: PropTypes.number,
+      spacing: PropTypes.number,
+      withSquareItems: PropTypes.bool
+    })
+  }),
+  buttonStyles: PropTypes.shape({
+    layout: PropTypes.string,
+    textStyle: PropTypes$1.textStyle,
+    boxStyle: PropTypes$1.boxStyle
+  }),
+  popupStyles: PropTypes.shape({
+    layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
+    textStyle: PropTypes$1.textStyle,
+    boxStyle: PropTypes$1.boxStyle
+  }),
+  background: PropTypes$1.backgroundElement,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps = {
+  items: null,
+  layout: null,
+  keypadSettings: null,
+  buttonStyles: null,
+  popupStyles: null,
+  background: null,
+  current: true,
+  active: true,
+  className: null
+};
+
+var KeypadScreen = function KeypadScreen(_ref) {
+  var _ref15;
+
+  var items = _ref.items,
+      layout = _ref.layout,
+      keypadSettings = _ref.keypadSettings,
+      buttonStyles = _ref.buttonStyles,
+      popupStyles = _ref.popupStyles,
+      background = _ref.background,
+      current = _ref.current,
+      active = _ref.active,
+      className = _ref.className;
+  var trackScreenEvent = useTrackScreenEvent('keypad');
+
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      resolution = _useScreenSize.resolution; // const { topHeight: viewerTopHeight, bottomHeight: viewerBottomHeight } = useViewerContext();
+
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit;
+
+  var screenState = useScreenState();
+  var backgroundPlaying = current && (isView || isEdit);
+  var mediaShouldLoad = !isPlaceholder && (current || active);
+  var isInteractivePreview = isEdit && screenState === null;
+
+  var _ref2 = keypadSettings || {},
+      _ref2$layout = _ref2.layout,
+      keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
+
+  var _ref3 = keypadLayout || {},
+      _ref3$columnAlign = _ref3.columnAlign,
+      columnAlign = _ref3$columnAlign === void 0 ? null : _ref3$columnAlign,
+      _ref3$columns = _ref3.columns,
+      columns = _ref3$columns === void 0 ? null : _ref3$columns,
+      _ref3$spacing = _ref3.spacing,
+      spacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
+      _ref3$withSquareItems = _ref3.withSquareItems,
+      withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
+
+  var _ref4 = buttonStyles || {},
+      _ref4$layout = _ref4.layout,
+      buttonLayout = _ref4$layout === void 0 ? null : _ref4$layout,
+      _ref4$textStyle = _ref4.textStyle,
+      buttonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
+      _ref4$boxStyle = _ref4.boxStyle,
+      buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
+
+  var _ref5 = popupStyles || {},
+      _ref5$layout = _ref5.layout,
+      popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
+      _ref5$backdrop = _ref5.backdrop,
+      popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
+      _ref5$textStyle = _ref5.textStyle,
+      popupTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
+      _ref5$boxStyle = _ref5.boxStyle,
+      popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
+
+  var popupLayoutClassName = useMemo(function () {
+    return popupLayout !== null ? camelCase(popupLayout) : '';
+  }, [popupLayout]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showPopup = _useState2[0],
+      setShowPopup = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popup = _useState4[0],
+      setPopup = _useState4[1];
+
+  var _ref6 = popup || {},
+      _ref6$heading = _ref6.heading,
+      popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
+      _ref6$content = _ref6.content,
+      popupContent = _ref6$content === void 0 ? null : _ref6$content,
+      _ref6$largeVisual = _ref6.largeVisual,
+      largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
+
+  var _ref7 = popupHeading || {},
+      _ref7$body = _ref7.body,
+      popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body;
+
+  var _ref8 = popupContent || {},
+      _ref8$body = _ref8.body,
+      popupContentBody = _ref8$body === void 0 ? null : _ref8$body;
+
+  var onItemClick = useCallback(function (e, item) {
+    e.stopPropagation();
+    setPopup(item);
+    setShowPopup(1);
+    trackScreenEvent('click_item', item);
+  }, [setPopup, trackScreenEvent]);
+  var onCloseModal = useCallback(function () {
+    setShowPopup(0);
+    trackScreenEvent('close_modal');
+  }, [setShowPopup]);
+  var computePopupProgress = useCallback(function (_ref9) {
+    var dragActive = _ref9.active,
+        _ref9$movement = _slicedToArray(_ref9.movement, 2),
+        my = _ref9$movement[1],
+        _ref9$velocity = _slicedToArray(_ref9.velocity, 2),
+        vy = _ref9$velocity[1];
+
+    var damper = 0.5;
+    var p = Math.max(0, my) / window.innerHeight;
+    var progress = p * damper;
+    var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
+
+    if (!dragActive) {
+      if (reachedThreshold) {
+        onCloseModal();
+      }
+
+      return reachedThreshold ? 0 : 1;
+    }
+
+    return 1 - progress;
+  }, [onCloseModal]);
+
+  var _useDragProgress = useDragProgress({
+    disabled: !isView,
+    progress: showPopup ? 1 : 0,
+    computeProgress: computePopupProgress,
+    springParams: {
+      config: {
+        tension: 300,
+        friction: 30
+      }
+    }
+  }),
+      bindPopupDrag = _useDragProgress.bind,
+      popupSpring = _useDragProgress.progress;
+
+  var gridItems = useMemo(function () {
+    return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
+      var _ref14;
+
+      var _ref10 = item || {},
+          _ref10$id = _ref10.id,
+          id = _ref10$id === void 0 ? null : _ref10$id,
+          _ref10$label = _ref10.label,
+          label = _ref10$label === void 0 ? null : _ref10$label,
+          _ref10$visual = _ref10.visual,
+          visual = _ref10$visual === void 0 ? null : _ref10$visual,
+          _ref10$textStyle = _ref10.textStyle,
+          textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
+          _ref10$boxStyle = _ref10.boxStyle,
+          boxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
+          _ref10$heading = _ref10.heading,
+          heading = _ref10$heading === void 0 ? null : _ref10$heading,
+          _ref10$content = _ref10.content,
+          content = _ref10$content === void 0 ? null : _ref10$content,
+          _ref10$largeVisual = _ref10.largeVisual,
+          popupLargeVisual = _ref10$largeVisual === void 0 ? null : _ref10$largeVisual;
+
+      var _ref11 = visual || {},
+          _ref11$url = _ref11.url,
+          visualUrl = _ref11$url === void 0 ? null : _ref11$url;
+
+      var _ref12 = heading || {},
+          _ref12$body = _ref12.body,
+          headingBody = _ref12$body === void 0 ? null : _ref12$body;
+
+      var _ref13 = content || {},
+          _ref13$body = _ref13.body,
+          contentBody = _ref13$body === void 0 ? null : _ref13$body;
+
+      var key = label || visualUrl || id;
+      var isEmpty = label === null && visual === null;
+      var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: styles.item
+      }, /*#__PURE__*/React.createElement(Button, {
+        className: classNames([styles.button, (_ref14 = {}, _defineProperty(_ref14, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref14, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref14, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref14, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref14, styles.isEmpty, isEmpty), _defineProperty(_ref14, styles.isPopupEmpty, isPopupEmpty), _ref14)]),
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
+        onClick: !isPopupEmpty ? function (e) {
+          return onItemClick(e, item);
+        } : function (e) {
+          return e.preventDefault();
+        }
+      }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderImage, {
+        className: styles.imagePlaceholder
+      }), /*#__PURE__*/React.createElement(PlaceholderText, {
+        lines: 2
+      })) : /*#__PURE__*/React.createElement(React.Fragment, null, visual !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+        emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "Qanvis",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Visual"
+          }]
+        }),
+        emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
+        isEmpty: visual === null
+      }, /*#__PURE__*/React.createElement(Visual, {
+        className: styles.buttonVisual,
+        imageClassName: styles.thumbnail,
+        media: visual,
+        width: "auto"
+      })) : null, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+        placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
+        emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "Zbu5Uk",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Label"
+          }]
+        }),
+        emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
+        isEmpty: label === null
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.buttonLabel
+      }, label)) : null)));
+    });
+  }, [items, screenState, keypadSettings]);
+  useEffect(function () {
+    if (screenState === 'popup') {
+      setPopup(placeholderPopupBoxStyles); // @note force placeholder
+
+      setShowPopup(1);
+    }
+
+    if (screenState === 'keypad') {
+      setPopup(null);
+      setShowPopup(0);
+    }
+
+    if (screenState !== null && screenState.includes('popups')) {
+      var index = screenState.split('.').pop();
+      var found = items[index];
+      setShowPopup(1);
+      setPopup(found);
+    }
+
+    if (screenState === null) {
+      setShowPopup(0);
+      setPopup(null);
+    }
+  }, [screenState, items]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref15 = {}, _defineProperty(_ref15, className, className !== null), _defineProperty(_ref15, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref15, styles.withSquareItems, withSquareItems), _ref15)]),
+    "data-screen-ready": true
+  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef,
+    className: styles.background
+  }) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height,
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement(Layout, {
+    className: styles.layout,
+    verticalAlign: layout // style={
+    //     !isPlaceholder
+    //         ? {
+    //               padding: spacing,
+    //               paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+    //               paddingBottom:
+    //                   (current && !isPreview ? viewerBottomHeight : 0) + spacing,
+    //           }
+    //         : null
+    // }
+
+  }, /*#__PURE__*/React.createElement(Keypad$1, {
+    className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
+    align: columnAlign,
+    columns: isPlaceholder ? 3 : columns,
+    spacing: isPlaceholder ? 2 : spacing,
+    items: gridItems
+  })), /*#__PURE__*/React.createElement(animated.div, {
+    className: classNames([styles.popupBackdrop]),
+    style: _objectSpread(_objectSpread({}, getStyleFromColor(popupBackdrop)), {}, {
+      opacity: popupSpring.to(function (p) {
+        return p;
+      })
+    })
+  }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
+    className: styles.popup,
+    style: {
+      transform: popupSpring.to(function (p) {
+        return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
+      }),
+      pointerEvents: popupSpring.to(function (p) {
+        return p < 0.1 ? 'none' : 'auto';
+      })
+    }
+  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.popupButton,
+    onClick: function onClick() {
+      if (onCloseModal !== null) {
+        onCloseModal();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
+    style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle)), getStyleFromText(popupTextStyle))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.popupWrapper
+  }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "popupHeading",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "IE7U/Q",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Heading"
+      }]
+    }),
+    emptyClassName: classNames([styles.empty, styles.emptyHeading]),
+    isEmpty: (popupHeading === null || popupHeadingBody === '') && screenState !== 'popup'
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: styles.popupHeading,
+    body: "Lorem ipsum"
+  }, popupHeading))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "popupContent",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JRZoe6",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Content"
+      }]
+    }),
+    emptyClassName: classNames([styles.empty, styles.emptyContent]),
+    isEmpty: (popupContent === null || popupContentBody === '') && popupContent === null && screenState !== 'popup'
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.popupContent,
+    body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
+  }, popupContent))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "popupVisual",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "z4Pr+g",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Visual (Image or Video)"
+      }]
+    }),
+    emptyClassName: classNames([styles.empty, styles.emptyVisual]),
+    isEmpty: largeVisual === null
+  }, /*#__PURE__*/React.createElement(Visual, {
+    className: styles.popupVisual,
+    media: largeVisual,
+    width: "100%"
+  })) : null, largeVisual === null && isPreview ? /*#__PURE__*/React.createElement(PlaceholderImage, {
+    className: styles.popupVisual
+  }) : null)))))));
+};
+
+KeypadScreen.propTypes = propTypes;
+KeypadScreen.defaultProps = defaultProps;
+var Keypad = /*#__PURE__*/React.memo(KeypadScreen);
+
+var definition = [{
+  id: 'keypad',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      id: "cGItoy",
+      defaultMessage: [{
+        "type": 0,
+        "value": "List"
+      }]
+    }),
+    order: 4
+  },
+  title: defineMessage({
+    id: "75nZbY",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Keypad"
+    }]
+  }),
+  layouts: ['top', 'middle', 'bottom'],
+  component: Keypad,
+  states: [{
+    id: 'keypad',
+    label: defineMessage({
+      id: "Z4f5qh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Buttons"
+      }]
+    }),
+    fields: [{
+      name: 'items',
+      type: 'buttons',
+      label: defineMessage({
+        id: "fbUW2U",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Items"
+        }]
+      }),
+      theme: {
+        label: {
+          textStyle: 'button'
+        }
+      },
+      isSection: true
+    }, {
+      name: 'buttonStyles',
+      type: 'fields',
+      defaultValue: {
+        layout: 'label-bottom',
+        boxStyle: {
+          backgroundColor: {
+            alpha: 0.15,
+            color: '#000000'
+          }
+        }
+      },
+      isList: true,
+      fields: [{
+        name: 'layout',
+        type: 'button-layout',
+        isHorizontal: true,
+        label: defineMessage({
+          id: "OPxJx/",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Layout"
+          }]
+        })
+      }, {
+        name: 'textStyle',
+        type: 'text-style-form',
+        label: defineMessage({
+          id: "rzXCu2",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Label style"
+          }]
+        })
+      }, {
+        name: 'boxStyle',
+        type: 'box-style-form',
+        label: defineMessage({
+          id: "nno1Pq",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Button style"
+          }]
+        })
+      }]
+    }]
+  }, {
+    id: 'popup',
+    label: defineMessage({
+      id: "mBYGpP",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Popup"
+      }]
+    }),
+    fields: [{
+      name: 'popupStyles',
+      type: 'fields',
+      defaultValue: {
+        layout: 'content-top'
+      },
+      isList: true,
+      fields: [{
+        name: 'layout',
+        type: 'card-layout',
+        // defaultValue: 'content-top',
+        label: defineMessage({
+          id: "OPxJx/",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Layout"
+          }]
+        })
+      }, {
+        name: 'textStyle',
+        type: 'text-style-form',
+        label: defineMessage({
+          id: "OEckOD",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Text style"
+          }]
+        })
+      }, {
+        name: 'boxStyle',
+        type: 'box-style-form',
+        label: defineMessage({
+          id: "heeSlL",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Frame and backgound styles"
+          }]
+        })
+      }, {
+        name: 'backdrop',
+        type: 'color',
+        label: defineMessage({
+          id: "uv3PH4",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Backdrop color"
+          }]
+        })
+      }]
+    }]
+  }, {
+    id: 'popups',
+    label: defineMessage({
+      id: "Hyqnww",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Popups"
+      }]
+    }),
+    defaultValue: [],
+    repeatable: true,
+    fieldName: 'items',
+    fields: [{
+      name: 'heading',
+      type: 'heading-element',
+      label: defineMessage({
+        id: "6iR9Mt",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Heading"
+        }]
+      })
+    }, {
+      name: 'content',
+      type: 'text-element',
+      label: defineMessage({
+        id: "uoF5Pv",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Content"
+        }]
+      })
+    }, {
+      name: 'largeVisual',
+      type: 'visual',
+      label: defineMessage({
+        id: "HwqzVR",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Visual"
+        }]
+      })
+    }]
+  }],
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'middle',
+    label: defineMessage({
+      id: "4iBXj2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'keypadSettings',
+    type: 'fields',
+    isList: true,
+    withoutLabel: true,
+    defaultValue: {
+      layout: {
+        columnAlign: 'middle',
+        columns: 3,
+        spacing: 2,
+        withSquareItems: false
+      }
+    },
+    label: defineMessage({
+      id: "FjuRaw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Keypad settings"
+      }]
+    }),
+    fields: [{
+      name: 'layout',
+      type: 'keypad-layout-form'
+    }]
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      id: "+MPZRu",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }]
+}];
+
+export { Keypad, definition as default };