@kids-reporter/draft-editor 0.1.0 → 0.2.0

package/lib/draft-converter/index.js

@@ -1,201 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _immutable = require("immutable");
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var InlineStylesProcessor = _interopRequireWildcard(require("./inline-styles-processor"));
-
-var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
-
-var _atomicBlockProcessor = _interopRequireDefault(require("./atomic-block-processor"));
-
-var _entities = _interopRequireDefault(require("./entities"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
-// 'use strict';
-let defaultBlockTagMap = {
-  atomic: `<div>%content%</div>`,
-  blockquote: `<blockquote>%content%</blockquote>`,
-  'code-block': `<code>%content%</code>`,
-  default: `<p>%content%</p>`,
-  'header-two': `<h2>%content%</h2>`,
-  'header-three': `<h3>%content%</h3>`,
-  'header-four': `<h4>%content%</h4>`,
-  'ordered-list-item': `<li>%content%</li>`,
-  paragraph: `<p>%content%</p>`,
-  'unordered-list-item': `<li>%content%</li>`,
-  unstyled: `<p>%content%</p>`
-};
-let inlineTagMap = {
-  BOLD: ['<strong>', '</strong>'],
-  CODE: ['<code>', '</code>'],
-  default: ['<span>', '</span>'],
-  ITALIC: ['<em>', '</em>'],
-  UNDERLINE: ['<u>', '</u>']
-};
-let defaultEntityTagMap = {
-  [_entities.default.DIVIDER.type]: ['<hr>', ''],
-  [_entities.default.ANNOTATION.type]: ['<abbr title="<%= data.body %>"><%= data.text %>', '</abbr>'],
-  [_entities.default.AUDIO.type]: ['<div class="audio-container center"><div class="audio-title"><%= data.name %></div><!-- <div class="audio-desc"><%= data.description %></div> --><audio src="<%= data.url %>" />', '</div>'],
-  [_entities.default.BLOCKQUOTE.type]: ['<blockquote class="center"><div><%= data.quote %></div><div><%= data.quotedBy %></div>', '<blockquote>'],
-  [_entities.default.EMBEDDEDCODE.type]: ['<div class="embedded <%= data.alignment %>" title="<%= data.caption %>"><%= data.code%>', '</div>'],
-  [_entities.default.INFOBOX.type]: ['<div class="info-box-container center"><div class="info-box-title"><%= data.title %></div><div class="info-box-body"><%= data.body %></div>', '</div>'],
-  [_entities.default.STOREDIMAGE.type]: ['<img alt="<%= data.name %>" src="<%= data.url %>" srcset="<%= data.urlMobileSized %> 800w,  <%= data.urlTabletSized %> 1280w, <%= data.urlDesktopSized %> 2400w" class="center">', '</img>'],
-  [_entities.default.IMAGE.type]: ['<img alt="<%=data.name%>" src="<%=data.url%>" srcset="<%= data.mobile.url %> 800w,  <%= data.tablet.url %> 1280w, <%= data.desktop.url %> 2400w" class="center">', '</img>'],
-
-  /*[ENTITY.IMAGEDIFF.type]: ['<!-- imageDiff component start --> <ol class="image-diff-container"> <% _.forEach(data, function(image, index) { if (index > 1) { return; } %><li class="image-diff-item"><img src="<%- image.url %>" /></li><% }); %>', '</ol><!-- imageDiff component end-->'],
-  [ENTITY.IMAGELINK.type]: ['<img alt="<%= data.description %>" src="<%= data.url %>" class="<%= data.alignment %>">', '</img>'],*/
-  [_entities.default.LINK.type]: ['<a target="_blank" href="<%= data.url %>">', '</a>'],
-  [_entities.default.SLIDESHOW.type]: ['<!-- slideshow component start --> <ol class="slideshow-container"> <%  _.forEach(data, function(image) { %><li class="slideshow-slide"><img alt="<%- image.name %>" src="<%- image.url %>" srcset="<%= image.mobile.url %> 800w,  <%= image.tablet.url %> 1280w, <%= image.desktop.url %> 2400w" /></li><% }); %>', '</ol><!-- slideshow component end -->'],
-  [_entities.default.VIDEO.type]: ['<div controls class="video-container <%= data.alignment %>"><div class="video-name"><%= data.title %></div><div class="video-desc"><%= data.description %></div><video src="<%= data.url %>" />', '</div>'],
-  [_entities.default.YOUTUBE.type]: ['<iframe width="560" alt="<%= data.description %>" height="315" src="https://www.youtube.com/embed/<%= data.id %>" frameborder="0" allowfullscreen>', '</iframe>']
-};
-let nestedTagMap = {
-  'ordered-list-item': ['<ol>', '</ol>'],
-  'unordered-list-item': ['<ul>', '</ul>']
-};
-
-function _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap) {
-  return blockTagMap[block.type] ? blockTagMap[block.type].replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block)) : blockTagMap.default.replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, block));
-}
-
-function _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap) {
-  let html = '';
-  let nestLevel = []; // store the list type of the previous item: null/ol/ul
-
-  blocks.forEach(block => {
-    // create tag for <ol> or <ul>: deal with ordered/unordered list item
-    // if the block is a list-item && the previous block is not a list-item
-    if (nestedTagMap[block.type] && nestLevel[0] !== block.type) {
-      html += nestedTagMap[block.type][0]; // start with <ol> or <ul>
-
-      nestLevel.unshift(block.type);
-    } // end tag with </ol> or </ul>: deal with ordered/unordered list item
-
-
-    if (nestLevel.length > 0 && nestLevel[0] !== block.type) {
-      html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
-    }
-
-    html += _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap);
-  }); // end tag with </ol> or </ul>: or if it is the last block
-
-  if (blocks.length > 0 && nestedTagMap[blocks[blocks.length - 1].type]) {
-    html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
-  }
-
-  return html;
-}
-
-function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
-  let apiDataArr = (0, _immutable.List)();
-  let content = [];
-  let nestLevel = [];
-  blocks.forEach(block => {
-    // block is not a list-item
-    if (!nestedTagMap[block.type]) {
-      // if previous block is a list-item
-      if (content.length > 0 && nestLevel.length > 0) {
-        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
-          type: nestLevel[0],
-          content: [content]
-        }));
-        content = [];
-        nestLevel.shift();
-      }
-
-      if (block.type.startsWith('atomic') || block.type.startsWith('media')) {
-        try {
-          apiDataArr = apiDataArr.push(_atomicBlockProcessor.default.convertBlock(entityMap, block));
-        } catch (e) {
-          console.error(e);
-        }
-      } else {
-        var _block$data;
-
-        let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
-        const type = block.type;
-        const textAlign = (_block$data = block.data) === null || _block$data === void 0 ? void 0 : _block$data.textAlign;
-        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
-          id: block.key,
-          type,
-          content: [converted],
-          textAlign
-        }));
-      }
-    } else {
-      let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
-
-      if (nestLevel.length === 0) {
-        nestLevel.unshift(block.type);
-        content.push(converted);
-      } else if (nestLevel[0] === block.type) {
-        // previous block is a item-list and current block is the same item-list
-        content.push(converted);
-      } else if (nestLevel[0] !== block.type) {
-        // previous block is a different item-list.
-        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
-          id: block.key,
-          type: nestLevel[0],
-          content: [content]
-        }));
-        content = [converted];
-        nestLevel[0] = block.type;
-      }
-    }
-  }); // last block is a item-list
-
-  if (blocks.length > 0 && nestLevel.length > 0) {
-    let block = blocks[blocks.length - 1];
-    apiDataArr = apiDataArr.push(new _apiDataInstance.default({
-      id: block.key,
-      type: block.type,
-      content: content
-    }));
-  }
-
-  return apiDataArr;
-}
-
-function convertRawToHtml(raw, blockTagMap, entityTagMap) {
-  blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
-  entityTagMap = entityTagMap || defaultEntityTagMap;
-  let html = '';
-  raw = raw || {};
-  const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
-  const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
-  html = _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap);
-  return html;
-}
-
-function convertRawToApiData(raw) {
-  let apiData;
-  raw = raw || {};
-  const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
-  const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
-
-  let entityTagMap = _lodash.default.merge({}, defaultEntityTagMap, {
-    [_entities.default.ANNOTATION.type]: [`<span data-entity-type="annotation" data-annotation-body="<%= data.bodyEscapedHTML %>">`, '</span>']
-  });
-
-  apiData = convertBlocksToApiData(blocks, entityMap, entityTagMap);
-  return apiData;
-}
-
-var _default = {
-  convertToHtml: convertRawToHtml,
-  convertToApiData: convertRawToApiData
-};
-exports.default = _default;

