quick-ui-design/dist/quick-ui-design.esm.js

A Quick UI library for user interface design with React fast and easy.

import React from 'react';
import { Button as Button$1, FloatButton, Typography, Divider as Divider$1, Flex as Flex$1, Col, Row, Layout as Layout$1, Card as Card$1, Collapse as Collapse$1, Descriptions as Descriptions$1, Empty as Empty$1, Image as Image$1, Popover as Popover$1, QRCode as QRCode$1, Segmented as Segmented$1, Statistic as Statistic$1, Table as Table$1, Tabs as Tabs$1, Tag as Tag$1, Timeline as Timeline$1, Tooltip as Tooltip$1, Tour as Tour$1, AutoComplete as AutoComplete$1, Cascader as Cascader$1, Checkbox as Checkbox$1, ColorPicker as ColorPicker$1, DatePicker as DatePicker$1, Form as Form$1, Input as Input$1, InputNumber as InputNumber$1, Mentions as Mentions$1, Radio as Radio$1, Rate as Rate$1, Select as Select$1, Slider as Slider$1, Switch as Switch$1, TimePicker as TimePicker$1, Transfer as Transfer$1, TreeSelect as TreeSelect$1, Upload as Upload$1, Alert as Alert$1, Drawer as Drawer$1, Modal as Modal$1, Popconfirm as Popconfirm$1, Progress as Progress$1, Result as Result$1, Skeleton as Skeleton$1, Spin as Spin$1, Watermark as Watermark$1, Space as Space$1, Anchor as Anchor$1, Breadcrumb as Breadcrumb$1, Dropdown as Dropdown$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tree, Carousel, ConfigProvider } from 'antd';
import ImgCrop from 'antd-img-crop';

const Button = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Button$1, Object.assign({}, rest), children);
};

const FloatButtonBackTop = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(FloatButton.BackTop, Object.assign({}, rest), children);
};

const FloatButtonGroup = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(FloatButton.Group, Object.assign({}, rest), renderComponent(children));
};

const TypographyLink = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Typography.Link, Object.assign({}, rest), children);
};

const TypographyParagraph = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Typography.Paragraph, Object.assign({}, rest), children);
};

const TypographyText = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Typography.Text, Object.assign({}, rest), children);
};

const TypographyTitle = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Typography.Title, Object.assign({}, rest), children);
};

const Divider = _ref => {
  let {
    props
  } = _ref;
  const {
    children
  } = props;
  return /*#__PURE__*/React.createElement(Divider$1, null, children);
};

const Flex = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Flex$1, Object.assign({}, rest), renderComponent(children));
};

const GridCol = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Col, Object.assign({}, rest), renderComponent(children));
};

const GridRow = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Row, Object.assign({}, rest), renderComponent(children));
};

const Layout = _ref => {
  let {
    props
  } = _ref;
  const {
    children
  } = props;
  return /*#__PURE__*/React.createElement(Layout$1, null, renderComponent(children));
};

const Content = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Layout$1.Content, Object.assign({}, rest), renderComponent(children));
};

const Footer = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Layout$1.Footer, Object.assign({}, rest), renderComponent(children));
};

const Headers = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Layout$1.Header, Object.assign({}, rest), renderComponent(children));
};

const Sider = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Layout$1.Sider, Object.assign({}, rest), renderComponent(children));
};

const Card = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Card$1, Object.assign({}, rest), renderComponent(children));
};

const CardGrid = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Card$1.Grid, Object.assign({}, props));
};

const CardMeta = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Card$1.Meta, Object.assign({}, props));
};

const Collapse = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Collapse$1, Object.assign({}, props));
};

const Descriptions = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Descriptions$1, Object.assign({}, props));
};

const Empty = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  if (!children) {
    return /*#__PURE__*/React.createElement(Empty$1, Object.assign({}, rest));
  }
  return /*#__PURE__*/React.createElement(Empty$1, Object.assign({}, rest), " ", renderComponent(children), " ");
};

const Image = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Image$1, Object.assign({}, props));
};

