@lote-design-system/marketing-blocks/main/components/marketing/features/Feature5.js

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Feature5 = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _icons = require("@lote-design-system/icons");

var _core = require("@lote-design-system/core");

var _svg = require("../svg");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Feature = _styledComponents["default"].section.withConfig({
  displayName: "Feature5__Feature",
  componentId: "px3v6i-0"
})(["padding:48px 16px;", "{padding:64px 32px;}", "{padding-top:96px;padding-bottom:96px;}"], function (_ref) {
  var theme = _ref.theme;
  return theme.mediaQueries.sm;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.md;
});

var FeatureHeader = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FeatureHeader",
  componentId: "px3v6i-1"
})(["text-align:center;margin-bottom:48px;", "{margin-bottom:64px;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.md;
});

var FeatureContainer = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Feature5__FeatureContainer",
  componentId: "px3v6i-2"
})(["max-width:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.maxContainerWidth;
});

var FeatureTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Feature5__FeatureTitle",
  componentId: "px3v6i-3"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.text.title;
});

var FeatureDescription = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__FeatureDescription",
  componentId: "px3v6i-4"
})(["margin:0 auto 16px;max-width:720px;font-size:16px;color:", ";"], function (_ref6) {
  var colors = _ref6.theme.colors;
  return colors.text.primary;
}); // Second Part => has left and Right Side
// Left Side contains column and one `div` which contain cards


var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Feature5__ColumnModify",
  componentId: "px3v6i-5"
})(["margin-bottom:64px;", "{margin-bottom:96px;}"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.mediaQueries.lg;
});

var FeatureUpper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FeatureUpper",
  componentId: "px3v6i-6"
})(["margin-bottom:64px;"]);

var FeatureUpperTitle = _styledComponents["default"].h1.withConfig({
  displayName: "Feature5__FeatureUpperTitle",
  componentId: "px3v6i-7"
})(["font-size:28px;font-weight:500;color:", ";margin-bottom:8px;"], function (_ref8) {
  var colors = _ref8.theme.colors;
  return colors.text.title;
});

var FeatureUpperDescription = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__FeatureUpperDescription",
  componentId: "px3v6i-8"
})(["max-width:720px;font-size:16px;color:", ";", "{margin:0 auto;}"], function (_ref9) {
  var colors = _ref9.theme.colors;
  return colors.text.primary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.mediaQueries.lg;
}); // Card


var CardFeature = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__CardFeature",
  componentId: "px3v6i-9"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;:not(:last-child){margin-bottom:64px;}"]);

var CardFeatureBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__CardFeatureBody",
  componentId: "px3v6i-10"
})(["display:flex;"]);

var CardFeatureIconWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__CardFeatureIconWrapper",
  componentId: "px3v6i-11"
})(["flex:0 0 auto;margin-right:16px;"]);

var CardFeatureSvgWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__CardFeatureSvgWrapper",
  componentId: "px3v6i-12"
})(["width:60px;height:60px;background-color:", ";color:#fff;border-radius:0.25rem;display:inline-flex;justify-content:center;align-items:center;> svg{width:25px;height:25px;}", ";"], function (_ref11) {
  var colors = _ref11.theme.colors;
  return colors.primary;
}, function (_ref12) {
  var styled = _ref12.styled;

  if (styled) {
    return (0, _styledComponents.css)(["&{", ";}"], styled);
  }
});

var CardFeatureContent = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__CardFeatureContent",
  componentId: "px3v6i-13"
})(["flex:1 1 auto;text-align:left;"]);

var CardHeading = _styledComponents["default"].h1.withConfig({
  displayName: "Feature5__CardHeading",
  componentId: "px3v6i-14"
})(["font-size:18px;font-weight:500;margin-bottom:4px;color:", ";"], function (_ref13) {
  var colors = _ref13.theme.colors;
  return colors.text.title;
});

var CardDescription = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__CardDescription",
  componentId: "px3v6i-15"
})(["font-size:14px;margin-bottom:0;color:", ";"], function (_ref14) {
  var colors = _ref14.theme.colors;
  return colors.text.primary;
}); // Right Side Form => It is divided into 3 parts header, body, footer


var FormWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormWrapper",
  componentId: "px3v6i-16"
})(["box-shadow:", ";"], function (_ref15) {
  var theme = _ref15.theme;
  return theme.boxShadows.lg;
}); // From Header


var FormHeader = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormHeader",
  componentId: "px3v6i-17"
})(["padding:32px 24px 18px;"]);

var HeaderH4 = _styledComponents["default"].h4.withConfig({
  displayName: "Feature5__HeaderH4",
  componentId: "px3v6i-18"
})(["font-size:16px;font-weight:500;margin-bottom:8px;color:", ";"], function (_ref16) {
  var colors = _ref16.theme.colors;
  return colors.text.title;
});

var HeaderP = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__HeaderP",
  componentId: "px3v6i-19"
})(["font-size:14px;margin-bottom:16px;color:", ";"], function (_ref17) {
  var colors = _ref17.theme.colors;
  return colors.text.primary;
});

var FormGroup = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormGroup",
  componentId: "px3v6i-20"
})(["margin-bottom:16px;"]);

var Label = _styledComponents["default"].label.withConfig({
  displayName: "Feature5__Label",
  componentId: "px3v6i-21"
})(["font-size:14px;font-weight:500;color:", ";display:block;margin-bottom:12px;"], function (_ref18) {
  var colors = _ref18.theme.colors;
  return colors.text.primary;
}); // Form Body


var FormBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormBody",
  componentId: "px3v6i-22"
})(["border-top:1px solid #f7f7f7;border-bottom:1px solid #f7f7f7;padding:32px 0;"]);

var FormBodyContent = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormBodyContent",
  componentId: "px3v6i-23"
})(["padding:0 24px;"]); // Components for Select-with-icon


var SelectIconWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__SelectIconWrapper",
  componentId: "px3v6i-24"
})(["align-items:center;display:inline-flex;justify-content:center;height:24px;width:24px;"]);

var SelectIconGroup = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__SelectIconGroup",
  componentId: "px3v6i-25"
})(["position:relative;select{padding-left:42px;}", "{color:", ";pointer-events:none;position:absolute;top:0;", " left:0;width:50px;height:50px;z-index:4;}"], SelectIconWrapper, function (_ref19) {
  var colors = _ref19.theme.colors;
  return colors.text.title;
}, ''
/* For left side */
); // -- End --
// Group Components for input-text and select-with-icon


var GroupInput = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__GroupInput",
  componentId: "px3v6i-26"
})(["position:relative;width:100%;div input{padding-right:128px;}div select{width:128px;border-radius:0;}div:last-child{position:absolute;top:0;right:0;}"]); // -- End --
// List Group


var ListGroup = _styledComponents["default"].ul.withConfig({
  displayName: "Feature5__ListGroup",
  componentId: "px3v6i-27"
})(["display:flex;flex-direction:column;padding-left:0;margin:26px 0;> li{position:relative;list-style:none;padding:12px 20px;margin-bottom:-1px;background-color:#fff;border:1px solid #f7f7f7;> span{display:block;&:first-child{font-size:14px;font-weight:500;color:", ";}&:last-child{font-size:14px;color:", ";}}&:first-child{border-top-left-radius:4px;border-top-right-radius:4px;}&:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px;}}", "{> li{display:flex;align-items:center;justify-content:space-between;> span{display:inline-block;}}}"], function (_ref20) {
  var colors = _ref20.theme.colors;
  return colors.text.title;
}, function (_ref21) {
  var colors = _ref21.theme.colors;
  return colors.text.primary;
}, function (_ref22) {
  var theme = _ref22.theme;
  return theme.mediaQueries.sm;
}); // -- End --
// Form Footer


var FormFooter = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__FormFooter",
  componentId: "px3v6i-28"
})(["background-color:#fbfbfb;padding:12px 48px;button{display:block;width:100%;}button:first-child{margin-bottom:16px;}", "{display:flex;justify-content:flex-end;button{display:inline-block;width:auto;}button:first-child{margin-right:16px;margin-bottom:0;}}"], function (_ref23) {
  var theme = _ref23.theme;
  return theme.mediaQueries.sm;
}); // -- End Right Side Form --
// List Group 2


