import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { Row, Col, Box, Container, NoData, Text, Button, Icon, Dropdown, Switch, Input as Input$1, Popover, Title, Divider, Select as Select$1, Option, TextArea } from '@qonsoll/react-design';
import { Result, Select, Tooltip, notification, Menu, Tag, Input, Modal, Button as Button$1, Tree as Tree$1, Form, Tabs, Checkbox } from 'antd';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import PropTypes from 'prop-types';
import { createContext, useContext, useCallback, useState, useEffect, useRef, useMemo, memo, Fragment as Fragment$1, useReducer } from 'react';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useKeyPress, useHover } from '@umijs/hooks';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
import styled from 'styled-components';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { getFirestore, doc, getDoc, serverTimestamp, setDoc, updateDoc } from 'firebase/firestore';
import { initializeApp } from 'firebase/app';
import { nanoid } from 'nanoid';
import _ from 'lodash';
import { MdCode, MdOutlineViewQuilt, MdOutlineKeyboard, MdPhonelinkErase, MdStayCurrentPortrait } from 'react-icons/md';
import Handlebars from 'handlebars';
import * as NextLibElements from '@qonsoll/qonstructor-next-components';
import * as ReactLibElements from '@qonsoll/qonstructor-react-components';
import { PlusOutlined, FileImageOutlined, CloudSyncOutlined, DownOutlined, CloseOutlined } from '@ant-design/icons';
import { useParams } from 'react-router-dom';
import * as htmlToImage from 'html-to-image';
import Draggable from 'react-draggable';
import _typeof from '@babel/runtime/helpers/typeof';
import 'moment';

var NotFoundPage = function NotFoundPage() {
  // const navigate = useNavigate()
  // const handleBack = () => navigate(-1)
  // const handleHome = () => navigate('/', { replace: true })
  return /*#__PURE__*/jsx(Row, {
    h: "center",
    v: "center",
    height: "inherit",
    children: /*#__PURE__*/jsx(Col, {
      cw: "auto",
      children: /*#__PURE__*/jsx(Result, {
        status: "404",
        title: "404",
        subTitle: 'Sorry, the page you visited does not exist' // extra={
        //   <Box display="flex" justifyContent="space-evenly">
        //     <Button onClick={handleBack}>Back</Button>
        //     <Button onClick={handleHome} type="primary">
        //       Home
        //     </Button>
        //   </Box>
        // }

      })
    })
  });
};

var LayotContext = /*#__PURE__*/createContext();

var EventsContext = /*#__PURE__*/createContext();

var ComponentBuilderContext = /*#__PURE__*/createContext();

var useComponentBuilder = function useComponentBuilder() {
  return useContext(ComponentBuilderContext);
};

var useStateActions = function useStateActions(dispatch) {
  var addComponent = useCallback(function (payload) {
    return dispatch({
      type: 'add',
      payload: payload
    });
  }, [dispatch]);
  var addChildComponent = useCallback(function (payload) {
    return dispatch({
      type: 'addChild',
      payload: payload
    });
  }, [dispatch]);
  var removeComponent = useCallback(function (payload) {
    return dispatch({
      type: 'remove',
      payload: payload
    });
  }, [dispatch]);
  var updateComponent = useCallback(function (payload) {
    return dispatch({
      type: 'update',
      payload: payload
    });
  }, [dispatch]);
  var addTemplate = useCallback(function (payload) {
    return dispatch({
      type: 'addTemplate',
      payload: payload
    });
  }, [dispatch]);
  var makeTemplate = useCallback(function (payload) {
    return dispatch({
      type: 'makeTemplate',
      payload: payload
    });
  }, [dispatch]);
  var updateState = useCallback(function (payload) {
    return dispatch({
      type: 'updateState',
      payload: payload
    });
  }, [dispatch]);
  var replaceState = useCallback(function (payload) {
    return dispatch({
      type: 'replaceState',
      payload: payload
    });
  }, [dispatch]);
  var duplicate = useCallback(function (payload) {
    return dispatch({
      type: 'duplicate',
      payload: payload
    });
  }, [dispatch]);
  var removeTemplate = useCallback(function (payload) {
    return dispatch({
      type: 'removeTemplate',
      payload: payload
    });
  }, [dispatch]);
  var applyAttributes = useCallback(function (payload) {
    return dispatch({
      type: 'applyAttributes',
      payload: payload
    });
  }, [dispatch]);
  var insertAsProperty = useCallback(function (payload) {
    return dispatch({
      type: 'insertAsProperty',
      payload: payload
    });
  }, [dispatch]);
  return {
    addComponent: addComponent,
    addChildComponent: addChildComponent,
    removeComponent: removeComponent,
    updateComponent: updateComponent,
    addTemplate: addTemplate,
    makeTemplate: makeTemplate,
    updateState: updateState,
    replaceState: replaceState,
    duplicate: duplicate,
    removeTemplate: removeTemplate,
    applyAttributes: applyAttributes,
    insertAsProperty: insertAsProperty
  };
};

var useSelectedComponentData = function useSelectedComponentData(selectedComponent, components) {
  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      selectedComponentData = _useState2[0],
      setSelectedComponentData = _useState2[1];

  useEffect(function () {
    var isMounted = true;

    if (isMounted && selectedComponent) {
      var _components$all;

      setSelectedComponentData(components === null || components === void 0 ? void 0 : (_components$all = components.all) === null || _components$all === void 0 ? void 0 : _components$all[selectedComponent]);
    }

    return function () {
      return isMounted = false;
    };
  }, [selectedComponent, components]);
  return [selectedComponentData, setSelectedComponentData];
};

var useTmpAttributes = function useTmpAttributes(currentlySelected) {
  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      tmpAttributes = _useState2[0],
      setTmpAttributes = _useState2[1]; // Reset tmp attributes if selection changed


  useEffect(function () {
    var isMounted = true;
    isMounted && setTmpAttributes();
    return function () {
      return isMounted = false;
    };
  }, [currentlySelected]);
  return [tmpAttributes, setTmpAttributes];
};

function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var EventsProvider = function EventsProvider(_ref) {
  var children = _ref.children,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 10 : _ref$max;

  var _useState = useState({
    events: [],
    currentEvent: 0,
    isLastIgnored: false
  }),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components,
      replaceState = _useComponentBuilder.replaceState,
      currentlySelected = _useComponentBuilder.currentlySelected,
      setCurrentlySelected = _useComponentBuilder.setCurrentlySelected,
      defaultSelected = _useComponentBuilder.defaultSelected;

  useEffect(function () {
    return add(components);
  }, [components]);

  var add = function add(components) {
    var events = state.events,
        isLastIgnored = state.isLastIgnored;

    if (isLastIgnored) {
      setState(function (prev) {
        return _objectSpread$J(_objectSpread$J({}, prev), {}, {
          isLastIgnored: false
        });
      });
      return;
    }

    var eventsLength = events.length;

    if (eventsLength >= max) {
      events.shift();
      eventsLength = max - 1;
    }

    events.push({
      components: JSON.stringify(components)
    });
    setState({
      events: events,
      currentEvent: eventsLength
    });
  };

  var next = function next() {
    var currentEvent = state.currentEvent,
        events = state.events;
    var nextEvent = currentEvent + 1;
    var event = events[nextEvent];

    if (event && nextEvent < state.events.length) {
      setState(function (prev) {
        return _objectSpread$J(_objectSpread$J({}, prev), {}, {
          currentEvent: nextEvent > state.events.length ? state.events.length - 1 : nextEvent,
          isLastIgnored: true
        });
      });
      replaceState(JSON.parse(event.components));
    }
  };

  var undo = function undo() {
    var currentEvent = state.currentEvent,
        events = state.events;
    var nextEvent = currentEvent - 1;
    var event = events[nextEvent >= 0 ? nextEvent : 0];

    if (event && currentEvent > 0) {
      setState(function (prev) {
        return _objectSpread$J(_objectSpread$J({}, prev), {}, {
          currentEvent: nextEvent >= 0 ? nextEvent : 0,
          isLastIgnored: true
        });
      });
      var newState = JSON.parse(event.components);
      replaceState(newState);
      if (!newState.all[currentlySelected.id]) setCurrentlySelected(defaultSelected);
    }
  };

  useKeyPress('meta.z', function (e) {
    return !e.shiftKey && undo();
  });
  useKeyPress('ctrl.z', function (e) {
    return !e.shiftKey && undo();
  });
  useKeyPress('meta.shift.z', next);
  useKeyPress('ctrl.shift.z', next);
  return /*#__PURE__*/jsx(EventsContext.Provider, {
    value: {},
    children: children
  });
};

var _TYPE_TO_NAME_MAP;

var REACT_COMPONENT_TYPE = 'REACT';
var REACT_NATIVE_COMPONENT_TYPE = 'REACT_NATIVE';
var HTML_COMPONENT_TYPE = 'HTML';
var NEXT_COMPONENT_TYPE = 'NEXT';
var TYPE_TO_NAME_MAP = (_TYPE_TO_NAME_MAP = {}, _defineProperty(_TYPE_TO_NAME_MAP, REACT_COMPONENT_TYPE, 'React'), _defineProperty(_TYPE_TO_NAME_MAP, HTML_COMPONENT_TYPE, 'Html'), _defineProperty(_TYPE_TO_NAME_MAP, REACT_NATIVE_COMPONENT_TYPE, 'Native'), _defineProperty(_TYPE_TO_NAME_MAP, NEXT_COMPONENT_TYPE, 'Next'), _TYPE_TO_NAME_MAP);

var PAGES = 'pages';
var GLOBAL_TEMPLATES = 'globalTemplates';

var fbConfig = {
  apiKey: 'AIzaSyCCZAH8CciTxougD7XSR50vaeg-hOW_omM',
  authDomain: 'component-builder-e0578.firebaseapp.com',
  projectId: 'component-builder-e0578',
  storageBucket: 'component-builder-e0578.appspot.com',
  messagingSenderId: '76905756415',
  appId: '1:76905756415:web:8a29058e63ada5248afeca'
};

var app = initializeApp(fbConfig);

var firestore = getFirestore(app);

function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var getDocData = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(collectionName, id) {
    var docRef, snap;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            docRef = doc(firestore, collectionName, id);
            _context.next = 3;
            return getDoc(docRef);

          case 3:
            snap = _context.sent;
            return _context.abrupt("return", snap.exists() ? snap.data() : null);

          case 5:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function getDocData(_x, _x2) {
    return _ref.apply(this, arguments);
  };
}();

var create = /*#__PURE__*/function () {
  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(collection, id, data) {
    var additionalData,
        _len2,
        args,
        _key2,
        _args3 = arguments;

    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            additionalData = {
              _updatedAt: serverTimestamp(),
              _createdAt: serverTimestamp()
            };

            for (_len2 = _args3.length, args = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
              args[_key2 - 3] = _args3[_key2];
            }

            _context3.next = 4;
            return setDoc(doc.apply(void 0, [firestore, collection, id].concat(args)), _objectSpread$I(_objectSpread$I({}, data), {}, {
              _id: id
            }, additionalData));

          case 4:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  }));

  return function create(_x5, _x6, _x7) {
    return _ref3.apply(this, arguments);
  };
}();

var update = /*#__PURE__*/function () {
  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(collection, id, data) {
    var ref, additionalData;
    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
      while (1) {
        switch (_context5.prev = _context5.next) {
          case 0:
            ref = doc(firestore, collection, id);
            additionalData = {
              _updatedAt: serverTimestamp()
            };
            _context5.next = 4;
            return updateDoc(ref, _objectSpread$I(_objectSpread$I({}, data), additionalData));

          case 4:
          case "end":
            return _context5.stop();
        }
      }
    }, _callee5);
  }));

  return function update(_x10, _x11, _x12) {
    return _ref5.apply(this, arguments);
  };
}();

Select.Option;

var _templateObject$c;
styled(Box)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: var(--btn-height-base);\n  padding: 0 var(--btn-padding-horizontal-base);\n  border-radius: var(--ql-border-radius-md);\n  color: var(--ql-color-dark-t-lighten1);\n  &:hover {\n    color: var(--ql-color-black);\n    background: var(--ql-color-dark-t-lighten4);\n  }\n  ", "\n"])), function (_ref) {
  var active = _ref.active;
  return active && "color: var(--ql-color-black);\n     background: var(--ql-color-dark-t-lighten4);\n     font-weight: 600;";
});

function ownKeys$H(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$H(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ALL = 'ALL';

_objectSpread$H(_defineProperty({}, ALL, 'All'), TYPE_TO_NAME_MAP);

var ComponentTypeContext = /*#__PURE__*/createContext();

var ComponentTypeProvider = function ComponentTypeProvider(_ref) {
  var children = _ref.children,
      initialComponentType = _ref.initialComponentType;

  var _useState = useState(initialComponentType || NEXT_COMPONENT_TYPE),
      _useState2 = _slicedToArray(_useState, 2),
      componentType = _useState2[0],
      setComponentType = _useState2[1];

  return /*#__PURE__*/jsx(ComponentTypeContext.Provider, {
    value: {
      componentType: componentType,
      setComponentType: setComponentType
    },
    children: children
  });
};

var LiveSaveContext = /*#__PURE__*/createContext();

/**
 * It takes a component, and recursively parses its children, and then parses the attributes of the
 * component
 * @param all - The entire collection of components.
 * @param id - The id of the component to parse.
 * @param parentId - The id of the parent component.
 * @param [withTransform=false] - Object must be returned instead id
 * @param [withIdReplace=false] - If true, the old id will be replaced with a new id.
 * @param [withIdRemove=false] - If true, the component's id and parentId will be removed.
 * @param components - Object ref for setting list of new components
 * @returns The id of the component.
 */

var parseChild = function parseChild(params) {
  var _component$children;

  var all = params.all,
      id = params.id,
      parentId = params.parentId,
      _params$withTransform = params.withTransform,
      withTransform = _params$withTransform === void 0 ? false : _params$withTransform,
      _params$withIdReplace = params.withIdReplace,
      withIdReplace = _params$withIdReplace === void 0 ? false : _params$withIdReplace,
      _params$withIdRemove = params.withIdRemove,
      withIdRemove = _params$withIdRemove === void 0 ? false : _params$withIdRemove,
      components = params.components;
  var component = JSON.parse(JSON.stringify(all[id]));
  var componentId = withIdReplace ? nanoid() : component.id; // Transforming children into deep ds

  component.children = ((_component$children = component.children) === null || _component$children === void 0 ? void 0 : _component$children.map(function (_id) {
    return parseChild({
      all: all,
      id: _id,
      parentId: componentId,
      withIdReplace: withIdReplace,
      withTransform: withTransform,
      withIdRemove: withIdRemove,
      components: components
    });
  })) || []; // Transforming attributes into deep ds

  component.attributes = parseAttributes({
    attributes: component === null || component === void 0 ? void 0 : component.attributes,
    all: all,
    parentId: componentId,
    withIdReplace: withIdReplace,
    withTransform: withTransform,
    withIdRemove: withIdRemove,
    components: components
  });
  component.id = componentId;
  if (parentId) component.parentId = parentId;
  if (components) components[componentId] = component;

  if (withIdRemove) {
    delete component.id;
    delete component.parentId;
  }

  return withTransform ? component : componentId;
};

function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$G(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * It takes the attributes of a component and parses them into an object
 * @param attributes - The attributes of the current node.
 * @param parentId - The id of the parent element.
 * @param all - The entire tree of components.
 * @param [withTransform=false] - If true, the attribute will be transformed into a component.
 * @param [withIdReplace=false] - If true, the id of the parent component will be replaced with the id
 * of the child component.
 * @param [withIdRemove=false] - If true, the id of the component will be removed from the attributes.
 * @param components - The components object that contains all the components.
 * @returns The parsed attributes.
 */

var parseAttributes = function parseAttributes(params) {
  var attributes = params.attributes,
      parentId = params.parentId,
      all = params.all,
      _params$withTransform = params.withTransform,
      withTransform = _params$withTransform === void 0 ? false : _params$withTransform,
      _params$withIdReplace = params.withIdReplace,
      withIdReplace = _params$withIdReplace === void 0 ? false : _params$withIdReplace,
      _params$withIdRemove = params.withIdRemove,
      withIdRemove = _params$withIdRemove === void 0 ? false : _params$withIdRemove,
      components = params.components;
  var parsedAttributes = Object.keys(attributes || {}).reduce(function (acc, key) {
    var attribute = attributes[key];
    var isComponent = (attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'component'; // Parsing attribute with possibility to convert into component(object) or id(string)

    if (isComponent) {
      var _attribute = parseChild({
        id: attribute.value,
        parentId: parentId,
        all: all,
        withIdReplace: withIdReplace,
        withTransform: withTransform,
        withIdRemove: withIdRemove,
        components: components
      });

      return _objectSpread$G(_objectSpread$G({}, acc), {}, _defineProperty({}, key, {
        type: 'component',
        value: _attribute
      }));
    }

    return _objectSpread$G(_objectSpread$G({}, acc), {}, _defineProperty({}, key, attribute));
  }, {});
  return parsedAttributes;
};

function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * It takes an id and a structure, and returns a structure with the same id, but with the children
 * transformed into a deep structure
 * @param id - The id of the component you want to parse
 * @param all - The entire structure of the component tree.
 * @param [additionalData] - This is an object that can be used to pass additional data to the
 * template.
 * @returns A structure that is ready to be used in the template.
 */

var parseStructureForTemplate = function parseStructureForTemplate(id, all) {
  var _component$children;

  var additionalData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

  var _component = _objectSpread$F({}, all[id]);

  delete _component.id;
  _component.parentId = 'root'; // Transforming children into deep ds

  _component.children = ((_component$children = _component.children) === null || _component$children === void 0 ? void 0 : _component$children.map(function (key) {
    return parseChild({
      id: key,
      all: all,
      withIdRemove: true,
      withTransform: true
    });
  })) || [];
  _component.attributes = parseAttributes({
    attributes: _component.attributes,
    all: all,
    withIdRemove: true,
    withTransform: true
  }) || {};
  return _objectSpread$F(_objectSpread$F({}, _component), additionalData);
};

function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * It takes a component's id and all of the components, and returns a component with its children
 * parsed
 * @param id - The id of the component you want to parse.
 * @param all - The entire structure of the components.
 * @returns A component with its children parsed.
 */

var parseStructure = function parseStructure(id, all) {
  var _component$children;

  var _component = _objectSpread$E({}, all[id]); // Transforming children into deep ds


  _component.children = ((_component$children = _component.children) === null || _component$children === void 0 ? void 0 : _component$children.map(function (key) {
    return parseChild({
      id: key,
      all: all,
      withTransform: true
    });
  })) || [];
  _component.attributes = parseAttributes({
    attributes: _component.attributes,
    all: all,
    withTransform: true
  }) || {};
  return _objectSpread$E({}, _component);
};

function ownKeys$D(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * It takes the structure of the page and the id of the component to be copied. It parses the structure
 * of the page and returns a new structure with the copied component
 * @param _all - The entire structure of the project.
 * @param id - The id of the component to be copied.
 * @returns A list of two items:
 * 1. A dictionary of components, where the key is the component id and the value is the component
 * object.
 * 2. The component object that was parsed.
 */

var parseForCopyAndDuplicate = function parseForCopyAndDuplicate(_all, id) {
  var all = JSON.parse(JSON.stringify(_all));
  var components = {};

  var parseStructure = function parseStructure(_id) {
    var _component = _objectSpread$D({}, all[_id]);

    var componentId = nanoid();
    _component.id = componentId; // Transforming children into deep ds

    _component.children = _component.children.map(function (el) {
      return parseChild({
        id: el,
        all: all,
        parentId: componentId,
        withIdReplace: true,
        components: components
      });
    });
    _component.attributes = parseAttributes({
      attributes: _component.attributes,
      all: all,
      parentId: componentId,
      withIdReplace: true,
      components: components
    }) || {};
    components[componentId] = _component;
    return [components, _component];
  };

  return parseStructure(id);
};

var NUMBER_OF_ACTIONS_TO_AUTOSAVE = 3;

var LiveSaveProvider = function LiveSaveProvider(props) {
  var children = props.children,
      onChange = props.onChange,
      _props$numberOfAction = props.numberOfActionsBeforeAutoSave,
      numberOfActionsBeforeAutoSave = _props$numberOfAction === void 0 ? NUMBER_OF_ACTIONS_TO_AUTOSAVE : _props$numberOfAction;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      textVisibility = _useState2[0],
      setTextVisibility = _useState2[1]; // State to monitor how many changes were made and trigger autosave
  // depending on actions limit number


  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      currentNumberOfActions = _useState4[0],
      setCurrentNumberOfActions = _useState4[1];

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components,
      isTemplateEditPage = _useComponentBuilder.isTemplateEditPage,
      defaultSelected = _useComponentBuilder.defaultSelected;

  var saveTemplate = function saveTemplate() {
    var template = parseStructureForTemplate(defaultSelected.id, components.all);
    onChange === null || onChange === void 0 ? void 0 : onChange(template);
  };

  var savePage = function savePage() {
    return onChange === null || onChange === void 0 ? void 0 : onChange(components);
  };

  var saveChanges = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              e === null || e === void 0 ? void 0 : e.preventDefault();
              _context.prev = 1;
              _context.next = 4;
              return isTemplateEditPage ? saveTemplate() : savePage();

            case 4:
              setTextVisibility(true);
              _context.next = 10;
              break;

            case 7:
              _context.prev = 7;
              _context.t0 = _context["catch"](1);
              console.error('Error during save', JSON.stringify(_context.t0));

            case 10:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[1, 7]]);
    }));

    return function saveChanges(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  useEffect(function () {
    var isMounted = true;

    if (isMounted && currentNumberOfActions === numberOfActionsBeforeAutoSave) {
      saveChanges();
      setCurrentNumberOfActions(0);
    } else isMounted && setCurrentNumberOfActions(function (prev) {
      return prev + 1;
    });

    return function () {
      return isMounted = false;
    };
  }, [components, numberOfActionsBeforeAutoSave]);
  useEffect(function () {
    textVisibility && setTimeout(function () {
      return setTextVisibility(false);
    }, 3000);
  }, [textVisibility]);
  return /*#__PURE__*/jsx(LiveSaveContext.Provider, {
    value: {
      saveChanges: saveChanges,
      textVisibility: textVisibility
    },
    children: children
  });
};

var ResponsiveContext = /*#__PURE__*/createContext();

//get all styles from qonsoll after component mount
function getStyles() {
  var css = [];

  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    var rules = 'cssRules' in sheet ? sheet.cssRules : sheet.rules;

    if (rules) {
      css.push('\n/* Stylesheet : ' + (sheet.href || '[inline styles]') + ' */');

      for (var j = 0; j < rules.length; j++) {
        var rule = rules[j];
        if ('cssText' in rule) css.push(rule.cssText);else css.push(rule.selectorText + ' {\n' + rule.style.cssText + '\n}\n');
      }
    }
  }

  return css.join('\n') + '\n';
}

var sortByDate = function sortByDate(list, order) {
  return list ? _.orderBy(list, ['_createdAt'], [order || 'desc']) : [];
};

var ResponsiveProvider = function ResponsiveProvider(_ref) {
  var _parentRef$current, _parentRef$current2;

  var children = _ref.children,
      parentRef = _ref.parentRef;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isResponseOn = _useState2[0],
      setIsResponseOn = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      currentStyle = _useState4[0],
      setCurrentStyle = _useState4[1];

  var _useState5 = useState(),
      _useState6 = _slicedToArray(_useState5, 2),
      wrapperHeight = _useState6[0],
      setWrapperHeight = _useState6[1];

  var _useState7 = useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      wrapperWidth = _useState8[0],
      setWrapperWidth = _useState8[1];

  var _useState9 = useState(1),
      _useState10 = _slicedToArray(_useState9, 2),
      scaleNum = _useState10[0],
      setScaleNum = _useState10[1];

  var _useState11 = useState(null),
      _useState12 = _slicedToArray(_useState11, 2),
      node = _useState12[0],
      setNode = _useState12[1];

  var wrapperRef = useRef();
  var iframeRef = useRef();
  var parentWidth = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.clientWidth;
  var parentHeight = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.clientHeight;
  useEffect(function () {
    var isMounted = true;

    if (isMounted) {
      if (wrapperRef) setNode(wrapperRef.current);
      checkBlockOverLimit();
      setCurrentStyle(isResponseOn ? getStyles() : '');
    }

    return function () {
      return isMounted = false;
    };
  }, [isResponseOn, wrapperHeight, wrapperWidth]);

  var handleSizeChange = function handleSizeChange(w, h) {
    setWrapperHeight(h);
    setWrapperWidth(w);
    checkBlockOverLimit();
    setCurrentStyle(getStyles());
    setIsResponseOn(true);
  }; //Check or iFrame size isn't bigger than window size/ In case if is - scale iframe content to fit


  var checkBlockOverLimit = function checkBlockOverLimit() {
    if (wrapperWidth > parentWidth) {
      setScaleNum(parentWidth / wrapperWidth);
    } else if (wrapperWidth < parentWidth + 1) {
      setScaleNum(1);
    } else return 1;
  };

  var frameWidthLimit = function frameWidthLimit() {
    if (wrapperWidth > parentWidth - 10) return '100%';else return wrapperWidth;
  };

  var frameHeightLimit = function frameHeightLimit() {
    if (wrapperHeight > parentHeight - 10) return parentHeight;else return wrapperHeight;
  };

  return /*#__PURE__*/jsx(ResponsiveContext.Provider, {
    value: {
      isResponseOn: isResponseOn,
      setIsResponseOn: setIsResponseOn,
      getStyles: getStyles,
      currentStyle: currentStyle,
      setCurrentStyle: setCurrentStyle,
      wrapperHeight: wrapperHeight,
      setWrapperHeight: setWrapperHeight,
      wrapperWidth: wrapperWidth,
      setWrapperWidth: setWrapperWidth,
      scaleNum: scaleNum,
      setScaleNum: setScaleNum,
      handleSizeChange: handleSizeChange,
      node: node,
      wrapperRef: wrapperRef,
      iframeRef: iframeRef,
      parentHeight: parentHeight,
      parentWidth: parentWidth,
      frameWidthLimit: frameWidthLimit,
      frameHeightLimit: frameHeightLimit
    },
    children: children
  });
};

var AdditionalPropsContext = /*#__PURE__*/createContext();

function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var AdditionalPropsProvider = function AdditionalPropsProvider(props) {
  var children = props.children,
      _props$components = props.components,
      components = _props$components === void 0 ? {} : _props$components,
      _props$variables = props.variables,
      variables = _props$variables === void 0 ? {} : _props$variables;
  var providerValue = useMemo(function () {
    return _objectSpread$C({
      variables: _objectSpread$C({}, variables)
    }, components);
  }, [variables, components]);
  return /*#__PURE__*/jsx(AdditionalPropsContext.Provider, {
    value: providerValue,
    children: children
  });
};

AdditionalPropsProvider.propTypes = {
  children: PropTypes.any,
  components: PropTypes.shape({
    Asq: PropTypes.shape({
      forms: PropTypes.array,
      onFinish: PropTypes.func,
      getForm: PropTypes.func,
      getFormQuestions: PropTypes.func
    }),
    Video: PropTypes.shape({
      videos: PropTypes.array
    })
  }),
  variables: PropTypes.any
};

var useAdditionalProps = function useAdditionalProps() {
  return useContext(AdditionalPropsContext);
};

var useExtractAdditionalProps = function useExtractAdditionalProps(name) {
  var context = useContext(AdditionalPropsContext) || {};
  var additionalProps = useMemo(function () {
    var _context$hasOwnProper;

    return context !== null && context !== void 0 && (_context$hasOwnProper = context.hasOwnProperty) !== null && _context$hasOwnProper !== void 0 && _context$hasOwnProper.call(context, name) ? context[name] : {};
  }, [name, context]);
  return additionalProps;
};

var useLayout = function useLayout() {
  return useContext(LayotContext) || {};
};

var useComponentType = function useComponentType() {
  return useContext(ComponentTypeContext);
};

var useLiveSave = function useLiveSave() {
  return useContext(LiveSaveContext);
};

var useResponsive = function useResponsive() {
  return useContext(ResponsiveContext);
};