const ImagePreviewGroup = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Image$1.PreviewGroup, Object.assign({}, rest), /*#__PURE__*/React.createElement(Image$1, Object.assign({}, children[0])));
};

const Popover = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    content,
    ...rest
  } = props;
  const renderContent = content ? /*#__PURE__*/React.createElement(React.Fragment, null, renderComponent(content)) : undefined;
  return /*#__PURE__*/React.createElement(Popover$1, Object.assign({}, rest, {
    content: renderContent
  }), renderComponent(children));
};

const QRCode = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(QRCode$1, Object.assign({}, props));
};

const Segmented = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Segmented$1, Object.assign({}, props));
};

const Statistic = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Statistic$1, Object.assign({}, props));
};

const Countdown = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Statistic$1.Countdown, Object.assign({}, props));
};

const Table = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Table$1, Object.assign({}, props));
};

const Tabs = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Tabs$1, Object.assign({}, props));
};

const Tag = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Tag$1, Object.assign({}, rest), " ", renderComponent(children));
};

const Timeline = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Timeline$1, Object.assign({}, props));
};

const Tooltip = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Tooltip$1, Object.assign({}, rest), " ", renderComponent(children));
};

const Tour = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Tour$1, Object.assign({}, props));
};

const AutoComplete = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(AutoComplete$1, Object.assign({}, props));
};

const Cascader = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Cascader$1, Object.assign({}, props));
};

const Checkbox = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Checkbox$1, Object.assign({}, props));
};

const CheckboxGroup = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Checkbox$1.Group, Object.assign({}, props));
};

const ColorPicker = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(ColorPicker$1, Object.assign({}, props));
};

const DatePicker = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(DatePicker$1, Object.assign({}, props));
};

const RangeDatePicker = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(DatePicker$1.RangePicker, Object.assign({}, props));
};

const Form = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Form$1, Object.assign({}, rest), renderComponent(children));
};

const FormItem = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Form$1.Item, Object.assign({}, rest), renderComponent(children));
};

const FormList = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Form$1.List, Object.assign({}, props));
};

const FormProvider = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Form$1.Provider, Object.assign({}, props));
};

const Input = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1, Object.assign({}, props));
};

const InputGroup = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1.Group, Object.assign({}, props));
};

const InputOTP = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1.OTP, Object.assign({}, props));
};

const InputPassword = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1.Password, Object.assign({}, props));
};

const InputSearch = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1.Search, Object.assign({}, props));
};

const InputTextArea = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Input$1.TextArea, Object.assign({}, props));
};

const InputNumber = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(InputNumber$1, Object.assign({}, props));
};

const Mentions = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Mentions$1, Object.assign({}, props));
};

const Radio = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Radio$1, Object.assign({}, props));
};

const RadioButton = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Radio$1.Button, Object.assign({}, props));
};

const RadioGroup = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Radio$1.Group, Object.assign({}, props));
};

const Rate = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Rate$1, Object.assign({}, props));
};

const Select = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Select$1, Object.assign({}, props));
};

const Slider = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Slider$1, Object.assign({}, props));
};

const Switch = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Switch$1, Object.assign({}, props));
};

const TimePicker = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(TimePicker$1, Object.assign({}, props));
};

const TimeRangePicker = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(TimePicker$1.RangePicker, Object.assign({}, props));
};

const Transfer = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Transfer$1, Object.assign({}, props));
};

const TreeSelect = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(TreeSelect$1, Object.assign({}, props));
};

const Upload = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Upload$1, Object.assign({}, props));
};

const UploadImageDraggable = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Upload$1.Dragger, Object.assign({}, rest), renderComponent(children));
};

const UploadImgCrop = _ref => {
  let {
    props
  } = _ref;
  const {
    upload,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(ImgCrop, Object.assign({}, rest), /*#__PURE__*/React.createElement(Upload$1, Object.assign({}, upload)));
};

const Alert = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Alert$1, Object.assign({}, props));
};

const Drawer = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Drawer$1, Object.assign({}, rest), renderComponent(children));
};

const Modal = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Modal$1, Object.assign({}, rest), renderComponent(children));
};

