function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var addons = require('@storybook/addons');
var coreEvents = require('@storybook/core-events');
var api = require('@storybook/api');
var components = require('@storybook/components');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var emotionTheming = require('emotion-theming');

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

function getDomPath(el) {
  var stack = [];

  while (el.parentNode) {
    var sibCount = 0;
    var sibIndex = 0;

    for (var i = 0; i < el.parentNode.childNodes.length; i++) {
      var sib = el.parentNode.childNodes[i];

      if (sib.nodeName === el.nodeName) {
        if (sib === el) {
          sibIndex = sibCount;
        }

        sibCount++;
      }
    }

    if (el.hasAttribute('id') && el.id !== '') {
      stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
    } else if (el.classList.toString() !== '' && el.tagName !== 'BODY') {
      stack.unshift(el.nodeName.toLowerCase() + '.' + el.classList.toString());
    } else if (sibCount > 1) {
      stack.unshift(el.nodeName.toLowerCase() + ':eq(' + sibIndex + ')');
    } else {
      stack.unshift(el.nodeName.toLowerCase());
    }

    el = el.parentNode;
  }

  var toFilter = ['html', 'body', 'div#root'];
  return stack.filter(function (el) {
    return !toFilter.includes(el);
  }).join(' > ');
}

var getElements = function getElements(container, tag) {
  return Array.from(container.querySelectorAll(tag));
};

var getStylesheetRules = function getStylesheetRules(sheets, k) {
  try {
    var rules = sheets[k].rules || sheets[k].cssRules;
    return rules;
  } catch (e) {
    return [];
  }
};

var getNodeName = function getNodeName(el) {
  return el.nodeName === 'A' ? 'a' : el.nodeName === 'BUTTON' ? 'button' : el.nodeName.toLowerCase() + "[role=\"button\"]";
};

var getActiveStyles = function getActiveStyles(container, el) {
  var sheets = container.styleSheets;
  var result = [];
  var activeRegex = /:active$/;
  Object.keys(sheets).forEach(function (k) {
    getStylesheetRules(sheets, k).forEach(function (rule) {
      if (!rule) return;
      if (!rule.selectorText || !rule.selectorText.match(activeRegex)) return;
      var ruleNoPseudoClass = rule.selectorText.replace(activeRegex, '');

      try {
        if (el.matches(ruleNoPseudoClass)) {
          result.push(rule);
        }
      } catch (e) {}
    });
  });
  return result.length ? result : null;
};
var getActiveWarnings = function getActiveWarnings(container) {
  var buttons = getElements(container, 'button').concat(getElements(container, '[role="button"]'));
  var links = getElements(container, 'a');
  return buttons.concat(links).map(function (el) {
    return [el, getActiveStyles(container, el)];
  }).filter(function (tup) {
    return tup[1];
  }).map(function (_ref) {
    var el = _ref[0];
    return {
      type: getNodeName(el),
      text: el.innerText,
      html: el.innerHTML,
      path: getDomPath(el)
    };
  });
};
var getTapHighlightWarnings = function getTapHighlightWarnings(container) {
  var buttons = getElements(container, 'button').concat(getElements(container, '[role="button"]'));
  var links = getElements(container, 'a');

  var filterActiveStyles = function filterActiveStyles(el) {
    var tapHighlight = getComputedStyle(el)['-webkit-tap-highlight-color'];
    if (tapHighlight === 'rgba(0, 0, 0, 0)') return true;
  };

  return buttons.concat(links).filter(filterActiveStyles).map(function (el) {
    return {
      type: getNodeName(el),
      text: el.innerText,
      html: el.innerHTML,
      path: getDomPath(el)
    };
  });
};
var maxWidth = 600;
var getSrcsetWarnings = function getSrcsetWarnings(container) {
  var images = getElements(container, 'img');
  var warnings = images.filter(function (img) {
    var src = img.getAttribute('src');
    var srcSet = img.getAttribute('srcset');
    if (srcSet || !src) return false;
    var isSVG = Boolean(src.match(/svg$/));
    if (isSVG) return false;
    var isLarge = parseInt(getComputedStyle(img).width, 10) > maxWidth || img.naturalWidth > maxWidth;
    if (!isLarge) return false;
    return true;
  }).map(function (img) {
    return {
      src: img.src,
      path: getDomPath(img),
      alt: img.alt
    };
  });
  return warnings;
};
var getBackgroundImageWarnings = function getBackgroundImageWarnings(container) {
  var backgroundImageRegex = /url\(".*?(.png|.jpg|.jpeg)"\)/;
  var elsWithBackgroundImage = getElements(container, '#root *').filter(function (el) {
    var style = getComputedStyle(el);

    if (style['background-image'] && backgroundImageRegex.test(style['background-image']) && el.clientWidth > 200) {
      return true;
    }
  });
  if (!elsWithBackgroundImage.length) return [];
  var styleDict = new Map();
  var sheets = container.styleSheets;
  Object.keys(sheets).forEach(function (k) {
    getStylesheetRules(sheets, k).forEach(function (rule) {
      if (!rule) return;

      try {
        elsWithBackgroundImage.forEach(function (el) {
          if (el.matches(rule.selectorText)) {
            styleDict.set(el, (styleDict.get(el) || []).concat(rule));
          }
        });
      } catch (e) {}
    });
  });
  var responsiveBackgroundImgRegex = /-webkit-min-device-pixel-ratio|min-resolution|image-set/;
  var filteredEls = [].concat(styleDict.entries()).map(function (_ref2) {
    var el = _ref2[0],
        styles = _ref2[1];
    if (!styles) return false;
    var requiresResponsiveWarning = styles.reduce(function (acc, curr) {
      if (acc === false) return acc;
      if (responsiveBackgroundImgRegex.test(curr)) return false;
      return true;
    }, true);
    return requiresResponsiveWarning ? el : false;
  }).filter(Boolean).map(function (el) {
    var bg = getComputedStyle(el).backgroundImage;
    var src = bg.match(/url\("(.*)"\)/) ? bg.match(/url\("(.*)"\)/)[1] : undefined;
    return {
      path: getDomPath(el),
      src: src
    };
  });
  return filteredEls;
};
var textInputs = ['text', 'search', 'tel', 'url', 'email', 'number', 'password'];

