@mjhls/mjh-framework 1.0.98 → 1.0.99-0.next12

package/dist/esm/TaxonomyDescription.js

@@ -0,0 +1,198 @@
+import { _ as _extends, a as _Object$assign } from './extends-dc6a71fd.js';
+import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-9716ae8d.js';
+import { _ as _slicedToArray } from './slicedToArray-ca2c8b8d.js';
+import React__default, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Head from 'next/head';
+import { B as BlockContent } from './BlockContent-c99c9a8d.js';
+import { g as getSerializers } from './index-c60f3bb6.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './core.get-iterator-method-e903ff31.js';
+import './_object-pie-133f504a.js';
+import './web.dom.iterable-fdf034f5.js';
+import './_library-528f1934.js';
+import './_iter-detect-f089461c.js';
+import 'prop-types';
+import './index-0dbff1d1.js';
+import 'react-bootstrap';
+import './urlFor.js';
+import './index-5cc7b406.js';
+import './index-c7e2ac95.js';
+import './Beam.js';
+import './stringify-c21932b3.js';
+import './Segment.js';
+import './main-1894c974.js';
+import './urlForFile-413f5ddb.js';
+import './index-755f2cc2.js';
+import 'react-dom';
+import './typeof-83d9eb10.js';
+import './_is-array-893ab020.js';
+import './brightcove-react-player-loader.es-57a70a56.js';
+import 'react-bootstrap/Modal';
+import 'react-bootstrap/Button';
+import 'react-bootstrap/Form';
+import 'react-ga';
+import './GroupDeck.js';
+import './smoothscroll-fa4e3f8c.js';
+import './moment-bc12cb97.js';
+import './SocialShare.js';
+import 'react-share';
+import './_object-to-array-50a6b9a3.js';
+import './toConsumableArray-7b1c0e23.js';
+import 'react-bootstrap/Pagination';
+import './entities-932b50cf.js';
+import './AdSlot.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import 'react-bootstrap/Row';
+import 'react-bootstrap/Col';
+import './inherits-8a801a18.js';
+import './_object-sap-169d6272.js';
+import './define-property-99e66838.js';
+import './index.esm-eb1e8e80.js';
+import './iconBase-ccc56b97.js';
+import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
+
+var _this = undefined;
+
+var blocksToText = function blocksToText(blocks) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var defaults = { nonTextBehavior: 'remove' };
+  var options = _Object$assign({}, defaults, opts);
+  return blocks.map(function (block) {
+    if (block._type !== 'block' || !block.children) {
+      return options.nonTextBehavior === 'remove' ? '' : '[' + block._type + ' block]';
+    }
+    return block.children.map(function (child) {
+      return child.text;
+    }).join('');
+  }).join('\n\n');
+};
+
+var setMetaDescription = function setMetaDescription(data, router) {
+  var metaDescription = blocksToText(data);
+  if (router && router.asPath) {
+    var queryParms = router.asPath.split('?')[1];
+    if (queryParms) {
+      var pageNumber = queryParms.split('&').reduce(function (acc, item) {
+        if (item.startsWith('page=')) {
+          if (item.split('=')[1]) {
+            acc = item.split('=')[1];
+            return acc;
+          }
+          return acc;
+        }
+        return acc;
+      }, '');
+      if (pageNumber && pageNumber !== '') {
+        metaDescription = blocksToText(data) + '| Page ' + pageNumber;
+      }
+    }
+  }
+  return React__default.createElement(
+    Head,
+    null,
+    React__default.createElement('meta', { name: 'description', content: metaDescription, key: 'description' })
+  );
+};
+
+var TaxonomyDescription = function TaxonomyDescription(_ref) {
+  var data = _ref.data,
+      client = _ref.client;
+
+  var router = useRouter();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      changeDescription = _useState2[0],
+      setChangeDescription = _useState2[1];
+
+  useEffect(_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+    var querySeoManager, description;
+    return regenerator.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!(router && router.asPath)) {
+              _context.next = 6;
+              break;
+            }
+
+            querySeoManager = '*[_type == \'seoManager\' && urlSeo == \'' + router.asPath + '\'][0].metaDescription';
+            _context.next = 4;
+            return client.fetch(querySeoManager);
+
+          case 4:
+            description = _context.sent;
+
+            if (description && description != null) {
+              setChangeDescription(false);
+            }
+
+          case 6:
+          case 'end':
+            return _context.stop();
+        }
+      }
+    }, _callee, _this);
+  })), []);
+  return data && data.length > 0 ? React__default.createElement(
+    'section',
+    { className: 'taxonomy-description' },
+    changeDescription ? setMetaDescription(data, router) : null,
+    React__default.createElement(BlockContent, _extends({ serializers: getSerializers(client), blocks: data, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+  ) : null;
+};
+
+TaxonomyDescription.getDescription = function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
+    var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var client = arguments[1];
+    var query, summary, taxonomyData;
+    return regenerator.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            query = '*[_type == \'taxonomy\' && identifier == \'' + url + '\'][0]{summary,pixelTrackingCode->}';
+            summary = [];
+            _context2.prev = 2;
+            _context2.next = 5;
+            return client.fetch(query);
+
+          case 5:
+            taxonomyData = _context2.sent;
+
+            if (taxonomyData.summary) {
+              summary = taxonomyData.summary;
+            }
+            _context2.next = 12;
+            break;
+
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2['catch'](2);
+
+            console.error(_context2.t0);
+
+          case 12:
+            return _context2.abrupt('return', summary);
+
+          case 13:
+          case 'end':
+            return _context2.stop();
+        }
+      }
+    }, _callee2, _this, [[2, 9]]);
+  }));
+
+  return function () {
+    return _ref3.apply(this, arguments);
+  };
+}();
+
+export default TaxonomyDescription;