const Popconfirm = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Popconfirm$1, Object.assign({}, rest), renderComponent(children));
};

const Progress = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Progress$1, Object.assign({}, props));
};

const Result = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    extra,
    ...rest
  } = props;
  if (children && extra) {
    return /*#__PURE__*/React.createElement(Result$1, Object.assign({}, rest, {
      extra: renderComponent(extra)
    }), renderComponent(children));
  }
  if (children) {
    return /*#__PURE__*/React.createElement(Result$1, Object.assign({}, rest), renderComponent(children));
  }
  if (extra) {
    return /*#__PURE__*/React.createElement(Result$1, Object.assign({}, rest, {
      extra: renderComponent(extra)
    }));
  }
  return /*#__PURE__*/React.createElement(Result$1, Object.assign({}, rest));
};

const Skeleton = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Skeleton$1, Object.assign({}, props));
};

const {
  Avatar
} = Skeleton$1;
const SkeletonAvatar = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Avatar, Object.assign({}, props));
};

const SkeletonButton = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Skeleton$1.Button, Object.assign({}, props));
};

const SkeletonImage = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Skeleton$1.Image, Object.assign({}, props));
};

const SkeletonInput = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Skeleton$1.Input, Object.assign({}, props));
};

const SkeletonNode = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  if (children) {
    return /*#__PURE__*/React.createElement(Skeleton$1.Node, Object.assign({}, rest), renderComponent(children));
  }
  return /*#__PURE__*/React.createElement(Skeleton$1.Node, Object.assign({}, rest));
};

const SkeletonTitle = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Skeleton$1, Object.assign({}, props));
};

const Spin = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Spin$1, Object.assign({}, props));
};

const Watermark = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Watermark$1, Object.assign({}, rest), renderComponent(children));
};

const Space = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Space$1, Object.assign({}, rest), renderComponent(children));
};

const SpaceCompact = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Space$1.Compact, Object.assign({}, rest), renderComponent(children));
};

const Anchor = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Anchor$1, Object.assign({}, props));
};

const Breadcrumb = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Breadcrumb$1, Object.assign({}, props));
};

const Dropdown = _ref => {
  let {
    props
  } = _ref;
  const {
    children,
    ...rest
  } = props;
  return /*#__PURE__*/React.createElement(Dropdown$1, Object.assign({}, rest), children);
};

const Menu = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Menu$1, Object.assign({}, props));
};

const Pagination = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Pagination$1, Object.assign({}, props));
};

const Steps = _ref => {
  let {
    props
  } = _ref;
  return /*#__PURE__*/React.createElement(Steps$1, Object.assign({}, props));
};