var attachLabels = function attachLabels(inputs, container) {
  return inputs.map(function (input) {
    var labelText = '';

    if (input.labels && input.labels[0]) {
      labelText = input.labels[0].innerText;
    } else if (input.parentElement.nodeName === 'LABEL') labelText = input.parentElement.innerText;else if (input.id) {
      var label = container.querySelector("label[for=\"" + input.id + "\"]");
      if (label) labelText = label.innerText;
    }

    return {
      path: getDomPath(input),
      labelText: labelText,
      type: input.type
    };
  });
};

var getAutocompleteWarnings = function getAutocompleteWarnings(container) {
  var inputs = getElements(container, 'input');
  var warnings = inputs.filter(function (input) {
    var currentType = input.getAttribute('type');
    var autocomplete = input.getAttribute('autocomplete');

    if (textInputs.find(function (type) {
      return currentType === type;
    }) && !autocomplete) {
      return true;
    }

    return false;
  });
  return attachLabels(warnings, container);
};
var getInputTypeNumberWarnings = function getInputTypeNumberWarnings(container) {
  var inputs = getElements(container, 'input[type="number"]');
  return attachLabels(inputs);
};
var getOriginalStyles = function getOriginalStyles(container, el) {
  var sheets = container.styleSheets;
  var result = [];
  Object.keys(sheets).forEach(function (k) {
    getStylesheetRules(sheets, k).forEach(function (rule) {
      if (!rule) return;

      try {
        if (el.matches(rule.selectorText)) {
          result.push(rule);
        }
      } catch (e) {}
    });
  });
  return result.length ? result : null;
};
var get100vhWarning = function get100vhWarning(container) {
  return getElements(container, '#root *').map(function (el) {
    var styles = getOriginalStyles(container, el);
    if (!styles) return false;
    var hasVHWarning = styles.find(function (style) {
      return /100vh/.test(style.cssText);
    });
    if (hasVHWarning) return {
      el: el,
      css: hasVHWarning.cssText
    };
    return null;
  }).filter(Boolean).map(function (data) {
    return _extends(_extends({}, data), {}, {
      path: getDomPath(data.el)
    });
  });
};
var getInputTypeWarnings = function getInputTypeWarnings(container) {
  var inputs = getElements(container, 'input[type="text"]').concat(getElements(container, 'input:not([type])')).filter(function (input) {
    return !input.getAttribute('inputmode');
  });
  return attachLabels(inputs, container);
};