function ownKeys$B(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var UniversalComponentList = function UniversalComponentList(props) {
  var innerElements = props.innerElements,
      parentId = props.parentId;

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  return !!innerElements.length ? /*#__PURE__*/jsx(Fragment, {
    children: innerElements.map(function (childrenId) {
      var data = components.all[childrenId];
      var ucProps = {
        key: childrenId,
        parentId: parentId,
        data: data
      };
      return /*#__PURE__*/jsx(UniversalComponent$1, _objectSpread$B({}, ucProps));
    })
  }) : null;
};

var UniversalComponentsList = /*#__PURE__*/memo(UniversalComponentList);

var generateSpaces = function generateSpaces(count) {
  var tabSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
  return Array(count * tabSize).fill(' ').join('');
};
var getName = function getName(title) {
  return title.split('').map(function (el, index) {
    return !index ? el.toUpperCase() : el;
  }).map(function (el, index) {
    return title[index - 1] === ' ' ? el.toUpperCase() : el;
  }).join('').replaceAll(' ', '');
};
var generateAttributes = function generateAttributes(attributes) {
  return attributes ? Object.keys(attributes).map(function (attr) {
    var attrValue = "".concat(attributes[attr]);
    var isBoolean = !![true, false, 'true', 'false'].includes(attrValue);
    return " ".concat(attr, "=").concat(isBoolean ? "{".concat(attrValue, "}") : "\"".concat(attrValue, "\""));
  }).join('') : '';
};

var ReactTemplate = "{{#each imports}}import { {{elements}} } from '{{lib}}'\n{{/each}}\n{{#if states}}import { useState } from 'React'\n{{/if}}\n\nfunction {{componentName}}(props) {\n{{#each states as |state|}}  const [{{state}}, set{{capitalize state}}] = useState()\n{{/each}}{{#if states}}\n{{/if}}\n  return (\n    <>\n{{code}}\n    </>\n  )\n}\n\nexport default {{componentName}}\n";

var useReactComponentBuilder = function useReactComponentBuilder() {
  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components,
      isTemplateEditPage = _useComponentBuilder.isTemplateEditPage;

  var all = components.all;

  var parseBody = function parseBody(components, lib, folder) {
    var _imports;

    /* imports => { "@qonsoll...": ['Container', 'Row', ...], ... } */
    var imports = (_imports = {}, _defineProperty(_imports, lib, []), _defineProperty(_imports, folder, []), _imports);

    var mappingItem = function mappingItem(data, level) {
      var name = data.name,
          _children = data.children,
          _text = data.text,
          attributes = data.attributes;
      var spaces = generateSpaces(level + 1);
      var spacesForChildren = generateSpaces(level + 2);
      var attrs = generateAttributes(attributes);
      var text = _text ? spacesForChildren + _text : '';

      var children = text + (_children && deepParse(_children, level + 1));

      var componentCode = children ? "".concat(spaces, "<").concat(name).concat(attrs, ">\n").concat(children, "\n").concat(spaces, "</").concat(name, ">") : "".concat(spaces, "<").concat(name).concat(attrs, " />");
      return componentCode;
    };
    /* recursive function */


    var deepParse = function deepParse(components
    /*ids*/
    ) {
      var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
      components.forEach(function (_ref) {
        var name = _ref.name,
            _lib = _ref.lib;
        !imports[_lib || lib].includes(name) && imports[_lib || lib].push(name);
      });
      return "".concat(components.map(function (data) {
        return mappingItem(data, level);
      }).join('\n'));
    };
    /* recursive function */


    var code = deepParse(components); // Formating imports for hbs

    var importsFormated = Object.keys(imports).map(function (key) {
      return {
        lib: key,
        elements: imports[key].join(', ')
      };
    }).filter(function (_ref2) {
      var elements = _ref2.elements;
      return !!(elements !== null && elements !== void 0 && elements.length);
    });
    return [code, importsFormated];
  };

  var genCompCode = function genCompCode(list, lib, folder) {
    var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'Component';

    var _parseBody = parseBody(list, lib, folder),
        _parseBody2 = _slicedToArray(_parseBody, 2),
        _code = _parseBody2[0],
        imports = _parseBody2[1];

    var data = {
      imports: imports,
      componentName: name,
      code: _code,
      lib: lib
    };
    return Handlebars.compile(ReactTemplate)(data);
  };

  var exportComponent = function exportComponent(componentsIds, lib) {
    var folder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : './components';
    var componentsToExport = [];
    var components = componentsIds.map(function (el) {
      return parseStructure(el, all);
    });

    var templatesParse = function templatesParse(components) {
      return components.map(function (componentData) {
        var _componentData$childr;

        var templateName = componentData.templateName,
            title = componentData.title,
            name = componentData.name;
        if (!!((_componentData$childr = componentData.children) !== null && _componentData$childr !== void 0 && _componentData$childr.length)) componentData.children = templatesParse(componentData.children); // Workaround for template edit to not import unnecessary components as templates

        if (templateName && !isTemplateEditPage) {
          var data = {
            name: getName(title || name),
            children: [],
            lib: folder
          };
          componentsToExport.push({
            components: [componentData],
            name: getName(title || name)
          });
          return data;
        }

        return componentData;
      });
    };

    componentsToExport.push({
      components: templatesParse(components)
    });
    return componentsToExport.map(function (_ref3) {
      var components = _ref3.components,
          name = _ref3.name;
      return genCompCode(components, lib, folder, name);
    }).join('\n================================================\n\n');
  };

  return {
    exportComponent: exportComponent
  };
};

var useStateParser = function useStateParser() {
  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var _useReactComponentBui = useReactComponentBuilder(),
      exportReactComponent = _useReactComponentBui.exportComponent; // const { generateComponent: generateHtmlComponent } = useHtmlComponentBuilder()


  var parse = function parse(type) {
    var _typeToParserMap;

    var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : components === null || components === void 0 ? void 0 : components.root;
    var typeToParserMap = (_typeToParserMap = {}, _defineProperty(_typeToParserMap, REACT_NATIVE_COMPONENT_TYPE, reactNativeParser), _defineProperty(_typeToParserMap, REACT_COMPONENT_TYPE, reactParser), _defineProperty(_typeToParserMap, HTML_COMPONENT_TYPE, htmlParser), _defineProperty(_typeToParserMap, NEXT_COMPONENT_TYPE, nextParser), _typeToParserMap);
    var componentsIds = state.map(function (_ref) {
      var id = _ref.id;
      return id;
    });
    return typeToParserMap[type](componentsIds);
  };

  var reactParser = function reactParser(componentsIds) {
    return exportReactComponent(componentsIds, '@qonsoll/react-design');
  };

  var htmlParser = function htmlParser(componentsIds) {// return generateHtmlComponent(componentsIds)
  };

  var reactNativeParser = function reactNativeParser(componentsIds) {};

  var nextParser = function nextParser(componentsIds) {
    return exportReactComponent(componentsIds, '@qonsoll/qonstructor-next-components');
  };

  return {
    parse: parse
  };
};

var _typeToLibraryMap;
var typeToLibraryMap = (_typeToLibraryMap = {}, _defineProperty(_typeToLibraryMap, REACT_COMPONENT_TYPE, ReactLibElements), _defineProperty(_typeToLibraryMap, NEXT_COMPONENT_TYPE, NextLibElements), _typeToLibraryMap);

var useExtractComponent = function useExtractComponent(type, name) {
  var library = useMemo(function () {
    return typeToLibraryMap[type];
  }, [type]);
  var Component = useMemo(function () {
    return library && name ? library[name] : null;
  }, [library, name]);
  return Component;
};

function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useTransformInitialValues = function useTransformInitialValues(initialData, globalTemplates) {
  var transform = useCallback(function (data, templates) {
    var _templates$filter;

    var _componentType = data === null || data === void 0 ? void 0 : data.componentType;

    var _templates = (templates === null || templates === void 0 ? void 0 : (_templates$filter = templates.filter(function (elem) {
      return (elem === null || elem === void 0 ? void 0 : elem.componentType) === _componentType;
    })) === null || _templates$filter === void 0 ? void 0 : _templates$filter.reduce(function (acc, elem) {
      return _objectSpread$A(_objectSpread$A({}, acc), {}, _defineProperty({}, elem.name, elem.body));
    }, {})) || {};

    return _objectSpread$A(_objectSpread$A({}, data), {}, {
      components: _objectSpread$A(_objectSpread$A({}, data.components), {}, {
        templates: _objectSpread$A(_objectSpread$A({}, data.templates), _templates)
      })
    });
  }, []);
  var initialValues = useMemo(function () {
    return transform(initialData, globalTemplates);
  }, [initialData, globalTemplates]);
  return initialValues;
};

var useInsertVariables = function useInsertVariables(text) {
  var _ref = useAdditionalProps() || {},
      variables = _ref.variables;

  var _text = useMemo(function () {
    return variables && text ? Object.keys(variables).reduce(function (acc, key) {
      var _acc$replace;

      var replaceRegex = new RegExp("#".concat(key), 'g');
      return (acc === null || acc === void 0 ? void 0 : (_acc$replace = acc.replace) === null || _acc$replace === void 0 ? void 0 : _acc$replace.call(acc, replaceRegex, variables[key])) || '';
    }, text) : text;
  }, [variables, text]);

  return _text;
};

var useFindVariables = function useFindVariables(selectionPosition, value) {
  var _ref = useAdditionalProps() || {},
      variables = _ref.variables;

  var _useMemo = useMemo(function () {
    var _start$split, _end$split;

    if (!selectionPosition || !value) return [null, null, null];
    var start = value.substring(0, selectionPosition);
    var end = value.substring(selectionPosition, value.length);
    var wordBeforeSelection = start === null || start === void 0 ? void 0 : (_start$split = start.split(' ')) === null || _start$split === void 0 ? void 0 : _start$split.pop();
    var startWord = wordBeforeSelection !== null && wordBeforeSelection !== void 0 && wordBeforeSelection.includes('#') ? wordBeforeSelection.split('#').pop() : null;
    var endWord = startWord && (end === null || end === void 0 ? void 0 : (_end$split = end.split(' ')) === null || _end$split === void 0 ? void 0 : _end$split[0]);
    var word = startWord + endWord;

    if ((value === null || value === void 0 ? void 0 : value[selectionPosition - 1]) === '#' && !word) {
      return ['', selectionPosition, selectionPosition];
    }

    if (word) {
      var startPosition = start.length - startWord.length;
      var endPosition = selectionPosition + endWord.length;
      return [word, startPosition, endPosition];
    }

    return [null, null, null];
  }, [selectionPosition, value]),
      _useMemo2 = _slicedToArray(_useMemo, 3),
      word = _useMemo2[0],
      start = _useMemo2[1],
      end = _useMemo2[2];

  var filteredVariables = useMemo(function () {
    return variables && word !== null ? Object.keys(variables).filter(function (key) {
      return key.includes(word);
    }) : [];
  }, [variables, word]);
  return [filteredVariables, start, end];
};

function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useParseAttributes = function useParseAttributes() {
  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var all = components.all;
  var parseAttributes = useCallback(function (attributes, parentId, view) {
    var Component = view ? ViewerUniversalComponent$1 : UniversalComponent$1;
    return Object.keys(attributes || {}).reduce(function (acc, key) {
      var attribute = attributes[key];
      var isComponent = (attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'component';
      var data = isComponent ? all[attribute.value] : null;
      var ucProps = data ? {
        key: data.id,
        parentId: parentId,
        data: data
      } : null;
      var value = isComponent ? /*#__PURE__*/jsx(Component, _objectSpread$z({}, ucProps)) : attribute;
      return _objectSpread$z(_objectSpread$z({}, acc), {}, _defineProperty({}, key, value));
    }, {});
  }, [all]);
  return parseAttributes;
};

function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var withUniversalComponentLogicHOC = function withUniversalComponentLogicHOC(Component) {
  return function (props) {
    var data = props.data;

    var _ref = data || {},
        text = _ref.text,
        name = _ref.name,
        children = _ref.children,
        attributes = _ref.attributes,
        id = _ref.id;

    var _useComponentBuilder = useComponentBuilder(),
        currentlySelected = _useComponentBuilder.currentlySelected,
        setCurrentlySelected = _useComponentBuilder.setCurrentlySelected,
        components = _useComponentBuilder.components,
        tmpAttributes = _useComponentBuilder.tmpAttributes,
        applyAttributes = _useComponentBuilder.applyAttributes;

    var _useComponentType = useComponentType(),
        componentType = _useComponentType.componentType;

    var parseAttributes = useParseAttributes();
    var additionalProps = useExtractAdditionalProps(name); // [HELPER FUNCTIONS]

    var onClick = useCallback(function (e) {
      e.stopPropagation();
      setCurrentlySelected(components.all[id]);
    }, []);
    var handleChange = useCallback(function (data) {
      return applyAttributes === null || applyAttributes === void 0 ? void 0 : applyAttributes({
        attributes: _objectSpread$y(_objectSpread$y({}, attributes), data),
        id: id
      });
    }, []);
    var handleTextEdit = useCallback(function (_text) {
      return _text !== text && handleChange({
        text: _text
      });
    }, [applyAttributes, attributes, id, text]); // [COMPUTED PROPERTIES]

    var _attributes = useMemo(function () {
      var parsedAttributes = parseAttributes(attributes, id);
      var parsedTemp = parseAttributes(tmpAttributes === null || tmpAttributes === void 0 ? void 0 : tmpAttributes[id], id);
      return tmpAttributes !== null && tmpAttributes !== void 0 && tmpAttributes[id] ? _objectSpread$y(_objectSpread$y({}, parsedAttributes), parsedTemp) : parsedAttributes;
    }, [tmpAttributes, attributes, id, parseAttributes]);

    var isSelected = useMemo(function () {
      return (currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id) === id;
    }, [id, currentlySelected]);
    var additionalPropsWithHandlers = useMemo(function () {
      var componentsMap = {
        Video: {
          onVideoUpload: function onVideoUpload(videoToken) {
            return handleChange({
              videoToken: videoToken
            });
          }
        },
        Asq: {
          onFormChange: function onFormChange(formId) {
            return handleChange({
              formId: formId
            });
          }
        }
      };

      var _additionalProps = (componentsMap === null || componentsMap === void 0 ? void 0 : componentsMap[name]) || {};

      return _objectSpread$y(_objectSpread$y({}, additionalProps), _additionalProps);
    }, [additionalProps, name, handleChange]);
    return /*#__PURE__*/jsx(Fragment$1, {
      children: /*#__PURE__*/jsx(Component, {
        onTextEdit: handleTextEdit,
        onClick: onClick,
        name: name,
        text: text,
        parentId: id,
        children: children,
        isSelected: isSelected,
        attributes: _attributes,
        componentType: componentType,
        additionalProps: additionalPropsWithHandlers
      })
    }, id);
  };
};

function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var UniversalComponent = /*#__PURE__*/memo(function (props) {
  var children = props.children,
      text = props.text,
      name = props.name,
      componentType = props.componentType,
      onClick = props.onClick,
      onTextEdit = props.onTextEdit,
      attributes = props.attributes,
      parentId = props.parentId,
      isSelected = props.isSelected,
      additionalProps = props.additionalProps;
  var Component = useExtractComponent(componentType, name);
  var hasChildren = useMemo(function () {
    return (text || !!(children !== null && children !== void 0 && children.length)) && name !== 'Img';
  }, [text, children, name]);
  var computedClassName = useMemo(function () {
    return isSelected ? 'highlighted' : '';
  }, [isSelected]);
  return Component ? /*#__PURE__*/jsx(Component, _objectSpread$x(_objectSpread$x(_objectSpread$x({}, attributes), additionalProps), {}, {
    onClick: onClick,
    className: computedClassName,
    children: hasChildren ? /*#__PURE__*/jsxs(Fragment$1, {
      children: [text && /*#__PURE__*/jsx(EditableText$1, {
        onTextEdit: onTextEdit,
        text: text
      }), /*#__PURE__*/jsx(UniversalComponentsList, {
        innerElements: children,
        parentId: parentId
      })]
    }) : null
  })) : null;
});
/* Added separated logic part from view to prevent rerendering during hooks changes using memo */

var UniversalComponent$1 = withUniversalComponentLogicHOC(UniversalComponent);

var RootComponentsList = function RootComponentsList() {
  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var _ref = useResponsive() || {},
      wrapperRef = _ref.wrapperRef,
      node = _ref.node,
      isResponseOn = _ref.isResponseOn;

  var isRootEmpty = useMemo(function () {
    return components ? _.isEmpty(components.root) : true;
  }, [components]);
  return /*#__PURE__*/jsxs(Box, {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    className: "App",
    children: [isResponseOn && node ? /*#__PURE__*/jsx(ResponsiveFrame, {}) : null, /*#__PURE__*/jsx(Box, {
      ref: wrapperRef,
      display: isResponseOn ? 'none' : '',
      width: "100%",
      children: isRootEmpty ? /*#__PURE__*/jsx(Row, {
        v: "center",
        height: "100%",
        children: /*#__PURE__*/jsx(Col, {
          children: /*#__PURE__*/jsx(EmptyBuilder, {})
        })
      }) : Object.keys(components.root).map(function (componentId) {
        return /*#__PURE__*/jsx(UniversalComponent$1, {
          data: components.root[componentId]
        }, componentId);
      })
    })]
  });
};

var RootComponent = function RootComponent() {
  var _ref = useLayout() || {},
      toggleAsides = _ref.toggleAsides;

  var _ref2 = useLiveSave() || {},
      saveChanges = _ref2.saveChanges; // Global Shortcuts


  useKeyPress('Option./', toggleAsides);
  useKeyPress('alt./', toggleAsides); // Ctrl+S Meta+S shortcuts to trigger save of current page/template state to db

  useKeyPress('ctrl.s', saveChanges);
  useKeyPress('meta.s', saveChanges);
  return /*#__PURE__*/jsx(RootComponentsList, {});
};

var _templateObject$b, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
var StyledWrapper = styled(Container)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--divider-color);\n  border-radius: var(--ql-border-radius-md);\n"])));
var StyledContent = styled(Box)(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: inherit;\n"])));
var StyledLeftAside = styled(Box)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  width: 15%;\n  border-right: 1px solid var(--divider-color);\n  border-top-left-radius: var(--ql-border-radius-md);\n  border-bottom-left-radius: var(--ql-border-radius-md);\n"])));
var StyledRightAside = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  width: 15%;\n  border-left: 1px solid var(--divider-color);\n  border-top-right-radius: var(--ql-border-radius-md);\n  border-bottom-right-radius: var(--ql-border-radius-md);\n"])));
var StyledHeader = styled(Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid var(--divider-color);\n  background: var(--ql-color-white);\n  height: 64px;\n  position: sticky;\n  top: 0;\n  z-index: 500; // qvideo zIndex to big\n  display: flex;\n  align-items: center;\n"])));

function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var addComponent = function addComponent(state, payload) {
  var id = payload.id || nanoid();

  var component = _objectSpread$w({
    id: id,
    children: []
  }, payload);

  var nextState = _objectSpread$w(_objectSpread$w({}, state), {}, {
    root: [].concat(_toConsumableArray(state.root || []), [_objectSpread$w(_objectSpread$w({}, component), {}, {
      parentId: 'root'
    })]),
    all: _objectSpread$w(_objectSpread$w({}, state.all), {}, _defineProperty({}, id, _objectSpread$w(_objectSpread$w({}, component), {}, {
      parentId: component.parentId || 'root'
    })))
  });

  return nextState;
};

function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var addChildComponent = function addChildComponent(state, payload) {
  var _state$all$payload$pa, _objectSpread2;

  var id = payload.id || nanoid();

  var component = _objectSpread$v({
    id: id,
    children: []
  }, payload);

  var parentRoot = state.root.find(function (_ref) {
    var id = _ref.id;
    return id === payload.parentId;
  });

  var _all = _objectSpread$v(_objectSpread$v({}, state.all), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, payload.parentId, _objectSpread$v(_objectSpread$v({}, state.all[payload.parentId]), {}, {
    children: [].concat(_toConsumableArray(((_state$all$payload$pa = state.all[payload.parentId]) === null || _state$all$payload$pa === void 0 ? void 0 : _state$all$payload$pa.children) || []), [id])
  })), _defineProperty(_objectSpread2, id, component), _objectSpread2));

  if (parentRoot) {
    // if components parent is a root component

    /* find index of root component */
    var parentIndex = state.root.findIndex(function (_ref2) {
      var id = _ref2.id;
      return id === payload.parentId;
    });
    /* find index of root component */

    /* adding children to root component */

    var _root = _toConsumableArray(state.root);

    _root[parentIndex] = _objectSpread$v(_objectSpread$v({}, _root[parentIndex]), {}, {
      children: [].concat(_toConsumableArray(_root[parentIndex].children), [id])
    });
    /* adding children to root component */

    return _objectSpread$v(_objectSpread$v({}, state), {}, {
      root: _root,
      all: _all
    });
  } else {
    return _objectSpread$v(_objectSpread$v({}, state), {}, {
      all: _all
    });
  }
};

function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var removeComponent = function removeComponent(state, payload) {
  var _ref = payload || {},
      parentId = _ref.parentId,
      id = _ref.id;

  var _state = JSON.parse(JSON.stringify(state)); // Removing current component from parent


  if (parentId !== 'root' && parentId) {
    var _state$all, _state$root;

    var allComponent = _state === null || _state === void 0 ? void 0 : (_state$all = _state.all) === null || _state$all === void 0 ? void 0 : _state$all[parentId];
    var rootComponent = _state === null || _state === void 0 ? void 0 : (_state$root = _state.root) === null || _state$root === void 0 ? void 0 : _state$root.find(function (_ref2) {
      var id = _ref2.id;
      return id === parentId;
    });
    if (allComponent) allComponent.children = allComponent.children.filter(function (i) {
      return i !== id;
    });

    if (rootComponent) {
      rootComponent.children = rootComponent.children.filter(function (i) {
        return i !== id;
      });
    }
  }

  var removeRecursively = function removeRecursively(componentId) {
    var component = _state.all[componentId];
    var _component$children = component.children,
        children = _component$children === void 0 ? [] : _component$children,
        _component$attributes = component.attributes,
        attributes = _component$attributes === void 0 ? {} : _component$attributes;
    children.forEach(function (id) {
      return removeRecursively(id);
    });
    Object.keys(attributes || {}).forEach(function (key) {
      var attribute = attributes[key] || {};
      if ((attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'component') removeRecursively(attribute === null || attribute === void 0 ? void 0 : attribute.value);
    });
    delete _state.all[componentId];
    _state.root = _state.root.filter(function (_ref3) {
      var id = _ref3.id;
      return id !== componentId;
    });
  };

  removeRecursively(id);
  return _objectSpread$u({}, _state);
};

var _excluded$6 = ["id"];

function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var updateComponent = function updateComponent(state, payload) {
  var _state$root;

  var _ref = payload || {},
      id = _ref.id,
      rest = _objectWithoutProperties(_ref, _excluded$6);

  var _root = _toConsumableArray(state.root);

  var _all = _objectSpread$t(_objectSpread$t({}, state.all), {}, _defineProperty({}, id, _objectSpread$t(_objectSpread$t({}, state.all[id]), rest)));

  var index = (_state$root = state.root) === null || _state$root === void 0 ? void 0 : _state$root.findIndex(function (_ref2) {
    var _id = _ref2.id;
    return id === _id;
  });
  if (index !== -1) _root[index] = _objectSpread$t(_objectSpread$t({}, _root[index]), rest);
  return index !== -1 ? _objectSpread$t(_objectSpread$t({}, state), {}, {
    root: _root,
    all: _all
  }) : _objectSpread$t(_objectSpread$t({}, state), {}, {
    all: _all
  });
};

function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var makeTemplate = function makeTemplate(state, payload) {
  var all = state.all;
  var id = payload.id,
      templateName = payload.templateName,
      _payload$additionalDa = payload.additionalData,
      additionalData = _payload$additionalDa === void 0 ? {} : _payload$additionalDa;
  var template = parseStructureForTemplate(id, all);
  return _objectSpread$s(_objectSpread$s({}, state), {}, {
    templates: _objectSpread$s(_objectSpread$s({}, state.templates), {}, _defineProperty({}, templateName, _objectSpread$s(_objectSpread$s({}, template), additionalData)))
  });
};

function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * It takes a component and its parentId, and returns a component with its children and attributes
 * parsed
 * @param _childComponent - The child component to be parsed.
 * @param parentId - The id of the parent component.
 * @param components - A map of component IDs to component objects.
 * @returns The id of the component
 */

var inverseParseChild = function inverseParseChild(_childComponent, parentId, components) {
  var _component$children;

  var component = _objectSpread$r({}, _childComponent);

  var componentId = nanoid();
  component.id = componentId;
  component.parentId = parentId; // Transforming children into float ds

  component.children = (_component$children = component.children) === null || _component$children === void 0 ? void 0 : _component$children.map(function (el) {
    return inverseParseChild(el, componentId, components);
  }); // Transforming attributes into float ds

  component.attributes = inverseParseAttributes(component.attributes, componentId, components) || {};
  if (components) components[componentId] = component;
  return component.id;
};

function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 * Given an attribute object, return a new object with the same keys, but with the values replaced with
 * the result of calling the inverseParseChild function on the value
 * @param attributes - The attributes of the component.
 * @param parentId - The id of the parent component.
 * @param components - A dictionary of components that have been parsed.
 * @returns A new object with the same keys as the original object, but with the values replaced with
 * the result of the function.
 */

var inverseParseAttributes = function inverseParseAttributes(attributes, parentId, components) {
  return Object.keys(attributes || {}).reduce(function (acc, key) {
    var attribute = attributes[key];
    var isComponent = (attribute === null || attribute === void 0 ? void 0 : attribute.type) === 'component';

    if (isComponent) {
      // Transforming attribute into float ds
      var _attributeId = (attribute === null || attribute === void 0 ? void 0 : attribute.value) && inverseParseChild(attribute === null || attribute === void 0 ? void 0 : attribute.value, parentId, components);

      return _objectSpread$q(_objectSpread$q({}, acc), {}, _defineProperty({}, key, {
        type: 'component',
        value: _attributeId
      }));
    }

    return _objectSpread$q(_objectSpread$q({}, acc), {}, _defineProperty({}, key, attribute));
  }, {});
};

function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var addTemplate = function addTemplate(state, payload) {
  var templates = state.templates,
      all = state.all,
      root = state.root;
  var templateName = payload.templateName,
      parentId = payload.parentId;

  var _root = JSON.parse(JSON.stringify(root));

  var _all = JSON.parse(JSON.stringify(all));

  var copiesLength = Object.values(_all).filter(function (_ref) {
    var _tn = _ref.templateName;
    return _tn === null || _tn === void 0 ? void 0 : _tn.includes(templateName);
  }).length;
  var copyText = copiesLength > 1 ? " copy ".concat(copiesLength) : ' copy';

  var inverseParseStructure = function inverseParseStructure(templateName, parentId) {
    var _component$children;

    var components = {};
    var componentId = nanoid();

    var _component = _objectSpread$p(_objectSpread$p({}, templates[templateName]), {}, {
      parentId: parentId || 'root',
      id: componentId,
      title: copiesLength ? templateName + copyText : templateName,
      templateName: templateName
    });

    var children = ((_component$children = _component.children) === null || _component$children === void 0 ? void 0 : _component$children.map(function (el) {
      return inverseParseChild(el, componentId, components);
    })) || [];
    _component.children = children;
    components[componentId] = _component;
    return [components, _component];
  };

  var _inverseParseStructur = inverseParseStructure(templateName, parentId),
      _inverseParseStructur2 = _slicedToArray(_inverseParseStructur, 2),
      allComponents = _inverseParseStructur2[0],
      rootComponent = _inverseParseStructur2[1];

  var parentAll = _all[parentId];
  var parentRoot = _root === null || _root === void 0 ? void 0 : _root.find(function (_ref2) {
    var id = _ref2.id;
    return id === parentId;
  });
  if (parentAll) parentAll.children = [].concat(_toConsumableArray(parentAll.children || []), [rootComponent.id]);
  if (parentRoot) parentRoot.children = [].concat(_toConsumableArray(parentRoot.children || []), [rootComponent.id]);
  return _objectSpread$p(_objectSpread$p({}, state), {}, {
    all: _objectSpread$p(_objectSpread$p({}, _all), allComponents),
    root: parentId === 'root' ? [].concat(_toConsumableArray(_root), [rootComponent]) : _toConsumableArray(_root)
  });
};

function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var updateState = function updateState(state, payload) {
  return _objectSpread$o(_objectSpread$o({}, state), payload);
};

function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var replaceState = function replaceState(state, payload) {
  return _objectSpread$n({}, payload);
};

function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var duplicate = function duplicate(state, payload) {
  var all = state.all,
      root = state.root;
  var parentId = payload.parentId,
      id = payload.id; // rewriting parentId to differentiate parentId in components
  // without actually changing parentId in actual component
  // to make copy of component with exact parentId that will be passed into this function
  // from copy component functional

  var _parseForCopyAndDupli = parseForCopyAndDuplicate(_objectSpread$m(_objectSpread$m({}, all), {}, _defineProperty({}, id, _objectSpread$m(_objectSpread$m({}, all[id]), {}, {
    parentId: parentId
  }))), id),
      _parseForCopyAndDupli2 = _slicedToArray(_parseForCopyAndDupli, 2),
      components = _parseForCopyAndDupli2[0],
      componentCopy = _parseForCopyAndDupli2[1];

  var _all = JSON.parse(JSON.stringify(all));

  var _root = JSON.parse(JSON.stringify(root));

  var parentAll = _all[parentId];

  var parentRoot = _root.find(function (_ref) {
    var id = _ref.id;
    return id === parentId;
  });

  if (parentAll) {
    // Add children to parent from all
    parentAll.children = [].concat(_toConsumableArray(parentAll.children || []), [componentCopy.id]);
  }

  if (parentRoot) {
    // Add children to parent from root
    parentRoot.children = [].concat(_toConsumableArray(parentRoot.children || []), [componentCopy.id]);
  }

  if (parentId === 'root') _root.push(componentCopy);
  return _objectSpread$m(_objectSpread$m({}, state), {}, {
    all: _objectSpread$m(_objectSpread$m({}, _all), components),
    root: _root
  });
};

function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var removeTemplate = function removeTemplate(state, payload) {
  var _ref = payload || {},
      templateName = _ref.templateName;

  var templates = state.templates;
  delete templates[templateName];
  return _objectSpread$l({}, state);
};

function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var formatValue = function formatValue(value) {
  try {
    return JSON.parse(value);
  } catch (error) {
    return value;
  }
};

var validateAttributeValue = function validateAttributeValue(value) {
  var _value$replace, _query$includes, _query$includes2, _query$includes3, _query$includes4;

  var query = (value === null || value === void 0 ? void 0 : (_value$replace = value.replace) === null || _value$replace === void 0 ? void 0 : _value$replace.call(value, ' ', '')) || value;
  var isArray = query && ((_query$includes = query.includes) === null || _query$includes === void 0 ? void 0 : _query$includes.call(query, '[')) && ((_query$includes2 = query.includes) === null || _query$includes2 === void 0 ? void 0 : _query$includes2.call(query, ']'));
  var isObject = query && ((_query$includes3 = query.includes) === null || _query$includes3 === void 0 ? void 0 : _query$includes3.call(query, '{')) && ((_query$includes4 = query.includes) === null || _query$includes4 === void 0 ? void 0 : _query$includes4.call(query, '}'));
  var isBoolean = query === 'true' || query === 'false';
  if (isArray || isObject || isBoolean) return formatValue(query);else return value;
};

var applyAttributes = function applyAttributes(prevState, payload) {
  var _state$root;

  var state = JSON.parse(JSON.stringify(prevState));

  var _JSON$parse = JSON.parse(JSON.stringify(payload || {})),
      id = _JSON$parse.id,
      _JSON$parse$attribute = _JSON$parse.attributes,
      attributes = _JSON$parse$attribute === void 0 ? {} : _JSON$parse$attribute; // Find component in root and all


  var component = state.all[id];
  var indexInRoot = (_state$root = state.root) === null || _state$root === void 0 ? void 0 : _state$root.findIndex(function (_ref) {
    var _id = _ref.id;
    return id === _id;
  });

  var componentData = _objectSpread$k({
    attributes: {}
  }, component);

  if (attributes.hasOwnProperty('text')) {
    componentData.text = attributes.text;
    delete attributes.text;
  } // Moving text outside from attributes


  var formattedAttributes = Object.keys(attributes).reduce(function (acc, key) {
    var value = validateAttributeValue(attributes[key]);
    return _objectSpread$k(_objectSpread$k({}, acc), {}, _defineProperty({}, key, value));
  }, {});
  componentData.attributes = formattedAttributes || {};

  var _root = _toConsumableArray(state.root);

  var _all = _objectSpread$k(_objectSpread$k({}, state.all), {}, _defineProperty({}, id, _objectSpread$k(_objectSpread$k({}, state.all[id]), componentData)));

  if (indexInRoot !== -1) _root[indexInRoot] = _objectSpread$k(_objectSpread$k({}, _root[indexInRoot]), componentData);
  return _objectSpread$k(_objectSpread$k({}, state), {}, {
    root: _root,
    all: _all
  });
};

function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var insertAsProperty = function insertAsProperty(prevState, payload) {
  var _root$filter, _objectSpread3;

  var _state = JSON.parse(JSON.stringify(prevState));

  var all = _state.all,
      root = _state.root;
  var isContainer = payload.isContainer,
      text = payload.text,
      name = payload.name,
      attributes = payload.attributes,
      parentId = payload.parentId,
      property = payload.property;
  var id = payload.id || nanoid();
  var component = {
    id: id,
    children: [],
    isContainer: isContainer,
    text: text,
    name: name,
    attributes: attributes,
    parentId: parentId
  };
  var parent = all[parentId];
  var parentInRoot = (_root$filter = root.filter(function (_ref) {
    var id = _ref.id;
    return id === parentId;
  })) === null || _root$filter === void 0 ? void 0 : _root$filter[0];

  var parentAttributes = _objectSpread$j(_objectSpread$j({}, parent.attributes), {}, _defineProperty({}, property, {
    type: 'component',
    value: id
  }));

  if (parentInRoot) parentInRoot.attributes = parentAttributes;

  var state = _objectSpread$j(_objectSpread$j({}, _state), {}, {
    all: _objectSpread$j(_objectSpread$j({}, all), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, id, component), _defineProperty(_objectSpread3, parentId, _objectSpread$j(_objectSpread$j({}, parent), {}, {
      attributes: parentAttributes
    })), _objectSpread3))
  });

  return state;
};

var reducer = function reducer(state, action) {
  var actionsMap = {
    add: addComponent,
    addChild: addChildComponent,
    remove: removeComponent,
    update: updateComponent,
    makeTemplate: makeTemplate,
    addTemplate: addTemplate,
    updateState: updateState,
    replaceState: replaceState,
    duplicate: duplicate,
    removeTemplate: removeTemplate,
    applyAttributes: applyAttributes,
    insertAsProperty: insertAsProperty
  };
  return actionsMap[action.type](state, action.payload);
};