package/dist/esm/TemplateNormal.js

@@ -0,0 +1,197 @@
+import { _ as _slicedToArray } from './slicedToArray-ca2c8b8d.js';
+import React__default, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Container from 'react-bootstrap/Container';
+import ADGutter from './ADGutter.js';
+import AD728x90 from './AD728x90.js';
+import Header from './Header.js';
+import { Column1 } from './Column1.js';
+import { Column2 } from './Column2.js';
+import { Column3 } from './Column3.js';
+import MagazineNav from './NavMagazine.js';
+import { NavNative } from './NavNative.js';
+import { NavDvm } from './NavDvm.js';
+import { HamMagazine } from './HamMagazine.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-fdf034f5.js';
+import './core.get-iterator-method-e903ff31.js';
+import './AdSlot.js';
+import './extends-dc6a71fd.js';
+import './_object-pie-133f504a.js';
+import 'prop-types';
+import './index-5cc7b406.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './Beam.js';
+import './stringify-c21932b3.js';
+import './asyncToGenerator-9716ae8d.js';
+import './_library-528f1934.js';
+import './_iter-detect-f089461c.js';
+import './Segment.js';
+import './main-1894c974.js';
+import 'next/head';
+import 'react-bootstrap/Row';
+import 'react-bootstrap/Col';
+import './SideFooter.js';
+import './defineProperty-8fa0bc8d.js';
+import './define-property-99e66838.js';
+import './react-social-icons-9be47857.js';
+import './get-3c308da4.js';
+import './eq-bdcbf886.js';
+import './ConferenceBanner-8792ebd2.js';
+import './ADSponsoredResources.js';
+import './LeftNav.js';
+import 'react-bootstrap/ListGroup';
+import './ADWebcast.js';
+import './PageFilter.js';
+import 'react-bootstrap';
+import 'react-bootstrap/Nav';
+import 'react-bootstrap/Navbar';
+import 'react-bootstrap/NavDropdown';
+import './index.esm-9b042655.js';
+import './iconBase-ccc56b97.js';
+import './index.esm-eb1e8e80.js';
+import './NavFooter-e27bd93b.js';
+import './index.esm-37268dca.js';
+import './SocialSearchComponent-1d8a9f59.js';
+import './SocialIcons.js';
+import 'react-bootstrap/Form';
+import 'react-bootstrap/FormControl';
+import 'react-bootstrap/Button';
+import './Search.js';
+
+// Main
+var TemplateNormal = function TemplateNormal(props) {
+  var config = props.config,
+      title = props.title,
+      keywords = props.keywords,
+      description = props.description,
+      website = props.website,
+      horizontalAD = props.config.horizontalAD,
+      showFilter = props.showFilter,
+      filterParams = props.filterParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter,
+      showRightAd = props.showRightAd,
+      sponsoredFlag = props.sponsoredFlag,
+      _props$noTitle = props.noTitle,
+      noTitle = _props$noTitle === undefined ? false : _props$noTitle;
+
+  var router = useRouter();
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  useEffect(function () {
+    router.asPath && router.asPath.split('?').forEach(function (item) {
+      if (item.includes('page=')) {
+        setCurrentPage(item.split('=')[1]);
+      } else {
+        setCurrentPage(0);
+      }
+    });
+  }, [router]);
+  var navigation = function navigation() {
+    switch (config.navComponent) {
+      case 'magazine':
+        return React__default.createElement(MagazineNav, { logo: website.logo, mobileLogo: website.mobileLogo, dataObject: config.navItems, subNav: config.leftItems, website: website });
+      case 'native':
+        return React__default.createElement(NavNative, { logo: website.logo, dataObject: config.navItems, subNav: config.leftItems, website: website });
+      case 'dvm':
+        return React__default.createElement(NavDvm, { logo: website.logo, dataObject: config.navItems, mobileLogo: website.logo, subNav: config.leftItems, website: website });
+      case 'hamburgerNav':
+        return React__default.createElement(HamMagazine, {
+          socialFooterNav: true,
+          logo: website.logo,
+          dataObject: config.navItems,
+          mobileLogo: website.logo,
+          subNav: config.leftItems,
+          website: website.siteSettingCache,
+          showLogin: website.showLogin
+        });
+      default:
+        return React__default.createElement('noNav', null);
+    }
+  };
+
+  var adTargeting = { desktop: {}, mobile: {} };
+  if (horizontalAD.targeting) {
+    adTargeting = horizontalAD.targeting;
+  }
+  if (website.sponsoredAd) {
+    website.sponsoredAd['targeting'] = adTargeting;
+  }
+  if (website.gutterAd) {
+    website.gutterAd['targeting'] = adTargeting;
+  }
+  function layout() {
+    switch (config.columns) {
+      case '1':
+        return React__default.createElement(
+          Column1,
+          { title: title },
+          props.children
+        );
+      case '2':
+        return React__default.createElement(
+          Column2,
+          { title: title, rightItems: config.rightItems, website: website },
+          props.children
+        );
+      case '3':
+        return React__default.createElement(
+          Column3,
+          {
+            title: title,
+            leftItems: config.leftItems,
+            rightItems: config.rightItems,
+            website: website,
+            showFilter: showFilter,
+            getParams: filterParams,
+            filters: filters,
+            defaultFilter: defaultFilter,
+            showRightAd: showRightAd,
+            logo: website.brandLogo },
+          props.children
+        );
+      default:
+        return React__default.createElement('noLayout', null);
+    }
+  }
+
+  return React__default.createElement(
+    'section',
+    null,
+    noTitle ? React__default.createElement(Header, {
+      isLiveSite: config.isLiveSite,
+      keyword: keywords,
+      description: description + ('' + (router && router.query && router.query.page ? '| Page ' + router.query.page : ''))
+    }) : React__default.createElement(Header, {
+      title: title ? title + ' ' + (currentPage !== 0 ? '| Page ' + currentPage + ' ' : router && router.query && router.query.page ? '| Page ' + router.query.page + ' ' : '') + '| ' + website.title : website.title + ' ' + (currentPage !== 0 ? '| Page ' + currentPage + ' ' : router && router.query && router.query.page ? '| Page ' + router.query.page + ' ' : ''),
+      isLiveSite: config.isLiveSite,
+      keyword: keywords,
+      description: description + ('' + (router && router.query && router.query.page ? '| Page ' + router.query.page : ''))
+    }),
+    navigation(),
+    sponsoredFlag ? React__default.createElement('div', { style: { height: '50px' } }) : React__default.createElement(
+      React__default.Fragment,
+      null,
+      horizontalAD && horizontalAD.networkID && horizontalAD.adUnit && React__default.createElement(
+        Container,
+        null,
+        React__default.createElement(AD728x90, { networkID: horizontalAD.networkID, adUnit: horizontalAD.adUnit, targeting: adTargeting })
+      )
+    ),
+    website.gutterAd && !sponsoredFlag && React__default.createElement(ADGutter, { title: 'gutter-ad', gutterAd: website.gutterAd }),
+    React__default.createElement(
+      Container,
+      null,
+      layout()
+    )
+  );
+};
+
+export default TemplateNormal;