package/lib/draft-converter/inline-styles-processor.js

@@ -1,236 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.convertToHtml = convertToHtml;
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _const = require("../const");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
-function tagForCustomInlineStyle(style) {
-  const customInlineStylePrefixs = [_const.CUSTOM_STYLE_PREFIX_FONT_COLOR, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR];
-  const stylePrefix = customInlineStylePrefixs.find(prefix => style.startsWith(prefix));
-  let tag, value;
-
-  switch (stylePrefix) {
-    case _const.CUSTOM_STYLE_PREFIX_FONT_COLOR:
-      value = style.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
-      tag = [`<span style="color: ${value}">`, '</span>'];
-      break;
-
-    case _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR:
-      value = style.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
-      tag = [`<span style="background-color: ${value}">`, '</span>'];
-      break;
-
-    default:
-      break;
-  }
-
-  return tag;
-}
-
-function _fullfilIntersection(block) {
-  // SORT BEFORE PROCESSING
-  let sortedISRanges = _lodash.default.sortBy(block.inlineStyleRanges, 'offset');
-
-  let sortedEntityRanges = _lodash.default.sortBy(block.entityRanges, 'offset');
-
-  let splitedISInline = [];
-
-  for (let i = 0; i < sortedEntityRanges.length; i++) {
-    let entityRange = sortedEntityRanges[i];
-
-    for (let j = 0; j < sortedISRanges.length; j++) {
-      let entityOffset = _lodash.default.get(entityRange, 'offset', 0);
-
-      let entityLength = _lodash.default.get(entityRange, 'length', 0);
-
-      let inlineLength = _lodash.default.get(sortedISRanges, [j, 'length'], 0);
-
-      let inlineOffset = _lodash.default.get(sortedISRanges, [j, 'offset'], 0);
-
-      let inlineStyle = _lodash.default.get(sortedISRanges, [j, 'style'], '');
-
-      let nextEntityOffset = _lodash.default.get(sortedEntityRanges, [i + 1, 'offset'], 0);
-
-      let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0); // handle intersections of inline style and entity
-      // <a></a> is entity
-      // <abbr></abbr> is next entity
-      // <strong></strong>  is inline style
-
-
-      if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength && // <a><strong></a></strong>
-      entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
-        // <strong><abbr></strong></abbr>
-        // situation: <a><strong></a><abbr></strong></abbr>
-        // should be: <a><strong></strong></a><strong></strong><abbr><strong></strong></abbr>
-        // skip next entity checking
-        i = i + 1;
-        splitedISInline.push({
-          index: j,
-          replace: [{
-            length: entityOffset + entityLength - inlineOffset,
-            offset: inlineOffset,
-            style: inlineStyle
-          }, {
-            length: nextEntityOffset - (entityOffset + entityLength),
-            offset: entityOffset + entityLength,
-            style: inlineStyle
-          }, {
-            length: inlineOffset + inlineLength - nextEntityOffset,
-            offset: nextEntityOffset,
-            style: inlineStyle
-          }]
-        });
-      } else if (entityOffset >= inlineOffset && entityOffset < inlineOffset + inlineLength && entityOffset + entityLength > inlineOffset + inlineLength) {
-        // situation: <strong><a></strong></a>
-        // should be: <strong></strong><a><strong></strong></a>
-        splitedISInline.push({
-          index: j,
-          replace: [{
-            length: entityOffset - inlineOffset,
-            offset: inlineOffset,
-            style: inlineStyle
-          }, {
-            length: inlineOffset + inlineLength - entityOffset,
-            offset: entityOffset,
-            style: inlineStyle
-          }]
-        });
-      } else if (entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
-        // situation: <a><strong></a></strong>
-        // should be: <a><strong></strong></a><strong></strong>
-        splitedISInline.push({
-          index: j,
-          replace: [{
-            length: entityOffset + entityLength - inlineOffset,
-            offset: inlineOffset,
-            style: inlineStyle
-          }, {
-            length: inlineOffset + inlineLength - entityOffset - entityLength,
-            offset: entityOffset + entityLength,
-            style: inlineStyle
-          }]
-        });
-      }
-    }
-  }
-
-  _lodash.default.forEachRight(splitedISInline, ele => {
-    sortedISRanges.splice(ele.index, 1, ...ele.replace);
-  });
-
-  return sortedISRanges;
-}
-
-function _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap = {}) {
-  // SORT BEFORE PROCESSING
-  let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset'); // map all the tag insertions we're going to do
-
-
-  sortedRanges.forEach(function (range) {
-    let tag = inlineTagMap[range.style]; // handle dynamic inline style
-
-    if (!tag) {
-      tag = tagForCustomInlineStyle(range.style);
-    }
-
-    if (!tagInsertMap[range.offset]) {
-      tagInsertMap[range.offset] = [];
-    } // add starting tag to the end of the array to form the tag nesting
-
-
-    tagInsertMap[range.offset].push(tag[0]);
-
-    if (tag[1]) {
-      if (!tagInsertMap[range.offset + range.length]) {
-        tagInsertMap[range.offset + range.length] = [];
-      } // add closing tags to start of array, otherwise tag nesting will be invalid
-
-
-      tagInsertMap[range.offset + range.length].unshift(tag[1]);
-    }
-  });
-  return tagInsertMap;
-}
-
-function _entityTag(entityTagMap, entityMap, entityRanges, tagInsertMap = {}) {
-  _lodash.default.forEach(entityRanges, range => {
-    let entity = entityMap[range.key];
-    let type = entity.type && entity.type.toUpperCase();
-    let tag = entityTagMap[type];
-    let data = entity.data;
-
-    let compiledTag0 = _lodash.default.template(tag[0], {
-      variable: 'data'
-    })(data);
-
-    let compiledTag1 = _lodash.default.template(tag[1], {
-      variable: 'data'
-    })(data);
-
-    if (!tagInsertMap[range.offset]) {
-      tagInsertMap[range.offset] = [];
-    } // add starting tag
-
-
-    tagInsertMap[range.offset].push(compiledTag0);
-
-    if (tag[1]) {
-      if (!tagInsertMap[range.offset + range.length]) {
-        tagInsertMap[range.offset + range.length] = [];
-      } // add closing tags to start of array, otherwise tag nesting will be invalid
-
-
-      tagInsertMap[range.offset + range.length].unshift(compiledTag1);
-    }
-  });
-
-  return tagInsertMap;
-}
-
-function convertToHtml(inlineTagMap, entityTagMap, entityMap, block) {
-  //  exit if there is no inlineStyleRanges/entityRanges or length === 0 as well
-  if (!block.inlineStyleRanges && !block.entityRanges || block.inlineStyleRanges.length === 0 && block.entityRanges.length === 0) {
-    return block.text;
-  }
-
-  let html = block.text;
-
-  let inlineStyleRanges = _fullfilIntersection(block);
-
-  let tagInsertMap = {};
-  tagInsertMap = _entityTag(entityTagMap, entityMap, block.entityRanges, tagInsertMap);
-  tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap); // sort on position, as we'll need to keep track of offset
-
-  let orderedKeys = Object.keys(tagInsertMap).sort(function (a, b) {
-    a = Number(a);
-    b = Number(b);
-
-    if (a > b) {
-      return 1;
-    }
-
-    if (a < b) {
-      return -1;
-    }
-
-    return 0;
-  }); // insert tags into string, keep track of offset caused by our text insertions
-
-  let offset = 0;
-  orderedKeys.forEach(function (pos) {
-    let index = Number(pos);
-    tagInsertMap[pos].forEach(function (tag) {
-      html = html.substr(0, offset + index) + tag + html.substr(offset + index);
-      offset += tag.length;
-    });
-  });
-  return html;
-}

