import React, { createContext, useMemo } from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { Normalize } from 'styled-normalize';
import { selectors, lightTheme } from '@defencedigital/design-tokens';
var fontSize = selectors.fontSize,
  color = selectors.color;

/**
 * Globally setting `border-box`
 */
var BoxSizing = createGlobalStyle(["html{box-sizing:border-box;}*{&,&::before,&::after{box-sizing:border-box;}}"]);

/**
 * Globally setting anchor styles
 */
var Hyperlinks = createGlobalStyle(["a{color:", ";text-decoration:none;}a:hover{text-decoration:underline;}"], color('action', '500'));

/**
 * Generate base font size
 */
var Fonts = createGlobalStyle(["html{font-family:\"lato\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";font-size:", ";}h1,.rn-h1{margin:0;font-size:", ";}h2,.rn-h2{margin:0;font-size:", ";}h3,.rn-h3{margin:0;font-size:", ";}h4,.rn-h4{margin:0;font-size:", ";}h5,.rn-h5{margin:0;font-size:", ";}h6,.rn-h6{margin:0;font-size:", ";}ol,ul,li,p,.rn-p{margin:0;font-size:", ";line-height:1.5;}"], fontSize('m'), fontSize('xxl'), fontSize('xl'), fontSize('l'), fontSize('m'), fontSize('base'), fontSize('s'), fontSize('base'));
var globalStyleContextDefaults = {
  theme: undefined
};
export var GlobalStyleContext = /*#__PURE__*/createContext(globalStyleContextDefaults);
export var GlobalStyleProvider = function GlobalStyleProvider(_ref) {
  var children = _ref.children,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? lightTheme : _ref$theme;
  var contextValue = useMemo(function () {
    return {
      theme: theme
    };
  }, [theme]);
  return /*#__PURE__*/React.createElement(GlobalStyleContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement(Normalize, null), /*#__PURE__*/React.createElement(BoxSizing, null), /*#__PURE__*/React.createElement(Hyperlinks, null), /*#__PURE__*/React.createElement(Fonts, null), /*#__PURE__*/React.createElement(ThemeProvider, {
    theme: theme
  }, children));
};