var isInside = function isInside(dangerZone, boundingBox) {
  return boundingBox.top <= dangerZone.bottom && boundingBox.bottom >= dangerZone.top && boundingBox.left <= dangerZone.right && boundingBox.right >= dangerZone.left;
};

var getTouchTargetSizeWarning = function getTouchTargetSizeWarning(_ref3) {
  var container = _ref3.container,
      minSize = _ref3.minSize,
      recommendedDistance = _ref3.recommendedDistance;
  var els = getElements(container, 'button').concat(getElements(container, '[role="button"]')).concat(getElements(container, 'a')).map(function (el) {
    return [el, el.getBoundingClientRect()];
  });
  var suspectEls = new Set([].concat(els));
  var elsWithClose = els.map(function (_ref4) {
    var el1 = _ref4[0],
        bounding1 = _ref4[1];
    var dangerZone = {
      top: bounding1.top - recommendedDistance,
      left: bounding1.left - recommendedDistance,
      right: bounding1.right + recommendedDistance,
      bottom: bounding1.bottom + recommendedDistance
    };
    var close = Array.from(suspectEls).filter(function (_ref5) {
      var el = _ref5[0],
          boundingBox = _ref5[1];
      if (el === el1) return false;

      if (isInside(dangerZone, boundingBox)) {
        return el;
      }

      return false;
    });
    return {
      close: close ? close : null,
      el: el1,
      boundingBox: bounding1
    };
  });
  var underMinSize = elsWithClose.filter(function (_ref6) {
    var _ref6$boundingBox = _ref6.boundingBox,
        width = _ref6$boundingBox.width,
        height = _ref6$boundingBox.height;
    return width < minSize || height < minSize;
  });
  var tooClose = elsWithClose.filter(function (_ref7) {
    var close = _ref7.close;
    return close && close.length;
  });

  var present = function present(_ref8) {
    var el = _ref8.el,
        _ref8$boundingBox = _ref8.boundingBox,
        width = _ref8$boundingBox.width,
        height = _ref8$boundingBox.height,
        close = _ref8.close;
    return {
      type: el.nodeName === 'A' ? 'a' : el.nodeName === 'BUTTON' ? 'button' : el.nodeName.toLowerCase() + "[role=\"button\"]",
      path: getDomPath(el),
      text: el.innerText,
      html: el.innerHTML,
      width: Math.floor(width),
      height: Math.floor(height),
      close: close
    };
  };

  return {
    underMinSize: underMinSize.map(present),
    tooClose: tooClose.map(present)
  };
};

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n  padding: 0.75rem;\n  grid-column: 1 / -1;\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));\n\n  font-size: ", "px;\n\n  p {\n    line-height: 1.4;\n  }\n\n  h3 {\n    font-size: ", "px;\n    font-weight: bold;\n    margin-bottom: 0.5rem;\n    margin-top: 0;\n  }\n\n  code {\n    background: hsla(0, 0%, 50%, 0.1);\n    border-radius: 3px;\n  }\n\n  summary {\n    cursor: pointer;\n    display: block;\n    margin-right: 1rem;\n    padding: 0.2rem 0.3rem;\n    border-radius: 5px;\n    color: ", ";\n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px ", ";\n    }\n  }\n\n  ul {\n    padding-left: 1.25rem;\n    max-height: 12rem;\n    overflow: auto;\n    padding-bottom: 0.5rem;\n    li {\n      margin-bottom: 0.3rem;\n    }\n  }\n  a {\n    text-decoration: none;\n    color: ", ";\n    &:hover {\n      border-bottom: 1px solid ", ";\n    }\n  }\n  > div {\n    border-bottom: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  ", ";\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n  height: 4rem;\n  width: auto;\n  max-width: 100%;\n  background-color: hsla(0, 0%, 0%, 0.2);\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  padding-top: 0.25rem;\n  height: 2rem;\n  min-width: 1rem;\n  width: auto;\n  background-color: hsla(0, 0%, 50%, 0.1);\n  border-radius: 3px;\n  li {\n    list-style-type: none;\n  }\n  img,\n  svg {\n    max-height: 2rem !important;\n    min-height: 1rem !important;\n    width: auto !important;\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n  background-color: hsla(214, 92%, 45%, 0.1);\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: hsl(41, 100%, 92%);\n  ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var recommendedSize = 48;
var minSize = 32;
var recommendedDistance = 8;
var accessibleBlue = '#0965df';
var warning = '#bd4700';
var tagStyles = "\n  padding: .25rem .5rem;\n  font-weight: bold;\n  display:inline-block;\n  border-radius: 10px;\n  margin-bottom: 1rem;\n  svg {\n    margin-right: .25rem;\n    display: inline-block;\n    height: .7rem;\n    line-height: 1;\n    position: relative;\n    top: .03rem;\n    letter-spacing: .01rem;\n  }\n";
var StyledWarningTag = styled__default.div(_templateObject(), warning, tagStyles);

var Warning = function Warning() {
  return /*#__PURE__*/React.createElement(StyledWarningTag, null, /*#__PURE__*/React.createElement("svg", {
    "aria-hidden": "true",
    focusable: "false",
    role: "img",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 576 512"
  }, /*#__PURE__*/React.createElement("path", {
    fill: "currentColor",
    d: "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
  })), "warning");
};

var StyledInfoTag = styled__default.div(_templateObject2(), tagStyles, accessibleBlue);

var Hint = function Hint() {
  return /*#__PURE__*/React.createElement(StyledInfoTag, null, /*#__PURE__*/React.createElement("svg", {
    "aria-hidden": "true",
    focusable: "false",
    "data-prefix": "fas",
    "data-icon": "magic",
    role: "img",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 512 512",
    className: "svg-inline--fa fa-magic fa-w-16 fa-5x"
  }, /*#__PURE__*/React.createElement("path", {
    fill: "currentColor",
    d: "M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z",
    className: ""
  })), "hint");
};

var Spacer = styled__default.div(_templateObject3());
var StyledTappableContents = styled__default.div(_templateObject4());
var DemoImg = styled__default.img(_templateObject5());
var ListEntry = styled__default.li(_templateObject6(), function (props) {
  return props.nostyle ? 'list-style-type: none;' : '';
});
var Container = styled__default.div(_templateObject7(), function (props) {
  return props.theme.typography.size.s2;
}, function (props) {
  return props.theme.typography.size.s2;
}, accessibleBlue, function (props) {
  return props.theme.color.mediumlight;
}, accessibleBlue, accessibleBlue, function (props) {
  return props.theme.color.medium;
}, function (props) {
  return props.theme.color.medium;
});
var StyledBanner = styled__default.div(_templateObject8());
var fixText = 'Learn more';

var ActiveWarnings = function ActiveWarnings(_ref) {
  var warnings = _ref.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Hint, null), /*#__PURE__*/React.createElement("h3", null, /*#__PURE__*/React.createElement("code", null, ":active"), " styles on iOS"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("code", null, ":active"), " styles will only appear in iOS", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari"
  }, "if a touch listener is added to the element or one of its ancestors"), ". Once activated in this manner, ", /*#__PURE__*/React.createElement("code", null, ":active"), " styles (along with", ' ', /*#__PURE__*/React.createElement("code", null, ":hover"), " styles) will be applied immediately in iOS when a user taps, possibly creating a confusing UX. (On Android,", ' ', /*#__PURE__*/React.createElement("code", null, ":active"), " styles are applied with a slight delay to allow the user to use gestures like scroll without necessarily activating", ' ', /*#__PURE__*/React.createElement("code", null, ":active"), " styles.)"), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, w.type), " with content", ' ', w.text ? /*#__PURE__*/React.createElement("b", null, w.text) : w.html ? /*#__PURE__*/React.createElement(StyledTappableContents, {
      dangerouslySetInnerHTML: {
        __html: w.html
      }
    }) : '[no text found]');
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("p", {
    style: {
      marginTop: '1rem'
    }
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490"
  }, "Relevant Stack Overflow thread"))));
};