function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var ComponentBuilderProvider = function ComponentBuilderProvider(props) {
  var children = props.children,
      initialComponents = props.initialComponents,
      isTemplateEditPage = props.isTemplateEditPage; // Data that will be placed in 'currentlySelected' state after deselecting component in tree
  // depending if it is template edit or page edit

  var defaultSelected = useMemo(function () {
    var _initialComponents$ro;

    return isTemplateEditPage ? initialComponents === null || initialComponents === void 0 ? void 0 : (_initialComponents$ro = initialComponents.root) === null || _initialComponents$ro === void 0 ? void 0 : _initialComponents$ro[0] : {
      id: 'root',
      name: 'Root',
      isContainer: true
    };
  }, [isTemplateEditPage]);
  var initialValues = useMemo(function () {
    return initialComponents || {
      root: [],
      all: {}
    };
  }, [initialComponents]);
  var initExpandedItems = useCallback(function () {
    var _localStorage$getItem;

    return ((_localStorage$getItem = localStorage.getItem('treeExpandedItems')) === null || _localStorage$getItem === void 0 ? void 0 : _localStorage$getItem.split(',')) || [];
  }, []);

  var _useReducer = useReducer(reducer, initialValues),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      components = _useReducer2[0],
      dispatch = _useReducer2[1];

  var _useState = useState({}),
      _useState2 = _slicedToArray(_useState, 2),
      componentTree = _useState2[0],
      setComponentTree = _useState2[1];

  var _useState3 = useState(defaultSelected),
      _useState4 = _slicedToArray(_useState3, 2),
      currentlySelected = _useState4[0],
      setCurrentlySelected = _useState4[1];

  var _useState5 = useState(initExpandedItems),
      _useState6 = _slicedToArray(_useState5, 2),
      treeExpandedItems = _useState6[0],
      setTreeExpandedItems = _useState6[1]; // State to control temporary attributes (attributes which exists only when switching elements in dropdown)


  var _useTmpAttributes = useTmpAttributes(currentlySelected),
      _useTmpAttributes2 = _slicedToArray(_useTmpAttributes, 2),
      tmpAttributes = _useTmpAttributes2[0],
      setTmpAttributes = _useTmpAttributes2[1]; // Component data from components state


  var _useSelectedComponent = useSelectedComponentData(currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id, components),
      _useSelectedComponent2 = _slicedToArray(_useSelectedComponent, 2),
      selectedComponentData = _useSelectedComponent2[0],
      setSelectedComponentData = _useSelectedComponent2[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      createTemplateModalVisibility = _useState8[0],
      setCreateTemplateModalVisibility = _useState8[1]; // TODO remove|refactor template create using modal


  var actions = useStateActions(dispatch);
  return /*#__PURE__*/jsx(ComponentBuilderContext.Provider, {
    value: _objectSpread$i({
      tmpAttributes: tmpAttributes,
      setTmpAttributes: setTmpAttributes,
      components: components,
      componentTree: componentTree,
      setComponentTree: setComponentTree,
      currentlySelected: currentlySelected,
      setCurrentlySelected: setCurrentlySelected,
      selectedComponentData: selectedComponentData,
      setSelectedComponentData: setSelectedComponentData,
      treeExpandedItems: treeExpandedItems,
      setTreeExpandedItems: setTreeExpandedItems,
      createTemplateModalVisibility: createTemplateModalVisibility,
      setCreateTemplateModalVisibility: setCreateTemplateModalVisibility,
      defaultSelected: defaultSelected,
      isTemplateEditPage: isTemplateEditPage
    }, actions),
    children: children
  });
};

var _excluded$5 = ["initialData", "globalTemplates", "isTemplateEditPage", "numberOfActionsBeforeAutoSave"];

var SectionBuilder = function SectionBuilder(props) {
  var initialData = props.initialData,
      globalTemplates = props.globalTemplates,
      isTemplateEditPage = props.isTemplateEditPage,
      numberOfActionsBeforeAutoSave = props.numberOfActionsBeforeAutoSave,
      rest = _objectWithoutProperties(props, _excluded$5);

  var _ref = rest || {},
      isTerminal = _ref.isTerminal,
      isTree = _ref.isTree,
      isAttributes = _ref.isAttributes,
      isContent = _ref.isContent,
      isResponsivePreview = _ref.isResponsivePreview,
      isImageDownload = _ref.isImageDownload,
      isExportCode = _ref.isExportCode,
      isNewTemplate = _ref.isNewTemplate,
      isShortcuts = _ref.isShortcuts,
      isHeader = _ref.isHeader,
      onChange = _ref.onChange; // Reference on component DOM element for making screenshots of layouts


  var downloadRef = useRef(); // [COMPUTED PROPERTIES]

  var initialValues = useTransformInitialValues(initialData, globalTemplates);
  var isAsideLeft = useMemo(function () {
    return Boolean(isTree);
  }, [isTree]);
  var isAsideRight = useMemo(function () {
    return Boolean(isAttributes || isContent);
  }, [isAttributes, isContent]);
  return /*#__PURE__*/jsx(ComponentTypeProvider, {
    initialComponentType: initialValues === null || initialValues === void 0 ? void 0 : initialValues.componentType,
    children: /*#__PURE__*/jsx(ComponentBuilderProvider, {
      isTemplateEditPage: isTemplateEditPage,
      initialComponents: initialValues === null || initialValues === void 0 ? void 0 : initialValues.components,
      children: /*#__PURE__*/jsx(EventsProvider, {
        children: /*#__PURE__*/jsxs(LiveSaveProvider, {
          numberOfActionsBeforeAutoSave: numberOfActionsBeforeAutoSave,
          onChange: onChange,
          children: [isTerminal && /*#__PURE__*/jsx(Terminal, {}), /*#__PURE__*/jsx(ResponsiveProvider, {
            parentRef: downloadRef,
            children: /*#__PURE__*/jsx(StyledWrapper, {
              children: /*#__PURE__*/jsxs(StyledContent, {
                children: [isAsideLeft && /*#__PURE__*/jsx(StyledLeftAside, {
                  overflow: "auto",
                  children: /*#__PURE__*/jsx(Tree, {})
                }), /*#__PURE__*/jsxs(Box, {
                  height: "inherit",
                  overflow: "auto",
                  ref: downloadRef,
                  flex: 1,
                  children: [isHeader && /*#__PURE__*/jsx(StyledHeader, {
                    children: /*#__PURE__*/jsx(BuilderHeader, {
                      onChange: onChange,
                      downloadRef: downloadRef,
                      name: initialData === null || initialData === void 0 ? void 0 : initialData.name,
                      isImageDownload: isImageDownload,
                      isExportCode: isExportCode,
                      isNewTemplate: isNewTemplate,
                      isShortcuts: isShortcuts,
                      isResponsivePreview: isResponsivePreview
                    })
                  }), /*#__PURE__*/jsx(RootComponent, {})]
                }), isAsideRight && /*#__PURE__*/jsx(StyledRightAside, {
                  overflow: "auto",
                  children: /*#__PURE__*/jsx(BuilderRightAside, {
                    isAttributes: isAttributes,
                    isContent: isContent
                  })
                })]
              })
            })
          })]
        })
      })
    })
  });
};

SectionBuilder.propTypes = {
  globalTemplates: PropTypes.any,
  initialData: PropTypes.any,
  isTemplateEditPage: PropTypes.bool,
  pageId: PropTypes.string
};

var ViewerRootComponentsList = function ViewerRootComponentsList(props) {
  var sectionsLimit = props.sectionsLimit;

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var isRootEmpty = useMemo(function () {
    return _.isEmpty(components === null || components === void 0 ? void 0 : components.root);
  }, [components]);
  var rootComponents = useMemo(function () {
    var _components = _toConsumableArray((components === null || components === void 0 ? void 0 : components.root) || []);

    return sectionsLimit ? _components === null || _components === void 0 ? void 0 : _components.splice(0, sectionsLimit) : _components;
  }, [components, sectionsLimit]);
  return /*#__PURE__*/jsx(Box, {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    className: "App",
    children: /*#__PURE__*/jsx(Box, {
      width: "100%",
      children: isRootEmpty ? /*#__PURE__*/jsx(Row, {
        v: "center",
        height: "100%",
        children: /*#__PURE__*/jsx(Col, {
          children: /*#__PURE__*/jsx(EmptyBuilder, {})
        })
      }) : rootComponents.map(function (data) {
        return /*#__PURE__*/jsx(ViewerUniversalComponent$1, {
          data: data
        }, data.id);
      })
    })
  });
};

var ViewerRootComponent = function ViewerRootComponent(props) {
  var sectionsLimit = props.sectionsLimit;
  return /*#__PURE__*/jsx(ViewerRootComponentsList, {
    sectionsLimit: sectionsLimit
  });
};

var ViewerRootComponent$1 = /*#__PURE__*/memo(ViewerRootComponent);

function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var ViewerUniversalComponentsList = function ViewerUniversalComponentsList(props) {
  var innerElements = props.innerElements,
      parentId = props.parentId;

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  return !!innerElements.length ? /*#__PURE__*/jsx(Fragment, {
    children: innerElements.map(function (childrenId) {
      var data = components.all[childrenId];
      var ucProps = {
        key: childrenId,
        parentId: parentId,
        data: data
      };
      return /*#__PURE__*/jsx(ViewerUniversalComponent$1, _objectSpread$h({}, ucProps));
    })
  }) : null;
};

var ViewerUniversalComponentsList$1 = /*#__PURE__*/memo(ViewerUniversalComponentsList);

var withViewerUniversalComponentLogicHOC = function withViewerUniversalComponentLogicHOC(Component) {
  return function (props) {
    var data = props.data;

    var _ref = data || {},
        text = _ref.text,
        name = _ref.name,
        children = _ref.children,
        attributes = _ref.attributes,
        id = _ref.id;

    var parseAttributes = useParseAttributes();

    var _attributes = useMemo(function () {
      var parsedAttributes = parseAttributes(attributes, id, true);
      return parsedAttributes;
    }, [attributes, id, parseAttributes]);

    var _useComponentType = useComponentType(),
        componentType = _useComponentType.componentType;

    var computedText = useInsertVariables(text);
    var additionalProps = useExtractAdditionalProps(name);
    return /*#__PURE__*/jsx(Fragment$1, {
      children: /*#__PURE__*/jsx(Component, {
        children: children,
        text: computedText,
        name: name,
        attributes: _attributes,
        parentId: id,
        componentType: componentType,
        additionalProps: additionalProps
      })
    }, id);
  };
};

function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ViewerUniversalComponent = /*#__PURE__*/memo(function (props) {
  var name = props.name,
      text = props.text,
      children = props.children,
      componentType = props.componentType,
      attributes = props.attributes,
      parentId = props.parentId,
      additionalProps = props.additionalProps;
  var Component = useExtractComponent(componentType, name);
  var hasChildren = useMemo(function () {
    return (text || !!(children !== null && children !== void 0 && children.length)) && name !== 'Img';
  }, [name, text, children]);
  return Component ? /*#__PURE__*/jsx(Component, _objectSpread$g(_objectSpread$g(_objectSpread$g({}, attributes), additionalProps), {}, {
    isViewer: true,
    children: hasChildren ? /*#__PURE__*/jsxs(Fragment$1, {
      children: [text, /*#__PURE__*/jsx(ViewerUniversalComponentsList$1, {
        innerElements: children,
        parentId: parentId
      })]
    }) : null
  })) : null;
});
/* Added separated logic part from view to prevent rerendering during hooks changes using memo */

var ViewerUniversalComponent$1 = withViewerUniversalComponentLogicHOC(ViewerUniversalComponent);

var _excluded$4 = ["loading", "initialValues", "id", "templates", "isTemplateEditPage"];

var Editor = function Editor(props) {
  var loading = props.loading,
      initialValues = props.initialValues,
      id = props.id,
      templates = props.templates,
      isTemplateEditPage = props.isTemplateEditPage,
      rest = _objectWithoutProperties(props, _excluded$4);

  var _ref = rest || {},
      numberOfActionsBeforeAutoSave = _ref.numberOfActionsBeforeAutoSave,
      _ref$isHeader = _ref.isHeader,
      isHeader = _ref$isHeader === void 0 ? true : _ref$isHeader,
      _ref$isTerminal = _ref.isTerminal,
      isTerminal = _ref$isTerminal === void 0 ? true : _ref$isTerminal,
      _ref$isTree = _ref.isTree,
      isTree = _ref$isTree === void 0 ? true : _ref$isTree,
      _ref$isAttributes = _ref.isAttributes,
      isAttributes = _ref$isAttributes === void 0 ? true : _ref$isAttributes,
      _ref$isContent = _ref.isContent,
      isContent = _ref$isContent === void 0 ? true : _ref$isContent,
      _ref$isResponsivePrev = _ref.isResponsivePreview,
      isResponsivePreview = _ref$isResponsivePrev === void 0 ? true : _ref$isResponsivePrev,
      _ref$isImageDownload = _ref.isImageDownload,
      isImageDownload = _ref$isImageDownload === void 0 ? true : _ref$isImageDownload,
      _ref$isExportCode = _ref.isExportCode,
      isExportCode = _ref$isExportCode === void 0 ? true : _ref$isExportCode,
      _ref$isNewTemplate = _ref.isNewTemplate,
      isNewTemplate = _ref$isNewTemplate === void 0 ? false : _ref$isNewTemplate,
      _ref$isShortcuts = _ref.isShortcuts,
      isShortcuts = _ref$isShortcuts === void 0 ? true : _ref$isShortcuts,
      onChange = _ref.onChange;

  return loading ? null : initialValues ? /*#__PURE__*/jsx(SectionBuilder, {
    globalTemplates: templates,
    initialData: initialValues,
    pageId: id,
    isTemplateEditPage: isTemplateEditPage,
    numberOfActionsBeforeAutoSave: numberOfActionsBeforeAutoSave // props (configuration)
    ,
    isTerminal: isTerminal,
    isHeader: isHeader,
    isTree: isTree,
    isAttributes: isAttributes,
    isContent: isContent,
    isResponsivePreview: isResponsivePreview,
    isImageDownload: isImageDownload,
    isExportCode: isExportCode,
    isNewTemplate: isNewTemplate,
    isShortcuts: isShortcuts // methods
    ,
    onChange: onChange
  }) : /*#__PURE__*/jsx(NotFoundPage, {});
};

Editor.propTypes = {
  templates: PropTypes.any,
  initialValues: PropTypes.object,
  id: PropTypes.string,
  loading: PropTypes.bool,
  isTemplateEditPage: PropTypes.bool,
  // props
  isTerminal: PropTypes.bool,
  isTree: PropTypes.bool,
  isAttributes: PropTypes.bool,
  isContent: PropTypes.bool,
  isResponsivePreview: PropTypes.bool,
  isImageDownload: PropTypes.bool,
  isExportCode: PropTypes.bool,
  isNewTemplate: PropTypes.bool,
  isShortcuts: PropTypes.bool,
  // methods
  onChange: PropTypes.func
};

var EmptyState = function EmptyState(_ref) {
  var description = _ref.description;
  return /*#__PURE__*/jsx(Row, {
    v: "center",
    height: "100%",
    noGutters: true,
    children: /*#__PURE__*/jsx(Col, {
      children: /*#__PURE__*/jsx(NoData, {
        description: /*#__PURE__*/jsx(Row, {
          h: "center",
          children: /*#__PURE__*/jsx(Col, {
            cw: "auto",
            flexDirection: "row",
            style: {
              columnGap: '12px'
            },
            children: /*#__PURE__*/jsx(Text, {
              type: "secondary",
              children: description
            })
          })
        })
      })
    })
  });
};

var _excluded$3 = ["zoom", "value", "loading"];

function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Viewer = function Viewer(props) {
  var _props$zoom = props.zoom,
      zoom = _props$zoom === void 0 ? 1 : _props$zoom,
      value = props.value,
      loading = props.loading,
      rest = _objectWithoutProperties(props, _excluded$3);

  var _ref = value || {},
      components = _ref.components,
      componentType = _ref.componentType;

  var isDataLoaded = useMemo(function () {
    return !loading && componentType && components;
  }, [loading, componentType, components]);
  return /*#__PURE__*/jsx(Box, _objectSpread$f(_objectSpread$f({
    zoom: zoom,
    width: "100%",
    height: "100%",
    lineHeight: "initial"
  }, rest), {}, {
    children: isDataLoaded ? /*#__PURE__*/jsx(ComponentTypeProvider, {
      initialComponentType: componentType,
      children: /*#__PURE__*/jsx(ComponentBuilderProvider, {
        initialComponents: components,
        children: /*#__PURE__*/jsx(ViewerRootComponent$1, {})
      })
    }) : /*#__PURE__*/jsx(EmptyState, {})
  }));
};

Viewer.propTypes = {
  zoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  value: PropTypes.object,
  loading: PropTypes.bool
};

var _excluded$2 = ["zoom", "value", "loading", "sectionsLimit", "clickable"];

function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ROOT_COMPONENTS_LIMIT = 5;

var Previewer = function Previewer(props) {
  var _props$zoom = props.zoom,
      zoom = _props$zoom === void 0 ? 1 : _props$zoom,
      value = props.value,
      loading = props.loading,
      _props$sectionsLimit = props.sectionsLimit,
      sectionsLimit = _props$sectionsLimit === void 0 ? ROOT_COMPONENTS_LIMIT : _props$sectionsLimit,
      _props$clickable = props.clickable,
      clickable = _props$clickable === void 0 ? false : _props$clickable,
      rest = _objectWithoutProperties(props, _excluded$2);

  var _ref = value || {},
      components = _ref.components,
      componentType = _ref.componentType;

  var isDataLoaded = useMemo(function () {
    return !loading && componentType && components;
  }, [loading, componentType, components]);
  return /*#__PURE__*/jsxs(Box, _objectSpread$e(_objectSpread$e({
    zoom: zoom,
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    lineHeight: "initial"
  }, rest), {}, {
    position: "relative",
    children: [!clickable && /*#__PURE__*/jsx(Box, {
      style: {
        inset: 0
      },
      position: "absolute",
      zIndex: 1
    }), isDataLoaded ? /*#__PURE__*/jsx(ComponentTypeProvider, {
      initialComponentType: componentType,
      children: /*#__PURE__*/jsx(ComponentBuilderProvider, {
        initialComponents: components,
        children: /*#__PURE__*/jsx(Box, {
          width: "100%",
          children: /*#__PURE__*/jsx(ViewerRootComponent$1, {
            sectionsLimit: sectionsLimit
          })
        })
      })
    }) : /*#__PURE__*/jsx(EmptyState, {})]
  }));
};

Previewer.propTypes = {
  zoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  value: PropTypes.object,
  loading: PropTypes.bool,
  clickable: PropTypes.bool,
  sectionsLimit: PropTypes.number // root children limitation to prevent long rendering of very big components (that is not necessary for the preview), default value 5

};
var Previewer$1 = /*#__PURE__*/memo(Previewer);

var ExportCode = function ExportCode() {
  var _useStateParser = useStateParser(),
      parse = _useStateParser.parse;

  var _useComponentType = useComponentType(),
      componentType = _useComponentType.componentType;

  var copyCode = function copyCode() {
    // generate component code
    var code = parse(componentType); // Copy code to clipboard

    navigator.clipboard.writeText(code);
    notification.success({
      message: 'Code successfully copied!'
    });
  };

  return /*#__PURE__*/jsx(Tooltip, {
    title: "Export code",
    placement: "bottomRight",
    children: /*#__PURE__*/jsx(Button, {
      type: "text",
      icon: /*#__PURE__*/jsx(Icon, {
        component: /*#__PURE__*/jsx(MdCode, {}),
        size: 24
      }),
      onClick: copyCode
    })
  });
};

function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useContextMenuOptions = function useContextMenuOptions(componentId, changeComponentTitleEditState) {
  var _useComponentBuilder = useComponentBuilder(),
      removeComponent = _useComponentBuilder.removeComponent,
      duplicate = _useComponentBuilder.duplicate,
      components = _useComponentBuilder.components,
      setCurrentlySelected = _useComponentBuilder.setCurrentlySelected,
      updateComponent = _useComponentBuilder.updateComponent,
      setCreateTemplateModalVisibility = _useComponentBuilder.setCreateTemplateModalVisibility,
      defaultSelected = _useComponentBuilder.defaultSelected;

  var _useStateParser = useStateParser(),
      parse = _useStateParser.parse;

  var _useComponentType = useComponentType(),
      componentType = _useComponentType.componentType;

  var CONTEXT_MENU_OPTIONS = [{
    title: 'Duplicate',
    handler: function handler(e) {
      var _e$domEvent, _components$all;

      e === null || e === void 0 ? void 0 : (_e$domEvent = e.domEvent) === null || _e$domEvent === void 0 ? void 0 : _e$domEvent.stopPropagation();
      if ((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.id) !== componentId) duplicate(components === null || components === void 0 ? void 0 : (_components$all = components.all) === null || _components$all === void 0 ? void 0 : _components$all[componentId]);
    }
  }, {
    title: 'Copy component',
    handler: function () {
      var _handler = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
        var _e$domEvent2;

        var bufferedData;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                e === null || e === void 0 ? void 0 : (_e$domEvent2 = e.domEvent) === null || _e$domEvent2 === void 0 ? void 0 : _e$domEvent2.stopPropagation();
                bufferedData = JSON.stringify({
                  component: componentId
                });
                _context.next = 4;
                return navigator.clipboard.writeText(bufferedData);

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      function handler(_x) {
        return _handler.apply(this, arguments);
      }

      return handler;
    }()
  }, {
    title: 'Paste component',
    handler: function () {
      var _handler2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
        var _e$domEvent3;

        var bufferedData, _components$all2, _components$all3, copiedComponent;

        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                e === null || e === void 0 ? void 0 : (_e$domEvent3 = e.domEvent) === null || _e$domEvent3 === void 0 ? void 0 : _e$domEvent3.stopPropagation();
                _context2.next = 3;
                return navigator.clipboard.readText();

              case 3:
                bufferedData = _context2.sent;
                _context2.prev = 4;
                copiedComponent = JSON.parse(bufferedData);

                if (copiedComponent !== null && copiedComponent !== void 0 && copiedComponent.component) {
                  _context2.next = 8;
                  break;
                }

                throw new Error('Component does not exists');

              case 8:
                (components === null || components === void 0 ? void 0 : (_components$all2 = components.all) === null || _components$all2 === void 0 ? void 0 : _components$all2[copiedComponent === null || copiedComponent === void 0 ? void 0 : copiedComponent.component]) && duplicate(_objectSpread$d(_objectSpread$d({}, components === null || components === void 0 ? void 0 : (_components$all3 = components.all) === null || _components$all3 === void 0 ? void 0 : _components$all3[copiedComponent === null || copiedComponent === void 0 ? void 0 : copiedComponent.component]), {}, {
                  parentId: componentId
                }));
                _context2.next = 14;
                break;

              case 11:
                _context2.prev = 11;
                _context2.t0 = _context2["catch"](4);
                console.error('Error at pasting component:', _context2.t0.message);

              case 14:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, null, [[4, 11]]);
      }));

      function handler(_x2) {
        return _handler2.apply(this, arguments);
      }

      return handler;
    }()
  }, {
    title: 'Copy styles',
    handler: function () {
      var _handler3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(e) {
        var _e$domEvent4, _components$all4, _components$all4$comp;

        var _components$all5, _components$all5$comp, bufferedData;

        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                e === null || e === void 0 ? void 0 : (_e$domEvent4 = e.domEvent) === null || _e$domEvent4 === void 0 ? void 0 : _e$domEvent4.stopPropagation();

                if (!(components !== null && components !== void 0 && (_components$all4 = components.all) !== null && _components$all4 !== void 0 && (_components$all4$comp = _components$all4[componentId]) !== null && _components$all4$comp !== void 0 && _components$all4$comp.attributes)) {
                  _context3.next = 5;
                  break;
                }

                bufferedData = JSON.stringify({
                  attributes: components === null || components === void 0 ? void 0 : (_components$all5 = components.all) === null || _components$all5 === void 0 ? void 0 : (_components$all5$comp = _components$all5[componentId]) === null || _components$all5$comp === void 0 ? void 0 : _components$all5$comp.attributes
                });
                _context3.next = 5;
                return navigator.clipboard.writeText(bufferedData);

              case 5:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));

      function handler(_x3) {
        return _handler3.apply(this, arguments);
      }

      return handler;
    }()
  }, {
    title: 'Apply styles',
    handler: function () {
      var _handler4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(e) {
        var _e$domEvent5;

        var bufferedData, styles;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                e === null || e === void 0 ? void 0 : (_e$domEvent5 = e.domEvent) === null || _e$domEvent5 === void 0 ? void 0 : _e$domEvent5.stopPropagation();
                _context4.next = 3;
                return navigator.clipboard.readText();

              case 3:
                bufferedData = _context4.sent;

                try {
                  styles = JSON.parse(bufferedData);
                  (styles === null || styles === void 0 ? void 0 : styles.attributes) && updateComponent({
                    id: componentId,
                    attributes: styles === null || styles === void 0 ? void 0 : styles.attributes
                  });
                } catch (err) {
                  console.error('Error at applying styles:', err.message);
                }

              case 5:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4);
      }));

      function handler(_x4) {
        return _handler4.apply(this, arguments);
      }

      return handler;
    }()
  }, {
    title: 'Export code',
    handler: function () {
      var _handler5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(e) {
        var code;
        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
          while (1) {
            switch (_context5.prev = _context5.next) {
              case 0:
                code = parse(componentType, [{
                  id: componentId
                }]);
                navigator.clipboard.writeText(code);
                notification.success({
                  message: 'Code successfully copied!'
                });

              case 3:
              case "end":
                return _context5.stop();
            }
          }
        }, _callee5);
      }));

      function handler(_x5) {
        return _handler5.apply(this, arguments);
      }

      return handler;
    }()
  }, {
    title: 'Make template',
    // TODO change template name to normal that will come from input
    handler: function handler(e) {
      var _e$domEvent6, _components$all6;

      e === null || e === void 0 ? void 0 : (_e$domEvent6 = e.domEvent) === null || _e$domEvent6 === void 0 ? void 0 : _e$domEvent6.stopPropagation();

      var _components$all$compo = components === null || components === void 0 ? void 0 : (_components$all6 = components.all) === null || _components$all6 === void 0 ? void 0 : _components$all6[componentId],
          isContainer = _components$all$compo.isContainer,
          name = _components$all$compo.name,
          id = _components$all$compo.id,
          text = _components$all$compo.text,
          parentId = _components$all$compo.parentId;

      setCurrentlySelected({
        isContainer: isContainer,
        name: name,
        id: id,
        text: text,
        parentId: parentId
      });
      setCreateTemplateModalVisibility(true);
    }
  }, {
    title: 'Rename',
    handler: function handler() {
      return changeComponentTitleEditState(true);
    }
  }, {
    title: 'Delete',
    handler: function handler(e) {
      var _e$domEvent7;

      e === null || e === void 0 ? void 0 : (_e$domEvent7 = e.domEvent) === null || _e$domEvent7 === void 0 ? void 0 : _e$domEvent7.stopPropagation();

      if ((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.id) !== componentId) {
        var _components$all7;

        setCurrentlySelected(defaultSelected);
        removeComponent(components === null || components === void 0 ? void 0 : (_components$all7 = components.all) === null || _components$all7 === void 0 ? void 0 : _components$all7[componentId]);
      }
    }
  }];
  return CONTEXT_MENU_OPTIONS;
};

var ContextMenu = function ContextMenu(_ref) {
  var id = _ref.id,
      title = _ref.title,
      editTitleState = _ref.editTitleState;
  var contextMenuOptions = useContextMenuOptions(id, editTitleState);

  var _useComponentBuilder = useComponentBuilder(),
      currentlySelected = _useComponentBuilder.currentlySelected;

  var menu = /*#__PURE__*/jsx(Menu, {
    children: /*#__PURE__*/jsx(Box, {
      display: "flex",
      flexDirection: "column",
      children: contextMenuOptions === null || contextMenuOptions === void 0 ? void 0 : contextMenuOptions.map(function (item, index) {
        return /*#__PURE__*/jsx(Menu.Item, {
          onClick: item.handler,
          children: item.title
        }, index);
      })
    })
  });

  return /*#__PURE__*/jsx(Dropdown, {
    overlay: menu,
    trigger: ['contextMenu'],
    children: /*#__PURE__*/jsx(Box, {
      children: /*#__PURE__*/jsx(Text, {
        color: id === (currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id) ? 'white' : null,
        children: title
      })
    })
  });
};

function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function TagsInput(_ref) {
  var onChange = _ref.onChange;
  var input = useRef();

  var _useState = useState({
    tags: [],
    inputVisible: false,
    inputValue: ''
  }),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  useEffect(function () {
    var _input$current;

    var isMounted = true;
    if (isMounted && state !== null && state !== void 0 && state.inputVisible) input === null || input === void 0 ? void 0 : (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
    return function () {
      return isMounted = false;
    };
  }, [state === null || state === void 0 ? void 0 : state.inputVisible]);

  var handleClose = function handleClose(removedTag) {
    var tags = state.tags.filter(function (tag) {
      return tag !== removedTag;
    });
    setState({
      tags: tags
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(tags);
  };

  var showInput = function showInput() {
    setState(function (prev) {
      return _objectSpread$c(_objectSpread$c({}, prev), {}, {
        inputVisible: true
      });
    });
  };

  var handleInputChange = function handleInputChange(e) {
    setState(function (prev) {
      return _objectSpread$c(_objectSpread$c({}, prev), {}, {
        inputValue: e.target.value
      });
    });
  };

  var handleInputConfirm = function handleInputConfirm(e) {
    e.stopPropagation();
    var inputValue = state.inputValue;
    var tags = state.tags;

    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [].concat(_toConsumableArray(tags), [inputValue]);
    }

    setState({
      tags: tags,
      inputVisible: false,
      inputValue: ''
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(tags);
  };

  var tags = state.tags,
      inputVisible = state.inputVisible,
      inputValue = state.inputValue;
  return /*#__PURE__*/jsxs(Box, {
    children: [tags.map(function (tag) {
      return /*#__PURE__*/jsx(Tag, {
        closable: true,
        style: {
          wordBreak: 'break-word',
          whiteSpace: 'break-spaces'
        },
        onClose: function onClose(e) {
          e.preventDefault();
          handleClose(tag);
        },
        children: tag
      });
    }), inputVisible && /*#__PURE__*/jsx(Input, {
      ref: input,
      size: "small",
      type: "text",
      style: {
        width: 78
      },
      value: inputValue,
      onChange: handleInputChange,
      onBlur: handleInputConfirm,
      onPressEnter: handleInputConfirm
    }), !inputVisible && /*#__PURE__*/jsxs(Tag, {
      onClick: showInput,
      className: "site-tag-plus",
      children: [/*#__PURE__*/jsx(PlusOutlined, {}), " New Tag"]
    })]
  });
}

function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var TemplateModal = function TemplateModal() {
  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      templateName = _useState2[0],
      setTemplateName = _useState2[1];

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      tags = _useState4[0],
      setTags = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isTemplateGlobal = _useState6[0],
      setIsTemplateGlobal = _useState6[1];

  var _useComponentBuilder = useComponentBuilder(),
      currentlySelected = _useComponentBuilder.currentlySelected,
      makeTemplate = _useComponentBuilder.makeTemplate,
      components = _useComponentBuilder.components,
      createTemplateModalVisibility = _useComponentBuilder.createTemplateModalVisibility,
      setCreateTemplateModalVisibility = _useComponentBuilder.setCreateTemplateModalVisibility;

  var _useComponentType = useComponentType(),
      componentType = _useComponentType.componentType;

  var _useParams = useParams(),
      pageId = _useParams.pageId;

  var onCreateTemplateClick = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var template, templateId, _docData$components, docData;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!templateName.length) {
                _context.next = 23;
                break;
              }

              template = parseStructureForTemplate(currentlySelected.id, components.all, {
                tags: tags
              });

              if (!isTemplateGlobal) {
                _context.next = 8;
                break;
              }

              templateId = nanoid();
              _context.next = 6;
              return create(GLOBAL_TEMPLATES, templateId, {
                name: templateName,
                _id: templateId,
                body: template,
                tags: Object.fromEntries(tags.map(function (tag) {
                  return [tag, true];
                })),
                componentType: componentType || null
              });

            case 6:
              _context.next = 20;
              break;

            case 8:
              _context.next = 10;
              return makeTemplate({
                id: currentlySelected.id,
                templateName: templateName,
                additionalData: {
                  tags: tags
                }
              });

            case 10:
              _context.next = 12;
              return getDocData(PAGES, pageId);

            case 12:
              docData = _context.sent;

              if (!docData) {
                _context.next = 18;
                break;
              }

              _context.next = 16;
              return update(PAGES, pageId, {
                'components.templates': _objectSpread$b(_objectSpread$b({}, docData === null || docData === void 0 ? void 0 : (_docData$components = docData.components) === null || _docData$components === void 0 ? void 0 : _docData$components.templates), {}, _defineProperty({}, templateName, template))
              });

            case 16:
              _context.next = 20;
              break;

            case 18:
              _context.next = 20;
              return create(PAGES, pageId, {
                componentType: componentType,
                _id: pageId,
                components: {
                  all: {},
                  root: [],
                  templates: _defineProperty({}, templateName, template)
                }
              });

            case 20:
              setIsTemplateGlobal(false);
              setTemplateName('');
              notification.success({
                message: 'Template successfully created!'
              });

            case 23:
              setCreateTemplateModalVisibility(function (prev) {
                return !prev;
              });

            case 24:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onCreateTemplateClick() {
      return _ref.apply(this, arguments);
    };
  }();

  useKeyPress('Enter', function (e) {
    if (createTemplateModalVisibility) onCreateTemplateClick();
  });

  var toggleVisibility = function toggleVisibility(e) {
    if (currentlySelected.id === 'root') return;
    e === null || e === void 0 ? void 0 : e.preventDefault();
    setCreateTemplateModalVisibility(function (prev) {
      return !prev;
    });
  };

  useKeyPress('alt.t', toggleVisibility);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Button, {
      type: "text",
      icon: /*#__PURE__*/jsx(Icon, {
        component: /*#__PURE__*/jsx(MdOutlineViewQuilt, {}),
        size: 24,
        mr: 2
      }),
      disabled: !currentlySelected || currentlySelected.id === 'root',
      onClick: function onClick() {
        return setCreateTemplateModalVisibility(true);
      },
      children: "Create template"
    }), /*#__PURE__*/jsx(Modal, {
      zIndex: 10000,
      centered: true,
      destroyOnClose: true,
      closable: false,
      footer: null,
      title: "Create template",
      visible: createTemplateModalVisibility,
      onOk: onCreateTemplateClick,
      onCancel: function onCancel() {
        return setCreateTemplateModalVisibility(false);
      },
      children: /*#__PURE__*/jsxs(Row, {
        children: [/*#__PURE__*/jsx(Col, {
          cw: 12,
          mb: 2,
          children: /*#__PURE__*/jsxs(Row, {
            noOuterGutters: true,
            children: [/*#__PURE__*/jsx(Col, {
              cw: "auto",
              children: /*#__PURE__*/jsx(Text, {
                children: "Is template global?"
              })
            }), /*#__PURE__*/jsx(Col, {
              cw: "auto",
              children: /*#__PURE__*/jsx(Switch, {
                checked: isTemplateGlobal,
                onChange: function onChange() {
                  return setIsTemplateGlobal(!isTemplateGlobal);
                }
              })
            })]
          })
        }), /*#__PURE__*/jsx(Col, {
          cw: 12,
          mb: 2,
          children: /*#__PURE__*/jsx(Input$1, {
            value: templateName,
            onChange: function onChange(e) {
              return setTemplateName(e.target.value);
            },
            placeholder: "Specify name here..."
          })
        }), /*#__PURE__*/jsx(Col, {
          cw: 12,
          children: /*#__PURE__*/jsx(TagsInput, {
            onChange: setTags
          })
        })]
      })
    })]
  });
};