// General Types
const BUTTON = 'button';
const FLOAT_BUTTON = 'float_button';
const FLOAT_BUTTON_BACK_TOP = 'float_button.back_top';
const FLOAT_BUTTON_GROUP = 'float_button.group';
const TYPOGRAPHY_TITLE = 'typography.title';
const TYPOGRAPHY_TEXT = 'typography.text';
const TYPOGRAPHY_LINK = 'typography.link';
const TYPOGRAPHY_PARAGRAPH = 'typography.paragraph';
// Layout Types
const DIVIDER = 'divider';
const GRID_ROW = 'grid.row';
const GRID_COL = 'grid.col';
const FLEX = 'flex';
const SPACE = 'space';
const SPACE_COMPACT = 'space.compact';
const LAYOUT = 'layout';
const HEADER = 'layout.header';
const SIDER = 'layout.sider';
const CONTENT = 'layout.content';
const FOOTER = 'layout.footer';
// Navigation
const ANCHOR = 'anchor';
const DROPDOWN = 'dropdown';
const MENU = 'menu';
const STEPS = 'steps';
const PAGINATION = 'pagination';
const BREADCRUMB = 'breadcrumb';
// Data Entry
const AUTO_COMPLETE = 'auto_complete';
const CASCADER = 'cascader';
const CHECKBOX = 'checkbox';
const CHECKBOX_GROUP = 'checkbox_group';
const COLOR_PICKER = 'color_picker';
const DATE_PICKER = 'date_picker';
const DATE_PICKER_RANGE = 'date_picker_range';
const FORM = 'form';
const FORM_ITEM = 'form.item';
const FROM_LIST = 'from.list';
const FORM_PROVIDER = 'form.provider';
const INPUT = 'input';
const INPUT_PASSWORD = 'input.password';
const INPUT_SEARCH = 'input.search';
const INPUT_TEXT_AREA = 'input.text_area';
const INPUT_OTP = 'input.otp';
const INPUT_GROUP = 'input_group';
const INPUT_NUMBER = 'input_number';
const MENTION = 'mention';
const RATE = 'rate';
const RADIO = 'radio';
const RADIO_BUTTON = 'radio.button';
const RADIO_GROUP = 'radio.group';
const SELECT = 'select';
const SLIDER = 'slider';
const SWITCH = 'switch';
const TIME_PICKER = 'time_picker';
const TIME_PICKER_RANGE = 'time_picker_range';
const TRANSFER = 'transfer';
const TREE_SELECT = 'tree_select';
const UPLOAD = 'upload';
const UPLOAD_DRAGGER = 'upload.dragger';
const UPLOAD_IMG_CROP = 'upload.img_crop';
const CARD = 'card';
const CARS_GRID = 'card.grid';
const CARS_META = 'card.meta';
const CAROUSEL = 'carousel';
const COLLAPSE = 'collapse';
const DESCRIPTIONS = 'descriptions';
const EMPTY = 'empty';
const IMAGE = 'image';
const IMAGE_PREVIEW = 'image.preview';
const POP_OVER = 'pop_over';
const QRCODE = 'qrcode';
const SEGMENTED = 'segmented';
const STATISTIC = 'statistic';
const STATISTIC_COUNTDOWN = 'statistic.countdown';
const TABLE = 'table';
const TABS = 'tabs';
const TAG = 'tag';
const TIMELINE = 'timeline';
const TOOLTIP = 'tooltip';
const TREE = 'tree';
const TOUR = 'tour';
// Feedback
const ALERT = 'alert';
const DRAWER = 'drawer';
const MODAL = 'modal';
const POPCONFIRM = 'popconfirm';
const PROGRESS = 'progress';
const RESULT = 'result';
const SKELETON = 'skeleton';
const SKELETON_AVATAR = 'skeleton.avatar';
const SKELETON_BUTTON = 'skeleton.button';
const SKELETON_INPUT = 'skeleton.input';
const SKELETON_IMAGE = 'skeleton.image';
const SKELETON_NODE = 'skeleton.node';
const SKELETON_TITLE = 'skeleton.title';
const SPIN = 'spin';
const WATERMARK = 'watermark';