var TapWarnings = function TapWarnings(_ref2) {
  var warnings = _ref2.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Hint, null), /*#__PURE__*/React.createElement("h3", null, "Tap style removed from tappable element"), /*#__PURE__*/React.createElement("p", null, "These elements have an invisible", ' ', /*#__PURE__*/React.createElement("code", null, "-webkit-tap-highlight-color"), ". While this might be intentional, please verify that they have appropriate tap indication styles added through other means."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, w.type), " with content", ' ', w.text ? /*#__PURE__*/React.createElement("b", null, w.text) : w.html ? /*#__PURE__*/React.createElement(StyledTappableContents, {
      dangerouslySetInnerHTML: {
        __html: w.html
      }
    }) : '[no text found]');
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("p", null, "Some stylesheets remove the tap indication highlight shown on iOS and Android browsers by adding the code", ' ', /*#__PURE__*/React.createElement("code", null, "-webkit-tap-highlight-color: transparent"), ". In order to maintain a good mobile experience, tap styles should be added via appropriate ", /*#__PURE__*/React.createElement("code", null, ":active"), " CSS styles (though, note that", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari"
  }, /*#__PURE__*/React.createElement("code", null, ":active"), " styles work inconsistently in iOS"), ") , or via JavaScript on the ", /*#__PURE__*/React.createElement("code", null, "touchstart"), " event.")));
};