package/dist/esm/ThumbnailCard.js

@@ -0,0 +1,52 @@
+import React__default from 'react';
+import Media from 'react-bootstrap/Media';
+import urlFor from './urlFor.js';
+import { L as LazyLoad } from './index-755f2cc2.js';
+import { c as clean_html_1 } from './entities-932b50cf.js';
+import './slicedToArray-ca2c8b8d.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-fdf034f5.js';
+import './core.get-iterator-method-e903ff31.js';
+import './index-0dbff1d1.js';
+import 'react-dom';
+import 'prop-types';
+
+var ThumbnailCard = function ThumbnailCard(_ref) {
+  var size = _ref.size,
+      mediaData = _ref.mediaData,
+      client = _ref.client,
+      defaultImage = _ref.defaultImage;
+
+
+  return React__default.createElement(
+    'div',
+    null,
+    mediaData && mediaData.map(function (item, index) {
+      return React__default.createElement(
+        Media,
+        { className: 'mb-3 thumbnail-card' },
+        React__default.createElement(
+          LazyLoad,
+          { height: size },
+          React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor({ client: client, source: item.thumbnail }) : defaultImage, alt: 'Generic placeholder' })
+        ),
+        React__default.createElement(
+          Media.Body,
+          null,
+          React__default.createElement(
+            'h5',
+            null,
+            item.title
+          ),
+          React__default.createElement(
+            'p',
+            null,
+            clean_html_1(item.summary)
+          )
+        )
+      );
+    })
+  );
+};
+
+export default ThumbnailCard;