var TerminalHintShortcut = function TerminalHintShortcut(props) {
  var children = props.children;
  return /*#__PURE__*/jsx(Box, {
    display: "flex",
    justifyContent: "center",
    bg: "var(--ql-color-dark)",
    px: "6px",
    py: "2px",
    minWidth: 26,
    borderRadius: "var(--ql-border-radius-4)",
    children: /*#__PURE__*/jsx(Text, {
      variant: "body2",
      color: "var(--ql-color-white)",
      fontWeight: "var(--ql-font-weight-medium)",
      children: children
    })
  });
};

var SHORTCUTS_CONFIG = {
  Terminal: [{
    shortcutTitle: 'Open/Close',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "/"
      })]
    })
  }, {
    shortcutTitle: 'Close',
    shortCutButtonLayout: /*#__PURE__*/jsx(Col, {
      cw: "auto",
      children: /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Esc"
      })
    })
  }, {
    shortcutTitle: 'Switch commands',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsxs(Box, {
        display: "flex",
        columnGap: 4,
        children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2190"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2192"
        })]
      })]
    })
  }, {
    shortcutTitle: 'Switch suggestions',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '4px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "\u2193"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "\u2191"
      })]
    })
  }, {
    shortcutTitle: 'Submit suggestion',
    shortCutButtonLayout: /*#__PURE__*/jsx(Col, {
      cw: "auto",
      children: /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "\u23CE"
      })
    })
  }, {
    shortcutTitle: 'Select attribute',
    shortCutButtonLayout: /*#__PURE__*/jsx(Col, {
      cw: "auto",
      children: /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Tab"
      })
    })
  }],
  Tree: [{
    shortcutTitle: 'Switch level(not working)',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Alt"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsxs(Box, {
        display: "flex",
        columnGap: 4,
        children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2193"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2191"
        })]
      })]
    })
  }, {
    shortcutTitle: 'Switch component(not working)',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Alt"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsxs(Box, {
        display: "flex",
        columnGap: 4,
        children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2192"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2190"
        })]
      })]
    })
  }, {
    shortcutTitle: 'Make duplicate of selected component',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "D"
      })]
    })
  }, {
    shortcutTitle: 'Delete selected component',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Del"
      })]
    })
  }, {
    shortcutTitle: 'Potential shortcut',
    shortCutButtonLayout: /*#__PURE__*/jsx(Col, {
      cw: "auto",
      children: /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "..."
      })
    })
  }, {
    shortcutTitle: 'Make template of selected',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Alt"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "T"
      })]
    })
  }],
  Global: [{
    shortcutTitle: 'Toggle asides',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Option"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "/"
      })]
    })
  }, {
    shortcutTitle: 'Save current state',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "S"
      })]
    })
  }, {
    shortcutTitle: 'Copy selected component',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Shift"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "C"
      })]
    })
  }, {
    shortcutTitle: 'Paste copied component',
    shortCutButtonLayout: /*#__PURE__*/jsxs(Col, {
      cw: "auto",
      flexDirection: "row",
      style: {
        columnGap: '12px'
      },
      children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Shift"
      }), /*#__PURE__*/jsx(Text, {
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "V"
      })]
    })
  }]
};

var ShortcutsPopover = function ShortcutsPopover() {
  return /*#__PURE__*/jsx(Popover, {
    zIndex: 3000,
    trigger: "click",
    content: /*#__PURE__*/jsx(Container, {
      width: "800px",
      children: /*#__PURE__*/jsx(Row, {
        noGutters: true,
        children: Object.entries(SHORTCUTS_CONFIG).map(function (item, index) {
          return /*#__PURE__*/jsxs(Col, {
            cw: 6,
            children: [/*#__PURE__*/jsx(Row, {
              children: /*#__PURE__*/jsx(Col, {
                children: /*#__PURE__*/jsx(Title, {
                  variant: "h5",
                  children: item[0]
                })
              })
            }), /*#__PURE__*/jsx(Row, {
              children: item[1].map(function (shortcutData, shortcutIndex) {
                return /*#__PURE__*/jsx(Col, {
                  cw: 12,
                  children: /*#__PURE__*/jsxs(Row, {
                    noGutters: true,
                    flexWrap: "nowrap",
                    py: 2,
                    borderBottom: "1px solid var(--ql-color-dark-t-lighten5)",
                    children: [/*#__PURE__*/jsx(Col, {
                      children: /*#__PURE__*/jsx(Text, {
                        children: shortcutData.shortcutTitle
                      })
                    }), shortcutData.shortCutButtonLayout]
                  })
                }, shortcutIndex);
              })
            })]
          }, index);
        })
      })
    }),
    children: /*#__PURE__*/jsx(Button, {
      type: "text",
      icon: /*#__PURE__*/jsx(Icon, {
        component: /*#__PURE__*/jsx(MdOutlineKeyboard, {}),
        size: 24
      })
    })
  });
};

var DownloadImage = function DownloadImage(_ref) {
  var name = _ref.name,
      downloadRef = _ref.downloadRef;

  var _useResponsive = useResponsive(),
      iframeRef = _useResponsive.iframeRef;

  var handleDownloadImage = useCallback(function () {
    var _iframeRef$current;

    var element = (iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : _iframeRef$current.contentDocument.children) || downloadRef.current;
    htmlToImage.toPng(element).then(function (dataUrl) {
      var link = document.createElement('a');
      link.download = "".concat(name || 'page', ".png");
      link.href = dataUrl;
      link.click();
    }).catch(function (error) {
      console.error('Error occurred during image download:', error);
    });
  }, [name]);
  return /*#__PURE__*/jsx(Tooltip, {
    title: "Download as image",
    placement: "bottomRight",
    children: /*#__PURE__*/jsx(Button$1, {
      type: "text",
      icon: /*#__PURE__*/jsx(FileImageOutlined, {}),
      onClick: handleDownloadImage
    })
  });
};

var ResponsiveVariants = function ResponsiveVariants() {
  var _useResponsive = useResponsive(),
      wrapperHeight = _useResponsive.wrapperHeight,
      setWrapperHeight = _useResponsive.setWrapperHeight,
      wrapperWidth = _useResponsive.wrapperWidth,
      setWrapperWidth = _useResponsive.setWrapperWidth,
      handleSizeChange = _useResponsive.handleSizeChange,
      parentWidth = _useResponsive.parentWidth,
      parentHeight = _useResponsive.parentHeight,
      isResponseOn = _useResponsive.isResponseOn,
      setIsResponseOn = _useResponsive.setIsResponseOn;

  var inputRef = useRef();

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      disabledBtn = _useState2[0],
      setDisabledBtn = _useState2[1]; // === COMPUTED PROPERTIES ====


  useEffect(function () {
    if (isResponseOn) {
      setDisabledBtn(false);
    }
  }, [isResponseOn]);

  var handleHeightChange = function handleHeightChange(e) {
    setIsResponseOn(true);
    setDisabledBtn(false);
    setWrapperHeight(e.target.value);
  };

  var handleWidthChange = function handleWidthChange(e) {
    setIsResponseOn(true);
    setDisabledBtn(false);
    setWrapperWidth(e.target.value);
  };

  var handleClick = function handleClick() {
    setIsResponseOn(false);
    setDisabledBtn(true);
    setWrapperWidth(parentWidth);
    setWrapperHeight(parentHeight);
  };

  var mockButtonArr = [{
    title: 'Phone',
    arr: [{
      name: 'Iphone SE',
      width: '375',
      height: '667'
    }, {
      name: 'Iphone XR',
      width: '414',
      height: '896'
    }, {
      name: 'Samsung Galaxy S8+',
      width: '360',
      height: '740'
    }, {
      name: 'Pixel 5',
      width: '393',
      height: '851'
    }]
  }, {
    title: 'Tablet',
    arr: [{
      name: 'iPad Air',
      width: '820',
      height: '1180'
    }, {
      name: 'iPad Mini',
      width: '768',
      height: '1024'
    }]
  }, {
    title: 'Desktop',
    arr: [{
      name: '1366x768',
      width: '1366',
      height: '768'
    }, {
      name: '1440x900',
      width: '1440',
      height: '900'
    }, {
      name: '1536x864',
      width: '1536',
      height: '864'
    }, {
      name: 'Full HD(1920x1080)',
      width: '1920',
      height: '1080'
    }, {
      name: '2K(2048x1080)',
      width: '2048',
      height: '1080'
    }, {
      name: 'QHD(2560x1440)',
      width: '2560',
      height: '1440'
    }, {
      name: '4K(4096x2160)',
      width: '4096',
      height: '2160'
    }]
  }];
  var computedWidth = useMemo(function () {
    return ((isResponseOn ? wrapperWidth : parentWidth) || '').toString();
  }, [isResponseOn, wrapperWidth, parentWidth]);
  var computedHeight = useMemo(function () {
    return ((isResponseOn ? wrapperHeight : parentHeight) || '').toString();
  }, [isResponseOn, wrapperHeight, parentHeight]);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Tooltip, {
      title: "Disable responsive",
      placement: "bottom",
      children: /*#__PURE__*/jsx(Button, {
        onClick: handleClick,
        disabled: disabledBtn,
        type: "text",
        icon: /*#__PURE__*/jsx(Icon, {
          component: /*#__PURE__*/jsx(MdPhonelinkErase, {}),
          size: 24
        })
      })
    }), /*#__PURE__*/jsx(Popover, {
      zIndex: 3000,
      trigger: "click",
      content: /*#__PURE__*/jsxs(Container, {
        children: [/*#__PURE__*/jsx(Row, {
          children: mockButtonArr.map(function (item) {
            return /*#__PURE__*/jsxs(Col, {
              cw: 4,
              alignItems: "center",
              children: [/*#__PURE__*/jsx(Title, {
                level: 5,
                children: item.title
              }), item.arr.map(function (item, index) {
                return /*#__PURE__*/jsx(Button, {
                  size: "small",
                  width: "100%",
                  mb: 2,
                  onClick: function onClick() {
                    return handleSizeChange(item.width, item.height);
                  },
                  children: /*#__PURE__*/jsx(Text, {
                    children: item.name
                  })
                }, index);
              })]
            }, item === null || item === void 0 ? void 0 : item.title);
          })
        }), /*#__PURE__*/jsxs(Row, {
          alignItems: "center",
          justifyContent: "center",
          children: [/*#__PURE__*/jsx(Col, {
            children: /*#__PURE__*/jsx(Text, {
              children: "Dimensions: Responsive"
            })
          }), /*#__PURE__*/jsx(Col, {
            children: /*#__PURE__*/jsx(Input$1, {
              type: "number",
              ref: inputRef,
              value: computedWidth,
              placeholder: "width",
              onChange: handleWidthChange
            })
          }), /*#__PURE__*/jsx(Text, {
            children: "x"
          }), /*#__PURE__*/jsx(Col, {
            children: /*#__PURE__*/jsx(Input$1, {
              type: "number",
              ref: inputRef,
              placeholder: "height",
              value: computedHeight,
              onChange: handleHeightChange
            })
          })]
        })]
      }),
      children: /*#__PURE__*/jsx(Tooltip, {
        title: "Enable responsive",
        placement: "bottom",
        children: /*#__PURE__*/jsx(Button, {
          mx: 2,
          primary: true,
          type: "text",
          icon: /*#__PURE__*/jsx(Icon, {
            component: /*#__PURE__*/jsx(MdStayCurrentPortrait, {}),
            size: 24
          })
        })
      })
    })]
  });
};

var ResponsiveFrame = function ResponsiveFrame() {
  var _ref = useResponsive() || {},
      iframeRef = _ref.iframeRef,
      node = _ref.node,
      currentStyle = _ref.currentStyle,
      frameWidthLimit = _ref.frameWidthLimit,
      frameHeightLimit = _ref.frameHeightLimit,
      scaleNum = _ref.scaleNum;

  return /*#__PURE__*/jsx("iframe", {
    ref: iframeRef,
    frameborder: "0",
    title: "page",
    width: frameWidthLimit(),
    height: frameHeightLimit(),
    srcDoc: "<html>\n        <head>\n          <link rel=\"stylesheet\" href=\"styles.css\" />\n          <style>\n            ".concat(currentStyle, ";\n          </style>\n        </head>\n        <body>\n          <style type=\"text/css\" scoped>\n            ").concat(currentStyle, ";\n          </style>\n          <div style=\"transform: scale(").concat(scaleNum, "); transform-origin: center 0; box-sizing: border-box;\">\n            ").concat(node ? node.innerHTML : 'Loading', "\n          </div>\n        </body>\n      </html>")
  });
};

var LiveSave = function LiveSave() {
  var _useLiveSave = useLiveSave(),
      textVisibility = _useLiveSave.textVisibility,
      saveChanges = _useLiveSave.saveChanges;

  return /*#__PURE__*/jsx(Tooltip, {
    title: 'Save changes',
    placement: "bottomLeft",
    children: /*#__PURE__*/jsx(Button, {
      p: 0,
      type: "text",
      onClick: saveChanges,
      icon: /*#__PURE__*/jsx(CloudSyncOutlined, {}),
      children: textVisibility && /*#__PURE__*/jsx(Text, {
        type: "secondary",
        variant: "body2",
        children: "Saved"
      })
    })
  });
};

var LiveSave$1 = /*#__PURE__*/memo(LiveSave);

var _templateObject$a;
var StyledInput = styled.textarea(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  outline: none;\n  width: 100%;\n  height: ", "px;\n  padding-vertical: 10px;\n  transition: all 0.5s ease 0s;\n  background: var(--input-bg);\n  border: var(--ql-border-width-default) var(--ql-border-style-default)\n    var(--input-border-color);\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  font-family: inherit;\n  overflow-wrap: inherit;\n  box-sizing: inherit;\n  white-space: inherit;\n  word-break: inherit;\n  word-spacing: inherit;\n  word-wrap: inherit;\n  margin: 0;\n"])), function (_ref) {
  var height = _ref.height;
  return height + 10;
});

var _templateObject$9, _templateObject2$1, _templateObject3;
var SuggestionsStyled = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  width: 100%;\n  overflow: auto;\n  .terminal-suggestion-item:not(:last-child) {\n    border-bottom: 1px solid #efefef;\n  }\n"])));
var SuggestionItemStyled = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 4px 32px;\n  cursor: pointer;\n  background-color: #efefef;\n  &:hover {\n    background-color: var(--ql-color-accent1-t-lighten4);\n  }\n  &:active {\n    background-color: var(--ql-color-accent1-t-lighten4);\n  }\n  line-height: var(--ql-typography-line-height-md);\n  font-size: var(--ql-typography-font-size-md);\n  font-family: var(--ql-font-family-main);\n  font-variant: var(--ql-typography-font-variant-default);\n  line-height: var(--ql-typography-line-height-md);\n  background-color: var(--ql-body-bg);\n"])));
var WrapperStyled = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #efefef;\n  margin: 0 auto;\n  border-radius: 8px;\n  border: 1px solid var(--ql-color-accent1-t-lighten4);\n  overflow: hidden;\n  min-width: 400px;\n  max-width: 800px;\n"])));

var VariablesSuggestions = function VariablesSuggestions(props) {
  var variables = props.variables,
      handleSelect = props.handleSelect;
  return /*#__PURE__*/jsx(WrapperStyled, {
    children: /*#__PURE__*/jsx(SuggestionsStyled, {
      children: variables === null || variables === void 0 ? void 0 : variables.map(function (variable) {
        return /*#__PURE__*/jsxs(SuggestionItemStyled, {
          onClick: function onClick() {
            return handleSelect(variable);
          },
          children: [/*#__PURE__*/jsxs(Text, {
            type: "secondary",
            variant: "body2",
            children: ["Use variable \u2192", ' ']
          }), /*#__PURE__*/jsxs(Text, {
            variant: "body2",
            children: ["#", variable]
          }), ' ']
        }, variable);
      })
    })
  });
};

var CustomInput = function CustomInput(props) {
  var inputHeight = props.inputHeight,
      text = props.text,
      onSubmit = props.onSubmit;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      selectionPosition = _useState2[0],
      setSelectionPosition = _useState2[1];

  var _useState3 = useState(text),
      _useState4 = _slicedToArray(_useState3, 2),
      inputValue = _useState4[0],
      setInputValue = _useState4[1];

  var _useFindVariables = useFindVariables(selectionPosition, inputValue),
      _useFindVariables2 = _slicedToArray(_useFindVariables, 3),
      variables = _useFindVariables2[0],
      insertionStart = _useFindVariables2[1],
      insertionEnd = _useFindVariables2[2];

  var handleChange = function handleChange(e) {
    setSelectionPosition(e.target.selectionStart);
    setInputValue(e.target.value);
  };

  var handleKeyDown = function handleKeyDown(e) {
    e.code === 'Enter' && !e.shiftKey && handleSubmit();
  };

  var handleSubmit = function handleSubmit() {
    return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(inputValue);
  };

  var handleSelect = function handleSelect(value) {
    var _value = inputValue.slice(0, insertionStart) + value + inputValue.slice(insertionEnd, inputValue.length);

    _value && (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(_value));
  };

  return /*#__PURE__*/jsxs(Box, {
    position: "relative",
    children: [/*#__PURE__*/jsx(StyledInput, {
      value: inputValue,
      height: inputHeight,
      onChange: handleChange,
      onKeyPress: handleKeyDown
    }), !!(variables !== null && variables !== void 0 && variables.length) && /*#__PURE__*/jsx("div", {
      style: {
        position: 'absolute',
        zIndex: 1
      },
      children: /*#__PURE__*/jsx(VariablesSuggestions, {
        variables: variables,
        handleSelect: handleSelect
      })
    })]
  });
};

var EditableText = function EditableText(props) {
  var text = props.text,
      onTextEdit = props.onTextEdit;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isEdit = _useState2[0],
      setIsEdit = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      inputHeight = _useState4[0],
      setInputHeight = _useState4[1];

  var handleSubmit = useCallback(function (value) {
    onTextEdit === null || onTextEdit === void 0 ? void 0 : onTextEdit(value);
    setIsEdit(false);
  }, [onTextEdit]);
  var handleEdit = useCallback(function (e) {
    setIsEdit(true);
    setInputHeight(e.target.getBoundingClientRect().height);
  }, []);
  return /*#__PURE__*/jsx(Fragment$1, {
    children: !isEdit ? /*#__PURE__*/jsx("span", {
      onDoubleClick: handleEdit,
      children: text
    }) : /*#__PURE__*/jsx(CustomInput, {
      text: text,
      inputHeight: inputHeight,
      onSubmit: handleSubmit
    })
  });
};

var EditableText$1 = /*#__PURE__*/memo(EditableText);

var _templateObject$8;
var StyledTree = styled(Tree$1)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  & {\n    background: transparent;\n    .ant-tree-list {\n      width: fit-content;\n      min-width: 100%;\n    }\n    .ant-tree-switcher {\n      background: transparent;\n    }\n    .ant-tree-title {\n      white-space: nowrap;\n    }\n    .ant-tree-node-content-wrapper:hover {\n      border-top-left-radius: var(--ql-border-radius-4);\n      border-bottom-left-radius: var(--ql-border-radius-4);\n    }\n    .ant-tree-node-content-wrapper.ant-tree-node-selected {\n      background-color: var(--ql-color-accent1);\n      color: var(--ql-color-white);\n      font-weight: var(--ql-font-weight-medium);\n      border-top-left-radius: var(--ql-border-radius-4);\n      border-bottom-left-radius: var(--ql-border-radius-4);\n    }\n    .ant-tree-indent-unit::before {\n      border-color: var(--ql-color-dark-t-lighten3);\n    }\n    .ant-tree-switcher-leaf-line::before {\n      border-color: var(--ql-color-dark-t-lighten3);\n    }\n    .ant-tree-switcher-leaf-line::after {\n      border-color: var(--ql-color-dark-t-lighten3);\n    }\n"])));

var TreeNode = function TreeNode(_ref) {
  var id = _ref.id,
      title = _ref.title;

  var _useComponentBuilder = useComponentBuilder(),
      updateComponent = _useComponentBuilder.updateComponent;

  var inputRef = useRef();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isComponentTitleEdited = _useState2[0],
      setIsComponentTitleEdited = _useState2[1];

  var onTitleChanged = function onTitleChanged(e) {
    e.stopPropagation();
    updateComponent({
      id: id,
      title: e.target.value
    });
    setIsComponentTitleEdited(false);
  };

  useEffect(function () {
    isComponentTitleEdited && inputRef.current.focus();
  }, [isComponentTitleEdited]);
  return /*#__PURE__*/jsx(Fragment, {
    children: isComponentTitleEdited ? /*#__PURE__*/jsx(Input$1, {
      ref: inputRef,
      p: 0,
      onBlur: onTitleChanged,
      onPressEnter: onTitleChanged
    }) : /*#__PURE__*/jsx(ContextMenu, {
      id: id,
      title: title,
      editTitleState: setIsComponentTitleEdited
    })
  });
};

function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useTreeActions = function useTreeActions() {
  var _components$root;

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components,
      setCurrentlySelected = _useComponentBuilder.setCurrentlySelected,
      currentlySelected = _useComponentBuilder.currentlySelected,
      removeComponent = _useComponentBuilder.removeComponent,
      setComponentTree = _useComponentBuilder.setComponentTree,
      updateState = _useComponentBuilder.updateState,
      setTreeExpandedItems = _useComponentBuilder.setTreeExpandedItems,
      duplicate = _useComponentBuilder.duplicate,
      defaultSelected = _useComponentBuilder.defaultSelected;

  var builderToTree = function builderToTree(tree) {
    var _tree$children, _tree$children2;

    if (!(tree !== null && tree !== void 0 && (_tree$children = tree.children) !== null && _tree$children !== void 0 && _tree$children.length)) {
      return {
        key: tree === null || tree === void 0 ? void 0 : tree.id,
        title: tree === null || tree === void 0 ? void 0 : tree.name,
        dataModel: _objectSpread$a(_objectSpread$a({}, tree), {}, {
          children: []
        })
      };
    }

    return {
      key: tree === null || tree === void 0 ? void 0 : tree.id,
      title: tree === null || tree === void 0 ? void 0 : tree.name,
      dataModel: _objectSpread$a(_objectSpread$a({}, tree), {}, {
        children: []
      }),
      children: tree === null || tree === void 0 ? void 0 : (_tree$children2 = tree.children) === null || _tree$children2 === void 0 ? void 0 : _tree$children2.map(function (item) {
        var _components$all;

        return builderToTree(components === null || components === void 0 ? void 0 : (_components$all = components.all) === null || _components$all === void 0 ? void 0 : _components$all[item]);
      })
    };
  };

  var treeToBuilder = function treeToBuilder(tree) {
    var _ref2;

    var treeToArrayOfTreeNodes = function treeToArrayOfTreeNodes(tree, parentId) {
      var _resultTree$dataModel, _resultTree$dataModel2, _tree$children3, _ref, _tree$children4;

      var resultTree = parentId === 'root' ? _objectSpread$a(_objectSpread$a({}, tree), {}, {
        dataModel: _objectSpread$a(_objectSpread$a({}, tree.dataModel), {}, {
          children: []
        })
      }) : _objectSpread$a(_objectSpread$a({}, tree), {}, {
        dataModel: _objectSpread$a(_objectSpread$a({}, tree.dataModel), {}, {
          parentId: parentId,
          children: []
        })
      });
      if (parentId === 'root' && resultTree !== null && resultTree !== void 0 && (_resultTree$dataModel = resultTree.dataModel) !== null && _resultTree$dataModel !== void 0 && _resultTree$dataModel.parentId) resultTree === null || resultTree === void 0 ? true : (_resultTree$dataModel2 = resultTree.dataModel) === null || _resultTree$dataModel2 === void 0 ? true : delete _resultTree$dataModel2.parentId;
      if (!(tree !== null && tree !== void 0 && (_tree$children3 = tree.children) !== null && _tree$children3 !== void 0 && _tree$children3.length)) return resultTree;
      return (_ref = [resultTree]).concat.apply(_ref, _toConsumableArray(tree === null || tree === void 0 ? void 0 : (_tree$children4 = tree.children) === null || _tree$children4 === void 0 ? void 0 : _tree$children4.map(function (item) {
        return treeToArrayOfTreeNodes(item, tree === null || tree === void 0 ? void 0 : tree.key);
      })));
    };

    var arrayOfComponents = Object.fromEntries((_ref2 = []).concat.apply(_ref2, _toConsumableArray(tree === null || tree === void 0 ? void 0 : tree.map(function (item) {
      return treeToArrayOfTreeNodes(item, 'root');
    }))).map(function (item) {
      return [item.key, item.dataModel];
    }));
    Object.values(arrayOfComponents).forEach(function (item) {
      var _arrayOfComponents$pa;

      var parentId = item.parentId,
          id = item.id;
      if (parentId) (_arrayOfComponents$pa = arrayOfComponents[parentId]) === null || _arrayOfComponents$pa === void 0 ? void 0 : _arrayOfComponents$pa.children.push(id);
    });
    return arrayOfComponents;
  };

  var _useState = useState({
    myData: components === null || components === void 0 ? void 0 : (_components$root = components.root) === null || _components$root === void 0 ? void 0 : _components$root.map(function (item) {
      var _components$all2;

      return builderToTree(components === null || components === void 0 ? void 0 : (_components$all2 = components.all) === null || _components$all2 === void 0 ? void 0 : _components$all2[item === null || item === void 0 ? void 0 : item.id]);
    }),
    expandedKeys: []
  }),
      _useState2 = _slicedToArray(_useState, 2),
      treeNodes = _useState2[0],
      setTreeNodes = _useState2[1];

  useEffect(function () {
    var _components$root2;

    setTreeNodes({
      expandedKeys: treeNodes.expandedKeys,
      myData: components === null || components === void 0 ? void 0 : (_components$root2 = components.root) === null || _components$root2 === void 0 ? void 0 : _components$root2.map(function (item) {
        var _components$all3;

        return builderToTree(components === null || components === void 0 ? void 0 : (_components$all3 = components.all) === null || _components$all3 === void 0 ? void 0 : _components$all3[item === null || item === void 0 ? void 0 : item.id]);
      })
    });
  }, [components]);

  var onDragEnter = function onDragEnter(info) {};

  var onDrop = function onDrop(info) {
    //item before dropped item
    var dropKey = info.node.key; //item what is dragged

    var dragKey = info.dragNode.key;
    var dropPos = info.node.pos.split('-');
    var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

    var loop = function loop(data, key, callback) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }

        if (data[i].children) {
          loop(data[i].children, key, callback);
        }
      }
    };

    var data = _toConsumableArray(treeNodes.myData); // Find dragObject


    var dragObj;
    loop(data, dragKey, function (item, index, arr) {
      arr.splice(index, 1);
      dragObj = item;
    });

    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, function (item) {
        item.children = item.children || []; // where to insert

        item.children.unshift(dragObj);
      });
    } else if ((info.node.props.children || []).length > 0 && // Has children
    info.node.props.expanded && // Is expanded
    dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, function (item) {
        item.children = item.children || [];
        item.children.unshift(dragObj); // item to the tail of the children
      });
    } else {
      var ar;
      var i;
      loop(data, dropKey, function (item, index, arr) {
        ar = arr;
        i = index;
      });

      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    }

    setTreeNodes({
      myData: data
    });
    var allComponents = treeToBuilder(data);
    var rootComponents = data.map(function (item) {
      return Object.values(allComponents).find(function (allItem) {
        return allItem.id === item.dataModel.id;
      });
    });
    updateState({
      all: _objectSpread$a(_objectSpread$a({}, components.all), allComponents),
      root: rootComponents
    });
  };

  useEffect(function () {
    if (components !== null && components !== void 0 && components.all) {
      var tree = {};
      Object.values(components.all).forEach(function (item) {
        tree[item === null || item === void 0 ? void 0 : item.id] = {
          id: item === null || item === void 0 ? void 0 : item.id,
          open: true,
          parentId: item === null || item === void 0 ? void 0 : item.parentId,
          children: item === null || item === void 0 ? void 0 : item.children
        };
      });
      setComponentTree(_objectSpread$a({}, tree));
    }
  }, [components]);

  var onSelect = function onSelect(selected) {
    setCurrentlySelected(selected !== null && selected !== void 0 && selected.length ? components === null || components === void 0 ? void 0 : components.all[selected[0]] : defaultSelected);
  };

  var onExpand = function onExpand(expandedKeys) {
    setTreeExpandedItems(expandedKeys);
    localStorage.setItem('treeExpandedItems', expandedKeys);
  };

  var remove = function remove() {
    if ((currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id) !== (defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.id)) {
      currentlySelected && removeComponent(components === null || components === void 0 ? void 0 : components.all[currentlySelected.id]);
      setCurrentlySelected(defaultSelected);
    }
  };

  var duplicateComponent = function duplicateComponent(e) {
    e.preventDefault();
    if ((currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id) !== (defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.id)) duplicate(_objectSpread$a({}, currentlySelected));
  };

  var copyComponent = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      var bufferedData;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              e.preventDefault();
              e.stopPropagation();
              bufferedData = JSON.stringify({
                component: currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id
              });
              _context.next = 5;
              return navigator.clipboard.writeText(bufferedData);

            case 5:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function copyComponent(_x) {
      return _ref3.apply(this, arguments);
    };
  }();

  var pasteComponent = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
      var bufferedData, _components$all4, copiedComponent;

      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              e.preventDefault();
              e.stopPropagation();
              _context2.next = 4;
              return navigator.clipboard.readText();

            case 4:
              bufferedData = _context2.sent;

              try {
                copiedComponent = JSON.parse(bufferedData);
                (copiedComponent === null || copiedComponent === void 0 ? void 0 : copiedComponent.component) && duplicate(_objectSpread$a(_objectSpread$a({}, components === null || components === void 0 ? void 0 : (_components$all4 = components.all) === null || _components$all4 === void 0 ? void 0 : _components$all4[copiedComponent === null || copiedComponent === void 0 ? void 0 : copiedComponent.component]), {}, {
                  parentId: currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id
                }));
              } catch (err) {
                console.error('Error at pasting component:', err.message);
              }

            case 6:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function pasteComponent(_x2) {
      return _ref4.apply(this, arguments);
    };
  }();

  useKeyPress('ctrl.shift.c', copyComponent);
  useKeyPress('meta.shift.c', copyComponent);
  useKeyPress('ctrl.shift.v', pasteComponent);
  useKeyPress('meta.shift.v', pasteComponent);
  useKeyPress('ctrl.d', duplicateComponent);
  useKeyPress('meta.d', duplicateComponent);
  useKeyPress('ctrl.delete', remove);
  useKeyPress('meta.delete', remove);
  return {
    treeNodes: treeNodes,
    setTreeNodes: setTreeNodes,
    onDragEnter: onDragEnter,
    onDrop: onDrop,
    onSelect: onSelect,
    onExpand: onExpand
  };
};