var AutocompleteWarnings = function AutocompleteWarnings(_ref3) {
  var warnings = _ref3.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Warning, null), /*#__PURE__*/React.createElement("h3", null, "Input with no ", /*#__PURE__*/React.createElement("code", null, "autocomplete"), " attribute"), /*#__PURE__*/React.createElement("p", null, "Most textual inputs should have an explicit ", /*#__PURE__*/React.createElement("code", null, "autocomplete"), ' ', "attribute."), /*#__PURE__*/React.createElement("p", null, "If you truly want to disable autocomplete, try using a", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164"
  }, "semantically valid but unique value rather than", ' ', /*#__PURE__*/React.createElement("code", null, "autocomplete=\"off\"")), ", which doesn't work in Chrome."), /*#__PURE__*/React.createElement("p", null, "Note: ", /*#__PURE__*/React.createElement("code", null, "autocomplete"), " is styled as ", /*#__PURE__*/React.createElement("code", null, "autoComplete"), ' ', "in JSX."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, "input type=\"", w.type, "\""), " and label", ' ', /*#__PURE__*/React.createElement("b", null, w.labelText || '[no label found]'));
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
    key: "1"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill"
  }, "Autocomplete documentation by Google")), /*#__PURE__*/React.createElement("li", {
    key: "2"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
  }, "Autocomplete documentation by Mozilla")))));
};

var InputTypeWarnings = function InputTypeWarnings(_ref4) {
  var warnings = _ref4.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Hint, null), /*#__PURE__*/React.createElement("h3", null, "Plain input type ", /*#__PURE__*/React.createElement("code", null, "text"), " detected"), /*#__PURE__*/React.createElement("p", null, "This will render the default text keyboard on mobile (which could very well be what you want!) If you haven't already, take a moment to make sure this is correct. You can use", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://better-mobile-inputs.netlify.com/"
  }, "this tool"), " to explore keyboard options."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, "input type=\"", w.type, "\""), " and label", ' ', /*#__PURE__*/React.createElement("b", null, w.labelText || '[no label found]'));
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
    href: "https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/"
  }, "Article reviewing the importance of using correct input types on the mobile web from CSS Tricks."))));
};