package/dist/esm/Ustream.js

@@ -0,0 +1,150 @@
+import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-9716ae8d.js';
+import { _ as _slicedToArray } from './slicedToArray-ca2c8b8d.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { F as FaWindowClose } from './index.esm-1bd8a0a8.js';
+import { m as main_43 } from './main-1894c974.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './core.get-iterator-method-e903ff31.js';
+import './web.dom.iterable-fdf034f5.js';
+import './_library-528f1934.js';
+import './_iter-detect-f089461c.js';
+import './iconBase-ccc56b97.js';
+
+var _this = undefined;
+
+var Ustream = function Ustream(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === undefined ? '320px' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === undefined ? 'auto' : _ref$height,
+      _ref$close = _ref.close,
+      close = _ref$close === undefined ? false : _ref$close;
+      _ref.right;
+      var _ref$src = _ref.src,
+      src = _ref$src === undefined ? 'https://video.ibm.com/embed/23627444?volume=0&autoplay=true' : _ref$src,
+      _ref$logEvent = _ref.logEvent,
+      logEvent = _ref$logEvent === undefined ? function () {} : _ref$logEvent;
+
+  var _useState = useState(width),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentWidth = _useState2[0];
+      _useState2[1];
+
+  var _useState3 = useState(height),
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMuted = _useState6[0],
+      setIsMuted = _useState6[1];
+
+  var ustreamContainer = useRef(null);
+  var clickableLink = useRef(null);
+  var frameUrl = 'https://mjh-web.s3.amazonaws.com/_media/mwn_frame_v2.jpg';
+
+  function handleClose(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    ustreamContainer.current.remove();
+  }
+  useEffect(function () {
+    if (!main_43) {
+      try {
+        var container = document.getElementById('ustream-container');
+        var ustream = document.getElementById('ustream-iframe');
+        ustream.setAttribute('src', src);
+        var referrerUrl = window && window.location.hostname.replace('www.', '').replace('.com', '').replace('.net', '').replace('.vercel.app', '') || ';';
+        var mwnUrl = 'https://www.medicalworldnews.com/?utm_source=' + referrerUrl + '&utm_medium=web&utm_campaign=mwn&ultv=true';
+        clickableLink.current.href = mwnUrl;
+        if (close) {
+          var closeBtn = document.querySelector('.ustream-close');
+          closeBtn.addEventListener('click', function () {
+            container.remove();
+          });
+        }
+      } catch (err) {}
+    }
+  }, []);
+
+  useEffect(function () {
+    if (isMuted && !main_43) {
+      var loadUstreamListener = function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+          var UstreamEmbed, viewer, reporting;
+          return regenerator.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return import('./ustream-api-41166338.js');
+
+                case 2:
+                  UstreamEmbed = _context.sent;
+                  viewer = UstreamEmbed('ustream-iframe');
+                  reporting = setInterval(function () {
+                    viewer.getProperty('volume', function (content) {
+                      if (content > 0) {
+                        logEvent({ category: 'Ustream Unmute', action: 'Unmute Ustream Widget', label: 'Unmute Ustream Widget' });
+                        setIsMuted(false);
+                        clearInterval(reporting);
+                      }
+                    });
+                  }, 2000);
+
+                case 5:
+                case 'end':
+                  return _context.stop();
+              }
+            }
+          }, _callee, _this);
+        }));
+
+        return function loadUstreamListener() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      loadUstreamListener();
+    }
+  }, [isMuted]);
+  //return nothing if mobile
+  if (main_43) {
+    return null;
+  }
+
+  return React__default.createElement(
+    'div',
+    {
+      id: 'ustream-container',
+      ref: ustreamContainer,
+      style: { width: '' + currentWidth, position: 'fixed', bottom: '2rem', left: '2rem', zIndex: '999999', boxShadow: '2px 4px 8px rgba(0,0,0,.35)', borderRadius: '5px', overflow: 'hidden' } },
+    React__default.createElement(
+      'a',
+      { ref: clickableLink, target: '_blank', href: '' },
+      React__default.createElement(FaWindowClose, { style: { position: 'absolute', top: '0', right: '0', width: '22px', height: '20px', color: '#fff', background: '#000', padding: '2px' }, onClick: function onClick(e) {
+          return handleClose(e);
+        } }),
+      React__default.createElement('img', { src: frameUrl, style: { width: '100%' } }),
+      React__default.createElement(
+        'div',
+        { style: { position: 'absolute', top: '48px', left: '26px', width: '272px' } },
+        React__default.createElement(
+          'div',
+          { style: { position: 'relative', width: '100%', paddingTop: '56.25%', overflow: 'hidden', borderRadius: '10px' } },
+          React__default.createElement('iframe', {
+            id: 'ustream-iframe',
+            webkitallowfullscreen: 'true',
+            allowFullScreen: true,
+            frameBorder: 'no',
+            style: { position: 'absolute', top: '0', bottom: '0', left: '0', right: '0', width: '100%', height: '100%', pointerEvents: 'none', borderRadius: '10px' }
+          })
+        )
+      )
+    )
+  );
+};
+
+var Ustream$1 = React__default.memo(Ustream);
+
+export default Ustream$1;