function CustomTree() {
  var _useComponentBuilder = useComponentBuilder(),
      currentlySelected = _useComponentBuilder.currentlySelected,
      treeExpandedItems = _useComponentBuilder.treeExpandedItems,
      components = _useComponentBuilder.components;

  var _useTreeActions = useTreeActions(),
      treeNodes = _useTreeActions.treeNodes,
      onDragEnter = _useTreeActions.onDragEnter,
      onDrop = _useTreeActions.onDrop,
      onSelect = _useTreeActions.onSelect,
      onExpand = _useTreeActions.onExpand;

  return /*#__PURE__*/jsx(Fragment, {
    children: _.isEmpty(components === null || components === void 0 ? void 0 : components.all) ? /*#__PURE__*/jsx(EmptyState, {
      description: "Tree is empty"
    }) : /*#__PURE__*/jsx(StyledTree, {
      selectedKeys: [currentlySelected === null || currentlySelected === void 0 ? void 0 : currentlySelected.id],
      functionName: "draggable-tree",
      expandedKeys: treeExpandedItems,
      showLine: {
        showLeafIcon: false
      },
      showIcon: true,
      switcherIcon: /*#__PURE__*/jsx(DownOutlined, {}),
      blockNode: true,
      draggable: true,
      titleRender: function titleRender(nodeData) {
        var _nodeData$dataModel;

        return /*#__PURE__*/jsx(TreeNode, {
          id: nodeData.key,
          title: (nodeData === null || nodeData === void 0 ? void 0 : (_nodeData$dataModel = nodeData.dataModel) === null || _nodeData$dataModel === void 0 ? void 0 : _nodeData$dataModel.title) || (nodeData === null || nodeData === void 0 ? void 0 : nodeData.title)
        });
      },
      onSelect: onSelect,
      onDragEnter: onDragEnter,
      onExpand: onExpand,
      onDrop: onDrop,
      onRightClick: function onRightClick(_ref) {
        var event = _ref.event;
        return event.preventDefault();
      },
      treeData: treeNodes.myData
    })
  });
}

var Tree = /*#__PURE__*/memo(CustomTree);

var COMMANDS = {
  INSERT: {
    value: 'INSERT',
    text: 'Insert'
  },
  APPLY: {
    value: 'APPLY',
    text: 'Apply'
  },
  USE: {
    value: 'USE',
    text: 'Use'
  }
};
var COMMANDS_ORDERED = [{
  value: 'INSERT',
  text: 'Insert'
}, {
  value: 'APPLY',
  text: 'Apply'
}, {
  value: 'USE',
  text: 'Use'
}];