var ListGroup2 = _styledComponents["default"].ul.withConfig({
  displayName: "Feature5__ListGroup2",
  componentId: "px3v6i-29"
})(["display:flex;flex-direction:column;padding-left:0;> li{list-style:none;box-shadow:", ";padding:12px 20px;background-color:#fbfbfb;border-radius:4px;&:not(:last-child){margin-bottom:24px;}}", "{> li{display:flex;justify-content:space-between;align-items:center;}}"], function (_ref24) {
  var theme = _ref24.theme;
  return theme.boxShadows.md;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.mediaQueries.sm;
});

var AvatarWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__AvatarWrapper",
  componentId: "px3v6i-30"
})(["display:flex;margin-bottom:16px;", "{margin-bottom:0;}"], function (_ref26) {
  var theme = _ref26.theme;
  return theme.mediaQueries.sm;
});

var Avatar = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__Avatar",
  componentId: "px3v6i-31"
})(["flex:0 0 auto;margin-right:1rem;> img{display:block;width:50px;height:50px;border-radius:50%;background-color:#f7f7f7;}"]);

var InfoWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature5__InfoWrapper",
  componentId: "px3v6i-32"
})(["flex:1 1 auto;text-align:left;"]);

var PersonName = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__PersonName",
  componentId: "px3v6i-33"
})(["font-size:14px;color:", ";margin-bottom:0;font-weight:500;"], function (_ref27) {
  var colors = _ref27.theme.colors;
  return colors.text.title;
});

var PersonAmount = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__PersonAmount",
  componentId: "px3v6i-34"
})(["font-size:14px;color:", ";margin-bottom:0;font-weight:500;span{font-weight:400;color:", ";}"], function (_ref28) {
  var colors = _ref28.theme.colors;
  return colors.text.title;
}, function (_ref29) {
  var colors = _ref29.theme.colors;
  return colors.text.primary;
});

var Badge = _styledComponents["default"].p.withConfig({
  displayName: "Feature5__Badge",
  componentId: "px3v6i-35"
})(["display:flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:9999px;font-size:14px;font-weight:500;&:before{content:'';width:8px;height:8px;border-radius:50%;margin-right:8px;}", ""], function (props) {
  var palettes = props.theme.palettes;

  if (props.status === 'info') {
    return (0, _styledComponents.css)(["background-color:", ";color:", ";&:before{background-color:", ";}"], palettes.primary[0], palettes.primary[5], palettes.primary[5]);
  } else if (props.status === 'success') {
    return (0, _styledComponents.css)(["background-color:", ";color:", ";&:before{background-color:", ";}"], palettes.success[0], palettes.success[5], palettes.success[5]);
  }
}); // -- End --
// <= End Dependent styled-components


var typeASchema = {
  title: 'We takes away the hard process',
  description: "We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s and used by everywhere.",
  shift: false,
  features: [{
    id: 1,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "database"
    }),
    title: 'Marketing Analysis rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }, {
    id: 2,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "code"
    }),
    title: 'Website Optimization rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }, {
    id: 3,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "clock"
    }),
    title: 'SEO Analysis rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }]
};
var typeBSchema = {
  title: 'Always in the loop',
  description: "We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s and used by everywhere.",
  shift: true,
  features: [{
    id: 1,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "database"
    }),
    title: 'Marketing Analysis rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }, {
    id: 2,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "code"
    }),
    title: 'Website Optimization rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }, {
    id: 3,
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "clock"
    }),
    title: 'SEO Analysis rates',
    description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
  }]
};
var featureShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  title: _propTypes["default"].string.isRequired,
  description: _propTypes["default"].string.isRequired
};
var typeShape = {
  shift: _propTypes["default"].bool.isRequired,
  title: _propTypes["default"].string.isRequired,
  description: _propTypes["default"].string.isRequired,
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired
};
var propTypes = {
  /** The title for the feature section. */
  title: _propTypes["default"].string.isRequired,

  /** The description for the feature section. */
  description: _propTypes["default"].string.isRequired,

  /** The following feature section is divided into 2 types of data
      Type-A and Type-B. Both have an object datatype. Type-A will appear above. Type-B will
      appear below Type-A. */
  typeA: _propTypes["default"].shape(typeShape),
  typeB: _propTypes["default"].shape(typeShape)
};
var defaultProps = {
  title: 'Creative features with optimal choices',
  description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication.',
  typeA: typeASchema,
  typeB: typeBSchema
};
/**
 * Returns the JSX or null for the icon.
 * @param icon {*} - The icon will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */

var renderIcon = function renderIcon(icon) {
  if (_react["default"].isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: icon
    });
  } else {
    return null;
  }
};
/**
 * It will render the data of your type.
 * @param type {object} - A type object
 * @return {*} - Returns the JSX
 */


var renderData = function renderData(type) {
  return /*#__PURE__*/_react["default"].createElement(ColumnModify, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FeatureUpper, null, /*#__PURE__*/_react["default"].createElement(FeatureUpperTitle, null, type.title), /*#__PURE__*/_react["default"].createElement(FeatureUpperDescription, null, type.description)), Array.isArray(type.features) && type.features.length > 0 ? type.features.map(function (_ref30) {
    var id = _ref30.id,
        icon = _ref30.icon,
        title = _ref30.title,
        description = _ref30.description;
    return /*#__PURE__*/_react["default"].createElement(CardFeature, {
      key: id
    }, /*#__PURE__*/_react["default"].createElement(CardFeatureBody, null, /*#__PURE__*/_react["default"].createElement(CardFeatureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(CardFeatureSvgWrapper, null, renderIcon(icon))), /*#__PURE__*/_react["default"].createElement(CardFeatureContent, null, /*#__PURE__*/_react["default"].createElement(CardHeading, null, title), /*#__PURE__*/_react["default"].createElement(CardDescription, null, description))));
  }) : null));
};
/**
 * It will render the type structure.
 * @param typeA {object} - A typeA data
 * @param typeB {object} - A typeB data
 * @return {null|*} - Returns the JSX or null
 */