package/dist/esm/VerticalHero.js

@@ -0,0 +1,68 @@
+import React__default from 'react';
+import './moment-bc12cb97.js';
+import urlFor from './urlFor.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './slicedToArray-ca2c8b8d.js';
+import './web.dom.iterable-fdf034f5.js';
+import './core.get-iterator-method-e903ff31.js';
+import './index-0dbff1d1.js';
+
+var VerticalHero = function VerticalHero(props) {
+  var client = props.client;
+  var _props$heroTitle = props.heroTitle,
+      heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
+
+
+  return React__default.createElement(
+    'div',
+    { className: 'vertical-hero-container' },
+    React__default.createElement(
+      'div',
+      { className: 'vertical-hero-inner' },
+      React__default.createElement(
+        'div',
+        { className: 'hero-title' },
+        React__default.createElement(
+          'h2',
+          null,
+          heroTitle
+        )
+      ),
+      props.dataRecord.map(function (article, index) {
+        var articleThumbnail = '';
+        var articleAltText = article.title;
+        if (article.thumbnail && article.thumbnail.asset) {
+          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 });
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
+        return index === 0 ? React__default.createElement(
+          'a',
+          { href: '/view/' + article.url.current, key: index, className: 'vertical-article' },
+          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText }),
+          React__default.createElement(
+            'h2',
+            null,
+            article.title
+          )
+        ) : React__default.createElement(
+          'a',
+          { href: '/view/' + article.url.current, className: 'vertical-article' },
+          React__default.createElement(
+            'h2',
+            null,
+            article.title
+          )
+        );
+      })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        .vertical-hero-container {\n          display: flex;\n          flex-direction: row;\n          padding: 0.25rem;\n          justify-content: space-between;\n          width: 100%;\n          flex: 1 1 auto;\n        }\n        .hero-title h2 {\n          font-size: 1.2rem;\n          font-weight: bold;\n        }\n        .vertical-article {\n          display: block;\n        }\n        .vertical-article img {\n          width: 100%;\n          height: auto;\n          min-width: 200px;\n        }\n        .vertical-article h2 {\n          font-size: 0.9rem;\n          color: #252525;\n          font-weight: bold;\n          padding: 0.5rem 0.5rem 1rem;\n          margin: 0.5rem;\n          border-bottom: 1px solid #ccc;\n        }\n      '
+    )
+  );
+};
+
+export default VerticalHero;