var InputTypeNumberWarnings = function InputTypeNumberWarnings(_ref5) {
  var warnings = _ref5.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Hint, null), /*#__PURE__*/React.createElement("h3", null, "Input type ", /*#__PURE__*/React.createElement("code", null, "number"), " detected"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("code", null, "<input type=\"text\" inputmode=\"decimal\"/>"), ' ', "could give you improved usability over", ' ', /*#__PURE__*/React.createElement("code", null, "<input type=\"number\" />"), "."), /*#__PURE__*/React.createElement("p", null, "Note: ", /*#__PURE__*/React.createElement("code", null, "inputmode"), " is styled as ", /*#__PURE__*/React.createElement("code", null, "inputMode"), " in JSX.", ' '), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, "input type=\"", w.type, "\""), " and label", ' ', /*#__PURE__*/React.createElement("b", null, w.labelText || '[no label found]'));
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
    href: "https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/"
  }, "Overview of the issues with", ' ', /*#__PURE__*/React.createElement("code", null, "input type=\"number\""), " from gov.uk."))));
};

var HeightWarnings = function HeightWarnings(_ref6) {
  var warnings = _ref6.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Hint, null), /*#__PURE__*/React.createElement("h3", null, "Usage of ", /*#__PURE__*/React.createElement("code", null, "100vh"), " CSS"), /*#__PURE__*/React.createElement("p", null, "Viewport units are", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html"
  }, "tricky on mobile."), ' ', "On some mobile browers, depending on scroll position, ", /*#__PURE__*/React.createElement("code", null, "100vh"), ' ', "might take up more than 100% of screen height due to browser chrome like the address bar."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (_ref7, i) {
    var path = _ref7.path;
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, path));
  })));
};

var BackgroundImageWarnings = function BackgroundImageWarnings(_ref8) {
  var warnings = _ref8.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Warning, null), /*#__PURE__*/React.createElement("h3", null, "Non-dynamic background image"), /*#__PURE__*/React.createElement("p", null, "Downloading larger-than-necessary images hurts performance for users on mobile. You can use", ' ', /*#__PURE__*/React.createElement("a", {
    href: "https://developer.mozilla.org/en-US/docs/Web/CSS/image-set"
  }, /*#__PURE__*/React.createElement("code", null, "image-set")), ' ', "to serve an appropriate background image based on the user's device resolution."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (_ref9, i) {
    var src = _ref9.src,
        alt = _ref9.alt;
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i,
      nostyle: true
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoImg, {
      src: src,
      alt: alt
    })));
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
    key: "1"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://css-tricks.com/responsive-images-css/"
  }, "Article discussing responsive background images in greater detail, including the interaction of ", /*#__PURE__*/React.createElement("code", null, "image-set"), " with media queries, from CSS Tricks.")))));
};

var SrcsetWarnings = function SrcsetWarnings(_ref10) {
  var warnings = _ref10.warnings;
  if (!warnings.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Warning, null), /*#__PURE__*/React.createElement("h3", null, "Large image without ", /*#__PURE__*/React.createElement("code", null, "srcset")), /*#__PURE__*/React.createElement("p", null, "Downloading larger-than-necessary images hurts performance for users on mobile. You can use ", /*#__PURE__*/React.createElement("code", null, "srcset"), " to customize image sizes for different device resolutions and sizes."), /*#__PURE__*/React.createElement("ul", null, warnings.map(function (_ref11, i) {
    var src = _ref11.src,
        alt = _ref11.alt;
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i,
      nostyle: true
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoImg, {
      src: src,
      alt: alt
    })));
  })), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
    key: "1"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://cloudfour.com/thinks/responsive-images-the-simple-way"
  }, "Summary of the why and how of responsive images")), /*#__PURE__*/React.createElement("li", {
    key: "2"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://www.responsivebreakpoints.com/"
  }, "A tool to generate responsive images")))));
};