var renderBody = function renderBody(typeA, typeB) {
  if (typeA != null && ((0, _typeof2["default"])(typeA) === 'object' || typeof typeA === 'function') || typeB != null && ((0, _typeof2["default"])(typeB) === 'object' || typeof typeB === 'function')) {
    // Image 1
    var col1 = /*#__PURE__*/_react["default"].createElement(ColumnModify, {
      lg: 6
    }, /*#__PURE__*/_react["default"].createElement(FormWrapper, null, /*#__PURE__*/_react["default"].createElement("form", {
      method: "post"
    }, /*#__PURE__*/_react["default"].createElement(FormHeader, null, /*#__PURE__*/_react["default"].createElement(HeaderH4, null, "Request quote"), /*#__PURE__*/_react["default"].createElement(HeaderP, null, "Select a service and the amount you want to send"), /*#__PURE__*/_react["default"].createElement(FormGroup, null, /*#__PURE__*/_react["default"].createElement(Label, {
      htmlFor: "service"
    }, "Service"), /*#__PURE__*/_react["default"].createElement(_core.Input, {
      type: "select",
      id: "service",
      defaultValue: "web"
    }, /*#__PURE__*/_react["default"].createElement("option", {
      value: "",
      disabled: true
    }, "Which Service Are You Interested In?"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "web"
    }, "Web Development"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "progressive"
    }, "Progressive Web application")))), /*#__PURE__*/_react["default"].createElement(FormBody, null, /*#__PURE__*/_react["default"].createElement(FormBodyContent, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Label, {
      htmlFor: "currency"
    }, "How much do you want to spend"), /*#__PURE__*/_react["default"].createElement(GroupInput, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Input, {
      type: "text",
      id: "currency",
      placeholder: "$0.00",
      autoComplete: "off",
      defaultValue: "$1000"
    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(SelectIconGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Input, {
      type: "select",
      defaultValue: "cad"
    }, /*#__PURE__*/_react["default"].createElement("option", {
      value: "",
      disabled: true
    }, "Choose currency?"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "cad"
    }, "CAD"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "usd"
    }, "USD")), /*#__PURE__*/_react["default"].createElement(SelectIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_svg.CountryFlagCanada, {
      width: 28,
      height: 28
    })))))), /*#__PURE__*/_react["default"].createElement(ListGroup, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", null, "$12.17 CAD"), /*#__PURE__*/_react["default"].createElement("span", null, "Total Fee")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", null, "0.754129"), /*#__PURE__*/_react["default"].createElement("span", null, "Exchange Rate"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Label, {
      htmlFor: "recipient"
    }, "Recipient gets"), /*#__PURE__*/_react["default"].createElement(GroupInput, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Input, {
      type: "text",
      id: "recipient",
      placeholder: "$0.00",
      autoComplete: "off",
      defaultValue: "$744.95"
    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(SelectIconGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Input, {
      type: "select",
      defaultValue: "cad"
    }, /*#__PURE__*/_react["default"].createElement("option", {
      value: "",
      disabled: true
    }, "Choose currency?"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "cad"
    }, "CAD"), /*#__PURE__*/_react["default"].createElement("option", {
      value: "usd"
    }, "USD")), /*#__PURE__*/_react["default"].createElement(SelectIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_svg.CountryFlagCanada, {
      width: 28,
      height: 28
    })))))))), /*#__PURE__*/_react["default"].createElement(FormFooter, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
      type: "button",
      variation: "light"
    }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
      type: "submit",
      color: "primary",
      variation: "fill"
    }, "Submit"))))); // Image 2


    var col2 = /*#__PURE__*/_react["default"].createElement(ColumnModify, {
      lg: 6
    }, /*#__PURE__*/_react["default"].createElement(ListGroup2, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(AvatarWrapper, null, /*#__PURE__*/_react["default"].createElement(Avatar, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: "https://i.imgur.com/F80hD1h.jpg",
      alt: "Avatar"
    })), /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/_react["default"].createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/_react["default"].createElement("span", null, "USD")))), /*#__PURE__*/_react["default"].createElement(Badge, {
      status: "info"
    }, "Finished")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(AvatarWrapper, null, /*#__PURE__*/_react["default"].createElement(Avatar, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: "https://i.imgur.com/ILmHmHq.jpg",
      alt: "Avatar"
    })), /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(PersonName, null, "Payment to Aleksandr Solzhenitsyn"), /*#__PURE__*/_react["default"].createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/_react["default"].createElement("span", null, "USD")))), /*#__PURE__*/_react["default"].createElement(Badge, {
      status: "success"
    }, "Success")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(AvatarWrapper, null, /*#__PURE__*/_react["default"].createElement(Avatar, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: "https://i.imgur.com/F80hD1h.jpg",
      alt: "Avatar"
    })), /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/_react["default"].createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/_react["default"].createElement("span", null, "USD")))), /*#__PURE__*/_react["default"].createElement(Badge, {
      status: "info"
    }, "Finished")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(AvatarWrapper, null, /*#__PURE__*/_react["default"].createElement(Avatar, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: "https://i.imgur.com/ILmHmHq.jpg",
      alt: "Avatar"
    })), /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(PersonName, null, "Payment to Aleksandr Solzhenitsyn"), /*#__PURE__*/_react["default"].createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/_react["default"].createElement("span", null, "USD")))), /*#__PURE__*/_react["default"].createElement(Badge, {
      status: "success"
    }, "Success")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(AvatarWrapper, null, /*#__PURE__*/_react["default"].createElement(Avatar, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: "https://i.imgur.com/F80hD1h.jpg",
      alt: "Avatar"
    })), /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/_react["default"].createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/_react["default"].createElement("span", null, "USD")))), /*#__PURE__*/_react["default"].createElement(Badge, {
      status: "info"
    }, "Finished"))));

    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FeatureContainer, {
      fluid: true
    }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, typeA.shift ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderData(typeA), col1) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderData(typeA), col1), typeB.shift ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, col2, renderData(typeB)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderData(typeB), col2))));
  } else {
    return null;
  }
};

var Feature5 = function Feature5(props) {
  var title = props.title,
      description = props.description,
      typeA = props.typeA,
      typeB = props.typeB,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["title", "description", "typeA", "typeB"]);
  return /*#__PURE__*/_react["default"].createElement(Feature, attributes, /*#__PURE__*/_react["default"].createElement(FeatureHeader, null, /*#__PURE__*/_react["default"].createElement(FeatureContainer, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(FeatureTitle, null, title), /*#__PURE__*/_react["default"].createElement(FeatureDescription, null, description))), renderBody(typeA, typeB));
};

exports.Feature5 = Feature5;
Feature5.propTypes = propTypes;
Feature5.defaultProps = defaultProps;