const renderComponent = components => {
  if (components.length === 0) return /*#__PURE__*/React.createElement(Empty, {
    ctype: "empty",
    props: {
      description: 'No components found'
    }
  });
  return components.map((item, index) => {
    const id = index;
    switch (item.ctype) {
      case BUTTON:
        return /*#__PURE__*/React.createElement(Button, Object.assign({
          key: id
        }, item));
      case FLOAT_BUTTON:
        return /*#__PURE__*/React.createElement(FloatButton, Object.assign({
          key: id
        }, item));
      case FLOAT_BUTTON_GROUP:
        return /*#__PURE__*/React.createElement(FloatButtonGroup, Object.assign({
          key: id
        }, item));
      case FLOAT_BUTTON_BACK_TOP:
        return /*#__PURE__*/React.createElement(FloatButtonBackTop, Object.assign({
          key: id
        }, item));
      case TYPOGRAPHY_TITLE:
        return /*#__PURE__*/React.createElement(TypographyTitle, Object.assign({
          key: id
        }, item));
      case TYPOGRAPHY_TEXT:
        return /*#__PURE__*/React.createElement(TypographyText, Object.assign({
          key: id
        }, item));
      case TYPOGRAPHY_LINK:
        return /*#__PURE__*/React.createElement(TypographyLink, Object.assign({
          key: id
        }, item));
      case TYPOGRAPHY_PARAGRAPH:
        return /*#__PURE__*/React.createElement(TypographyParagraph, Object.assign({
          key: id
        }, item));
      case LAYOUT:
        return /*#__PURE__*/React.createElement(Layout, Object.assign({
          key: id
        }, item));
      case HEADER:
        return /*#__PURE__*/React.createElement(Headers, Object.assign({
          key: id
        }, item));
      case SIDER:
        return /*#__PURE__*/React.createElement(Sider, Object.assign({
          key: id
        }, item));
      case CONTENT:
        return /*#__PURE__*/React.createElement(Content, Object.assign({
          key: id
        }, item));
      case FOOTER:
        return /*#__PURE__*/React.createElement(Footer, Object.assign({
          key: id
        }, item));
      case DIVIDER:
        return /*#__PURE__*/React.createElement(Divider, Object.assign({
          key: id
        }, item));
      case FLEX:
        return /*#__PURE__*/React.createElement(Flex, Object.assign({
          key: id
        }, item));
      case GRID_ROW:
        return /*#__PURE__*/React.createElement(GridRow, Object.assign({
          key: id
        }, item));
      case GRID_COL:
        return /*#__PURE__*/React.createElement(GridCol, Object.assign({
          key: id
        }, item));
      case SPACE:
        return /*#__PURE__*/React.createElement(Space, Object.assign({
          key: id
        }, item));
      case SPACE_COMPACT:
        return /*#__PURE__*/React.createElement(SpaceCompact, Object.assign({
          key: id
        }, item));
      case ANCHOR:
        return /*#__PURE__*/React.createElement(Anchor, Object.assign({
          key: id
        }, item));
      case BREADCRUMB:
        return /*#__PURE__*/React.createElement(Breadcrumb, Object.assign({
          key: id
        }, item));
      case DROPDOWN:
        return /*#__PURE__*/React.createElement(Dropdown, Object.assign({
          key: id
        }, item));
      case MENU:
        return /*#__PURE__*/React.createElement(Menu, Object.assign({
          key: id
        }, item));
      case PAGINATION:
        return /*#__PURE__*/React.createElement(Pagination, Object.assign({
          key: id
        }, item));
      case STEPS:
        return /*#__PURE__*/React.createElement(Steps, Object.assign({
          key: id
        }, item));
      case AUTO_COMPLETE:
        return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({
          key: id
        }, item));
      case CASCADER:
        return /*#__PURE__*/React.createElement(Cascader, Object.assign({
          key: id
        }, item));
      case CHECKBOX:
        return /*#__PURE__*/React.createElement(Checkbox, Object.assign({
          key: id
        }, item));
      case CHECKBOX_GROUP:
        return /*#__PURE__*/React.createElement(CheckboxGroup, Object.assign({
          key: id
        }, item));
      case COLOR_PICKER:
        return /*#__PURE__*/React.createElement(ColorPicker, Object.assign({
          key: id
        }, item));
      case DATE_PICKER:
        return /*#__PURE__*/React.createElement(DatePicker, Object.assign({
          key: id
        }, item));
      case DATE_PICKER_RANGE:
        return /*#__PURE__*/React.createElement(RangeDatePicker, Object.assign({
          key: id
        }, item));
      case FORM:
        return /*#__PURE__*/React.createElement(Form, Object.assign({
          key: id
        }, item));
      case FORM_ITEM:
        return /*#__PURE__*/React.createElement(FormItem, Object.assign({
          key: id
        }, item));
      case FROM_LIST:
        return /*#__PURE__*/React.createElement(FormList, Object.assign({
          key: id
        }, item));
      case FORM_PROVIDER:
        return /*#__PURE__*/React.createElement(FormProvider, Object.assign({
          key: id
        }, item));
      case INPUT:
        return /*#__PURE__*/React.createElement(Input, Object.assign({
          key: id
        }, item));
      case INPUT_GROUP:
        return /*#__PURE__*/React.createElement(InputGroup, Object.assign({
          key: id
        }, item));
      case INPUT_PASSWORD:
        return /*#__PURE__*/React.createElement(InputPassword, Object.assign({
          key: id
        }, item));
      case INPUT_OTP:
        return /*#__PURE__*/React.createElement(InputOTP, Object.assign({
          key: id
        }, item));
      case INPUT_SEARCH:
        return /*#__PURE__*/React.createElement(InputSearch, Object.assign({
          key: id
        }, item));
      case INPUT_TEXT_AREA:
        return /*#__PURE__*/React.createElement(InputTextArea, Object.assign({
          key: id
        }, item));
      case INPUT_NUMBER:
        return /*#__PURE__*/React.createElement(InputNumber, Object.assign({
          key: id
        }, item));
      case MENTION:
        return /*#__PURE__*/React.createElement(Mentions, Object.assign({
          key: id
        }, item));
      case RADIO:
        return /*#__PURE__*/React.createElement(Radio, Object.assign({
          key: id
        }, item));
      case RADIO_BUTTON:
        return /*#__PURE__*/React.createElement(RadioButton, Object.assign({
          key: id
        }, item));
      case RADIO_GROUP:
        return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
          key: id
        }, item));
      case RATE:
        return /*#__PURE__*/React.createElement(Rate, Object.assign({
          key: id
        }, item));
      case SELECT:
        return /*#__PURE__*/React.createElement(Select, Object.assign({
          key: id
        }, item));
      case SLIDER:
        return /*#__PURE__*/React.createElement(Slider, Object.assign({
          key: id
        }, item));
      case SWITCH:
        return /*#__PURE__*/React.createElement(Switch, Object.assign({
          key: id
        }, item));
      case TIME_PICKER:
        return /*#__PURE__*/React.createElement(TimePicker, Object.assign({
          key: id
        }, item));
      case TIME_PICKER_RANGE:
        return /*#__PURE__*/React.createElement(TimeRangePicker, Object.assign({
          key: id
        }, item));
      case TRANSFER:
        return /*#__PURE__*/React.createElement(Transfer, Object.assign({
          key: id
        }, item));
      case TREE_SELECT:
        return /*#__PURE__*/React.createElement(TreeSelect, Object.assign({
          key: id
        }, item));
      case UPLOAD:
        return /*#__PURE__*/React.createElement(Upload, Object.assign({
          key: id
        }, item));
      case UPLOAD_DRAGGER:
        return /*#__PURE__*/React.createElement(UploadImageDraggable, Object.assign({
          key: id
        }, item));
      case UPLOAD_IMG_CROP:
        return /*#__PURE__*/React.createElement(UploadImgCrop, Object.assign({
          key: id
        }, item));
      case CARD:
        return /*#__PURE__*/React.createElement(Card, Object.assign({
          key: id
        }, item));
      case CARS_GRID:
        return /*#__PURE__*/React.createElement(CardGrid, Object.assign({
          key: id
        }, item));
      case CARS_META:
        return /*#__PURE__*/React.createElement(CardMeta, Object.assign({
          key: id
        }, item));
      case CAROUSEL:
        return /*#__PURE__*/React.createElement(Carousel, Object.assign({
          key: id
        }, item));
      case COLLAPSE:
        return /*#__PURE__*/React.createElement(Collapse, Object.assign({
          key: id
        }, item));
      case DESCRIPTIONS:
        return /*#__PURE__*/React.createElement(Descriptions, Object.assign({
          key: id
        }, item));
      case EMPTY:
        return /*#__PURE__*/React.createElement(Empty, Object.assign({
          key: id
        }, item));
      case IMAGE:
        return /*#__PURE__*/React.createElement(Image, Object.assign({
          key: id
        }, item));
      case IMAGE_PREVIEW:
        return /*#__PURE__*/React.createElement(ImagePreviewGroup, Object.assign({
          key: id
        }, item));
      case POP_OVER:
        return /*#__PURE__*/React.createElement(Popover, Object.assign({
          key: id
        }, item));
      case QRCODE:
        return /*#__PURE__*/React.createElement(QRCode, Object.assign({
          key: id
        }, item));
      case SEGMENTED:
        return /*#__PURE__*/React.createElement(Segmented, Object.assign({
          key: id
        }, item));
      case STATISTIC:
        return /*#__PURE__*/React.createElement(Statistic, Object.assign({
          key: id
        }, item));
      case STATISTIC_COUNTDOWN:
        return /*#__PURE__*/React.createElement(Countdown, Object.assign({
          key: id
        }, item));
      case TABLE:
        return /*#__PURE__*/React.createElement(Table, Object.assign({
          key: id
        }, item));
      case TABS:
        return /*#__PURE__*/React.createElement(Tabs, Object.assign({
          key: id
        }, item));
      case TAG:
        return /*#__PURE__*/React.createElement(Tag, Object.assign({
          key: id
        }, item));
      case TIMELINE:
        return /*#__PURE__*/React.createElement(Timeline, Object.assign({
          key: id
        }, item));
      case TOOLTIP:
        return /*#__PURE__*/React.createElement(Tooltip, Object.assign({
          key: id
        }, item));
      case TOUR:
        return /*#__PURE__*/React.createElement(Tour, Object.assign({
          key: id
        }, item));
      case TREE:
        return /*#__PURE__*/React.createElement(Tree, Object.assign({
          key: id
        }, item));
      case ALERT:
        return /*#__PURE__*/React.createElement(Alert, Object.assign({
          key: id
        }, item));
      case DRAWER:
        return /*#__PURE__*/React.createElement(Drawer, Object.assign({
          key: id
        }, item));
      case MODAL:
        return /*#__PURE__*/React.createElement(Modal, Object.assign({
          key: id
        }, item));
      case POPCONFIRM:
        return /*#__PURE__*/React.createElement(Popconfirm, Object.assign({
          key: id
        }, item));
      case PROGRESS:
        return /*#__PURE__*/React.createElement(Progress, Object.assign({
          key: id
        }, item));
      case RESULT:
        return /*#__PURE__*/React.createElement(Result, Object.assign({
          key: id
        }, item));
      case SKELETON:
        return /*#__PURE__*/React.createElement(Skeleton, Object.assign({
          key: id
        }, item));
      case SKELETON_AVATAR:
        return /*#__PURE__*/React.createElement(SkeletonAvatar, Object.assign({
          key: id
        }, item));
      case SKELETON_BUTTON:
        return /*#__PURE__*/React.createElement(SkeletonButton, Object.assign({
          key: id
        }, item));
      case SKELETON_IMAGE:
        return /*#__PURE__*/React.createElement(SkeletonImage, Object.assign({
          key: id
        }, item));
      case SKELETON_INPUT:
        return /*#__PURE__*/React.createElement(SkeletonInput, Object.assign({
          key: id
        }, item));
      case SKELETON_NODE:
        return /*#__PURE__*/React.createElement(SkeletonNode, Object.assign({
          key: id
        }, item));
      case SKELETON_TITLE:
        return /*#__PURE__*/React.createElement(SkeletonTitle, Object.assign({
          key: id
        }, item));
      case SPIN:
        return /*#__PURE__*/React.createElement(Spin, Object.assign({
          key: id
        }, item));
      case WATERMARK:
        return /*#__PURE__*/React.createElement(Watermark, Object.assign({
          key: id
        }, item));
      default:
        return /*#__PURE__*/React.createElement(Empty, {
          ctype: "empty",
          props: {
            description: `Component not found!`
          }
        });
    }
  });
};
const Render = _ref => {
  let {
    components
  } = _ref;
  const render = renderComponent(components);
  return /*#__PURE__*/React.createElement(React.Fragment, null, render);
};

const RenderComponents = _ref => {
  let {
    components
  } = _ref;
  return /*#__PURE__*/React.createElement(Render, {
    components: components
  });
};

const App = _ref => {
  let {
    theme,
    components
  } = _ref;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
    theme: theme
  }, /*#__PURE__*/React.createElement(RenderComponents, {
    components: components
  })));
};

const QuickUI = _ref => {
  let {
    components,
    theme
  } = _ref;
  return /*#__PURE__*/React.createElement(App, {
    theme: theme,
    components: components
  });
};

export default QuickUI;
//# sourceMappingURL=quick-ui-design.esm.js.map