var BACKGROUND = [{
  name: 'bg',
  property: 'bg',
  tags: ['background', 'bg'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'bg-color',
  property: 'backgroundColor',
  tags: ['bgc', 'bg-c', 'background color'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'opacity',
  property: 'opacity',
  tags: ['op'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'bg-image',
  property: 'backgroundImage',
  tags: ['bi', 'bgi', 'bg-i', 'background image'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'cover',
  tags: ['bs', 'bgs', 'bg-s', 'background-size'],
  property: 'backgroundSize',
  type: 'background',
  value: 'cover',
  description: ''
}, {
  name: 'unset',
  tags: ['bs', 'bgs', 'bg-s', 'background-size'],
  property: 'backgroundSize',
  type: 'background',
  value: 'unset',
  description: ''
}, {
  name: 'contain',
  property: 'backgroundSize',
  tags: ['bs', 'bgs', 'bg-s', 'background-size'],
  type: 'background',
  value: 'contain',
  description: ''
}, {
  name: 'tag',
  property: 'backgroundSize',
  tags: ['bs', 'bgs', 'bg-s', 'background-size'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'bg-position-x',
  property: 'backgroundPositionX',
  tags: ['bpx', 'bgpx', 'bg-px', 'bg-p-x'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'bg-position-y',
  property: 'backgroundPositionY',
  tags: ['bpy', 'bgpy', 'bg-py', 'bg-p-y'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'bg-position',
  property: 'backgroundPosition',
  tags: ['bp', 'bgp'],
  type: 'background',
  value: 'tag',
  description: ''
}, {
  name: 'no-repeat',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'no-repeat',
  description: ''
}, {
  name: 'repeat',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'repeat',
  description: ''
}, {
  name: 'repeat-x',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'repeat-x',
  description: ''
}, {
  name: 'repeat-y',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'repeat-y',
  description: ''
}, {
  name: 'space',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'space',
  description: ''
}, {
  name: 'round',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'round',
  description: ''
}, {
  name: 'backGroundRepeat',
  property: 'backgroundRepeat',
  tags: ['bgr', 'bg-r'],
  type: 'background',
  value: 'tag',
  description: ''
}];

var BORDER = [{
  name: 'border',
  property: 'border',
  type: 'border',
  tags: ['border', 'brd'],
  value: 'tag',
  description: ''
}, {
  name: 'borderWidth',
  property: 'borderWidth',
  type: 'border',
  tags: ['bw', 'bdw', 'brdw'],
  value: 'tag',
  description: ''
}, {
  name: 'solid',
  property: 'borderStyle',
  type: 'border',
  tags: ['bds', 'bs', 'brds'],
  value: 'solid',
  description: ''
}, {
  name: 'dashed',
  property: 'borderStyle',
  type: 'border',
  tags: ['bds', 'bs', 'brds', 'brd-s'],
  value: 'dashed',
  description: ''
}, {
  name: 'borderColor',
  property: 'borderColor',
  type: 'border',
  tags: ['bdc', 'brdc', 'brd-c', 'brdc'],
  value: 'tag',
  description: ''
}, {
  name: 'borderRadius',
  property: 'borderRadius',
  type: 'border',
  tags: ['bdrs', 'bdr-s', 'brdrs'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTop',
  property: 'borderTop',
  type: 'border',
  tags: ['bdt', 'bd-t', 'brdt'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTopWidth',
  property: 'borderTopWidth',
  type: 'border',
  tags: ['bdtw', 'bd-tw', 'brdtw'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTopStyle',
  property: 'borderTopStyle',
  type: 'border',
  tags: ['bdts', 'bdt-s', 'brdts'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTopColor',
  property: 'borderTopColor',
  type: 'border',
  tags: ['bdtc', 'brdtc', 'brd-tc'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTopLeftRadius',
  property: 'borderTopLeftRadius',
  type: 'border',
  tags: ['bdtlrs'],
  value: 'tag',
  description: ''
}, {
  name: 'borderTopRighttRadius',
  property: 'borderTopRighttRadius',
  type: 'border',
  tags: ['bdtrrs'],
  value: 'tag',
  description: ''
}];

var CUSTOM_TEXT = [{
  name: 'text',
  property: 'text',
  value: 'text',
  description: ''
}, {
  name: 'tag',
  property: 'text',
  value: 'tag',
  description: ''
}];

var DISPLAY = [{
  name: 'flex',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'flex',
  description: ''
}, {
  name: 'inline-flex',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'inline-flex',
  description: ''
}, {
  name: 'block',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'block',
  description: ''
}, {
  name: 'inline-block',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'inline-block',
  description: ''
}, {
  name: 'grid',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'grid',
  description: ''
}, {
  name: 'none',
  property: 'display',
  tags: ['dp'],
  type: 'display',
  value: 'none',
  description: ''
}, {
  name: 'flex-start',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'flex-start',
  description: ''
}, {
  name: 'center',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'center',
  description: ''
}, {
  name: 'flex-end',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'flex-end',
  description: ''
}, {
  name: 'stretch',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'stretch',
  description: ''
}, {
  name: 'baseline',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'baseline',
  description: ''
}, {
  name: 'initial',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'alignItems',
  tags: ['ai'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'stretch',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'stretch',
  description: ''
}, {
  name: 'center',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'center',
  description: ''
}, {
  name: 'flex-start',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'flex-start',
  description: ''
}, {
  name: 'flex-end',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'flex-end',
  description: ''
}, {
  name: 'space-between',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'space-between',
  description: ''
}, {
  name: 'space-around',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'space-around',
  description: ''
}, {
  name: 'initial',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'alignContent',
  tags: ['ac'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'flex-start',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'flex-start',
  description: ''
}, {
  name: 'flex-end',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'flex-end',
  description: ''
}, {
  name: 'center',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'center',
  description: ''
}, {
  name: 'space-between',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'space-between',
  description: ''
}, {
  name: 'space-around',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'space-around',
  description: ''
}, {
  name: 'space-evenly',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'space-evenly',
  description: ''
}, {
  name: 'initial',
  property: 'justifyContent',
  tags: ['jc'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'nowrap',
  property: 'flexWrap',
  tags: ['wrap'],
  type: 'display',
  value: 'nowrap',
  description: ''
}, {
  name: 'wrap',
  property: 'flexWrap',
  tags: ['wrap'],
  type: 'display',
  value: 'wrap',
  description: ''
}, {
  name: 'wrap-reverse',
  property: 'flexWrap',
  tags: ['wrap'],
  type: 'display',
  value: 'wrap-reverse',
  description: ''
}, {
  name: 'initial',
  property: 'flexWrap',
  tags: ['wrap'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'flexWrap',
  tags: ['wrap'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'row',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'row',
  description: ''
}, {
  name: 'row-reverse',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'row-reverse',
  description: ''
}, {
  name: 'column',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'column',
  description: ''
}, {
  name: 'column-reverse',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'column-reverse',
  description: ''
}, {
  name: 'initial',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'flexDirection',
  tags: ['fd'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'flex',
  property: 'flex',
  type: 'display',
  value: 'tag',
  description: ''
}, {
  name: 'flexGrow',
  property: 'flexGrow',
  type: 'display',
  tags: ['grow', 'fg', 'f-g'],
  value: 'tag',
  description: ''
}, {
  name: 'flexShrink',
  property: 'flexShrink',
  type: 'display',
  tags: ['shrink', 'f-sh'],
  value: 'tag',
  description: ''
}, {
  name: 'flexBasis',
  property: 'flexBasis',
  type: 'display',
  tags: ['basis', 'f-b'],
  value: 'tag',
  description: ''
}, {
  name: 'order',
  property: 'order',
  type: 'display',
  tags: ['order', 'ord'],
  value: 'tag',
  description: ''
}, {
  name: 'auto',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'center',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'center',
  description: ''
}, {
  name: 'normal',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'normal',
  description: ''
}, {
  name: 'stretch',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'stretch',
  description: ''
}, {
  name: 'start',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'start',
  description: ''
}, {
  name: 'end',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'end',
  description: ''
}, {
  name: 'flex-start',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'flex-start',
  description: ''
}, {
  name: 'flex-end',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'flex-end',
  description: ''
}, {
  name: 'self-start',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'self-start',
  description: ''
}, {
  name: 'self-end',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'self-end',
  description: ''
}, {
  name: 'left',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'left',
  description: ''
}, {
  name: 'right',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'right',
  description: ''
}, {
  name: 'baseline',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'baseline',
  description: ''
}, {
  name: 'firstBaseline',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'firstBaseline',
  description: ''
}, {
  name: 'lastBaseline',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'lastBaseline',
  description: ''
}, {
  name: 'safeCenter',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'safeCenter',
  description: ''
}, {
  name: 'unsafeCenter',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'unsafeCenter',
  description: ''
}, {
  name: 'inherit',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'initial',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'unset',
  property: 'justifySelf',
  tags: ['js'],
  type: 'display',
  value: 'unset',
  description: ''
}, {
  name: 'auto',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'center',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'center',
  description: ''
}, {
  name: 'normal',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'normal',
  description: ''
}, {
  name: 'stretch',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'stretch',
  description: ''
}, {
  name: 'start',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'start',
  description: ''
}, {
  name: 'end',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'end',
  description: ''
}, {
  name: 'flex-start',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'flex-start',
  description: ''
}, {
  name: 'flex-end',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'flex-end',
  description: ''
}, {
  name: 'self-start',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'self-start',
  description: ''
}, {
  name: 'self-end',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'self-end',
  description: ''
}, {
  name: 'left',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'left',
  description: ''
}, {
  name: 'right',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'right',
  description: ''
}, {
  name: 'baseline',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'baseline',
  description: ''
}, {
  name: 'firstBaseline',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'firstBaseline',
  description: ''
}, {
  name: 'lastBaseline',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'lastBaseline',
  description: ''
}, {
  name: 'safeCenter',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'safeCenter',
  description: ''
}, {
  name: 'unsafeCenter',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'unsafeCenter',
  description: ''
}, {
  name: 'inherit',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'initial',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'unset',
  property: 'alignSelf',
  tags: ['as'],
  type: 'display',
  value: 'unset',
  description: ''
}];

var OVERFLOW = [{
  name: 'auto',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'visible',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'visible',
  description: ''
}, {
  name: 'hidden',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'hidden',
  description: ''
}, {
  name: 'scroll',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'scroll',
  description: ''
}, {
  name: 'auto',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'initial',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'unset',
  property: 'overflow',
  tags: ['overflow'],
  type: 'display',
  value: 'unset',
  description: ''
}, {
  name: 'auto',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'visible',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'visible',
  description: ''
}, {
  name: 'hidden',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'hidden',
  description: ''
}, {
  name: 'scroll',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'scroll',
  description: ''
}, {
  name: 'auto',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'initial',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'unset',
  property: 'overflowX',
  tags: ['overX'],
  type: 'display',
  value: 'unset',
  description: ''
}, {
  name: 'auto',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'visible',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'visible',
  description: ''
}, {
  name: 'hidden',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'hidden',
  description: ''
}, {
  name: 'scroll',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'scroll',
  description: ''
}, {
  name: 'auto',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'auto',
  description: ''
}, {
  name: 'initial',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'initial',
  description: ''
}, {
  name: 'inherit',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'inherit',
  description: ''
}, {
  name: 'unset',
  property: 'overflowY',
  tags: ['overY'],
  type: 'display',
  value: 'unset',
  description: ''
}];

var SIZES = [{
  name: 'width',
  property: 'width',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'height',
  property: 'height',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'maxWidth',
  property: 'maxWidth',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'maxHeight',
  property: 'maxHeight',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'minWidth',
  property: 'minWidth',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'minHeight',
  property: 'minHeight',
  type: 'dimension',
  value: 'tag',
  description: ''
}];

var SPACING = [{
  name: 'm',
  property: 'm',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'mb',
  property: 'mb',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'mr',
  property: 'mr',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'mt',
  property: 'mt',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'ml',
  property: 'ml',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'mx',
  property: 'mx',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'my',
  property: 'my',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'p',
  property: 'p',
  type: 'dimension',
  tags: ['padding'],
  value: 'tag',
  description: ''
}, {
  name: 'pb',
  property: 'pb',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'pr',
  property: 'pr',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'pt',
  property: 'pt',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'pl',
  property: 'pl',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'px',
  property: 'px',
  type: 'dimension',
  value: 'tag',
  description: ''
}, {
  name: 'py',
  property: 'py',
  type: 'dimension',
  value: 'tag',
  description: ''
}];

var TYPOGRAPHY = [{
  name: 'left',
  property: 'textAlign',
  tags: ['ta', 't-a'],
  type: 'typography',
  value: 'left',
  description: ''
}, {
  name: 'center',
  property: 'textAlign',
  tags: ['ta', 't-a'],
  type: 'typography',
  value: 'center',
  description: ''
}, {
  name: 'right',
  property: 'textAlign',
  tags: ['ta', 't-a'],
  type: 'typography',
  value: 'right',
  description: ''
}, {
  name: 'unset',
  property: 'textAlign',
  tags: ['ta', 't-a'],
  type: 'typography',
  value: 'unset',
  description: ''
}, {
  name: 'font-size',
  property: 'fontSize',
  tags: ['fs', 'f-s'],
  type: 'typography',
  value: 'tag',
  description: ''
}, {
  name: 'font-weight',
  property: 'fontWeight',
  tags: ['fw', 'f-w'],
  type: 'typography',
  value: 'tag',
  description: ''
}, {
  name: 'line-height',
  property: 'lineHeight',
  tags: ['lh', 'l-h'],
  type: 'typography',
  value: 'tag',
  description: ''
}, {
  name: 'letter-spacing',
  property: 'letterSpacing',
  tags: ['ls', 'l-s'],
  type: 'typography',
  value: 'tag',
  description: ''
}, {
  name: 'color',
  property: 'color',
  type: 'typography',
  value: 'tag',
  description: ''
}, {
  name: 'capitalize',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'capitalize',
  description: ''
}, {
  name: 'uppercase',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'uppercase',
  description: ''
}, {
  name: 'lowercase',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'lowercase',
  description: ''
}, {
  name: 'none',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'none',
  description: ''
}, {
  name: 'full-width',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'full-width',
  description: ''
}, {
  name: 'full-size-kana',
  property: 'textTransform',
  tags: ['tt'],
  type: 'typography',
  value: 'full-size-kana',
  description: ''
}];

var ICONS$1 = [{
  name: 'Activity',
  property: 'name',
  value: 'Activity'
}, {
  name: 'Airplay',
  property: 'name',
  value: 'Airplay'
}, {
  name: 'AlertCircle',
  property: 'name',
  value: 'AlertCircle'
}, {
  name: 'AlertOctagon',
  property: 'name',
  value: 'AlertOctagon'
}, {
  name: 'AlertTriangle',
  property: 'name',
  value: 'AlertTriangle'
}, {
  name: 'AlignCenter',
  property: 'name',
  value: 'AlignCenter'
}, {
  name: 'AlignJustify',
  property: 'name',
  value: 'AlignJustify'
}, {
  name: 'AlignLeft',
  property: 'name',
  value: 'AlignLeft'
}, {
  name: 'AlignRight',
  property: 'name',
  value: 'AlignRight'
}, {
  name: 'Anchor',
  property: 'name',
  value: 'Anchor'
}, {
  name: 'Aperture',
  property: 'name',
  value: 'Aperture'
}, {
  name: 'Archive',
  property: 'name',
  value: 'Archive'
}, {
  name: 'ArrowDown',
  property: 'name',
  value: 'ArrowDown'
}, {
  name: 'ArrowDownCircle',
  property: 'name',
  value: 'ArrowDownCircle'
}, {
  name: 'ArrowDownLeft',
  property: 'name',
  value: 'ArrowDownLeft'
}, {
  name: 'ArrowDownRight',
  property: 'name',
  value: 'ArrowDownRight'
}, {
  name: 'ArrowLeft',
  property: 'name',
  value: 'ArrowLeft'
}, {
  name: 'ArrowLeftCircle',
  property: 'name',
  value: 'ArrowLeftCircle'
}, {
  name: 'ArrowRight',
  property: 'name',
  value: 'ArrowRight'
}, {
  name: 'ArrowRightCircle',
  property: 'name',
  value: 'ArrowRightCircle'
}, {
  name: 'ArrowUp',
  property: 'name',
  value: 'ArrowUp'
}, {
  name: 'ArrowUpCircle',
  property: 'name',
  value: 'ArrowUpCircle'
}, {
  name: 'ArrowUpLeft',
  property: 'name',
  value: 'ArrowUpLeft'
}, {
  name: 'ArrowUpRight',
  property: 'name',
  value: 'ArrowUpRight'
}, {
  name: 'AtSign',
  property: 'name',
  value: 'AtSign'
}, {
  name: 'Award',
  property: 'name',
  value: 'Award'
}, {
  name: 'BarChart',
  property: 'name',
  value: 'BarChart'
}, {
  name: 'BarChart2',
  property: 'name',
  value: 'BarChart2'
}, {
  name: 'Battery',
  property: 'name',
  value: 'Battery'
}, {
  name: 'BatteryCharging',
  property: 'name',
  value: 'BatteryCharging'
}, {
  name: 'Bell',
  property: 'name',
  value: 'Bell'
}, {
  name: 'BellOff',
  property: 'name',
  value: 'BellOff'
}, {
  name: 'Bluetooth',
  property: 'name',
  value: 'Bluetooth'
}, {
  name: 'Bold',
  property: 'name',
  value: 'Bold'
}, {
  name: 'Book',
  property: 'name',
  value: 'Book'
}, {
  name: 'BookOpen',
  property: 'name',
  value: 'BookOpen'
}, {
  name: 'Bookmark',
  property: 'name',
  value: 'Bookmark'
}, {
  name: 'Box',
  property: 'name',
  value: 'Box'
}, {
  name: 'Briefcase',
  property: 'name',
  value: 'Briefcase'
}, {
  name: 'Calendar',
  property: 'name',
  value: 'Calendar'
}, {
  name: 'Camera',
  property: 'name',
  value: 'Camera'
}, {
  name: 'CameraOff',
  property: 'name',
  value: 'CameraOff'
}, {
  name: 'Cast',
  property: 'name',
  value: 'Cast'
}, {
  name: 'Check',
  property: 'name',
  value: 'Check'
}, {
  name: 'CheckCircle',
  property: 'name',
  value: 'CheckCircle'
}, {
  name: 'CheckSquare',
  property: 'name',
  value: 'CheckSquare'
}, {
  name: 'ChevronDown',
  property: 'name',
  value: 'ChevronDown'
}, {
  name: 'ChevronLeft',
  property: 'name',
  value: 'ChevronLeft'
}, {
  name: 'ChevronRight',
  property: 'name',
  value: 'ChevronRight'
}, {
  name: 'ChevronUp',
  property: 'name',
  value: 'ChevronUp'
}, {
  name: 'ChevronsDown',
  property: 'name',
  value: 'ChevronsDown'
}, {
  name: 'ChevronsLeft',
  property: 'name',
  value: 'ChevronsLeft'
}, {
  name: 'ChevronsRight',
  property: 'name',
  value: 'ChevronsRight'
}, {
  name: 'ChevronsUp',
  property: 'name',
  value: 'ChevronsUp'
}, {
  name: 'Chrome',
  property: 'name',
  value: 'Chrome'
}, {
  name: 'Circle',
  property: 'name',
  value: 'Circle'
}, {
  name: 'Clipboard',
  property: 'name',
  value: 'Clipboard'
}, {
  name: 'Clock',
  property: 'name',
  value: 'Clock'
}, {
  name: 'Cloud',
  property: 'name',
  value: 'Cloud'
}, {
  name: 'CloudDrizzle',
  property: 'name',
  value: 'CloudDrizzle'
}, {
  name: 'CloudLightning',
  property: 'name',
  value: 'CloudLightning'
}, {
  name: 'CloudOff',
  property: 'name',
  value: 'CloudOff'
}, {
  name: 'CloudRain',
  property: 'name',
  value: 'CloudRain'
}, {
  name: 'CloudSnow',
  property: 'name',
  value: 'CloudSnow'
}, {
  name: 'Code',
  property: 'name',
  value: 'Code'
}, {
  name: 'Codepen',
  property: 'name',
  value: 'Codepen'
}, {
  name: 'Codesandbox',
  property: 'name',
  value: 'Codesandbox'
}, {
  name: 'Coffee',
  property: 'name',
  value: 'Coffee'
}, {
  name: 'Columns',
  property: 'name',
  value: 'Columns'
}, {
  name: 'Command',
  property: 'name',
  value: 'Command'
}, {
  name: 'Compass',
  property: 'name',
  value: 'Compass'
}, {
  name: 'Copy',
  property: 'name',
  value: 'Copy'
}, {
  name: 'CornerDownLeft',
  property: 'name',
  value: 'CornerDownLeft'
}, {
  name: 'CornerDownRight',
  property: 'name',
  value: 'CornerDownRight'
}, {
  name: 'CornerLeftDown',
  property: 'name',
  value: 'CornerLeftDown'
}, {
  name: 'CornerLeftUp',
  property: 'name',
  value: 'CornerLeftUp'
}, {
  name: 'CornerRightDown',
  property: 'name',
  value: 'CornerRightDown'
}, {
  name: 'CornerRightUp',
  property: 'name',
  value: 'CornerRightUp'
}, {
  name: 'CornerUpLeft',
  property: 'name',
  value: 'CornerUpLeft'
}, {
  name: 'CornerUpRight',
  property: 'name',
  value: 'CornerUpRight'
}, {
  name: 'Cpu',
  property: 'name',
  value: 'Cpu'
}, {
  name: 'CreditCard',
  property: 'name',
  value: 'CreditCard'
}, {
  name: 'Crop',
  property: 'name',
  value: 'Crop'
}, {
  name: 'Crosshair',
  property: 'name',
  value: 'Crosshair'
}, {
  name: 'Database',
  property: 'name',
  value: 'Database'
}, {
  name: 'Delete',
  property: 'name',
  value: 'Delete'
}, {
  name: 'Disc',
  property: 'name',
  value: 'Disc'
}, {
  name: 'Divide',
  property: 'name',
  value: 'Divide'
}, {
  name: 'DivideCircle',
  property: 'name',
  value: 'DivideCircle'
}, {
  name: 'DivideSquare',
  property: 'name',
  value: 'DivideSquare'
}, {
  name: 'DollarSign',
  property: 'name',
  value: 'DollarSign'
}, {
  name: 'Download',
  property: 'name',
  value: 'Download'
}, {
  name: 'DownloadCloud',
  property: 'name',
  value: 'DownloadCloud'
}, {
  name: 'Dribbble',
  property: 'name',
  value: 'Dribbble'
}, {
  name: 'Droplet',
  property: 'name',
  value: 'Droplet'
}, {
  name: 'Edit',
  property: 'name',
  value: 'Edit'
}, {
  name: 'Edit2',
  property: 'name',
  value: 'Edit2'
}, {
  name: 'Edit3',
  property: 'name',
  value: 'Edit3'
}, {
  name: 'ExternalLink',
  property: 'name',
  value: 'ExternalLink'
}, {
  name: 'Eye',
  property: 'name',
  value: 'Eye'
}, {
  name: 'EyeOff',
  property: 'name',
  value: 'EyeOff'
}, {
  name: 'Facebook',
  property: 'name',
  value: 'Facebook'
}, {
  name: 'FastForward',
  property: 'name',
  value: 'FastForward'
}, {
  name: 'Feather',
  property: 'name',
  value: 'Feather'
}, {
  name: 'Figma',
  property: 'name',
  value: 'Figma'
}, {
  name: 'File',
  property: 'name',
  value: 'File'
}, {
  name: 'FileMinus',
  property: 'name',
  value: 'FileMinus'
}, {
  name: 'FilePlus',
  property: 'name',
  value: 'FilePlus'
}, {
  name: 'FileText',
  property: 'name',
  value: 'FileText'
}, {
  name: 'Film',
  property: 'name',
  value: 'Film'
}, {
  name: 'Filter',
  property: 'name',
  value: 'Filter'
}, {
  name: 'Flag',
  property: 'name',
  value: 'Flag'
}, {
  name: 'Folder',
  property: 'name',
  value: 'Folder'
}, {
  name: 'FolderMinus',
  property: 'name',
  value: 'FolderMinus'
}, {
  name: 'FolderPlus',
  property: 'name',
  value: 'FolderPlus'
}, {
  name: 'Framer',
  property: 'name',
  value: 'Framer'
}, {
  name: 'Frown',
  property: 'name',
  value: 'Frown'
}, {
  name: 'Gift',
  property: 'name',
  value: 'Gift'
}, {
  name: 'GitBranch',
  property: 'name',
  value: 'GitBranch'
}, {
  name: 'GitCommit',
  property: 'name',
  value: 'GitCommit'
}, {
  name: 'GitMerge',
  property: 'name',
  value: 'GitMerge'
}, {
  name: 'GitPullRequest',
  property: 'name',
  value: 'GitPullRequest'
}, {
  name: 'Github',
  property: 'name',
  value: 'Github'
}, {
  name: 'Gitlab',
  property: 'name',
  value: 'Gitlab'
}, {
  name: 'Globe',
  property: 'name',
  value: 'Globe'
}, {
  name: 'Grid',
  property: 'name',
  value: 'Grid'
}, {
  name: 'HardDrive',
  property: 'name',
  value: 'HardDrive'
}, {
  name: 'Hash',
  property: 'name',
  value: 'Hash'
}, {
  name: 'Headphones',
  property: 'name',
  value: 'Headphones'
}, {
  name: 'Heart',
  property: 'name',
  value: 'Heart'
}, {
  name: 'HelpCircle',
  property: 'name',
  value: 'HelpCircle'
}, {
  name: 'Hexagon',
  property: 'name',
  value: 'Hexagon'
}, {
  name: 'Home',
  property: 'name',
  value: 'Home'
}, {
  name: 'Image',
  property: 'name',
  value: 'Image'
}, {
  name: 'Inbox',
  property: 'name',
  value: 'Inbox'
}, {
  name: 'Info',
  property: 'name',
  value: 'Info'
}, {
  name: 'Instagram',
  property: 'name',
  value: 'Instagram'
}, {
  name: 'Italic',
  property: 'name',
  value: 'Italic'
}, {
  name: 'Key',
  property: 'name',
  value: 'Key'
}, {
  name: 'Layers',
  property: 'name',
  value: 'Layers'
}, {
  name: 'Layout',
  property: 'name',
  value: 'Layout'
}, {
  name: 'LifeBuoy',
  property: 'name',
  value: 'LifeBuoy'
}, {
  name: 'Link',
  property: 'name',
  value: 'Link'
}, {
  name: 'Link2',
  property: 'name',
  value: 'Link2'
}, {
  name: 'Linkedin',
  property: 'name',
  value: 'Linkedin'
}, {
  name: 'List',
  property: 'name',
  value: 'List'
}, {
  name: 'Loader',
  property: 'name',
  value: 'Loader'
}, {
  name: 'Lock',
  property: 'name',
  value: 'Lock'
}, {
  name: 'LogIn',
  property: 'name',
  value: 'LogIn'
}, {
  name: 'LogOut',
  property: 'name',
  value: 'LogOut'
}, {
  name: 'Mail',
  property: 'name',
  value: 'Mail'
}, {
  name: 'Map',
  property: 'name',
  value: 'Map'
}, {
  name: 'MapPin',
  property: 'name',
  value: 'MapPin'
}, {
  name: 'Maximize',
  property: 'name',
  value: 'Maximize'
}, {
  name: 'Maximize2',
  property: 'name',
  value: 'Maximize2'
}, {
  name: 'Meh',
  property: 'name',
  value: 'Meh'
}, {
  name: 'Menu',
  property: 'name',
  value: 'Menu'
}, {
  name: 'MessageCircle',
  property: 'name',
  value: 'MessageCircle'
}, {
  name: 'MessageSquare',
  property: 'name',
  value: 'MessageSquare'
}, {
  name: 'Mic',
  property: 'name',
  value: 'Mic'
}, {
  name: 'MicOff',
  property: 'name',
  value: 'MicOff'
}, {
  name: 'Minimize',
  property: 'name',
  value: 'Minimize'
}, {
  name: 'Minimize2',
  property: 'name',
  value: 'Minimize2'
}, {
  name: 'Minus',
  property: 'name',
  value: 'Minus'
}, {
  name: 'MinusCircle',
  property: 'name',
  value: 'MinusCircle'
}, {
  name: 'MinusSquare',
  property: 'name',
  value: 'MinusSquare'
}, {
  name: 'Monitor',
  property: 'name',
  value: 'Monitor'
}, {
  name: 'Moon',
  property: 'name',
  value: 'Moon'
}, {
  name: 'MoreHorizontal',
  property: 'name',
  value: 'MoreHorizontal'
}, {
  name: 'MoreVertical',
  property: 'name',
  value: 'MoreVertical'
}, {
  name: 'MousePointer',
  property: 'name',
  value: 'MousePointer'
}, {
  name: 'Move',
  property: 'name',
  value: 'Move'
}, {
  name: 'Music',
  property: 'name',
  value: 'Music'
}, {
  name: 'Navigation',
  property: 'name',
  value: 'Navigation'
}, {
  name: 'Navigation2',
  property: 'name',
  value: 'Navigation2'
}, {
  name: 'Octagon',
  property: 'name',
  value: 'Octagon'
}, {
  name: 'Package',
  property: 'name',
  value: 'Package'
}, {
  name: 'Paperclip',
  property: 'name',
  value: 'Paperclip'
}, {
  name: 'Pause',
  property: 'name',
  value: 'Pause'
}, {
  name: 'PauseCircle',
  property: 'name',
  value: 'PauseCircle'
}, {
  name: 'PenTool',
  property: 'name',
  value: 'PenTool'
}, {
  name: 'Percent',
  property: 'name',
  value: 'Percent'
}, {
  name: 'Phone',
  property: 'name',
  value: 'Phone'
}, {
  name: 'PhoneCall',
  property: 'name',
  value: 'PhoneCall'
}, {
  name: 'PhoneForwarded',
  property: 'name',
  value: 'PhoneForwarded'
}, {
  name: 'PhoneIncoming',
  property: 'name',
  value: 'PhoneIncoming'
}, {
  name: 'PhoneMissed',
  property: 'name',
  value: 'PhoneMissed'
}, {
  name: 'PhoneOff',
  property: 'name',
  value: 'PhoneOff'
}, {
  name: 'PhoneOutgoing',
  property: 'name',
  value: 'PhoneOutgoing'
}, {
  name: 'PieChart',
  property: 'name',
  value: 'PieChart'
}, {
  name: 'Play',
  property: 'name',
  value: 'Play'
}, {
  name: 'PlayCircle',
  property: 'name',
  value: 'PlayCircle'
}, {
  name: 'Plus',
  property: 'name',
  value: 'Plus'
}, {
  name: 'PlusCircle',
  property: 'name',
  value: 'PlusCircle'
}, {
  name: 'PlusSquare',
  property: 'name',
  value: 'PlusSquare'
}, {
  name: 'Pocket',
  property: 'name',
  value: 'Pocket'
}, {
  name: 'Power',
  property: 'name',
  value: 'Power'
}, {
  name: 'Printer',
  property: 'name',
  value: 'Printer'
}, {
  name: 'Radio',
  property: 'name',
  value: 'Radio'
}, {
  name: 'RefreshCcw',
  property: 'name',
  value: 'RefreshCcw'
}, {
  name: 'RefreshCw',
  property: 'name',
  value: 'RefreshCw'
}, {
  name: 'Repeat',
  property: 'name',
  value: 'Repeat'
}, {
  name: 'Rewind',
  property: 'name',
  value: 'Rewind'
}, {
  name: 'RotateCcw',
  property: 'name',
  value: 'RotateCcw'
}, {
  name: 'RotateCw',
  property: 'name',
  value: 'RotateCw'
}, {
  name: 'Rss',
  property: 'name',
  value: 'Rss'
}, {
  name: 'Save',
  property: 'name',
  value: 'Save'
}, {
  name: 'Scissors',
  property: 'name',
  value: 'Scissors'
}, {
  name: 'Search',
  property: 'name',
  value: 'Search'
}, {
  name: 'Send',
  property: 'name',
  value: 'Send'
}, {
  name: 'Server',
  property: 'name',
  value: 'Server'
}, {
  name: 'Settings',
  property: 'name',
  value: 'Settings'
}, {
  name: 'Share',
  property: 'name',
  value: 'Share'
}, {
  name: 'Share2',
  property: 'name',
  value: 'Share2'
}, {
  name: 'Shield',
  property: 'name',
  value: 'Shield'
}, {
  name: 'ShieldOff',
  property: 'name',
  value: 'ShieldOff'
}, {
  name: 'ShoppingBag',
  property: 'name',
  value: 'ShoppingBag'
}, {
  name: 'ShoppingCart',
  property: 'name',
  value: 'ShoppingCart'
}, {
  name: 'Shuffle',
  property: 'name',
  value: 'Shuffle'
}, {
  name: 'Sidebar',
  property: 'name',
  value: 'Sidebar'
}, {
  name: 'SkipBack',
  property: 'name',
  value: 'SkipBack'
}, {
  name: 'SkipForward',
  property: 'name',
  value: 'SkipForward'
}, {
  name: 'Slack',
  property: 'name',
  value: 'Slack'
}, {
  name: 'Slash',
  property: 'name',
  value: 'Slash'
}, {
  name: 'Sliders',
  property: 'name',
  value: 'Sliders'
}, {
  name: 'Smartphone',
  property: 'name',
  value: 'Smartphone'
}, {
  name: 'Smile',
  property: 'name',
  value: 'Smile'
}, {
  name: 'Speaker',
  property: 'name',
  value: 'Speaker'
}, {
  name: 'Square',
  property: 'name',
  value: 'Square'
}, {
  name: 'Star',
  property: 'name',
  value: 'Star'
}, {
  name: 'StopCircle',
  property: 'name',
  value: 'StopCircle'
}, {
  name: 'Sun',
  property: 'name',
  value: 'Sun'
}, {
  name: 'Sunrise',
  property: 'name',
  value: 'Sunrise'
}, {
  name: 'Sunset',
  property: 'name',
  value: 'Sunset'
}, {
  name: 'Tablet',
  property: 'name',
  value: 'Tablet'
}, {
  name: 'Tag',
  property: 'name',
  value: 'Tag'
}, {
  name: 'Target',
  property: 'name',
  value: 'Target'
}, {
  name: 'Terminal',
  property: 'name',
  value: 'Terminal'
}, {
  name: 'Thermometer',
  property: 'name',
  value: 'Thermometer'
}, {
  name: 'ThumbsDown',
  property: 'name',
  value: 'ThumbsDown'
}, {
  name: 'ThumbsUp',
  property: 'name',
  value: 'ThumbsUp'
}, {
  name: 'ToggleLeft',
  property: 'name',
  value: 'ToggleLeft'
}, {
  name: 'ToggleRight',
  property: 'name',
  value: 'ToggleRight'
}, {
  name: 'Tool',
  property: 'name',
  value: 'Tool'
}, {
  name: 'Trash',
  property: 'name',
  value: 'Trash'
}, {
  name: 'Trash2',
  property: 'name',
  value: 'Trash2'
}, {
  name: 'Trello',
  property: 'name',
  value: 'Trello'
}, {
  name: 'TrendingDown',
  property: 'name',
  value: 'TrendingDown'
}, {
  name: 'TrendingUp',
  property: 'name',
  value: 'TrendingUp'
}, {
  name: 'Triangle',
  property: 'name',
  value: 'Triangle'
}, {
  name: 'Truck',
  property: 'name',
  value: 'Truck'
}, {
  name: 'Tv',
  property: 'name',
  value: 'Tv'
}, {
  name: 'Twitch',
  property: 'name',
  value: 'Twitch'
}, {
  name: 'Twitter',
  property: 'name',
  value: 'Twitter'
}, {
  name: 'Type',
  property: 'name',
  value: 'Type'
}, {
  name: 'Umbrella',
  property: 'name',
  value: 'Umbrella'
}, {
  name: 'Underline',
  property: 'name',
  value: 'Underline'
}, {
  name: 'Unlock',
  property: 'name',
  value: 'Unlock'
}, {
  name: 'Upload',
  property: 'name',
  value: 'Upload'
}, {
  name: 'UploadCloud',
  property: 'name',
  value: 'UploadCloud'
}, {
  name: 'User',
  property: 'name',
  value: 'User'
}, {
  name: 'UserCheck',
  property: 'name',
  value: 'UserCheck'
}, {
  name: 'UserMinus',
  property: 'name',
  value: 'UserMinus'
}, {
  name: 'UserPlus',
  property: 'name',
  value: 'UserPlus'
}, {
  name: 'UserX',
  property: 'name',
  value: 'UserX'
}, {
  name: 'Users',
  property: 'name',
  value: 'Users'
}, {
  name: 'Video',
  property: 'name',
  value: 'Video'
}, {
  name: 'VideoOff',
  property: 'name',
  value: 'VideoOff'
}, {
  name: 'Voicemail',
  property: 'name',
  value: 'Voicemail'
}, {
  name: 'Volume',
  property: 'name',
  value: 'Volume'
}, {
  name: 'Volume1',
  property: 'name',
  value: 'Volume1'
}, {
  name: 'Volume2',
  property: 'name',
  value: 'Volume2'
}, {
  name: 'VolumeX',
  property: 'name',
  value: 'VolumeX'
}, {
  name: 'Watch',
  property: 'name',
  value: 'Watch'
}, {
  name: 'Wifi',
  property: 'name',
  value: 'Wifi'
}, {
  name: 'WifiOff',
  property: 'name',
  value: 'WifiOff'
}, {
  name: 'Wind',
  property: 'name',
  value: 'Wind'
}, {
  name: 'X',
  property: 'name',
  value: 'X'
}, {
  name: 'XCircle',
  property: 'name',
  value: 'XCircle'
}, {
  name: 'XOctagon',
  property: 'name',
  value: 'XOctagon'
}, {
  name: 'XSquare',
  property: 'name',
  value: 'XSquare'
}, {
  name: 'Youtube',
  property: 'name',
  value: 'Youtube'
}, {
  name: 'Zap',
  property: 'name',
  value: 'Zap'
}, {
  name: 'ZapOff',
  property: 'name',
  value: 'ZapOff'
}, {
  name: 'ZoomIn',
  property: 'name',
  value: 'ZoomIn'
}, {
  name: 'ZoomOut',
  property: 'name',
  value: 'ZoomOut'
}];

var LINK = [{
  name: 'href',
  property: 'href',
  value: 'tag'
}, {
  name: 'target',
  property: 'target',
  value: 'tag'
}];

var ICONS = [{
  name: 'ActivitiesFilled',
  property: 'name',
  value: 'ActivitiesFilled'
}, {
  name: 'AlertCircleFilled',
  property: 'name',
  value: 'AlertCircleFilled'
}, {
  name: 'AlertDangerWarningFilled',
  property: 'name',
  value: 'AlertDangerWarningFilled'
}, {
  name: 'AlertInfoFilled',
  property: 'name',
  value: 'AlertInfoFilled'
}, {
  name: 'AppleFilled',
  property: 'name',
  value: 'AppleFilled'
}, {
  name: 'AppointmentFilled',
  property: 'name',
  value: 'AppointmentFilled'
}, {
  name: 'ArrowLongDownFilled',
  property: 'name',
  value: 'ArrowLongDownFilled'
}, {
  name: 'ArrowLongLeftFilled',
  property: 'name',
  value: 'ArrowLongLeftFilled'
}, {
  name: 'ArrowLongRightFilled',
  property: 'name',
  value: 'ArrowLongRightFilled'
}, {
  name: 'ArrowLongUpFilled',
  property: 'name',
  value: 'ArrowLongUpFilled'
}, {
  name: 'ArrowShortDownFilled',
  property: 'name',
  value: 'ArrowShortDownFilled'
}, {
  name: 'ArrowShortLeftFilled',
  property: 'name',
  value: 'ArrowShortLeftFilled'
}, {
  name: 'ArrowShortRightFilled',
  property: 'name',
  value: 'ArrowShortRightFilled'
}, {
  name: 'ArrowShortUpFilled',
  property: 'name',
  value: 'ArrowShortUpFilled'
}, {
  name: 'AttachmentFilled',
  property: 'name',
  value: 'AttachmentFilled'
}, {
  name: 'BioGroupFilled',
  property: 'name',
  value: 'BioGroupFilled'
}, {
  name: 'BioflowFilled',
  property: 'name',
  value: 'BioflowFilled'
}, {
  name: 'BroomFilled',
  property: 'name',
  value: 'BroomFilled'
}, {
  name: 'BugFilled',
  property: 'name',
  value: 'BugFilled'
}, {
  name: 'CalendarFilled',
  property: 'name',
  value: 'CalendarFilled'
}, {
  name: 'CameraFilled',
  property: 'name',
  value: 'CameraFilled'
}, {
  name: 'CategoryFilled',
  property: 'name',
  value: 'CategoryFilled'
}, {
  name: 'ChartBarFilled',
  property: 'name',
  value: 'ChartBarFilled'
}, {
  name: 'ChartPieFilled',
  property: 'name',
  value: 'ChartPieFilled'
}, {
  name: 'CheckMarkInShapeFilled',
  property: 'name',
  value: 'CheckMarkInShapeFilled'
}, {
  name: 'CheckmarkFilled',
  property: 'name',
  value: 'CheckmarkFilled'
}, {
  name: 'ClinicFilled',
  property: 'name',
  value: 'ClinicFilled'
}, {
  name: 'ClockFilled',
  property: 'name',
  value: 'ClockFilled'
}, {
  name: 'CloseFilled',
  property: 'name',
  value: 'CloseFilled'
}, {
  name: 'CloudSyncFilled',
  property: 'name',
  value: 'CloudSyncFilled'
}, {
  name: 'CloudUploadFilled',
  property: 'name',
  value: 'CloudUploadFilled'
}, {
  name: 'CompressFilled',
  property: 'name',
  value: 'CompressFilled'
}, {
  name: 'CopyFilled',
  property: 'name',
  value: 'CopyFilled'
}, {
  name: 'DesktopFilled',
  property: 'name',
  value: 'DesktopFilled'
}, {
  name: 'DisorderFilled',
  property: 'name',
  value: 'DisorderFilled'
}, {
  name: 'DocFilled',
  property: 'name',
  value: 'DocFilled'
}, {
  name: 'DurationFilled',
  property: 'name',
  value: 'DurationFilled'
}, {
  name: 'EditFilled',
  property: 'name',
  value: 'EditFilled'
}, {
  name: 'EvaluationStateFilled',
  property: 'name',
  value: 'EvaluationStateFilled'
}, {
  name: 'ExpandFilled',
  property: 'name',
  value: 'ExpandFilled'
}, {
  name: 'FacebookFilled',
  property: 'name',
  value: 'FacebookFilled'
}, {
  name: 'FileAddFilled',
  property: 'name',
  value: 'FileAddFilled'
}, {
  name: 'FileDownloadFilled',
  property: 'name',
  value: 'FileDownloadFilled'
}, {
  name: 'FileFailFilled',
  property: 'name',
  value: 'FileFailFilled'
}, {
  name: 'FileFilled',
  property: 'name',
  value: 'FileFilled'
}, {
  name: 'FileUploadFilled',
  property: 'name',
  value: 'FileUploadFilled'
}, {
  name: 'FilterFilled',
  property: 'name',
  value: 'FilterFilled'
}, {
  name: 'FoihelseFilled',
  property: 'name',
  value: 'FoihelseFilled'
}, {
  name: 'FolderFilled',
  property: 'name',
  value: 'FolderFilled'
}, {
  name: 'FormFilled',
  property: 'name',
  value: 'FormFilled'
}, {
  name: 'GoogleColoredFilled',
  property: 'name',
  value: 'GoogleColoredFilled'
}, {
  name: 'GoogleFilled',
  property: 'name',
  value: 'GoogleFilled'
}, {
  name: 'HeartFilled',
  property: 'name',
  value: 'HeartFilled'
}, {
  name: 'HideFilled',
  property: 'name',
  value: 'HideFilled'
}, {
  name: 'HistoryFilled',
  property: 'name',
  value: 'HistoryFilled'
}, {
  name: 'HomeFilled',
  property: 'name',
  value: 'HomeFilled'
}, {
  name: 'ImageFilled',
  property: 'name',
  value: 'ImageFilled'
}, {
  name: 'InstagramFilled',
  property: 'name',
  value: 'InstagramFilled'
}, {
  name: 'InvoiceFilled',
  property: 'name',
  value: 'InvoiceFilled'
}, {
  name: 'LinkExternalFilled',
  property: 'name',
  value: 'LinkExternalFilled'
}, {
  name: 'LinkFilled',
  property: 'name',
  value: 'LinkFilled'
}, {
  name: 'LinkedInFilled',
  property: 'name',
  value: 'LinkedInFilled'
}, {
  name: 'LoadingFilled',
  property: 'name',
  value: 'LoadingFilled'
}, {
  name: 'LocationFilled',
  property: 'name',
  value: 'LocationFilled'
}, {
  name: 'LockFilled',
  property: 'name',
  value: 'LockFilled'
}, {
  name: 'LoginFilled',
  property: 'name',
  value: 'LoginFilled'
}, {
  name: 'LogoutFilled',
  property: 'name',
  value: 'LogoutFilled'
}, {
  name: 'MailFilled',
  property: 'name',
  value: 'MailFilled'
}, {
  name: 'MenuFilled',
  property: 'name',
  value: 'MenuFilled'
}, {
  name: 'MenuHorizontalFilled',
  property: 'name',
  value: 'MenuHorizontalFilled'
}, {
  name: 'MenuVerticalFilled',
  property: 'name',
  value: 'MenuVerticalFilled'
}, {
  name: 'MessageFilled',
  property: 'name',
  value: 'MessageFilled'
}, {
  name: 'MessageSendFilled',
  property: 'name',
  value: 'MessageSendFilled'
}, {
  name: 'MicrophoneOffFilled',
  property: 'name',
  value: 'MicrophoneOffFilled'
}, {
  name: 'MicrophoneOnFilled',
  property: 'name',
  value: 'MicrophoneOnFilled'
}, {
  name: 'MinusFilled',
  property: 'name',
  value: 'MinusFilled'
}, {
  name: 'NotificationFilled',
  property: 'name',
  value: 'NotificationFilled'
}, {
  name: 'PackageFilled',
  property: 'name',
  value: 'PackageFilled'
}, {
  name: 'PasswordFilled',
  property: 'name',
  value: 'PasswordFilled'
}, {
  name: 'PasswordKeyFilled',
  property: 'name',
  value: 'PasswordKeyFilled'
}, {
  name: 'PatientAddFilled',
  property: 'name',
  value: 'PatientAddFilled'
}, {
  name: 'PatientFilled',
  property: 'name',
  value: 'PatientFilled'
}, {
  name: 'PatientsFilled',
  property: 'name',
  value: 'PatientsFilled'
}, {
  name: 'PauseFilled',
  property: 'name',
  value: 'PauseFilled'
}, {
  name: 'PhoneCallMissedFilled',
  property: 'name',
  value: 'PhoneCallMissedFilled'
}, {
  name: 'PhoneCallMuttedFilled',
  property: 'name',
  value: 'PhoneCallMuttedFilled'
}, {
  name: 'PhoneCallingFilled',
  property: 'name',
  value: 'PhoneCallingFilled'
}, {
  name: 'PhoneFilled',
  property: 'name',
  value: 'PhoneFilled'
}, {
  name: 'PlayFilled',
  property: 'name',
  value: 'PlayFilled'
}, {
  name: 'PlayInShapeFilled',
  property: 'name',
  value: 'PlayInShapeFilled'
}, {
  name: 'PlusFilled',
  property: 'name',
  value: 'PlusFilled'
}, {
  name: 'PlusInShapeFilled',
  property: 'name',
  value: 'PlusInShapeFilled'
}, {
  name: 'PrinterFilled',
  property: 'name',
  value: 'PrinterFilled'
}, {
  name: 'ScaleFilled',
  property: 'name',
  value: 'ScaleFilled'
}, {
  name: 'SearchFilled',
  property: 'name',
  value: 'SearchFilled'
}, {
  name: 'SendFilled',
  property: 'name',
  value: 'SendFilled'
}, {
  name: 'SettingsFilled',
  property: 'name',
  value: 'SettingsFilled'
}, {
  name: 'ShieldDDosFilled',
  property: 'name',
  value: 'ShieldDDosFilled'
}, {
  name: 'ShieldFilled',
  property: 'name',
  value: 'ShieldFilled'
}, {
  name: 'ShowFilled',
  property: 'name',
  value: 'ShowFilled'
}, {
  name: 'StarFilled',
  property: 'name',
  value: 'StarFilled'
}, {
  name: 'StudyFilled',
  property: 'name',
  value: 'StudyFilled'
}, {
  name: 'TherapistAddFilled',
  property: 'name',
  value: 'TherapistAddFilled'
}, {
  name: 'TherapistFilled',
  property: 'name',
  value: 'TherapistFilled'
}, {
  name: 'Ticket1Filled',
  property: 'name',
  value: 'Ticket1Filled'
}, {
  name: 'Ticket2Filled',
  property: 'name',
  value: 'Ticket2Filled'
}, {
  name: 'TranslationFilled',
  property: 'name',
  value: 'TranslationFilled'
}, {
  name: 'TrashFilled',
  property: 'name',
  value: 'TrashFilled'
}, {
  name: 'UnlockFilled',
  property: 'name',
  value: 'UnlockFilled'
}, {
  name: 'VideoAddFilled',
  property: 'name',
  value: 'VideoAddFilled'
}, {
  name: 'VideoOffFilled',
  property: 'name',
  value: 'VideoOffFilled'
}, {
  name: 'VideoOnFilled',
  property: 'name',
  value: 'VideoOnFilled'
}, {
  name: 'VippsFilled',
  property: 'name',
  value: 'VippsFilled'
}, {
  name: 'VolumeDownFilled',
  property: 'name',
  value: 'VolumeDownFilled'
}, {
  name: 'VolumeOffFilled',
  property: 'name',
  value: 'VolumeOffFilled'
}, {
  name: 'VolumeUpFilled',
  property: 'name',
  value: 'VolumeUpFilled'
}, {
  name: 'WalletFilled',
  property: 'name',
  value: 'WalletFilled'
}, {
  name: 'WindowsFilled',
  property: 'name',
  value: 'WindowsFilled'
}];

var COMPONENTS$1 = [{
  name: 'Container',
  isContainer: true,
  params: [{
    name: 'bounded',
    property: 'bounded',
    value: true
  }, {
    name: 'gutters',
    property: 'gutters',
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER), _toConsumableArray(DISPLAY), _toConsumableArray(OVERFLOW), _toConsumableArray(SIZES))
}, {
  name: 'Box',
  isContainer: true,
  params: [].concat(_toConsumableArray(SIZES), _toConsumableArray(DISPLAY), _toConsumableArray(BORDER), _toConsumableArray(BACKGROUND), _toConsumableArray(OVERFLOW), _toConsumableArray(SPACING))
}, {
  name: 'Row',
  isContainer: true,
  params: [{
    name: 'noGutters',
    property: 'noGutters',
    tags: ['ng'],
    value: true
  }, {
    name: 'noInnerGutters',
    property: 'noInnerGutters',
    tags: ['nig'],
    value: true
  }, {
    name: 'noOuterGutters',
    property: 'noOuterGutters',
    tags: ['nog'],
    value: true
  }, {
    name: 'top',
    property: 'v',
    value: 'top'
  }, {
    name: 'center',
    property: 'v',
    value: 'center'
  }, {
    name: 'bottom',
    property: 'v',
    value: 'bottom'
  }, {
    name: 'left',
    property: 'h',
    value: 'left'
  }, {
    name: 'center',
    property: 'h',
    value: 'center'
  }, {
    name: 'right',
    property: 'h',
    value: 'right'
  }, {
    name: 'around',
    property: 'h',
    value: 'around'
  }, {
    name: 'between',
    property: 'h',
    value: 'between'
  }, {
    name: 'evenly',
    property: 'h',
    value: 'evenly'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER), _toConsumableArray(OVERFLOW)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    layoutArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    shadowArgTypes: true,
    flexboxArgTypes: true
  }
}, {
  name: 'Col',
  isContainer: true,
  params: [{
    name: 'cw',
    property: 'cw',
    value: 'tag'
  }, {
    name: 'top',
    property: 'v',
    value: 'top'
  }, {
    name: 'center',
    property: 'v',
    value: 'center'
  }, {
    name: 'bottom',
    property: 'v',
    value: 'bottom'
  }, {
    name: 'left',
    property: 'h',
    value: 'left'
  }, {
    name: 'center',
    property: 'h',
    value: 'center'
  }, {
    name: 'right',
    property: 'h',
    value: 'right'
  }, {
    name: 'around',
    property: 'h',
    value: 'around'
  }, {
    name: 'between',
    property: 'h',
    value: 'between'
  }, {
    name: 'evenly',
    property: 'h',
    value: 'evenly'
  }, {
    name: 'minWidth',
    property: 'minWidth',
    value: 'tag'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(OVERFLOW), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    layoutArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    shadowArgTypes: true,
    flexboxArgTypes: true,
    positionArgTypes: true
  }
}, {
  name: 'Button',
  isContainer: false,
  text: 'Button',
  params: [{
    name: 'danger',
    property: 'variant',
    tags: ['ang'],
    value: 'danger'
  }, {
    name: 'dark',
    property: 'variant',
    tags: ['ark'],
    value: 'dark'
  }, {
    name: 'info',
    property: 'variant',
    tags: ['nfo'],
    value: 'info'
  }, {
    name: 'primary',
    property: 'variant',
    tags: ['rim'],
    value: 'primary'
  }, {
    name: 'success',
    property: 'variant',
    value: 'success'
  }, {
    name: 'warning',
    property: 'variant',
    value: 'warning'
  }, {
    name: 'white',
    property: 'variant',
    value: 'white'
  }, {
    name: 'sm',
    property: 'size',
    value: 'sm'
  }, {
    name: 'lg',
    property: 'size',
    value: 'lg'
  }, {
    name: 'rippleOff',
    property: 'rippleOff',
    tags: ['rf', 'rt'],
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT))
}, {
  name: 'Text',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex. Ut per suas consulatu vituperatoribus.',
  params: [{
    name: 'body1',
    property: 'variant',
    value: 'body1'
  }, {
    name: 'body2',
    property: 'variant',
    value: 'body2'
  }, {
    name: 'caption1',
    property: 'variant',
    value: 'caption1'
  }, {
    name: 'caption2',
    property: 'variant',
    value: 'caption2'
  }, {
    name: 'overline',
    property: 'variant',
    value: 'overline'
  }, {
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Title',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex.',
  params: [{
    name: 'h1',
    property: 'variant',
    value: 'h1'
  }, {
    name: 'h2',
    property: 'variant',
    value: 'h2'
  }, {
    name: 'h3',
    property: 'variant',
    value: 'h3'
  }, {
    name: 'h4',
    property: 'variant',
    value: 'h4'
  }, {
    name: 'h5',
    property: 'variant',
    value: 'h5'
  }, {
    name: 'h6',
    property: 'variant',
    value: 'h6'
  }, {
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Paragraph',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex. Ut per suas consulatu vituperatoribus. Ut sit mandamus laboramus, pro persequeris definitionem at, vel vidisse democritum ea. Et vix dicat viderer salutandi. Ut harum scribentur pro, in mel accusam mnesarchum cotidieque, ea pro sint labore dissentias. Cu intellegam dissentias vim.',
  params: [{
    name: 'body1',
    property: 'variant',
    value: 'body1'
  }, {
    name: 'body2',
    property: 'variant',
    value: 'body2'
  }, {
    name: 'caption1',
    property: 'variant',
    value: 'caption1'
  }, {
    name: 'caption2',
    property: 'variant',
    value: 'caption2'
  }, {
    name: 'overline',
    property: 'variant',
    value: 'overline'
  }, {
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Img',
  attributes: {
    maxWidth: '100%'
  },
  isContainer: false,
  params: [{
    name: 'src',
    property: 'src',
    value: 'tag'
  }, {
    name: 'alt',
    property: 'alt',
    value: 'tag'
  }, {
    name: 'cover',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'cover'
  }, {
    name: 'contain',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'contain'
  }, {
    name: 'fill',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'fill'
  }, {
    name: 'inherit',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'inherit'
  }, {
    name: 'initial',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'initial'
  }, {
    name: 'revert',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'revert'
  }, {
    name: 'scale-down',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'scale-down'
  }, {
    name: 'unset',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'unset'
  }, {
    name: 'none',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'none'
  }, {
    name: 'borderRadius',
    property: 'borderRadius',
    value: 'tag'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(SIZES))
}, {
  name: 'Icon',
  isContainer: false,
  params: [{
    name: 'size',
    property: 'size',
    value: 'tag'
  }, {
    name: 'color',
    property: 'color',
    value: 'tag'
  }, {
    name: 'strokeWidth',
    property: 'strokeWidth',
    value: 'tag',
    tags: ['sw']
  }].concat(_toConsumableArray(ICONS$1))
}, {
  name: 'Avatar',
  isContainer: false,
  params: [{
    name: 'size',
    property: 'size',
    value: 'tag'
  }, {
    name: 'small',
    property: 'size',
    value: 'small'
  }, {
    name: 'medium',
    property: 'size',
    value: 'medium'
  }, {
    name: 'large',
    property: 'size',
    value: 'large'
  }, {
    name: 'circle',
    property: 'shape',
    value: 'circle'
  }, {
    name: 'square',
    property: 'shape',
    value: 'square'
  }, {
    name: 'src',
    property: 'src',
    value: 'tag'
  }, {
    name: 'iconName',
    property: 'iconName',
    value: 'tag'
  }].concat(_toConsumableArray(BORDER))
}];

function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ASQ = {
  name: 'Asq',
  isContainer: false,
  attributes: {
    height: '800px'
  },
  params: [{
    name: 'form id',
    property: 'formId',
    value: 'tag'
  }].concat(_toConsumableArray(SIZES), _toConsumableArray(SPACING), _toConsumableArray(OVERFLOW), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER))
};
var VIDEO = {
  name: 'Video',
  attributes: {
    width: '100%',
    borderRadius: '12px',
    overflow: 'hidden',
    border: 'var(--ql-border-default)'
  },
  isContainer: false,
  params: [{
    name: 'video id',
    property: 'videoToken',
    value: 'tag'
  }, {
    name: 'widescreen - 16:9',
    property: 'aspectRatio',
    tags: ['16:'],
    value: 16 / 9
  }, {
    name: 'square - 1',
    property: 'aspectRatio',
    value: 1
  }, {
    name: '4:3',
    property: 'aspectRatio',
    tags: ['4:'],
    value: 4 / 3
  }, {
    name: '3:4',
    property: 'aspectRatio',
    tags: ['3:'],
    value: 3 / 4
  }, {
    name: 'circle',
    property: 'variant',
    value: 'circle'
  }, {
    name: 'pill',
    property: 'variant',
    value: 'pill'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(DISPLAY), _toConsumableArray(SIZES), _toConsumableArray(BORDER), _toConsumableArray(OVERFLOW))
};
var ICON = {
  name: 'Icon',
  attributes: {
    size: '32px',
    name: 'AppleFilled'
  },
  isContainer: false,
  params: [{
    name: 'fill',
    property: 'fill',
    value: 'tag'
  }, {
    name: 'size',
    property: 'size',
    type: 'dimension',
    value: 'tag'
  }].concat(_toConsumableArray(ICONS), _toConsumableArray(SPACING), _toConsumableArray(DISPLAY), _toConsumableArray(SIZES))
};
var AVATAR = {
  name: 'Avatar',
  attributes: {
    size: '96px'
  },
  componentsAsProps: [_objectSpread$9(_objectSpread$9({}, ICON), {}, {
    property: 'icon',
    type: 'component',
    attributes: {
      size: '64px',
      name: 'PatientFilled',
      height: 'inherit',
      justifyContent: 'center',
      alignItems: 'center'
    }
  })],
  isContainer: false,
  params: [{
    name: 'src',
    property: 'src',
    value: 'tag'
  }, {
    name: 'alt',
    property: 'alt',
    value: 'tag'
  }, {
    name: 'circle',
    property: 'shape',
    value: 'circle'
  }, {
    name: 'square',
    property: 'shape',
    value: 'square'
  }, {
    name: 'size',
    property: 'size',
    type: 'dimension',
    value: 'tag'
  }, {
    name: 'small',
    property: 'size',
    value: 'small'
  }, {
    name: 'large',
    property: 'size',
    value: 'large'
  }, {
    name: 'medium',
    property: 'size',
    value: 'medium'
  }]
};
var COMPONENTS = [{
  name: 'Container',
  isContainer: true,
  params: [{
    name: 'bounded',
    property: 'bounded',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'gutters',
    property: 'gutters',
    value: true,
    tags: ['true', 'false']
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER), _toConsumableArray(DISPLAY), _toConsumableArray(OVERFLOW), _toConsumableArray(SIZES))
}, {
  name: 'Box',
  isContainer: true,
  params: [].concat(_toConsumableArray(SIZES), _toConsumableArray(DISPLAY), _toConsumableArray(BORDER), _toConsumableArray(BACKGROUND), _toConsumableArray(OVERFLOW), _toConsumableArray(SPACING))
}, {
  name: 'Row',
  isContainer: true,
  params: [{
    name: 'noGutters',
    property: 'noGutters',
    tags: ['ng', 'true', 'false'],
    value: true
  }, {
    name: 'noInnerGutters',
    property: 'noInnerGutters',
    tags: ['nig', 'true', 'false'],
    value: true
  }, {
    name: 'noOuterGutters',
    property: 'noOuterGutters',
    tags: ['nog', 'true', 'false'],
    value: true
  }, {
    name: 'top',
    property: 'v',
    value: 'top'
  }, {
    name: 'center',
    property: 'v',
    value: 'center'
  }, {
    name: 'bottom',
    property: 'v',
    value: 'bottom'
  }, {
    name: 'left',
    property: 'h',
    value: 'left'
  }, {
    name: 'center',
    property: 'h',
    value: 'center'
  }, {
    name: 'right',
    property: 'h',
    value: 'right'
  }, {
    name: 'around',
    property: 'h',
    value: 'around'
  }, {
    name: 'between',
    property: 'h',
    value: 'between'
  }, {
    name: 'evenly',
    property: 'h',
    value: 'evenly'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER), _toConsumableArray(OVERFLOW)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    layoutArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    shadowArgTypes: true,
    flexboxArgTypes: true
  }
}, {
  name: 'Col',
  isContainer: true,
  params: [{
    name: 'cw',
    property: 'cw',
    value: 'tag'
  }, {
    name: 'top',
    property: 'v',
    value: 'top'
  }, {
    name: 'center',
    property: 'v',
    value: 'center'
  }, {
    name: 'bottom',
    property: 'v',
    value: 'bottom'
  }, {
    name: 'left',
    property: 'h',
    value: 'left'
  }, {
    name: 'center',
    property: 'h',
    value: 'center'
  }, {
    name: 'right',
    property: 'h',
    value: 'right'
  }, {
    name: 'around',
    property: 'h',
    value: 'around'
  }, {
    name: 'between',
    property: 'h',
    value: 'between'
  }, {
    name: 'evenly',
    property: 'h',
    value: 'evenly'
  }, {
    name: 'minWidth',
    property: 'minWidth',
    value: 'tag'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(OVERFLOW), _toConsumableArray(BACKGROUND), _toConsumableArray(BORDER), _toConsumableArray(DISPLAY)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    layoutArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    shadowArgTypes: true,
    flexboxArgTypes: true,
    positionArgTypes: true
  }
}, {
  name: 'Button',
  isContainer: false,
  text: 'Button',
  componentsAsProps: [_objectSpread$9(_objectSpread$9({}, ICON), {}, {
    property: 'icon',
    type: 'component'
  })],
  params: [{
    name: 'danger',
    property: 'danger',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'primary',
    property: 'type',
    tags: ['rim'],
    value: 'primary'
  }, {
    name: 'secondary',
    property: 'type',
    value: 'secondary'
  }, {
    name: 'text',
    property: 'type',
    value: 'text'
  }, {
    name: 'link',
    property: 'type',
    value: 'link'
  }, {
    name: 'ghost',
    property: 'type',
    value: 'ghost'
  }, {
    name: 'block',
    property: 'block',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'loading',
    property: 'loading',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'submit',
    property: 'htmlType',
    value: 'submit'
  }, {
    name: 'reset',
    property: 'htmlType',
    value: 'reset'
  }, {
    name: 'button',
    property: 'htmlType',
    value: 'button'
  }].concat(_toConsumableArray(LINK), _toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT))
}, {
  name: 'Text',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex. Ut per suas consulatu vituperatoribus.',
  params: [{
    name: 'body1',
    property: 'variant',
    value: 'body1'
  }, {
    name: 'body2',
    property: 'variant',
    value: 'body2'
  }, {
    name: 'caption1',
    property: 'variant',
    value: 'caption1'
  }, {
    name: 'caption2',
    property: 'variant',
    value: 'caption2'
  }, {
    name: 'overline',
    property: 'variant',
    value: 'overline'
  }, {
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    tags: ['true', 'false'],
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Title',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex.',
  params: [{
    name: 'h1',
    property: 'variant',
    value: 'h1'
  }, {
    name: 'h2',
    property: 'variant',
    value: 'h2'
  }, {
    name: 'h3',
    property: 'variant',
    value: 'h3'
  }, {
    name: 'h4',
    property: 'variant',
    value: 'h4'
  }, {
    name: 'h5',
    property: 'variant',
    value: 'h5'
  }, {
    name: 'h6',
    property: 'variant',
    value: 'h6'
  }, {
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    tags: ['true', 'false'],
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Paragraph',
  isContainer: false,
  text: 'Lorem ipsum dolor sit amet, per nobis probatus ex. Ut per suas consulatu vituperatoribus. Ut sit mandamus laboramus, pro persequeris definitionem at, vel vidisse democritum ea. Et vix dicat viderer salutandi. Ut harum scribentur pro, in mel accusam mnesarchum cotidieque, ea pro sint labore dissentias. Cu intellegam dissentias vim.',
  params: [{
    name: 'clamp',
    property: 'clamp',
    value: 'tag'
  }, {
    name: 'isEllipsis',
    property: 'isEllipsis',
    tags: ['true', 'false'],
    value: true
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Link',
  isContainer: false,
  text: 'Link',
  params: [].concat(_toConsumableArray(LINK), _toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY), _toConsumableArray(CUSTOM_TEXT)),
  rootParams: {
    spaceArgTypes: true,
    colorArgTypes: true,
    typographyArgTypes: true,
    layoutArgTypes: true,
    flexboxArgTypes: true,
    backgroundArgTypes: true,
    borderArgTypes: true,
    positionArgTypes: true,
    shadowArgTypes: true
  }
}, {
  name: 'Img',
  attributes: {
    maxWidth: '100%'
  },
  isContainer: false,
  params: [{
    name: 'src',
    property: 'src',
    value: 'tag'
  }, {
    name: 'alt',
    property: 'alt',
    value: 'tag'
  }, {
    name: 'cover',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'cover'
  }, {
    name: 'contain',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'contain'
  }, {
    name: 'fill',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'fill'
  }, {
    name: 'inherit',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'inherit'
  }, {
    name: 'initial',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'initial'
  }, {
    name: 'revert',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'revert'
  }, {
    name: 'scale-down',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'scale-down'
  }, {
    name: 'unset',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'unset'
  }, {
    name: 'none',
    property: 'objectFit',
    tags: ['of', 'o-f'],
    value: 'none'
  }, {
    name: 'borderRadius',
    property: 'borderRadius',
    value: 'tag'
  }].concat(_toConsumableArray(SPACING), _toConsumableArray(SIZES))
}, {
  name: 'Card',
  isContainer: true,
  params: [{
    name: 'extra',
    property: 'extra',
    value: 'tag',
    description: 'Not ready'
  }, {
    name: 'title',
    property: 'title',
    value: 'tag'
  }, {
    name: 'actions',
    property: 'actions',
    value: 'tag',
    description: 'Not ready'
  }, {
    name: 'bordered',
    property: 'bordered',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'loading',
    property: 'loading',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'shadowless',
    property: 'shadowless',
    tags: ['true', 'false'],
    value: true
  }, {
    name: 'bodyStyle',
    property: 'bodyStyle',
    value: 'tag',
    description: 'Not ready'
  }, {
    name: 'type',
    property: 'type',
    value: 'tag'
  }, {
    name: 'small',
    property: 'size',
    value: 'small'
  }, {
    name: 'default',
    property: 'size',
    value: 'default'
  }].concat(_toConsumableArray(SIZES), _toConsumableArray(DISPLAY), _toConsumableArray(SPACING), _toConsumableArray(TYPOGRAPHY))
}, ICON, AVATAR, VIDEO, ASQ];

var useCommands = function useCommands(context) {
  var _useState = useState(COMMANDS.INSERT),
      _useState2 = _slicedToArray(_useState, 2),
      command = _useState2[0],
      setCommand = _useState2[1];

  var switchCommand = function switchCommand() {
    var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
    var commandsValues = COMMANDS_ORDERED.map(function (_ref) {
      var value = _ref.value;
      return value;
    });
    var next = commandsValues.indexOf(command.value) + (isRight ? 1 : -1);
    var nextCommand = commandsValues[next] || commandsValues[isRight ? 0 : commandsValues.length - 1];

    var _command = context.isContainer ? COMMANDS[nextCommand] : COMMANDS.APPLY;

    setCommand(_command);
  };

  useKeyPress('ctrl.ArrowRight', switchCommand);
  useKeyPress('meta.ArrowRight', switchCommand);
  useKeyPress('ctrl.ArrowLeft', function () {
    return switchCommand(false);
  });
  useKeyPress('meta.ArrowLeft', function () {
    return switchCommand(false);
  });
  useEffect(function () {
    if (context.id === 'root') {
      setCommand(COMMANDS.INSERT);
    } else {
      setCommand(context.isContainer ? COMMANDS.INSERT : COMMANDS.APPLY);
    }
  }, [context]);
  return command;
};

var useSearch = function useSearch() {
  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      query = _useState2[0],
      setQuery = _useState2[1];

  return {
    query: query,
    setQuery: setQuery
  };
};

var tagsFilter = function tagsFilter() {
  var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  return tags.reduce(function (acc, tag) {
    return acc || tag.toLowerCase().includes(query.toLowerCase());
  }, false);
};
var queryFilter = function queryFilter(property, query) {
  var _property$toLowerCase, _property$toLowerCase2;

  return property === null || property === void 0 ? void 0 : (_property$toLowerCase = property.toLowerCase) === null || _property$toLowerCase === void 0 ? void 0 : (_property$toLowerCase2 = _property$toLowerCase.call(property)) === null || _property$toLowerCase2 === void 0 ? void 0 : _property$toLowerCase2.includes(query === null || query === void 0 ? void 0 : query.toLowerCase());
};
var textEqualFilter = function textEqualFilter(list, componentName) {
  var _component$params;

  var param = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'text';
  var component = list.find(function (_ref) {
    var name = _ref.name;
    return name === componentName;
  });
  return component === null || component === void 0 ? void 0 : (_component$params = component.params) === null || _component$params === void 0 ? void 0 : _component$params.filter(function (_ref2) {
    var property = _ref2.property,
        value = _ref2.value;
    return property === param && value !== 'tag';
  });
};
var tagEqualFilter = function tagEqualFilter(list, componentName, tag) {
  var _component$params2;

  var component = list.find(function (_ref3) {
    var name = _ref3.name;
    return name === componentName;
  });
  return component === null || component === void 0 ? void 0 : (_component$params2 = component.params) === null || _component$params2 === void 0 ? void 0 : _component$params2.filter(function (_ref4) {
    var property = _ref4.property,
        value = _ref4.value;
    return value === 'tag' && property === tag;
  });
};
var applyFilter = function applyFilter() {
  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  var componentName = arguments.length > 2 ? arguments[2] : undefined;
  var component = list.find(function (_ref7) {
    var name = _ref7.name;
    return name === componentName;
  });

  var _ref8 = component || {},
      _ref8$params = _ref8.params,
      params = _ref8$params === void 0 ? [] : _ref8$params,
      _ref8$componentsAsPro = _ref8.componentsAsProps,
      componentsAsProps = _ref8$componentsAsPro === void 0 ? [] : _ref8$componentsAsPro;

  var options = [].concat(_toConsumableArray(params), _toConsumableArray(componentsAsProps));
  return options.filter(function (_ref9) {
    var property = _ref9.property,
        tags = _ref9.tags,
        name = _ref9.name;
    return queryFilter(name, query) || queryFilter(property, query) || tagsFilter(tags, query);
  }).sort(function (a, b) {
    return a.name.indexOf(query) - b.name.indexOf(query);
  });
};
var templatesFilter = function templatesFilter() {
  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  return list.filter(function (_ref10) {
    var templateName = _ref10.templateName,
        tags = _ref10.tags;
    return queryFilter(templateName, query) || tagsFilter(tags, query);
  }).sort(function (a, b) {
    var _a$templateName, _b$templateName;

    return ((_a$templateName = a.templateName) === null || _a$templateName === void 0 ? void 0 : _a$templateName.indexOf(query)) - ((_b$templateName = b.templateName) === null || _b$templateName === void 0 ? void 0 : _b$templateName.indexOf(query));
  });
};

var _map;
var map = (_map = {}, _defineProperty(_map, REACT_COMPONENT_TYPE, COMPONENTS), _defineProperty(_map, NEXT_COMPONENT_TYPE, COMPONENTS$1), _map);
/**
 * This hook helps to change data in terminal dropdown
 */

var useVariants = function useVariants(_ref) {
  var type = _ref.type,
      context = _ref.context,
      field = _ref.field;
  return context && field && context[field] ? context[field] : map[type];
};

function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useSuggestions = function useSuggestions(_ref) {
  var command = _ref.command,
      query = _ref.query,
      context = _ref.context,
      tag = _ref.tag;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      suggestions = _useState2[0],
      setSuggestions = _useState2[1];

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var _useComponentType = useComponentType(),
      componentType = _useComponentType.componentType;

  var COMPONENTS = useVariants({
    type: componentType
  });
  useEffect(function () {
    var filteredItems = [];

    if (context.id !== 'root' && command.value === 'APPLY') {
      if (tag) {
        filteredItems = tagEqualFilter(COMPONENTS, context.name, tag);
      } else {
        var filteredParams = applyFilter(COMPONENTS, query, context.name);
        filteredItems = filteredParams !== null && filteredParams !== void 0 && filteredParams.length ? filteredParams : textEqualFilter(COMPONENTS, context.name);
      }
    } else if (command.value === 'INSERT') {
      filteredItems = COMPONENTS.filter(function (component) {
        return queryFilter(component.name, query);
      }).sort(function (a, b) {
        return a.name.indexOf(query) - b.name.indexOf(query);
      });
    } else if (command.value === 'USE') {
      var templates = Object.keys((components === null || components === void 0 ? void 0 : components.templates) || {}).map(function (key) {
        return _objectSpread$8(_objectSpread$8({}, components.templates[key]), {}, {
          templateName: key
        });
      });
      filteredItems = templatesFilter(templates, tag || query);
    }

    setSuggestions(filteredItems || []);
  }, [command, query, context, components, tag, COMPONENTS]);
  return suggestions;
};

var useSelectedSuggestion = function useSelectedSuggestion(query) {
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      selectedSuggestionIndex = _useState2[0],
      setSelectedSuggestionIndex = _useState2[1];

  useEffect(function () {
    var isMounted = true;
    isMounted && setSelectedSuggestionIndex(0);
    return function () {
      return isMounted = false;
    };
  }, [query]);
  return [selectedSuggestionIndex, setSelectedSuggestionIndex];
};

function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useActions = function useActions(tag, onTagChange) {
  var _useComponentBuilder = useComponentBuilder(),
      setCurrentlySelected = _useComponentBuilder.setCurrentlySelected,
      addComponent = _useComponentBuilder.addComponent,
      addChildComponent = _useComponentBuilder.addChildComponent,
      components = _useComponentBuilder.components,
      setTreeExpandedItems = _useComponentBuilder.setTreeExpandedItems,
      applyAttributes = _useComponentBuilder.applyAttributes,
      insertAsProperty = _useComponentBuilder.insertAsProperty;

  var insert = function insert(_ref) {
    var item = _ref.item,
        context = _ref.context;
    var _item$isContainer = item.isContainer,
        isContainer = _item$isContainer === void 0 ? false : _item$isContainer,
        _item$name = item.name,
        name = _item$name === void 0 ? null : _item$name,
        _item$text = item.text,
        text = _item$text === void 0 ? null : _item$text,
        _item$attributes = item.attributes,
        attributes = _item$attributes === void 0 ? null : _item$attributes;
    var id = nanoid();

    if (context.id === 'root') {
      addComponent({
        isContainer: isContainer,
        text: text,
        name: name,
        id: id,
        attributes: attributes
      });
      isContainer && setCurrentlySelected({
        isContainer: isContainer,
        name: name,
        id: id,
        text: text,
        parentId: 'root'
      });
    } else {
      addChildComponent({
        isContainer: isContainer,
        text: text,
        name: name,
        parentId: context.id,
        id: id,
        attributes: attributes
      });
      isContainer && setCurrentlySelected({
        isContainer: isContainer,
        name: name,
        id: id,
        text: text,
        parentId: context.id
      });
    }

    setTreeExpandedItems(function (prev) {
      var newExpandedTree = _.uniq([].concat(_toConsumableArray(prev || []), [context.id, id]));

      localStorage.setItem('treeExpandedItems', newExpandedTree);
      return newExpandedTree;
    });
  };

  var apply = function apply(_ref2) {
    var _components$all, _components$all$conte;

    var context = _ref2.context,
        item = _ref2.item;
    var withStateUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var componentData = {
      id: context.id,
      attributes: _objectSpread$7({}, ((_components$all = components.all) === null || _components$all === void 0 ? void 0 : (_components$all$conte = _components$all[context.id]) === null || _components$all$conte === void 0 ? void 0 : _components$all$conte.attributes) || {})
    };
    var property = componentData.attributes[item.property];

    if (tag) {
      // on apply tag value
      componentData.attributes[tag] = item.value;
      onTagChange();
    } else if (item.value === true && property !== undefined) {
      // on boolean type set true/false
      componentData.attributes[item.property] = !property;
    } else {
      // default attr set
      componentData.attributes[item.property] = item.value;
    }

    withStateUpdate && applyAttributes(componentData);
    return componentData === null || componentData === void 0 ? void 0 : componentData.attributes;
  };

  var insertComponentAsProperty = function insertComponentAsProperty(_ref3) {
    var _ref3$item = _ref3.item,
        item = _ref3$item === void 0 ? {} : _ref3$item,
        _ref3$context = _ref3.context,
        context = _ref3$context === void 0 ? {} : _ref3$context;
    var _item$isContainer2 = item.isContainer,
        isContainer = _item$isContainer2 === void 0 ? false : _item$isContainer2,
        _item$name2 = item.name,
        name = _item$name2 === void 0 ? null : _item$name2,
        _item$text2 = item.text,
        text = _item$text2 === void 0 ? null : _item$text2,
        _item$attributes2 = item.attributes,
        attributes = _item$attributes2 === void 0 ? null : _item$attributes2,
        property = item.property;
    var parentId = context.id;
    var component = {
      isContainer: isContainer,
      text: text,
      name: name,
      attributes: attributes,
      parentId: parentId,
      property: property
    };
    insertAsProperty(component);
  };

  return {
    insert: insert,
    apply: apply,
    insertComponentAsProperty: insertComponentAsProperty
  };
};

var useTag = function useTag() {
  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      tag = _useState2[0],
      setTag = _useState2[1];

  var onTagChange = function onTagChange(t) {
    return setTag(t);
  };

  return [tag, onTagChange];
};

var dimensionExtensions = ['auto', 'em', 'rem', 'px', '%', 'unset', 'revert', 'initial', 'inherit'];

var useQueryParser = function useQueryParser() {
  var computeTagValue = function computeTagValue(value, item) {
    if ((item === null || item === void 0 ? void 0 : item.type) !== 'dimension') return value;

    var filter = function filter(item) {
      return !!dimensionExtensions.filter(function (el) {
        return item.includes(el);
      }).length;
    };

    var list = value.split(' ');
    return list.length ? list.map(function (item) {
      return filter(item) ? item : "".concat(item, "px");
    }).join(' ') : filter(value);
  };

  return {
    computeTagValue: computeTagValue
  };
};

var _templateObject$7;
var TerminalInputStyled = styled(Input$1)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 16px 8px;\n  font-size: 24px;\n  line-height: 32px;\n  outline: none;\n  border: 0px;\n  background: transparent;\n  &:focus {\n    box-shadow: none;\n  }\n"])));

var TerminalContext = /*#__PURE__*/createContext();

var TerminalProvider = function TerminalProvider(_ref) {
  var children = _ref.children,
      context = _ref.context,
      onSubmit = _ref.onSubmit,
      tag = _ref.tag,
      onTagChange = _ref.onTagChange;
  var command = useCommands(context);

  var _useSearch = useSearch(),
      query = _useSearch.query,
      setQuery = _useSearch.setQuery;

  var suggestions = useSuggestions({
    command: command,
    query: query,
    context: context,
    tag: tag
  });

  var _useSelectedSuggestio = useSelectedSuggestion(query),
      _useSelectedSuggestio2 = _slicedToArray(_useSelectedSuggestio, 2),
      selectedSuggestionIndex = _useSelectedSuggestio2[0],
      setSelectedSuggestionIndex = _useSelectedSuggestio2[1];

  useKeyPress('backspace', function () {
    return !query && tag && onTagChange();
  });
  return /*#__PURE__*/jsx(TerminalContext.Provider, {
    value: {
      command: command,
      query: query,
      setQuery: setQuery,
      suggestions: suggestions,
      context: context,
      selectedSuggestionIndex: selectedSuggestionIndex,
      setSelectedSuggestionIndex: setSelectedSuggestionIndex,
      onSubmit: onSubmit,
      tag: tag,
      onTagChange: onTagChange
    },
    children: children
  });
};

var useTerminal = function useTerminal() {
  return useContext(TerminalContext);
};

var TerminalInput = function TerminalInput(_ref) {
  var command = _ref.command;
  var inputRef = useRef();

  var _useComponentBuilder = useComponentBuilder(),
      currentlySelected = _useComponentBuilder.currentlySelected;

  var _useTerminal = useTerminal(),
      query = _useTerminal.query,
      setQuery = _useTerminal.setQuery;

  var placeholder = command.value === 'APPLY' ? 'use arrows ↑ and ↓ to choose attribute' : 'use arrows ↑ and ↓ to choose component';
  useEffect(function () {
    inputRef.current.focus();
  }, [currentlySelected]);

  var onChange = function onChange(e) {
    setQuery(e.target.value);
  };

  return /*#__PURE__*/jsx(Fragment, {
    children: /*#__PURE__*/jsx(TerminalInputStyled, {
      ref: inputRef,
      value: query,
      onChange: onChange,
      autoFocus: true,
      placeholder: placeholder
    })
  });
};

var _templateObject$6;
var TerminalSuggestionItem$1 = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  padding: 12px 32px;\n  align-items: center;\n  display: flex;\n  cursor: pointer;\n  &:hover {\n    background-color: #efefef;\n  }\n  &.active {\n    background-color: var(--ql-color-accent1-t-lighten4);\n  }\n"])));

var TerminalSuggestionItem = function TerminalSuggestionItem(props) {
  var name = props.name,
      property = props.property,
      context = props.context,
      command = props.command,
      index = props.index,
      selectedSuggestionIndex = props.selectedSuggestionIndex,
      setSelectedSuggestionIndex = props.setSelectedSuggestionIndex,
      onClick = props.onClick,
      templateName = props.templateName,
      arrowNavigatedSelected = props.arrowNavigatedSelected;

  var _useComponentBuilder = useComponentBuilder(),
      removeTemplate = _useComponentBuilder.removeTemplate;

  var commandText = command.text;
  var destinationText = context.name || context;
  var insertionPrefix = command.value === 'APPLY' ? 'to the' : 'into the';
  var insertionText = property && property !== name ? "".concat(property, " \u2192 ").concat(name) : name;

  var _useHover = useHover(),
      _useHover2 = _slicedToArray(_useHover, 2),
      isHovering = _useHover2[0],
      hoverRef = _useHover2[1]; // Updating current item index onHover


  useEffect(function () {
    isHovering && setSelectedSuggestionIndex(index);
  }, [isHovering, index]);
  useEffect(function () {
    if (arrowNavigatedSelected === index) {
      var _hoverRef$current;

      hoverRef === null || hoverRef === void 0 ? void 0 : (_hoverRef$current = hoverRef.current) === null || _hoverRef$current === void 0 ? void 0 : _hoverRef$current.scrollIntoView({
        behavior: 'smooth'
      });
    }
  }, [arrowNavigatedSelected]);
  return /*#__PURE__*/jsxs(TerminalSuggestionItem$1, {
    className: "terminal-suggestion-item ".concat(selectedSuggestionIndex === index && 'active'),
    onClick: onClick,
    ref: hoverRef,
    children: [/*#__PURE__*/jsx(Text, {
      type: "secondary",
      mr: 1,
      children: commandText
    }), /*#__PURE__*/jsx(Text, {
      fontWeight: "var(--ql-font-weight-semibold)",
      mr: 1,
      children: insertionText
    }), /*#__PURE__*/jsx(Text, {
      type: "secondary",
      mr: 1,
      children: insertionPrefix
    }), /*#__PURE__*/jsx(Text, {
      fontWeight: "var(--ql-font-weight-semibold)",
      children: destinationText
    }), templateName && /*#__PURE__*/jsx(Button, {
      style: {
        marginLeft: 'auto'
      },
      icon: /*#__PURE__*/jsx(CloseOutlined, {}),
      size: "small",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        removeTemplate({
          templateName: templateName
        });
      }
    })]
  });
};

var _templateObject$5;
var TerminalSuggestionsStyled = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow: auto;\n  .terminal-suggestion-item:not(:last-child) {\n    border-bottom: 1px solid #efefef;\n  }\n"])));

function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var TerminalSuggestions = function TerminalSuggestions(_ref) {
  var onSelectionChange = _ref.onSelectionChange;

  var _useTerminal = useTerminal(),
      suggestions = _useTerminal.suggestions,
      context = _useTerminal.context,
      command = _useTerminal.command,
      selectedSuggestionIndex = _useTerminal.selectedSuggestionIndex,
      setSelectedSuggestionIndex = _useTerminal.setSelectedSuggestionIndex,
      onSubmit = _useTerminal.onSubmit,
      setQuery = _useTerminal.setQuery,
      query = _useTerminal.query,
      tag = _useTerminal.tag;

  var _useQueryParser = useQueryParser(),
      computeTagValue = _useQueryParser.computeTagValue;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      arrowNavigatedSelected = _useState2[0],
      setArrowNavigatedSelected = _useState2[1];

  var submit = function submit(e) {
    e.preventDefault();
    e.stopPropagation();
    onChange(selectedSuggestionIndex);
    setQuery('');
  };

  var onChange = function onChange(index) {
    var isSubmit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var item = suggestions[index] || {};
    var property = item.property,
        value = item.value;
    var action = isSubmit ? onSubmit : onSelectionChange;
    var itemValue = property === 'text' ? query : value;
    var valueComputed = tag ? computeTagValue(query, item) : itemValue;
    action === null || action === void 0 ? void 0 : action({
      command: command,
      context: context,
      item: _objectSpread$6(_objectSpread$6({}, item), {}, {
        value: valueComputed
      })
    });
    if (isSubmit) setQuery('');
  };

  var onArrowChange = function onArrowChange(e) {
    var isUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    e.preventDefault();
    e.stopPropagation();
    setSelectedSuggestionIndex(function (s) {
      var index = 0;
      if (isUp) index = s > 0 ? s - 1 : suggestions.length - 1;else index = s < suggestions.length - 1 ? s + 1 : 0;
      onChange(index, false);
      setArrowNavigatedSelected(index);
      return index;
    });
  };

  useKeyPress('ArrowUp', onArrowChange);
  useKeyPress('ArrowDown', function (e) {
    return onArrowChange(e, false);
  });
  useKeyPress('Enter', function (e) {
    return submit(e);
  });
  useKeyPress('Tab', function (e) {
    return submit(e);
  });
  return /*#__PURE__*/jsx(TerminalSuggestionsStyled, {
    children: suggestions.slice(0, 20).map(function (suggestion, index) {
      return /*#__PURE__*/jsx(TerminalSuggestionItem, {
        name: suggestion.templateName || suggestion.name,
        description: suggestion.description,
        property: suggestion.property,
        templateName: suggestion.templateName,
        context: context,
        command: command,
        arrowNavigatedSelected: arrowNavigatedSelected,
        selectedSuggestionIndex: selectedSuggestionIndex,
        setSelectedSuggestionIndex: setSelectedSuggestionIndex,
        index: index,
        data: suggestion,
        onClick: submit
      }, suggestion.name + index);
    })
  });
};

var _templateObject$4;
var TerminalWrapperStyled = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 680px;\n  background-color: white;\n  margin: 0 auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 0.8px 6.2px -20px rgb(0 0 0 / 10%),\n    0px 2.1px 15.6px -20px rgb(0 0 0 / 14%),\n    0px 4.3px 31.9px -20px rgb(0 0 0 / 18%),\n    0px 8.8px 65.7px -20px rgb(0 0 0 / 22%),\n    0px 24px 180px -20px rgb(0 0 0 / 32%);\n"])));

var _templateObject$3;
var TagStyled = styled(Tag)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  font-size: var(--ql-font-size-h4);\n  line-height: var(--ql-line-height-h4);\n  border-radius: var(--ql-border-radius-4);\n  padding: 0 8px;\n  margin-right: 0;\n  .ant-tag-close-icon {\n    font-size: var(--ql-font-size-body2);\n    margin-left: 4px;\n  }\n"])));

var TerminalInputWrapper = function TerminalInputWrapper(props) {
  var _useTerminal = useTerminal(),
      command = _useTerminal.command,
      tag = _useTerminal.tag,
      onTagChange = _useTerminal.onTagChange;

  return /*#__PURE__*/jsxs(Box, {
    display: "flex",
    alignItems: "center",
    px: 4,
    zIndex: 1,
    boxShadow: "0px 0.3px 1.4px -20px rgb(0 0 0 / 10%), 0px 0.7px 3.5px -20px rgb(0 0 0 / 14%), 0px 1.4px 7.1px -20px rgb(0 0 0 / 18%), 0px 2.9px 14.6px -20px rgb(0 0 0 / 22%), 0px 8px 40px -20px rgb(0 0 0 / 32%), 0px -0.3px 1.4px -20px rgb(0 0 0 / 10%), 0px -0.7px 3.5px -20px rgb(0 0 0 / 14%), 0px -1.4px 7.1px -20px rgb(0 0 0 / 18%), 0px -2.9px 14.6px -20px rgb(0 0 0 / 22%), 0px -8px 40px -20px rgb(0 0 0 / 32%)",
    children: [/*#__PURE__*/jsxs(Box, {
      display: "flex",
      alignItems: "center",
      columnGap: 8,
      fontSize: 24,
      lineHeight: "32px",
      fontWeight: "var(--ql-font-weight-medium)",
      color: "var(--ql-color-accent1)",
      children: [command.text, ['APPLY', 'USE'].includes(command.value) && tag && /*#__PURE__*/jsx(TagStyled, {
        closable: true,
        children: tag,
        onClose: function onClose() {
          return onTagChange();
        }
      })]
    }), /*#__PURE__*/jsx(Box, {
      flexGrow: 1,
      children: /*#__PURE__*/jsx(TerminalInput, {
        command: command
      })
    })]
  });
};

var TerminalHintWrapper = function TerminalHintWrapper(_ref) {
  var toggleTerminal = _ref.toggleTerminal;
  return /*#__PURE__*/jsxs(Box, {
    display: "flex",
    alignItems: "center",
    pl: 4,
    pr: 2,
    bg: "var(--ql-color-dark-t-lighten6)",
    columnGap: 32,
    children: [/*#__PURE__*/jsxs(Box, {
      display: "flex",
      alignItems: "center",
      flexGrow: 1,
      py: 12,
      lineHeight: "var(--ql-line-height-body2)",
      columnGap: 12,
      children: [/*#__PURE__*/jsx(Text, {
        variant: "body2",
        type: "secondary",
        children: "Use"
      }), /*#__PURE__*/jsx(TerminalHintShortcut, {
        children: "Cmd/Ctrl"
      }), /*#__PURE__*/jsx(Text, {
        variant: "body2",
        type: "secondary",
        children: "+"
      }), /*#__PURE__*/jsxs(Box, {
        display: "flex",
        columnGap: 4,
        children: [/*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2190"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "\u2192"
        })]
      }), /*#__PURE__*/jsx(Text, {
        variant: "body2",
        type: "secondary",
        children: "to switch commands."
      })]
    }), /*#__PURE__*/jsxs(Box, {
      display: "flex",
      alignItems: "center",
      children: [/*#__PURE__*/jsx(Button, {
        className: "move",
        type: "text",
        shape: "circle",
        fontSize: 28,
        color: "var(--ql-color-dark)",
        children: "\u2022"
      }), /*#__PURE__*/jsx(Divider, {
        type: "vertical",
        height: 24,
        top: 0,
        verticalAlign: "unset"
      }), /*#__PURE__*/jsx(Button, {
        type: "text",
        shape: "circle",
        icon: /*#__PURE__*/jsx(CloseOutlined, {}),
        color: "var(--ql-color-dark)",
        onClick: function onClick() {
          toggleTerminal();
        }
      })]
    })]
  });
};

var TerminalWrapper = function TerminalWrapper(props) {
  var context = props.context,
      onSubmit = props.onSubmit,
      onSelectionChange = props.onSelectionChange,
      tag = props.tag,
      onTagChange = props.onTagChange,
      toggleTerminal = props.toggleTerminal;
  return /*#__PURE__*/jsx(TerminalProvider, {
    tag: tag,
    onTagChange: onTagChange,
    context: context,
    onSubmit: onSubmit,
    children: /*#__PURE__*/jsxs(TerminalWrapperStyled, {
      children: [/*#__PURE__*/jsx(TerminalSuggestions, {
        onSelectionChange: onSelectionChange
      }), /*#__PURE__*/jsx(TerminalInputWrapper, {}), /*#__PURE__*/jsx(TerminalHintWrapper, {
        toggleTerminal: toggleTerminal
      })]
    })
  });
};

function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function Terminal() {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isTerminalVisible = _useState2[0],
      setIsTerminalVisible = _useState2[1];

  var _useState3 = useState(JSON.parse(localStorage.getItem('terminal_position') || '{"x":450,"y":300}')),
      _useState4 = _slicedToArray(_useState3, 2),
      terminalPosition = _useState4[0],
      setTerminalPosition = _useState4[1];

  var _useTag = useTag(),
      _useTag2 = _slicedToArray(_useTag, 2),
      tag = _useTag2[0],
      onTagChange = _useTag2[1];

  var _useActions = useActions(tag, onTagChange),
      insert = _useActions.insert,
      apply = _useActions.apply,
      insertComponentAsProperty = _useActions.insertComponentAsProperty;

  var _useComponentBuilder = useComponentBuilder(),
      tmpAttributes = _useComponentBuilder.tmpAttributes,
      setTmpAttributes = _useComponentBuilder.setTmpAttributes,
      currentlySelected = _useComponentBuilder.currentlySelected,
      addTemplate = _useComponentBuilder.addTemplate,
      createTemplateModalVisibility = _useComponentBuilder.createTemplateModalVisibility;

  var toggleTerminal = function toggleTerminal() {
    setIsTerminalVisible(function (p) {
      return !p;
    });
    if (tmpAttributes) setTmpAttributes();
  };

  useKeyPress('ctrl./', toggleTerminal);
  useKeyPress('meta./', toggleTerminal);
  useKeyPress('esc', function () {
    return isTerminalVisible && toggleTerminal();
  });

  var onSubmit = function onSubmit(_ref) {
    var command = _ref.command,
        context = _ref.context,
        item = _ref.item;

    var _ref2 = item || {},
        property = _ref2.property,
        name = _ref2.name,
        value = _ref2.value,
        type = _ref2.type; // TODO refactor code


    if (!property && !name && !value) return;

    if (value === 'tag' && [COMMANDS.APPLY.value, COMMANDS.USE.value].includes(command.value)) {
      onTagChange(item.property);
    } else if (command.value === COMMANDS.APPLY.value && type === 'component') {
      insertComponentAsProperty({
        context: context,
        item: item
      });
    } else if (command.value === COMMANDS.INSERT.value) {
      insert({
        item: item,
        context: context
      });
    } else if (command.value === COMMANDS.APPLY.value) {
      apply({
        context: context,
        item: item
      });
      setTmpAttributes();
      if (item.value === 'tag') return;
    } else if (command.value === COMMANDS.USE.value) {
      if (tag) onTagChange();
      addTemplate({
        templateName: item.templateName,
        parentId: context.id
      });
    }
  };

  var onSelectionChange = function onSelectionChange(_ref3) {
    var command = _ref3.command,
        context = _ref3.context,
        item = _ref3.item;

    if (command.value === COMMANDS.APPLY.value && item.value !== 'tag') {
      var attributes = apply({
        context: context,
        item: item
      }, false);
      setTmpAttributes(_defineProperty({}, context.id, _objectSpread$5({}, attributes)));
    }
  };

  var onDragStop = function onDragStop(_, _ref4) {
    var x = _ref4.x,
        y = _ref4.y;
    setTerminalPosition({
      x: x,
      y: y
    });
    localStorage.setItem('terminal_position', JSON.stringify({
      x: x,
      y: y
    }));
  };

  return isTerminalVisible && !createTemplateModalVisibility ? /*#__PURE__*/jsx(Draggable, {
    onStop: onDragStop,
    handle: ".move",
    position: terminalPosition,
    children: /*#__PURE__*/jsx(Box, {
      position: "absolute",
      zIndex: 2000,
      children: /*#__PURE__*/jsx(TerminalWrapper, {
        tag: tag,
        onTagChange: onTagChange,
        onSelectionChange: onSelectionChange,
        toggleTerminal: toggleTerminal,
        context: currentlySelected,
        onSubmit: onSubmit
      })
    })
  }) : null;
}

var _excluded$1 = ["downloadRef", "name", "onChange"];

var BuilderHeader = function BuilderHeader(props) {
  var downloadRef = props.downloadRef,
      name = props.name,
      onChange = props.onChange,
      rest = _objectWithoutProperties(props, _excluded$1);

  var _ref = rest || {},
      isExportCode = _ref.isExportCode,
      isImageDownload = _ref.isImageDownload,
      isNewTemplate = _ref.isNewTemplate,
      isShortcuts = _ref.isShortcuts,
      isResponsivePreview = _ref.isResponsivePreview;

  return (
    /*#__PURE__*/
    // <Header>
    jsx(Container, {
      px: 16,
      children: /*#__PURE__*/jsxs(Row, {
        noOuterGutters: true,
        v: "center",
        children: [/*#__PURE__*/jsx(Col, {
          cw: 5,
          flexDirection: "row",
          justifyContent: "flex-start",
          children: /*#__PURE__*/jsx(LiveSave$1, {
            onChange: onChange
          })
        }), /*#__PURE__*/jsx(Col, {
          cw: 2,
          flexDirection: "row",
          justifyContent: "center",
          children: isNewTemplate && /*#__PURE__*/jsx(TemplateModal, {})
        }), /*#__PURE__*/jsxs(Col, {
          cw: 5,
          flexDirection: "row",
          justifyContent: "flex-end",
          children: [isResponsivePreview && /*#__PURE__*/jsx(ResponsiveVariants, {
            parentRef: downloadRef
          }), isShortcuts && /*#__PURE__*/jsx(ShortcutsPopover, {}), (isResponsivePreview || isShortcuts) && (isImageDownload || isExportCode) && /*#__PURE__*/jsx(Divider, {
            type: "vertical",
            height: "auto",
            my: 2,
            mx: 3
          }), isImageDownload && /*#__PURE__*/jsx(DownloadImage, {
            downloadRef: downloadRef,
            name: name
          }), isExportCode && /*#__PURE__*/jsx(ExportCode, {})]
        })]
      })
    }) // </Header>

  );
};

var _templateObject$2;
var FormItemStyled = styled(Form.Item)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  &&& {\n    margin-bottom: 0;\n    margin-left: -16px;\n    margin-right: -16px;\n    padding-top: 2px;\n    padding-bottom: 2px;\n    padding-left: 16px;\n    padding-right: 16px;\n    &:hover,\n    :focus-within {\n      background-color: var(--ql-color-dark-t-lighten6);\n    }\n\n    &:focus-within {\n      background-color: var(--ql-color-dark-t-lighten5);\n    }\n    &:nth-last-child(-n + 1) {\n      margin-bottom: 16px;\n    }\n  }\n  .ant-form-item-label {\n    display: flex;\n    line-height: var(--ql-line-height-caption1);\n  }\n  .ant-form-item-label > label {\n    height: unset;\n    font-size: var(--ql-font-size-caption1);\n    line-height: var(--ql-line-height-caption1);\n    color: var(--ql-typography-text-color-secondary);\n  }\n  .ant-form-item-control-input {\n    min-height: unset;\n  }\n  .ant-form-item-control-input-content {\n    display: flex;\n    line-height: var(--ql-line-height-caption1);\n  }\n  .ant-input,\n  .ant-select:not(.ant-select-customize-input) .ant-select-selector {\n    padding: 0 4px;\n    font-size: var(--ql-font-size-caption1);\n    line-height: var(--ql-line-height-caption1);\n    font-weight: var(--ql-font-weight-medium);\n    background-color: unset;\n    border: unset;\n    border-radius: var(--ql-border-radius-none);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ant-select:not(.ant-select-customize-input) .ant-select-selector {\n    height: 16px;\n  }\n  .ant-input:focus {\n    box-shadow: unset;\n  }\n  .ant-select-single:not(.ant-select-customize-input)\n    .ant-select-selector\n    .ant-select-selection-search-input {\n    height: unset;\n  }\n  .ant-select-single .ant-select-selector .ant-select-selection-item,\n  .ant-select-single .ant-select-selector .ant-select-selection-placeholder {\n    line-height: var(--ql-line-height-caption1);\n  }\n  .ant-select:not(.ant-select-customize-input)\n    .ant-select-selector\n    .ant-select-selection-search-input {\n    font-size: var(--ql-font-size-caption1);\n    line-height: var(--ql-line-height-caption1);\n  }\n  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)\n    .ant-select-selector {\n    box-shadow: unset;\n  }\n  .ant-select-arrow {\n    right: 0;\n  }\n  &.ant-select-item ant-select-item-option {\n    font-size: var(--ql-font-size-caption1);\n    line-height: var(--ql-line-height-caption1);\n  }\n  .ant-select-item-option-content {\n    background: red;\n  }\n"])));

var getAttributeFormFieldByDataType = function getAttributeFormFieldByDataType(dataType, attributeVariants, formInstance, attributeValue) {
  switch (dataType) {
    case 'string':
      {
        var onInputPressEnter = function onInputPressEnter(e) {
          e.stopPropagation();
          formInstance.submit();
        };

        return /*#__PURE__*/jsx(Input$1, {
          placeholder: "Enter attribute value",
          onBlur: function onBlur() {
            return formInstance.submit();
          },
          onPressEnter: onInputPressEnter
        });
      }

    case 'array':
      {
        return /*#__PURE__*/jsx(Select$1, {
          onChange: function onChange() {
            return formInstance.submit();
          },
          children: attributeVariants.map(function (item) {
            return /*#__PURE__*/jsx(Option, {
              value: item,
              children: item
            }, item);
          })
        });
      }

    case 'boolean':
      return /*#__PURE__*/jsx(Switch, {
        checked: attributeValue,
        onChange: function onChange() {
          return formInstance.submit();
        }
      });
  }
};

function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var AttributeEditForm = function AttributeEditForm(_ref) {
  var attributes = _ref.attributes,
      componentParams = _ref.componentParams,
      onFinish = _ref.onFinish;

  var _Form$useForm = Form.useForm(),
      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
      form = _Form$useForm2[0];

  useEffect(function () {
    var formattedAttributes = Object.keys(attributes).reduce(function (acc, key) {
      var value = attributes[key];
      return _objectSpread$4(_objectSpread$4({}, acc), {}, _defineProperty({}, key, _typeof(value) === 'object' ? JSON.stringify(value) : value));
    }, {}) || {};
    if (attributes) form.setFieldsValue(formattedAttributes);
  }, [attributes]);
  return /*#__PURE__*/jsx(Form, {
    form: form,
    onFinish: onFinish,
    children: attributes && componentParams && Object.entries(attributes).map(function (item, index) {
      var currentAttributeData = componentParams === null || componentParams === void 0 ? void 0 : componentParams.find(function (selectedItem) {
        return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) === item[0];
      });
      return /*#__PURE__*/jsx(FormItemStyled, {
        name: item[0],
        label: item[0],
        children: getAttributeFormFieldByDataType(currentAttributeData === null || currentAttributeData === void 0 ? void 0 : currentAttributeData.dataType, currentAttributeData === null || currentAttributeData === void 0 ? void 0 : currentAttributeData.variants, form, item[1])
      }, index);
    })
  });
};

var ContentEditForm = function ContentEditForm(_ref) {
  var _Object$entries;

  var content = _ref.content,
      onBlur = _ref.onBlur,
      componentId = _ref.componentId;

  var _Form$useForm = Form.useForm(),
      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
      form = _Form$useForm2[0];

  var onFinish = function onFinish(e) {
    e.stopPropagation();
    form.submit();
    onBlur && onBlur(componentId, form, content);
  };

  useEffect(function () {
    if (content) {
      form.setFieldsValue(content);
    }
  }, [content]);
  return /*#__PURE__*/jsx(Form, {
    form: form,
    children: content && (Object === null || Object === void 0 ? void 0 : (_Object$entries = Object.entries(content)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (item, index) {
      var _item$;

      return /*#__PURE__*/jsx(FormItemStyled, {
        name: item[0],
        label: item[0],
        children: ((_item$ = item[1]) === null || _item$ === void 0 ? void 0 : _item$.length) > 20 ? /*#__PURE__*/jsx(TextArea, {
          style: {
            whiteSpace: 'break-spaces'
          },
          onBlur: onFinish,
          onPressEnter: onFinish
        }) : /*#__PURE__*/jsx(Input$1, {
          onBlur: onFinish,
          onPressEnter: onFinish
        })
      }, index);
    }))
  });
};

function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var ListOfContentForms = function ListOfContentForms(_ref) {
  var _Object$entries;

  var selectedComponentContent = _ref.selectedComponentContent;

  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components,
      updateComponent = _useComponentBuilder.updateComponent;

  var onBlur = function onBlur(id, form, formInitialValues) {
    var fieldValues = form.getFieldsValue();

    if (!_.isEqual(formInitialValues, fieldValues)) {
      var updatePayload = {};

      if (fieldValues !== null && fieldValues !== void 0 && fieldValues.text) {
        updatePayload.text = fieldValues === null || fieldValues === void 0 ? void 0 : fieldValues.text;
        fieldValues === null || fieldValues === void 0 ? true : delete fieldValues.text;
      }

      if (!_.isEmpty(fieldValues)) {
        updatePayload.attributes = fieldValues;
      }

      updateComponent(_objectSpread$3({
        id: id
      }, updatePayload));
    }
  };

  return /*#__PURE__*/jsx(Box, {
    children: selectedComponentContent && (Object === null || Object === void 0 ? void 0 : (_Object$entries = Object.entries(selectedComponentContent)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (item, index) {
      var _components$all, _components$all$item$;

      return /*#__PURE__*/jsxs(Box, {
        children: [/*#__PURE__*/jsx(Box, {
          children: /*#__PURE__*/jsx(Title, {
            level: 5,
            children: components === null || components === void 0 ? void 0 : (_components$all = components.all) === null || _components$all === void 0 ? void 0 : (_components$all$item$ = _components$all[item[0]]) === null || _components$all$item$ === void 0 ? void 0 : _components$all$item$.name
          })
        }), /*#__PURE__*/jsx(ContentEditForm, {
          componentId: item[0],
          content: item[1],
          onBlur: onBlur
        })]
      }, index);
    }))
  });
};

var useSelectedComponentContent = function useSelectedComponentContent(selectedComponentData, componentVariants) {
  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      selectedComponentParams = _useState2[0],
      setSelectedComponentParams = _useState2[1];

  useEffect(function () {
    if (selectedComponentData) {
      var _componentVariants$fi;

      var selectedComponentPossibleParams = (_componentVariants$fi = componentVariants.find(function (item) {
        return item.name === selectedComponentData.name;
      })) === null || _componentVariants$fi === void 0 ? void 0 : _componentVariants$fi.params;

      if (selectedComponentData !== null && selectedComponentData !== void 0 && selectedComponentData.attributes) {
        var newState = Object.keys(selectedComponentData === null || selectedComponentData === void 0 ? void 0 : selectedComponentData.attributes).map(function (item) {
          var _propertyConfig$;

          var propertyConfig = selectedComponentPossibleParams === null || selectedComponentPossibleParams === void 0 ? void 0 : selectedComponentPossibleParams.filter(function (paramItem) {
            return paramItem.property === item;
          });
          var result = {
            name: item
          };

          if ((propertyConfig === null || propertyConfig === void 0 ? void 0 : propertyConfig.length) > 1) {
            result.variants = propertyConfig.map(function (item) {
              return item.value;
            });
            result.dataType = 'array';
          } else result.dataType = _typeof((_propertyConfig$ = propertyConfig[0]) === null || _propertyConfig$ === void 0 ? void 0 : _propertyConfig$.value);

          return result;
        });
        setSelectedComponentParams(newState);
      }
    }
  }, [selectedComponentData]);
  return [selectedComponentParams, setSelectedComponentParams];
};

var CONTENT_ATTRIBUTES = ['src', 'alt'];

function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var useDefinedComponentAttributes = function useDefinedComponentAttributes(selectedComponentData) {
  var _useComponentBuilder = useComponentBuilder(),
      components = _useComponentBuilder.components;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      selectedComponentContent = _useState2[0],
      setSelectedComponentContent = _useState2[1];

  var getArrayOfContentFromSelectedComponent = function getArrayOfContentFromSelectedComponent(component) {
    var _Object$entries, _component$children, _ref, _component$children2;

    var componentContent = _objectSpread$2({
      id: component === null || component === void 0 ? void 0 : component.id
    }, (component === null || component === void 0 ? void 0 : component.attributes) && (Object === null || Object === void 0 ? void 0 : Object.fromEntries(Object === null || Object === void 0 ? void 0 : (_Object$entries = Object.entries(component === null || component === void 0 ? void 0 : component.attributes)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.filter(function (item) {
      return CONTENT_ATTRIBUTES.includes(item === null || item === void 0 ? void 0 : item[0]);
    }))));

    if (component !== null && component !== void 0 && component.text) componentContent.text = component === null || component === void 0 ? void 0 : component.text;
    if (!(component !== null && component !== void 0 && (_component$children = component.children) !== null && _component$children !== void 0 && _component$children.length)) return [componentContent];
    return (_ref = [componentContent]).concat.apply(_ref, _toConsumableArray(component === null || component === void 0 ? void 0 : (_component$children2 = component.children) === null || _component$children2 === void 0 ? void 0 : _component$children2.map(function (item) {
      var _components$all;

      return getArrayOfContentFromSelectedComponent(components === null || components === void 0 ? void 0 : (_components$all = components.all) === null || _components$all === void 0 ? void 0 : _components$all[item]);
    })));
  };

  var getObjectFromArrayOfContent = function getObjectFromArrayOfContent(contentArray) {
    if (contentArray) {
      var _contentArray$map;

      var entriesArray = contentArray === null || contentArray === void 0 ? void 0 : (_contentArray$map = contentArray.map(function (item) {
        var result = [item === null || item === void 0 ? void 0 : item.id];
        item === null || item === void 0 ? true : delete item.id;
        return [].concat(result, [item]);
      })) === null || _contentArray$map === void 0 ? void 0 : _contentArray$map.filter(function (item) {
        return !_.isEmpty(item[1]);
      });
      return Object === null || Object === void 0 ? void 0 : Object.fromEntries(entriesArray);
    }
  };

  useEffect(function () {
    if (selectedComponentData) {
      var content = getArrayOfContentFromSelectedComponent(selectedComponentData);
      var contentObject = getObjectFromArrayOfContent(content);
      setSelectedComponentContent(contentObject);
    } else setSelectedComponentContent();
  }, [selectedComponentData]);
  return [selectedComponentContent, setSelectedComponentContent];
};

var ContentTabView = function ContentTabView() {
  var _useComponentBuilder = useComponentBuilder(),
      selectedComponentData = _useComponentBuilder.selectedComponentData;

  var _useSelectedComponent = useDefinedComponentAttributes(selectedComponentData),
      _useSelectedComponent2 = _slicedToArray(_useSelectedComponent, 1),
      selectedComponentContent = _useSelectedComponent2[0];

  var description = useMemo(function () {
    return selectedComponentData ? 'No content' : 'Component is not selected';
  }, [selectedComponentData]);
  return !_.isEmpty(selectedComponentContent) ? /*#__PURE__*/jsx(Container, {
    children: /*#__PURE__*/jsx(ListOfContentForms, {
      selectedComponentContent: selectedComponentContent
    })
  }) : /*#__PURE__*/jsx(EmptyState, {
    description: description
  });
};

var AttributesTabView = function AttributesTabView() {
  var _useComponentBuilder = useComponentBuilder(),
      selectedComponentData = _useComponentBuilder.selectedComponentData,
      applyAttributes = _useComponentBuilder.applyAttributes,
      currentlySelected = _useComponentBuilder.currentlySelected;

  var _useComponentType = useComponentType(),
      componentType = _useComponentType.componentType; // Get correct list of components and their attributes to form up right section


  var componentVariants = useVariants({
    type: componentType
  }); // On form submit action

  var onFormSubmit = function onFormSubmit(values) {
    applyAttributes({
      id: currentlySelected.id,
      attributes: values
    });
  }; // Getting attribute data types and possible values (if attribute type is 'select')


  var _useDefinedComponentA = useSelectedComponentContent(selectedComponentData, componentVariants),
      _useDefinedComponentA2 = _slicedToArray(_useDefinedComponentA, 1),
      selectedComponentParams = _useDefinedComponentA2[0];

  return selectedComponentData !== null && selectedComponentData !== void 0 && selectedComponentData.attributes ? selectedComponentParams ? /*#__PURE__*/jsx(Container, {
    children: /*#__PURE__*/jsx(AttributeEditForm, {
      attributes: selectedComponentData === null || selectedComponentData === void 0 ? void 0 : selectedComponentData.attributes,
      componentParams: selectedComponentParams,
      onFinish: onFormSubmit
    })
  }) : null : /*#__PURE__*/jsx(EmptyState, {
    description: selectedComponentData ? 'No attributes' : "Component isn't selected"
  });
};

var _templateObject$1, _templateObject2;
var TabsStyled = styled(Tabs)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  > .ant-tabs-nav {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n  & .ant-tabs-content-holder {\n    overflow-y: auto;\n  }\n"])));
var TabPaneStyled = styled(Tabs.TabPane)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-left: 16px;\n  padding-right: 16px;\n"])));

var BuilderRightAside = function BuilderRightAside(props) {
  var isAttributes = props.isAttributes,
      isContent = props.isContent;
  var tabs = useMemo(function () {
    return [{
      title: 'Attributes',
      Component: AttributesTabView,
      disabled: !isAttributes
    }, {
      title: 'Content',
      Component: ContentTabView,
      disabled: !isContent
    }].filter(function (tab) {
      return !tab.disabled;
    });
  }, [isAttributes, isContent]);
  return /*#__PURE__*/jsx(Container, {
    flexGrow: 1,
    maxHeight: "100%",
    children: /*#__PURE__*/jsx(Row, {
      noGutters: true,
      height: "100%",
      children: /*#__PURE__*/jsx(Col, {
        height: "100%",
        children: /*#__PURE__*/jsx(TabsStyled, {
          size: "small",
          children: tabs.map(function (_ref) {
            var title = _ref.title,
                Component = _ref.Component;
            return /*#__PURE__*/jsx(TabPaneStyled, {
              tab: title,
              children: /*#__PURE__*/jsx(Container, {
                children: /*#__PURE__*/jsx(Component, {})
              })
            }, title);
          })
        })
      })
    })
  });
};

var EmptyBuilder = function EmptyBuilder() {
  return /*#__PURE__*/jsx(NoData, {
    description: /*#__PURE__*/jsx(Row, {
      h: "center",
      children: /*#__PURE__*/jsxs(Col, {
        cw: "auto",
        flexDirection: "row",
        style: {
          columnGap: '12px'
        },
        children: [/*#__PURE__*/jsx(Text, {
          type: "secondary",
          children: "Press"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "Cmd"
        }), /*#__PURE__*/jsx(Text, {
          type: "secondary",
          children: "+"
        }), /*#__PURE__*/jsx(TerminalHintShortcut, {
          children: "/"
        }), /*#__PURE__*/jsx(Text, {
          type: "secondary",
          children: "to start"
        })]
      })
    })
  });
};

({
  createVariant: PropTypes.oneOf(['small', 'large'])
});

var _templateObject;
var StyledCheckbox = styled(Checkbox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-checkbox .ant-checkbox-inner {\n    border-radius: var(--ql-border-radius-sm);\n    border-color: var(--ql-color-accent1-t-lighten3);\n  }\n  .ant-checkbox-wrapper:hover .ant-checkbox-inner,\n  .ant-checkbox:hover .ant-checkbox-inner,\n  .ant-checkbox-input:focus + .ant-checkbox-inner {\n    border-color: var(--ql-color-accent1);\n  }\n  .ant-checkbox-checked::after {\n    border: 1px solid var(--ql-color-accent1);\n    border-radius: var(--ql-border-radius-sm);\n  }\n"])));

var QCheckbox = function QCheckbox(_ref) {
  var checked = _ref.checked,
      onChange = _ref.onChange;
  return /*#__PURE__*/jsx(StyledCheckbox, {
    checked: checked,
    onChange: onChange
  });
};

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var transformTemplatesIntoComponents = function transformTemplatesIntoComponents(data) {
  return data.reduce(function (acc, _ref) {
    var name = _ref.name,
        body = _ref.body;
    return _objectSpread$1(_objectSpread$1({}, acc), addTemplate(_objectSpread$1(_objectSpread$1({}, acc), {}, {
      templates: _objectSpread$1(_objectSpread$1({}, acc.templates), {}, _defineProperty({}, name, body))
    }), {
      templateName: name,
      parentId: 'root'
    }));
  }, {
    all: {},
    root: []
  });
};

var transformTemplateIntoComponents = function transformTemplateIntoComponents(body, name) {
  return body && name ? addTemplate({
    templates: _defineProperty({}, name, body),
    all: {},
    root: []
  }, {
    templateName: name,
    parentId: 'root'
  }) : {
    all: {},
    root: []
  };
};

var _excluded = ["onSelect", "isSelected", "zoom", "width", "height"];

var TemplateView = function TemplateView(props) {
  var onSelect = props.onSelect,
      isSelected = props.isSelected,
      zoom = props.zoom,
      _props$width = props.width,
      width = _props$width === void 0 ? '100%' : _props$width,
      _props$height = props.height,
      height = _props$height === void 0 ? '100%' : _props$height,
      rest = _objectWithoutProperties(props, _excluded);

  var _id = rest._id,
      name = rest.name,
      componentType = rest.componentType,
      body = rest.body;
  var components = useMemo(function () {
    return transformTemplateIntoComponents(body, name);
  }, [body, name]);
  var previewerValue = useMemo(function () {
    return {
      components: components,
      componentType: componentType
    };
  }, [components, componentType]);
  var selected = useMemo(function () {
    return isSelected === null || isSelected === void 0 ? void 0 : isSelected(_id);
  }, [_id, isSelected]); // [HELPER FUNCTIONS]

  var handleSelect = function handleSelect() {
    return onSelect === null || onSelect === void 0 ? void 0 : onSelect(_id);
  };

  return /*#__PURE__*/jsx(Box, {
    lineHeight: "initial",
    cursor: "pointer",
    onClick: handleSelect,
    borderRadius: "var(--ql-border-radius-md)",
    bg: "var(--card-background)",
    children: /*#__PURE__*/jsxs(Box, {
      position: "relative",
      width: width,
      children: [selected && /*#__PURE__*/jsx(Box, {
        position: "absolute",
        zIndex: 1,
        left: "8px",
        top: "4px",
        children: /*#__PURE__*/jsx(QCheckbox, {
          checked: selected
        })
      }), /*#__PURE__*/jsx(Box, {
        height: height,
        overflow: "hidden",
        display: "flex",
        padding: "16px",
        children: /*#__PURE__*/jsx(Box, {
          flexGrow: "1",
          alignItems: "center",
          display: "flex",
          justifyContent: "center",
          children: /*#__PURE__*/jsx(Previewer$1, {
            zoom: zoom || 0.2,
            value: previewerValue
          })
        })
      })]
    })
  });
};

var TemplateView$1 = /*#__PURE__*/memo(TemplateView);

var extractTags = function extractTags(data) {
  return (data === null || data === void 0 ? void 0 : data.reduce(function (acc, el) {
    (el === null || el === void 0 ? void 0 : el.tags) && Object.keys(el.tags).forEach(function (tag) {
      !acc.includes(tag) && acc.push(tag);
    });
    return acc;
  }, [])) || [];
};

var useTransformTemplatesIntoGroups = function useTransformTemplatesIntoGroups(templates) {
  var transformedTemplates = useMemo(function () {
    // Get list of tags
    var _tags = extractTags(templates);

    var _templates = {};

    _tags.forEach(function (tag) {
      return _templates[tag] = templates.filter(function (_ref) {
        var tags = _ref.tags;
        return !!(tags !== null && tags !== void 0 && tags[tag]);
      });
    });

    var _unfiltered = templates === null || templates === void 0 ? void 0 : templates.filter(function (_ref2) {
      var tags = _ref2.tags;
      return !Object.keys(tags).length;
    });

    if (_unfiltered !== null && _unfiltered !== void 0 && _unfiltered.length) _templates.Unfiltered = _unfiltered;
    return _templates;
  }, [templates]);
  return transformedTemplates;
};

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function TemplatesList(props) {
  var templates = props.templates,
      onSelect = props.onSelect,
      isSelected = props.isSelected,
      zoom = props.zoom,
      _props$itemWidth = props.itemWidth,
      itemWidth = _props$itemWidth === void 0 ? '300px' : _props$itemWidth,
      _props$itemHeight = props.itemHeight,
      itemHeight = _props$itemHeight === void 0 ? '200px' : _props$itemHeight;
  var computedTemplates = useTransformTemplatesIntoGroups(templates);
  return /*#__PURE__*/jsx(Fragment$1, {
    children: computedTemplates && Object.keys(computedTemplates).map(function (key) {
      var _sortByDate;

      return /*#__PURE__*/jsx(Box, {
        mb: 3,
        children: /*#__PURE__*/jsx(Box, {
          overflow: "auto",
          pb: "8px",
          mb: "-8px",
          display: "flex",
          width: "inherit",
          children: /*#__PURE__*/jsxs(Row, {
            noGutters: true,
            mb: 2,
            children: [/*#__PURE__*/jsx(Col, {
              cw: 12,
              children: /*#__PURE__*/jsx(Text, {
                fontWeight: 550,
                children: key
              })
            }), /*#__PURE__*/jsx(Col, {
              cw: 12,
              children: /*#__PURE__*/jsx(Box, {
                display: "flex",
                children: (_sortByDate = sortByDate(computedTemplates[key])) === null || _sortByDate === void 0 ? void 0 : _sortByDate.map(function (item, index, array) {
                  return /*#__PURE__*/jsx(Box, {
                    mr: index !== array.length - 1 ? 4 : 0,
                    children: /*#__PURE__*/jsx(TemplateView$1, _objectSpread(_objectSpread({}, item), {}, {
                      width: itemWidth,
                      height: itemHeight,
                      zoom: zoom,
                      onSelect: onSelect,
                      isSelected: isSelected
                    }))
                  }, index);
                })
              })
            })]
          })
        })
      }, key);
    })
  });
}

var initEmptyTemplate = function initEmptyTemplate(_ref) {
  var name = _ref.name,
      tags = _ref.tags,
      componentType = _ref.componentType;
  return {
    body: {
      children: [],
      isContainer: true,
      name: 'Container',
      parentId: 'root',
      templateName: name || '',
      text: null,
      title: name || ''
    },
    componentType: componentType || REACT_COMPONENT_TYPE,
    name: name || '',
    tags: tags !== null && tags !== void 0 && tags.length ? Object.fromEntries(tags.map(function (tag) {
      return [tag, true];
    })) : []
  };
};

var useCombineTemplatesIntoPage = function useCombineTemplatesIntoPage() {
  var combineTemplatesIntoPage = useCallback(function (templates) {
    var _templates$, _ref;

    var _templates = transformTemplatesIntoComponents(templates);

    var _components = {
      all: _templates.all,
      root: _templates.root
    };

    var _componentType = templates === null || templates === void 0 ? void 0 : (_templates$ = templates[0]) === null || _templates$ === void 0 ? void 0 : _templates$.componentType;

    var _pageName = templates !== null && templates !== void 0 && templates.length ? (_ref = [].concat(_toConsumableArray(templates === null || templates === void 0 ? void 0 : templates.map(function (item) {
      return item.name;
    })), ['page'])) === null || _ref === void 0 ? void 0 : _ref.join('_') : 'Page';

    return {
      componentType: _componentType,
      components: _components,
      name: _pageName
    };
  }, []);
  return combineTemplatesIntoPage;
};

export { AdditionalPropsProvider, Editor, Previewer$1 as Previewer, TemplateView$1 as TemplateView, TemplatesList, Viewer, initEmptyTemplate, transformTemplateIntoComponents, transformTemplatesIntoComponents, useCombineTemplatesIntoPage };