var TouchTargetWarnings = function TouchTargetWarnings(_ref12) {
  var _ref12$warnings = _ref12.warnings,
      underMinSize = _ref12$warnings.underMinSize,
      tooClose = _ref12$warnings.tooClose;
  if (!underMinSize.length && !tooClose.length) return null;
  return /*#__PURE__*/React.createElement(Spacer, null, /*#__PURE__*/React.createElement(Warning, null), Boolean(underMinSize.length) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "Small touch target"), /*#__PURE__*/React.createElement("p", null, "With heights and/or widths of less than ", minSize, "px, these tappable elements could be difficult for users to press:"), /*#__PURE__*/React.createElement("ul", null, underMinSize.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, w.type), " with content", ' ', w.text ? /*#__PURE__*/React.createElement("b", null, w.text) : w.html ? /*#__PURE__*/React.createElement(StyledTappableContents, {
      dangerouslySetInnerHTML: {
        __html: w.html
      }
    }) : '[no text found]');
  }))), Boolean(tooClose.length) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    style: {
      marginTop: underMinSize.length ? '.5rem' : '0'
    }
  }, "Touch targets close together", ' '), /*#__PURE__*/React.createElement("p", null, "These tappable elements are less than ", recommendedDistance, "px from at least one other tappable element:"), /*#__PURE__*/React.createElement("ul", null, tooClose.map(function (w, i) {
    return /*#__PURE__*/React.createElement(ListEntry, {
      key: i
    }, /*#__PURE__*/React.createElement("code", null, w.type), " with content", ' ', w.text ? /*#__PURE__*/React.createElement("b", null, w.text) : w.html ? /*#__PURE__*/React.createElement(StyledTappableContents, {
      dangerouslySetInnerHTML: {
        __html: w.html
      }
    }) : '[no text found]');
  }))), /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, fixText), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
    key: "1"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://www.nngroup.com/articles/touch-target-size/"
  }, "Touch target size article from the Nielsen Norman Group")), /*#__PURE__*/React.createElement("li", {
    key: "2"
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://web.dev/accessible-tap-targets/"
  }, "Tap target size recommendations from Google"))), /*#__PURE__*/React.createElement("p", null)));
};

var convertToBool = function convertToBool(num) {
  return num > 0 ? 1 : 0;
};

var Wrapper = function Wrapper(_ref13) {
  var theme = _ref13.theme,
      children = _ref13.children;
  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React.createElement(Container, null, children));
};

var Hints = function Hints(_ref14) {
  var container = _ref14.container,
      theme = _ref14.theme,
      loading = _ref14.loading,
      running = _ref14.running;
  if (running) return /*#__PURE__*/React.createElement(Wrapper, {
    theme: theme
  }, /*#__PURE__*/React.createElement(StyledBanner, null, "Running scan..."));
  var warnings = {
    tapHighlight: getTapHighlightWarnings(container),
    active: getActiveWarnings(container),
    autocomplete: getAutocompleteWarnings(container),
    inputType: getInputTypeWarnings(container),
    touchTarget: getTouchTargetSizeWarning({
      container: container,
      minSize: minSize,
      recommendedSize: recommendedSize,
      recommendedDistance: recommendedDistance
    }),
    srcset: getSrcsetWarnings(container),
    backgroundImg: getBackgroundImageWarnings(container),
    height: get100vhWarning(container),
    inputTypeNumber: getInputTypeNumberWarnings(container)
  };
  var warningCount = Object.keys(warnings).map(function (key) {
    return warnings[key];
  }).reduce(function (acc, curr) {
    var count = Array.isArray(curr) ? convertToBool(curr.length) : Object.keys(curr).map(function (key) {
      return curr[key];
    }).reduce(function (acc, curr) {
      return acc + convertToBool(curr.length);
    }, 0);
    return acc + count;
  }, 0);
  React.useEffect(function () {
    var tab = Array.from(document.querySelectorAll('button[role="tab"]')).find(function (el) {
      return /^Mobile(\s\(\d+\))?$/.test(el.innerText);
    });

    if (tab) {
      if (warningCount === 0) {
        tab.innerText = 'Mobile';
      } else {
        tab.innerText = "Mobile (" + warningCount + ")";
      }
    }
  });
  if (!warningCount && !loading) return /*#__PURE__*/React.createElement(Wrapper, {
    theme: theme
  }, /*#__PURE__*/React.createElement(StyledBanner, null, "Looking good! No mobile hints available."));
  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(StyledBanner, null, loading ? 'Preliminary results shown, still scanning...' : 'Scan complete!'), /*#__PURE__*/React.createElement(TouchTargetWarnings, {
    warnings: warnings.touchTarget
  }), /*#__PURE__*/React.createElement(AutocompleteWarnings, {
    warnings: warnings.autocomplete
  }), /*#__PURE__*/React.createElement(InputTypeWarnings, {
    warnings: warnings.inputType
  }), /*#__PURE__*/React.createElement(InputTypeNumberWarnings, {
    warnings: warnings.inputTypeNumber
  }), /*#__PURE__*/React.createElement(HeightWarnings, {
    warnings: warnings.height
  }), /*#__PURE__*/React.createElement(TapWarnings, {
    warnings: warnings.tapHighlight
  }), /*#__PURE__*/React.createElement(ActiveWarnings, {
    warnings: warnings.active
  }), /*#__PURE__*/React.createElement(SrcsetWarnings, {
    warnings: warnings.srcset
  }), /*#__PURE__*/React.createElement(BackgroundImageWarnings, {
    warnings: warnings.backgroundImg
  })));
};