package/lib/entity-decorator.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _draftJs = require("draft-js");
-
-var _draftRenderer = _interopRequireDefault(require("@kids-reporter/draft-renderer"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  annotationDecorator,
-  linkDecorator
-} = _draftRenderer.default.entityDecorators;
-const decorators = new _draftJs.CompositeDecorator([annotationDecorator, linkDecorator]);
-var _default = decorators;
-exports.default = _default;

package/lib/modifier.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modifier = void 0;
-
-var _draftJs = require("draft-js");
-
-var _immutable = require("immutable");
-
-const Modifier = { ..._draftJs.Modifier
-};
-/* 
-    This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
-    For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
-    To prevent any nested specific inline style got rendered after the outer inline style being removed, 
-    clear all specific inline styles when custom inline style is applied or removed.
-
-    Since getCurrentInlineStyle only return the inline style the starting position contains,
-    loop through all char of blocks to remove all nested inline styles.
-
-    Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
-  */
-
-exports.Modifier = Modifier;
-
-Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
-  const blockMap = contentState.getBlockMap();
-  const startKey = selectionState.getStartKey();
-  const startOffset = selectionState.getStartOffset();
-  const endKey = selectionState.getEndKey();
-  const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
-
-  const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
-    let sliceStart;
-    let sliceEnd;
-
-    if (startKey === endKey) {
-      sliceStart = startOffset;
-      sliceEnd = endOffset;
-    } else {
-      sliceStart = blockKey === startKey ? startOffset : 0;
-      sliceEnd = blockKey === endKey ? endOffset : block.getLength();
-    }
-
-    let chars = block.getCharacterList();
-    let current;
-
-    while (sliceStart < sliceEnd) {
-      current = chars.get(sliceStart);
-      const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
-
-      if (inlineStyle) {
-        chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
-      }
-
-      sliceStart++;
-    }
-
-    return block.set('characterList', chars);
-  });
-  return contentState.merge({
-    blockMap: blockMap.merge(newBlocks),
-    selectionBefore: selectionState,
-    selectionAfter: selectionState
-  });
-};

package/lib/theme/index.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.theme = exports.mediaSize = exports.default = void 0;
-const mediaSize = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 960,
-  xl: 1200,
-  xxl: 1400
-};
-exports.mediaSize = mediaSize;
-const theme = {
-  breakpoint: {
-    xs: `@media (min-width: ${mediaSize.xs}px)`,
-    sm: `@media (min-width: ${mediaSize.sm}px)`,
-    md: `@media (min-width: ${mediaSize.md}px)`,
-    lg: `@media (min-width: ${mediaSize.lg}px)`,
-    xl: `@media (min-width: ${mediaSize.xl}px)`,
-    xxl: `@media (min-width: ${mediaSize.xxl}px)`
-  },
-  fontSize: {
-    xs: 'font-size: 14px;',
-    sm: 'font-size: 16px;',
-    md: 'font-size: 18px;',
-    lg: 'font-size: 24px;',
-    xl: 'font-size: 28px;'
-  },
-  margin: {
-    default: 'margin: 32px auto;',
-    narrow: 'margin: 16px auto;'
-  }
-};
-exports.theme = theme;
-var _default = theme;
-exports.default = _default;