var Hints$1 = emotionTheming.withTheme(Hints);

var ADDON_ID = 'mobile-hints';
var PARAM_KEY = 'mobile-hints';
var PANEL_ID = ADDON_ID + "/panel";
var viewportId = 'storybook/viewport';
var noViewport = 'reset';
var defaultViewport = 'mobile1';

var ViewportManager = function ViewportManager(_ref) {
  var active = _ref.active;

  var _useAddonState = api.useAddonState(viewportId),
      viewportState = _useAddonState[0],
      setViewportState = _useAddonState[1];

  var cachedState = React.useRef(null);
  React.useEffect(function () {
    if (cachedState.current && !active) {
      setViewportState({
        selected: cachedState.current
      });
      cachedState.current = null;
    } else {
      if (active && (!viewportState || viewportState.selected === noViewport)) {
        cachedState.current = noViewport;
        setViewportState({
          selected: defaultViewport
        });
      }
    }
  }, [active]);
  return null;
};

var StateWrapper = function StateWrapper(_ref2) {
  var _useChannel;

  var children = _ref2.children;

  var _React$useState = React.useState(''),
      storyId = _React$useState[0],
      setStoryId = _React$useState[1];

  api.useChannel((_useChannel = {}, _useChannel[coreEvents.STORY_CHANGED] = function () {
    setStoryId([].slice.call(arguments));
  }, _useChannel));
  return React.cloneElement(children, {
    storyId: storyId
  });
};

var getContainer = function getContainer() {
  var iframe = document.getElementById('storybook-preview-iframe');
  if (!iframe) return null;
  return iframe.contentDocument;
};

var delay = 2000;

var MyPanel = function MyPanel(_ref3) {
  var storyId = _ref3.storyId;

  var _React$useState2 = React.useState(''),
      html = _React$useState2[0],
      setHTML = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      loading = _React$useState3[0],
      setLoading = _React$useState3[1];

  React.useEffect(function () {
    var setContainer = function setContainer() {
      var container = getContainer();

      if (!container || !container.body) {
        setTimeout(setContainer, delay);
        return;
      }

      setHTML(container.body.innerHTML);
      setLoading(false);
    };

    setLoading(true);
    setTimeout(setContainer, delay);
  }, [storyId]);
  var container = getContainer();
  return /*#__PURE__*/React.createElement(Hints$1, {
    container: container,
    loading: loading,
    running: !html
  });
};

addons.addons.register(ADDON_ID, function () {
  var render = function render(_ref4) {
    var active = _ref4.active,
        key = _ref4.key;
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: "storybook-mobile"
    }, /*#__PURE__*/React.createElement(ViewportManager, {
      active: active
    }), /*#__PURE__*/React.createElement(components.AddonPanel, {
      active: active,
      key: key
    }, /*#__PURE__*/React.createElement(StateWrapper, {
      active: active
    }, /*#__PURE__*/React.createElement(MyPanel, {
      key: key,
      active: active
    }))));
  };

  var title = 'Mobile';
  addons.addons.add(PANEL_ID, {
    type: addons.types.PANEL,
    title: title,
    render: render,
    paramKey: PARAM_KEY
  });
});
